use medallions

1 files changed, 54 insertions, 38 deletions

diff --git a/play.ts b/play.ts
index feb7201..5fbdd4e 100644
--- a/play.ts
+++ b/play.ts
@@ -14,7 +14,7 @@ const BONUSES_COUNT = 2;
 // const PIECE_COUNT = 32;
 const CARD_COUNT = 109;
 const GLORY_COUNT = 9;
-const MEDAILLONS_COUNT = 5;
+const medallionS_COUNT = 9;
 const STANDEES_COUNT = 5;
 const TRACK_COUNT = 5;
 const TRACK_LENGTH = 11;
@@ -25,6 +25,7 @@ console.log('roles', document.getElementById('roles'));
 
 const ui = {
   map: document.getElementById('map'),
+  medallions_container: document.getElementById('medallions'),
   markers: document.getElementById('markers'),
   fronts: {
     a: {
@@ -51,15 +52,18 @@ const ui = {
   glory_container: document.getElementById('glory'),
   hand: document.getElementById('hand'),
   current_events: document.getElementById('current_events'),
-  stats: {
+  roles: {
     a: {
       hero_points: document.querySelector('#role_Anarchist .role_stat'),
+      medallions: document.querySelector('#role_Anarchist .role_medallions'),
     },
     c: {
       hero_points: document.querySelector('#role_Communist .role_stat'),
+      medallions: document.querySelector('#role_Communist .role_medallions'),
     },
     m: {
       hero_points: document.querySelector('#role_Moderate .role_stat'),
+      medallions: document.querySelector('#role_Moderate .role_medallions'),
     },
     pool: {
       hero_points: document.getElementById('pool_hero_points'),
@@ -73,13 +77,13 @@ const ui = {
   tracks: document.getElementById('tracks'),
   hero_points: document.querySelector('#role_Anarchist .role_stat'),
   year: document.getElementById('year'),
-  blank_markers: [[], [], [], [], []],
+  blank_markers: [],
   bonuses: [],
   // fronts: {},
   tokens_on_front: {},
   // front_values: {},
   glory: [],
-  medaillons: [],
+  medallions: [],
   spaces: [],
   standees: [],
   pieces: [],
@@ -112,7 +116,7 @@ const LAYOUT_GLORY = [
   [922, 771],
 ];
 
-const LAYOUT_MEDAILLONS = [
+const LAYOUT_medallionS = [
   [364, 556],
   [415, 556],
   [466, 556],
@@ -246,14 +250,11 @@ function on_init() {
   if (on_init_once) return;
   on_init_once = true;
 
-  console.log('ui', ui);
-
-  console.log('document', document);
-
   // Create blank_markers
-  for (let t = 0; t < 5; ++t) {
-    for (let bm = 0; bm < TRACK_LENGTH; ++bm) {
-      let e = (ui.blank_markers[t][bm] = document.createElement('div'));
+  for (let t = 0; t < TRACK_COUNT; ++t) {
+    for (let s = 0; s < TRACK_LENGTH; ++s) {
+      const bm = t * 11 + s;
+      let e = (ui.blank_markers[bm] = document.createElement('div'));
       e.className = 'blank_marker';
       register_action(e, 'blank_marker', bm);
     }
@@ -280,13 +281,12 @@ function on_init() {
     e.style.top = LAYOUT_GLORY[g][1] + 'px';
   }
 
-  // create track medaillons
-  for (let m = 0; m < MEDAILLONS_COUNT; ++m) {
-    let e = (ui.medaillons[m] = document.createElement('div'));
-    e.className = 'medaillon';
-    e.setAttribute('data-medaillon-id', '' + m);
-    register_action(e, 'medaillon', m);
-    ui.map.appendChild(ui.medaillons[m]);
+  // create track medallions
+  for (let m = 0; m < medallionS_COUNT; ++m) {
+    let e = (ui.medallions[m] = document.createElement('div'));
+    e.className = 'medallion';
+    e.setAttribute('data-medallion-id', '' + m);
+    register_action(e, 'medallion', m);
   }
 
   // create track standees
@@ -319,7 +319,7 @@ function on_init() {
 
   Object.keys(ui.fronts).forEach((front_id) => {
     register_action(ui.fronts[front_id].front, 'front', front_id);
-  })
+  });
 }
 
 // @ts-ignore
@@ -328,7 +328,7 @@ function on_update() {
   on_init();
 
   for (let key of Object.keys(view.hero_points)) {
-    ui.stats[key].hero_points.replaceChildren(
+    ui.roles[key].hero_points.replaceChildren(
       `Hero Points: ${view.hero_points[key]}`
     );
   }
@@ -349,12 +349,12 @@ function on_update() {
   }
 
   ui.markers.replaceChildren();
-  for (let t = 0; t < TRACK_COUNT; ++t) {
-    for (let bm of view.triggered_track_effects[t]) {
-      ui.markers.appendChild(ui.blank_markers[t][bm]);
-      ui.blank_markers[t][bm].style.left = LAYOUT_TRACKS[t][bm][0] + 'px';
-      ui.blank_markers[t][bm].style.top = LAYOUT_TRACKS[t][bm][1] + 'px';
-    }
+  for (let bm of view.triggered_track_effects) {
+    const s = bm % 11;
+    const t = Math.floor(bm / 11);
+    ui.markers.appendChild(ui.blank_markers[bm]);
+    ui.blank_markers[bm].style.left = LAYOUT_TRACKS[t][s][0] + 'px';
+    ui.blank_markers[bm].style.top = LAYOUT_TRACKS[t][s][1] + 'px';
   }
 
   for (let bonus_id of Object.keys(view.bonuses)) {
@@ -382,17 +382,30 @@ function on_update() {
   for (let front_id of Object.keys(view.fronts)) {
     const front_data = view.fronts[front_id];
     // ui.fronts[front_id].value.replaceChildren(front_data.value);
-    ui.fronts[front_id].value.replaceChildren(front_data.status !== null ? front_data.status : front_data.value);
+    ui.fronts[front_id].value.replaceChildren(
+      front_data.status !== null ? front_data.status : front_data.value
+    );
     ui.fronts[front_id].contributions.replaceChildren();
-    for(let faction_id of front_data.contributions) {
-      ui.fronts[front_id].contributions.appendChild(ui.tokens_on_front[front_id][faction_id]);
+    for (let faction_id of front_data.contributions) {
+      ui.fronts[front_id].contributions.appendChild(
+        ui.tokens_on_front[front_id][faction_id]
+      );
     }
   }
 
-  for (let i = 0; i < view.medaillons.length; ++i) {
-    if (view.medaillons[i] !== null) {
-      ui.medaillons[i].style.left = LAYOUT_MEDAILLONS[i][0] + 'px';
-      ui.medaillons[i].style.top = LAYOUT_MEDAILLONS[i][1] + 'px';
+  ui.medallions_container.replaceChildren();
+  for (let i = 0; i < view.medallions.pool.length; ++i) {
+    if (view.medallions.pool[i] !== null) {
+      const id = view.medallions.pool[i];
+      ui.medallions[id].style.left = LAYOUT_medallionS[i][0] + 'px';
+      ui.medallions[id].style.top = LAYOUT_medallionS[i][1] + 'px';
+      ui.medallions_container.appendChild(ui.medallions[id]);
+    }
+  }
+  for (let f of FACTIONS) {
+    ui.roles[f].medallions.replaceChildren();
+    for (let m of view.medallions[f]) {
+      ui.roles[f].medallions.appendChild(ui.medallions[m]);
     }
   }
 
@@ -441,6 +454,9 @@ function on_update() {
   action_button('up', 'Up');
   action_button('down', 'Down');
   action_button('next', 'Next');
+  action_button('remove_blank_marker', 'Remove Blank marker');
+  action_button('yes', 'Yes');
+  action_button('no', 'No');
   action_button('skip', 'Skip');
   action_button('done', 'Done');
   action_button('undo', 'Undo');
@@ -450,10 +466,10 @@ function on_update() {
 function on_log(text) {
   let p = document.createElement('div');
 
-	if (text.match(/^>>/)) {
-		text = text.substring(2)
-		p.className = "ii"
-	}
+  if (text.match(/^>>/)) {
+    text = text.substring(2);
+    p.className = 'ii';
+  }
 
   if (text.match(/^>/)) {
     text = text.substring(1);