Add temporary "drawn" and "deck" panel displays.

Use this to show drawn cards while choosing cards for events that
draw X cards, play one, and put the rest on top / bottom.

Use stack of "draw" arrays in VM to handle nested events.
NOTE: This is not necessary now, but will be if we change the Winning Moves
event to play its event immediately.

1 files changed, 30 insertions, 2 deletions

diff --git a/play.js b/play.js
index 40086ed..6493559 100644
--- a/play.js
+++ b/play.js
@@ -72,10 +72,15 @@ const US_STATES = [
 
 const region_count = 6
 const us_states_count = region_count * 8
-const card_count = 128
+const last_card = 128
 const green_check_count = 36
 const red_x_count = 13
 
+const SUF_CARD_BACK = last_card + 1
+const OPP_CARD_BACK = last_card + 2
+const STRATEGY_CARD_BACK = last_card + 3
+const STATE_CARD_BACK = last_card + 4
+
 let ui = {
 	favicon: document.getElementById("favicon"),
 	status: document.getElementById("status"),
@@ -454,7 +459,7 @@ function build_user_interface() {
 		})
 	}
 
-    for (let c = 1; c <= card_count; ++c) {
+    for (let c = 1; c <= last_card; ++c) {
 		elt = ui.cards[c] = create("div", {
 			className: `card card_${c} ${CARDS[c].type}`,
 			my_card: c,
@@ -463,6 +468,11 @@ function build_user_interface() {
 		elt.addEventListener("click", on_click_card)
 	}
 
+	ui.cards[SUF_CARD_BACK] = create("div", { className: "card card_support_back" })
+	ui.cards[OPP_CARD_BACK] = create("div", { className: "card card_opposition_back" })
+	ui.cards[STRATEGY_CARD_BACK] = create("div", { className: "card card_strategy_back" })
+	ui.cards[STATE_CARD_BACK] = create("div", { className: "card card_states_back" })
+
 	for (let r = 1; r <= region_count; ++r) {
 		let region_name_css = REGION_NAMES[r].replaceAll(' & ', '')
 		elt = ui.regions[r] = document.querySelector(`#map #${region_name_css}`)
@@ -718,6 +728,8 @@ function on_update() { // eslint-disable-line no-unused-vars
 	}
 
 	document.getElementById("hand").replaceChildren()
+	document.getElementById("deck").replaceChildren()
+	document.getElementById("drawn").replaceChildren()
 	document.getElementById("set_aside").replaceChildren()
 	document.getElementById("support_claimed").replaceChildren()
 	document.getElementById("opposition_claimed").replaceChildren()
@@ -732,6 +744,22 @@ function on_update() { // eslint-disable-line no-unused-vars
 		document.getElementById("hand_panel").classList.add("hide")
 	}
 
+	if (view.drawn) {
+		document.getElementById("drawn_panel").classList.remove("hide")
+		for (let c of view.drawn)
+			document.getElementById("drawn").appendChild(ui.cards[c])
+	} else {
+		document.getElementById("drawn_panel").classList.add("hide")
+	}
+
+	if (view.deck) {
+		document.getElementById("deck_panel").classList.remove("hide")
+		for (let c of view.deck)
+			document.getElementById("deck").appendChild(ui.cards[c])
+	} else {
+		document.getElementById("deck_panel").classList.add("hide")
+	}
+
 	if (view.set_aside.length) {
 		document.getElementById("set_aside_panel").classList.remove("hide")
 		for (let c of view.set_aside)