setup fronts and tracks

16 files changed, 206 insertions, 24 deletions

diff --git a/data.js b/data.js
index bc8f837..0b7d294 100644
--- a/data.js
+++ b/data.js
@@ -535,25 +535,25 @@ const data = {
     ],
     fronts: [
         {
-            id: 1,
+            id: 'n',
             name: 'Northern',
             left: 89,
             top: 96,
         },
         {
-            id: 2,
+            id: 'a',
             name: 'Aragon',
             left: 340,
             top: 182,
         },
         {
-            id: 3,
+            id: 'm',
             name: 'Madrid',
             left: 115,
             top: 262,
         },
         {
-            id: 4,
+            id: 's',
             name: 'Southern',
             left: 205,
             top: 426,
diff --git a/data.ts b/data.ts
index a01495d..7f6e283 100644
--- a/data.ts
+++ b/data.ts
@@ -25,7 +25,7 @@ export type Card = EventCard | PlayerCard;
 export interface StaticData {
   cards: Card[];
   fronts: Array<{
-    id: number;
+    id: string;
     name: string;
     left: number;
     top: number;
@@ -573,25 +573,25 @@ const data: StaticData = {
   ],
   fronts: [
     {
-      id: 1,
+      id: 'n',
       name: 'Northern',
       left: 89,
       top: 96,
     },
     {
-      id: 2,
+      id: 'a',
       name: 'Aragon',
       left: 340,
       top: 182,
     },
     {
-      id: 3,
+      id: 'm',
       name: 'Madrid',
       left: 115,
       top: 262,
     },
     {
-      id: 4,
+      id: 's',
       name: 'Southern',
       left: 205,
       top: 426,
diff --git a/images/counters_back.jpg b/images/counters_back.jpg
deleted file mode 100644
index 02c8b29..0000000
--- a/images/counters_back.jpg
+++ /dev/null
diff --git a/images/counters_front.jpg b/images/counters_front.jpg
deleted file mode 100644
index e90f7d6..0000000
--- a/images/counters_front.jpg
+++ /dev/null
diff --git a/images/track_markers/liberty.png b/images/standees/standee_0.png
index 6bd83e6..6bd83e6 100644
--- a/images/track_markers/liberty.png
+++ b/images/standees/standee_0.png
diff --git a/images/track_markers/collectivization.png b/images/standees/standee_1.png
index f81b21d..f81b21d 100644
--- a/images/track_markers/collectivization.png
+++ b/images/standees/standee_1.png
diff --git a/images/track_markers/government.png b/images/standees/standee_2.png
index 80e55d5..80e55d5 100644
--- a/images/track_markers/government.png
+++ b/images/standees/standee_2.png
diff --git a/images/track_markers/soviet_support.png b/images/standees/standee_3.png
index ac48593..ac48593 100644
--- a/images/track_markers/soviet_support.png
+++ b/images/standees/standee_3.png
diff --git a/images/track_markers/foreign_aid.png b/images/standees/standee_4.png
index e7cb9be..e7cb9be 100644
--- a/images/track_markers/foreign_aid.png
+++ b/images/standees/standee_4.png
diff --git a/land-and-freedom.css b/land-and-freedom.css
index 5928f57..6b4db57 100644
--- a/land-and-freedom.css
+++ b/land-and-freedom.css
@@ -40,9 +40,19 @@ main {
   box-sizing: border-box;
   width: 93px;
   height: 102px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px;
+}
+
+.front .value {
+  font-weight: bold;
+  font-size: 30px;
+  margin-top: auto;
 }
 
-.front[data-front-id="3"] {
+.front[data-front-id=m] {
   width: 104px;
   height: 114px;
 }
@@ -302,3 +312,40 @@ main {
 .card[data-card-id="62"] {
   background-image: url("images/cards100/card_62.png");
 }
+
+.card.event {
+  position: absolute;
+  width: 132px;
+  height: 180px;
+}
+
+.standee {
+  box-sizing: border-box;
+  position: absolute;
+  width: 29px;
+  height: 35px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #333;
+}
+
+.standee[data-standee-id="0"] {
+  background-image: url("images/standees/standee_0.png");
+}
+
+.standee[data-standee-id="1"] {
+  background-image: url("images/standees/standee_1.png");
+}
+
+.standee[data-standee-id="2"] {
+  background-image: url("images/standees/standee_2.png");
+}
+
+.standee[data-standee-id="3"] {
+  background-image: url("images/standees/standee_3.png");
+}
+
+.standee[data-standee-id="4"] {
+  background-image: url("images/standees/standee_4.png");
+}
diff --git a/land-and-freedom.scss b/land-and-freedom.scss
index 9c68e03..42f75e2 100644
--- a/land-and-freedom.scss
+++ b/land-and-freedom.scss
@@ -3,7 +3,7 @@
 
 main {
   // background-color: rgb(213, 196, 131);
-	background-color: darkolivegreen;
+  background-color: darkolivegreen;
 }
 
 /* MAP */
@@ -54,11 +54,21 @@ main {
   box-sizing: border-box;
   width: 93px;
   height: 102px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px;
   // background-color: yellow;
   // opacity: 0.5;
 }
 
-.front[data-front-id='3'] {
+.front .value {
+  font-weight: bold;
+  font-size: 30px;
+  margin-top: auto;
+}
+
+.front[data-front-id='m'] {
   width: 104px;
   height: 114px;
 }
@@ -67,11 +77,11 @@ main {
   background-size: 100% 100%;
   // width: 275px;
   // height: 375px;
-	width: 198px;
+  width: 198px;
   height: 270px;
   // border: 1px solid black;
   border-radius: 5px;
-	box-shadow: 0 0 0 1px #333;
+  box-shadow: 0 0 0 1px #333;
 }
 
 @for $i from 1 through 62 {
@@ -79,3 +89,28 @@ main {
     background-image: url('images/cards100/card_#{$i}.png');
   }
 }
+
+.card.event {
+  position: absolute;
+  // opacity: 0.5;
+  width: 132px;
+  height: 180px;
+}
+
+.standee {
+  box-sizing: border-box;
+  position: absolute;
+  width: 29px;
+  height: 35px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #333;
+  // opacity: 0.6;
+}
+
+@for $i from 0 through 4 {
+  .standee[data-standee-id='#{$i}'] {
+    background-image: url('images/standees/standee_#{$i}.png');
+  }
+}
diff --git a/play.html b/play.html
index 08fbd0e..0dfdfe0 100644
--- a/play.html
+++ b/play.html
@@ -42,9 +42,9 @@
 		<div id="map">
 			<div id="spaces">
 			</div>
-			<div id="pieces">
-
-			</div>
+			<div id="pieces"></div>
+			<div id="tracks"></div>
+			<div id="current_events"></div>
 		</div>
 	</div>
 	<div id="hand"></div>
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');
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));
 
diff --git a/rules.js b/rules.js
index 2952679..1704761 100644
--- a/rules.js
+++ b/rules.js
@@ -63,7 +63,9 @@ function game_view(state, player) {
         location: game.location,
         selected: game.selected,
         current_events: game.current_events,
+        fronts: game.fronts,
         hand: game.hands[faction_id],
+        tracks: game.tracks
     };
     if (player !== game.active) {
         let inactive = states[game.state].inactive || game.state;
diff --git a/rules.ts b/rules.ts
index a2a71ca..389900d 100644
--- a/rules.ts
+++ b/rules.ts
@@ -67,9 +67,10 @@ export interface View {
   victory?: string;
   location?: string;
   selected?: string;
-
+  fronts: Game['fronts'];
   current_events: CardId[];
   hand: CardId[];
+  tracks: number[];
 }
 
 // interface State {
@@ -160,7 +161,9 @@ function game_view(state: Game, player: Player) {
     location: game.location,
     selected: game.selected,
     current_events: game.current_events,
+    fronts: game.fronts,
     hand: game.hands[faction_id],
+    tracks: game.tracks
   };
 
   if (player !== game.active) {