1 files changed, 19 insertions, 15 deletions

diff --git a/play.ts b/play.ts
index 61e6206..c040745 100644
--- a/play.ts
+++ b/play.ts
@@ -1,6 +1,6 @@
 'use strict';
 
-import { StaticData, View } from './types';
+import { CardId, StaticData, View } from './types';
 
 declare function action_button(action: string, text: string): void;
 // declare function register_action(element: HTMLElement, type: string, s: number): void;
@@ -69,6 +69,7 @@ const ui = {
       hero_points: document.getElementById('pool_hero_points'),
     },
   },
+  selectable_cards: document.getElementById('selectable_cards'),
   tableaus: {
     a: document.getElementById('tableau_a'),
     c: document.getElementById('tableau_c'),
@@ -329,6 +330,17 @@ function on_init() {
   });
 }
 
+function place_cards(e: HTMLElement, cards: CardId[]) {
+  e.replaceChildren();
+  for (let c of cards) {
+    ui.cards[c].classList.remove('selected');
+    e.appendChild(ui.cards[c]);
+    if (view.selected_cards.includes(c)) {
+      ui.cards[c].classList.add('selected');
+    }
+  }
+}
+
 // @ts-ignore
 function on_update() {
   console.log('on_update', view);
@@ -371,13 +383,11 @@ function on_update() {
     );
   }
 
-  ui.hand.replaceChildren();
-  for (let c of view.hand) {
-    ui.cards[c].classList.remove('selected');
-    ui.hand.appendChild(ui.cards[c]);
-    if (view.selected_cards.includes(c)) {
-      ui.cards[c].classList.add('selected');
-    }
+  place_cards(ui.hand, view.hand);
+  place_cards(ui.selectable_cards, view.selectable_cards);
+
+  for (let faction_id of FACTIONS) {
+    place_cards(ui.tableaus[faction_id], view.tableaus[faction_id]);
   }
 
   for (let i = 0; i < view.tracks.length; ++i) {
@@ -418,13 +428,7 @@ function on_update() {
   ui.roles[view.initiative].medallions.appendChild(ui.initiative_token);
   ui.initiative_token.setAttribute('data-year', view.year);
 
-  for (let faction_id of FACTIONS) {
-    ui.tableaus[faction_id].replaceChildren();
-    for (let c of view.tableaus[faction_id]) {
-      ui.cards[c].classList.remove('selected');
-      ui.tableaus[faction_id].appendChild(ui.cards[c]);
-    }
-  }
+
 
   // ui.turn_info.replaceChildren();
   // console.log('played_card', view.played_card);