bugfixes and improvements

1 files changed, 74 insertions, 8 deletions

diff --git a/play.ts b/play.ts
index 31f9b65..adf9f9d 100644
--- a/play.ts
+++ b/play.ts
@@ -22,6 +22,7 @@ const FACTIONS = ['a', 'c', 'm'];
 // const ROLES = ['Anarchist', 'Communist', 'Moderate'];
 
 const ui = {
+  bag_of_glory: document.getElementById('bag_of_glory'),
   map: document.getElementById('map'),
   medallions_container: document.getElementById('medallions'),
   markers: document.getElementById('markers'),
@@ -49,7 +50,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: {
@@ -72,6 +73,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'),
@@ -244,6 +257,22 @@ function on_click_action(evt) {
       evt.stopPropagation();
 }
 
+function on_click_tab(evt) {
+  evt.stopPropagation();
+  const { id } = evt.target as HTMLElement;
+
+  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);
   return !!(
@@ -259,15 +288,26 @@ 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);
+  });
+
   // Reorder tableaus and roles based on player order
   for (const player of view.player_order) {
-    ui.player_areas.container.insertAdjacentElement('beforeend', ui.player_areas[player]);
+    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);
   }
 
   // Create blank_markers
@@ -346,7 +386,7 @@ function on_init() {
   });
 }
 
-function place_cards(e: HTMLElement, cards: CardId[]) {
+function place_cards(e: HTMLElement, cards: number[]) {
   e.replaceChildren();
   for (let c of cards) {
     ui.cards[c].classList.remove('selected');
@@ -367,6 +407,7 @@ function on_update() {
       `Hero Points: ${view.hero_points[key]}`
     );
   }
+  ui.bag_of_glory.replaceChildren(`Bag of Glory: ${view.bag_of_glory_count}`);
 
   // for (let s = 0; s < SPACE_COUNT; ++s) ui.spaces[s].replaceChildren();
 
@@ -400,6 +441,14 @@ function on_update() {
   }
 
   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) {
@@ -451,6 +500,7 @@ function on_update() {
     ui.turn_info_card.setAttribute('data-card-id', view.played_card + '');
   }
 
+  Object.values(ui.glory).forEach((elt: HTMLElement) => elt.removeAttribute('data-faction-id'));
   for (let g = 0; g < view.glory.length; ++g) {
     ui.glory[g].setAttribute('data-faction-id', view.glory[g]);
   }
@@ -485,11 +535,14 @@ function on_update() {
   action_button('draw_card', 'Draw a card');
   action_button('draw_cards', 'Draw cards');
   // action_button('draw_card', 'Draw card');
-  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');
@@ -500,10 +553,16 @@ 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>';
+
 // @ts-ignore
 function on_log(text) {
   let p = document.createElement('div');
@@ -518,9 +577,9 @@ function on_log(text) {
     p.className = 'i';
   }
 
-  text = text.replace(/&/g, '&amp;');
-  text = text.replace(/</g, '&lt;');
-  text = text.replace(/>/g, '&gt;');
+  // text = text.replace(/&/g, '&amp;');
+  // text = text.replace(/</g, '&lt;');
+  // text = text.replace(/>/g, '&gt;');
   // text = text.replace(/C(\d+)/g, sub_card_name)
   // text = text.replace(/S(\d+)/g, sub_space_name)
   // text = text.replace(/U(\d+)/g, sub_unit_name)
@@ -543,6 +602,9 @@ function on_log(text) {
   } else if (text.match(/^\.h2\.fascist/)) {
     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';
@@ -551,6 +613,10 @@ function on_log(text) {
     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;
 }