setup fronts and tracks

1 files changed, 47 insertions, 3 deletions

diff --git a/play.js b/play.js
index 1c40758..af1eccb 100644
--- a/play.js
+++ b/play.js
@@ -4,15 +4,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // const SPACE_COUNT = 64;
 // const PIECE_COUNT = 32;
 const CARD_COUNT = 62;
+const STANDEES_COUNT = 5;
 let ui = {
     map: document.getElementById('map'),
     hand: document.getElementById('hand'),
-    fronts: [],
+    current_events: document.getElementById('current_events'),
+    tracks: document.getElementById('tracks'),
+    fronts: {},
+    frontValues: {},
     spaces: [],
+    standees: [],
     pieces: [],
     cards: [],
 };
 let action_register = [];
+const LAYOUT_CURRENT_EVENTS = [
+    [172, 648],
+    [309, 648],
+    [445, 648],
+    [584, 648],
+];
+const LAYOUT_TRACKS = [
+    [[581, 46], [618, 46], [655, 46], [691, 46], [728, 46], [765, 46], [801, 46], [838, 46], [874, 46], [911, 46], [948, 46]],
+    [[581, 156], [618, 156], [655, 156], [691, 156], [728, 156], [765, 156], [801, 156], [838, 156], [874, 156], [911, 156], [948, 156]],
+    [[581, 267], [618, 267], [655, 267], [691, 267], [728, 267], [765, 267], [801, 267], [838, 267], [874, 267], [911, 267], [948, 267]],
+    [[581, 378], [618, 378], [655, 378], [691, 378], [728, 378], [765, 378], [801, 378], [838, 378], [874, 378], [911, 378], [948, 378]],
+    [[581, 489], [618, 489], [655, 489], [691, 489], [728, 489], [765, 489], [801, 489], [838, 489], [874, 489], [911, 489], [948, 489]],
+];
 // @ts-ignore
 (function build_map() {
     // @ts-ignore
@@ -24,12 +42,14 @@ let action_register = [];
         element.classList.add('front');
         element.style.left = `${left}px`;
         element.style.top = `${top}px`;
-        // element.style.height = `${height}px`;
-        // element.style.width = `${width}px`;
         element.setAttribute('data-front-id', `${id}`);
         spaces.appendChild(element);
+        const frontValueElement = (ui.frontValues[front.id] = document.createElement('span'));
+        frontValueElement.classList.add('value');
+        element.appendChild(frontValueElement);
     });
 })();
+console.log('ui', ui);
 // @ts-ignore
 function register_action(e, _action, _id) {
     // e.my_action = action
@@ -71,6 +91,14 @@ function on_init() {
     //   e.className = 'piece';
     //   register_action(e, 'piece', p);
     // }
+    // create track standees
+    for (let s = 0; s < STANDEES_COUNT; ++s) {
+        let e = (ui.standees[s] = document.createElement('div'));
+        e.className = 'standee';
+        e.setAttribute('data-standee-id', '' + s);
+        register_action(e, 'standee', s);
+    }
+    console.log('standees', ui.standees);
     // create card elements
     for (let c = 1; c < CARD_COUNT; ++c) {
         let e = (ui.cards[c] = document.createElement('div'));
@@ -88,9 +116,25 @@ function on_update() {
     //   let s = view.location[p];
     //   ui.spaces[s].appendChild(ui.pieces[p]);
     // }
+    ui.current_events.replaceChildren();
+    for (let i = 0; i < view.current_events.length; i++) {
+        const cardId = view.current_events[i];
+        ui.current_events.appendChild(ui.cards[cardId]);
+        ui.cards[cardId].classList.add('event');
+        ui.cards[cardId].style.left = LAYOUT_CURRENT_EVENTS[i][0] + 'px';
+        ui.cards[cardId].style.top = LAYOUT_CURRENT_EVENTS[i][1] + 'px';
+    }
     ui.hand.replaceChildren();
     for (let c of view.hand)
         ui.hand.appendChild(ui.cards[c]);
+    for (let i = 0; i < view.tracks.length; i++) {
+        ui.tracks.appendChild(ui.standees[i]);
+        ui.standees[i].style.left = LAYOUT_TRACKS[i][view.tracks[i]][0] + 'px';
+        ui.standees[i].style.top = LAYOUT_TRACKS[i][view.tracks[i]][1] + 'px';
+    }
+    for (let frontId of Object.keys(view.fronts)) {
+        ui.frontValues[frontId].replaceChildren(view.fronts[frontId]);
+    }
     // for (let e of action_register)
     //   e.classList.toggle('action', is_action(e.my_action, e.my_id));
     action_button('next', 'Next');