bugfixes and improvements

1 files changed, 62 insertions, 6 deletions

diff --git a/play.js b/play.js
index ec459e0..b55c6be 100644
--- a/play.js
+++ b/play.js
@@ -9,6 +9,7 @@ const TRACK_COUNT = 5;
 const TRACK_LENGTH = 11;
 const FACTIONS = ['a', 'c', 'm'];
 const ui = {
+    bag_of_glory: document.getElementById('bag_of_glory'),
     map: document.getElementById('map'),
     medallions_container: document.getElementById('medallions'),
     markers: document.getElementById('markers'),
@@ -36,7 +37,7 @@ const ui = {
     },
     glory_container: document.getElementById('glory'),
     hand: document.getElementById('hand'),
-    hand_area: document.getElementById('hand_area'),
+    player_area: document.getElementById('player_area'),
     current_events: document.getElementById('current_events'),
     roles: {
         a: {
@@ -59,6 +60,18 @@ const ui = {
         Moderate: document.getElementById('role_Moderate'),
         container: document.getElementById('roles'),
     },
+    player_area_tabs: {
+        hand_tab: document.getElementById('hand_tab'),
+        deck_tab: document.getElementById('deck_tab'),
+        discard_tab: document.getElementById('discard_tab'),
+        trash_tab: document.getElementById('trash_tab'),
+    },
+    player_area_cards: {
+        hand: document.getElementById('hand'),
+        deck: document.getElementById('deck'),
+        discard: document.getElementById('discard'),
+        trash: document.getElementById('trash'),
+    },
     player_areas: {
         container: document.getElementById('player_areas'),
         Anarchist: document.getElementById('player_area_Anarchist'),
@@ -194,6 +207,21 @@ function on_click_action(evt) {
         if (send_action(evt.target.my_action, evt.target.my_id))
             evt.stopPropagation();
 }
+function on_click_tab(evt) {
+    evt.stopPropagation();
+    const { id } = evt.target;
+    Object.entries(ui.player_area_tabs).forEach(([tab, elt]) => {
+        const cards_area = ui.player_area_cards[tab.split('_')[0]];
+        if (tab === id) {
+            elt.setAttribute('data-active', 'active');
+            cards_area.setAttribute('data-active', 'active');
+        }
+        else {
+            elt.setAttribute('data-active', 'inactive');
+            cards_area.setAttribute('data-active', 'inactive');
+        }
+    });
+}
 function is_action(action, arg) {
     if (arg === undefined)
         return !!(view.actions && view.actions[action] === 1);
@@ -206,13 +234,21 @@ function on_init() {
     if (on_init_once)
         return;
     on_init_once = true;
+    Object.values(ui.player_area_tabs).forEach((element) => {
+        element.addEventListener('click', on_click_tab);
+    });
     for (const player of view.player_order) {
         ui.player_areas.container.insertAdjacentElement('beforeend', ui.player_areas[player]);
         ui.roles.container.insertAdjacentElement('beforeend', ui.roles[player]);
     }
     ui.roles.container.insertAdjacentElement('beforeend', ui.turn_info);
     if (view.current === 'Observer') {
-        ui.hand_area.style.display = 'none';
+        ui.player_area.style.display = 'none';
+    }
+    else {
+        document
+            .getElementById('player_area_header')
+            .setAttribute('data-faction-id', view.current_player_faction);
     }
     for (let t = 0; t < TRACK_COUNT; ++t) {
         for (let s = 0; s < TRACK_LENGTH; ++s) {
@@ -289,6 +325,7 @@ function on_update() {
     for (let key of Object.keys(view.hero_points)) {
         ui.roles[key].hero_points.replaceChildren(`Hero Points: ${view.hero_points[key]}`);
     }
+    ui.bag_of_glory.replaceChildren(`Bag of Glory: ${view.bag_of_glory_count}`);
     ui.current_events.replaceChildren();
     for (let i = 0; i < view.current_events.length; i++) {
         const cardId = view.current_events[i];
@@ -309,6 +346,13 @@ function on_update() {
         ui.bonuses[bonus_id].setAttribute('data-bonus-on', view.bonuses[bonus_id] + 0);
     }
     place_cards(ui.hand, view.hand);
+    ui.player_area_tabs.hand_tab.replaceChildren(`Hand (${view.hand.length})`);
+    place_cards(ui.player_area_cards.deck, view.deck);
+    ui.player_area_tabs.deck_tab.replaceChildren(`Deck (${view.deck.length})`);
+    place_cards(ui.player_area_cards.discard, view.discard);
+    ui.player_area_tabs.discard_tab.replaceChildren(`Discard (${view.discard.length})`);
+    place_cards(ui.player_area_cards.trash, view.trash);
+    ui.player_area_tabs.trash_tab.replaceChildren(`Trash (${view.trash.length})`);
     place_cards(ui.selectable_cards, view.selectable_cards);
     for (let faction_id of FACTIONS) {
         place_cards(ui.tableaus[faction_id], view.tableaus[faction_id]);
@@ -349,6 +393,7 @@ function on_update() {
         ui.turn_info.style.display = '';
         ui.turn_info_card.setAttribute('data-card-id', view.played_card + '');
     }
+    Object.values(ui.glory).forEach((elt) => elt.removeAttribute('data-faction-id'));
     for (let g = 0; g < view.glory.length; ++g) {
         ui.glory[g].setAttribute('data-faction-id', view.glory[g]);
     }
@@ -375,10 +420,12 @@ function on_update() {
     action_button('lose_hp', 'Lose Hero Points');
     action_button('draw_card', 'Draw a card');
     action_button('draw_cards', 'Draw cards');
-    action_button('play_for_ap', 'Play card for Action Points');
+    action_button('play_to_tableau', 'Play card to Tableau');
     action_button('play_for_event', 'Play card for Event');
     action_button('use_ap', 'Use Action Points');
     action_button('use_morale_bonus', 'Use Morale Bonus');
+    action_button('move_track', 'Move a Track');
+    action_button('turn_on_bonus', 'Turn on a Bonus');
     action_button('add_glory', 'Add to Bag of Glory');
     action_button('up', 'Up');
     action_button('down', 'Down');
@@ -389,9 +436,14 @@ function on_update() {
     action_button('no', 'No');
     action_button('skip', 'Skip');
     action_button('spend_hp', 'Spend Hero Points');
+    action_button('use_momentum', 'Play second card (Momentum)');
     action_button('done', 'Done');
+    action_button('end_turn', 'End turn');
     action_button('undo', 'Undo');
 }
+const IMG_FTA = '<span class="faction_token" data-faction-id="a"></span>';
+const IMG_FTC = '<span class="faction_token" data-faction-id="c"></span>';
+const IMG_FTM = '<span class="faction_token" data-faction-id="m"></span>';
 function on_log(text) {
     let p = document.createElement('div');
     if (text.match(/^>>/)) {
@@ -402,9 +454,6 @@ function on_log(text) {
         text = text.substring(1);
         p.className = 'i';
     }
-    text = text.replace(/&/g, '&amp;');
-    text = text.replace(/</g, '&lt;');
-    text = text.replace(/>/g, '&gt;');
     if (text.match(/^\.h1/)) {
         text = text.substring(4);
         p.className = 'h1';
@@ -425,6 +474,10 @@ function on_log(text) {
         text = text.substring(11);
         p.className = 'h2 fascist';
     }
+    else if (text.match(/^\.h2\.glory/)) {
+        text = text.substring(9);
+        p.className = 'h2 glory';
+    }
     else if (text.match(/^\.h2/)) {
         text = text.substring(4);
         p.className = 'h2';
@@ -433,6 +486,9 @@ function on_log(text) {
         text = text.substring(4);
         p.className = 'h3';
     }
+    text = text.replace(/<fta>/g, IMG_FTA);
+    text = text.replace(/<ftc>/g, IMG_FTC);
+    text = text.replace(/<ftm>/g, IMG_FTM);
     p.innerHTML = text;
     return p;
 }