add tokens to fronts and log improvements

1 files changed, 68 insertions, 33 deletions

diff --git a/play.js b/play.js
index 3711a13..38d98dd 100644
--- a/play.js
+++ b/play.js
@@ -9,9 +9,32 @@ const TRACK_COUNT = 5;
 const TRACK_LENGTH = 11;
 const FACTIONS = ['a', 'c', 'm'];
 console.log('roles', document.getElementById('roles'));
-let ui = {
+const ui = {
     map: document.getElementById('map'),
     markers: document.getElementById('markers'),
+    fronts: {
+        a: {
+            front: document.getElementById('aragon_front'),
+            value: document.querySelector('#aragon_front .value'),
+            contributions: document.querySelector('#aragon_front .contributions'),
+        },
+        m: {
+            front: document.getElementById('madrid_front'),
+            value: document.querySelector('#madrid_front .value'),
+            contributions: document.querySelector('#madrid_front .contributions'),
+        },
+        n: {
+            front: document.getElementById('northern_front'),
+            value: document.querySelector('#northern_front .value'),
+            contributions: document.querySelector('#northern_front .contributions'),
+        },
+        s: {
+            front: document.getElementById('southern_front'),
+            value: document.querySelector('#southern_front .value'),
+            contributions: document.querySelector('#southern_front .contributions'),
+        },
+    },
+    glory_container: document.getElementById('glory'),
     hand: document.getElementById('hand'),
     current_events: document.getElementById('current_events'),
     stats: {
@@ -35,10 +58,10 @@ let ui = {
     },
     tracks: document.getElementById('tracks'),
     hero_points: document.querySelector('#role_Anarchist .role_stat'),
+    year: document.getElementById('year'),
     blank_markers: [[], [], [], [], []],
     bonuses: [],
-    fronts: {},
-    frontValues: {},
+    tokens_on_front: {},
     glory: [],
     medaillons: [],
     spaces: [],
@@ -142,22 +165,6 @@ const LAYOUT_TRACKS = [
         [948, 489],
     ],
 ];
-(function build_map() {
-    data.fronts.forEach((front, index) => {
-        const { id, top, left } = front;
-        const element = (ui.fronts[index] = document.createElement('div'));
-        element.classList.add('front');
-        element.style.left = `${left}px`;
-        element.style.top = `${top}px`;
-        element.setAttribute('data-front-id', `${id}`);
-        ui.map.appendChild(element);
-        const frontValueElement = (ui.frontValues[front.id] =
-            document.createElement('span'));
-        frontValueElement.classList.add('value');
-        register_action(element, 'front', id);
-        element.appendChild(frontValueElement);
-    });
-})();
 console.log('ui', ui);
 function register_action(e, action, id) {
     e.my_action = action;
@@ -205,8 +212,8 @@ function on_init() {
     }
     for (let g = 0; g < GLORY_COUNT; ++g) {
         let e = (ui.glory[g] = document.createElement('div'));
-        e.className = 'glory';
-        ui.map.appendChild(ui.glory[g]);
+        e.className = 'faction_token';
+        ui.glory_container.appendChild(ui.glory[g]);
         e.style.left = LAYOUT_GLORY[g][0] + 'px';
         e.style.top = LAYOUT_GLORY[g][1] + 'px';
     }
@@ -224,14 +231,24 @@ function on_init() {
         register_action(e, 'standee', s);
         ui.tracks.appendChild(ui.standees[s]);
     }
-    console.log('standees', ui.standees);
     for (let c = 1; c < CARD_COUNT; ++c) {
         let e = (ui.cards[c] = document.createElement('div'));
         e.className = 'card';
         e.setAttribute('data-card-id', '' + data.cards[c].id);
         register_action(e, 'card', c);
     }
-    console.log('action_register', action_register[0]);
+    data.fronts.forEach((front) => {
+        ui.tokens_on_front[front.id] = {};
+        FACTIONS.forEach((faction_id) => {
+            let e = (ui.tokens_on_front[front.id][faction_id] =
+                document.createElement('div'));
+            e.className = 'faction_token';
+            e.setAttribute('data-faction-id', faction_id);
+        });
+    });
+    Object.keys(ui.fronts).forEach((front_id) => {
+        register_action(ui.fronts[front_id].front, 'front', front_id);
+    });
 }
 function on_update() {
     console.log('on_update', view);
@@ -270,8 +287,13 @@ function on_update() {
         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 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].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 i = 0; i < view.medaillons.length; ++i) {
         if (view.medaillons[i] !== null) {
@@ -291,6 +313,7 @@ function on_update() {
     }
     for (let e of action_register)
         e.classList.toggle('action', is_action(e.my_action, e.my_id));
+    ui.year.replaceChildren(`Year ${view.year}`);
     action_button('add_to_front', '+1 to a Front');
     action_button('soviet_support', 'Soviet Support');
     action_button('collectivization', 'Collectivization');
@@ -322,6 +345,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(1);
         p.className = 'i';
@@ -333,17 +360,25 @@ function on_log(text) {
         text = text.substring(4);
         p.className = 'h1';
     }
-    else if (text.match(/^\.h2/)) {
-        text = text.substring(4);
-        p.className = 'h2';
+    else if (text.match(/^\.h2\.Moderate/)) {
+        text = text.substring(13);
+        p.className = 'h2 moderate';
     }
-    else if (text.match(/^\.h3\.allies/)) {
-        text = text.substring(10);
-        p.className = 'h3 allies';
+    else if (text.match(/^\.h2\.Anarchist/)) {
+        text = text.substring(14);
+        p.className = 'h2 anarchist';
     }
-    else if (text.match(/^\.h3\.germans/)) {
+    else if (text.match(/^\.h2\.Communist/)) {
+        text = text.substring(14);
+        p.className = 'h2 communist';
+    }
+    else if (text.match(/^\.h2\.fascist/)) {
         text = text.substring(11);
-        p.className = 'h3 germans';
+        p.className = 'h2 fascist';
+    }
+    else if (text.match(/^\.h2/)) {
+        text = text.substring(4);
+        p.className = 'h2';
     }
     else if (text.match(/^\.h3/)) {
         text = text.substring(4);