From 9414fe91218a00fe9e44b48fdf40e51de5cb4479 Mon Sep 17 00:00:00 2001
From: Frans Bongers <fransbongers@franss-mbp.home>
Date: Mon, 25 Nov 2024 21:42:51 +0100
Subject: setup fronts and tracks

---
 play.ts | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 54 insertions(+), 3 deletions(-)

(limited to 'play.ts')

diff --git a/play.ts b/play.ts
index 2c3d2a2..e941c05 100644
--- a/play.ts
+++ b/play.ts
@@ -15,18 +15,38 @@ declare const player: Player;
 // 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
@@ -39,13 +59,16 @@ 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: HTMLElement,
@@ -99,6 +122,16 @@ function on_init() {
   //   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'));
@@ -119,10 +152,28 @@ 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));
 
-- 
cgit v1.2.3