persistent cards

3 files changed, 56 insertions, 15 deletions

diff --git a/play.html b/play.html
index ea74b9a..c3667c3 100644
--- a/play.html
+++ b/play.html
@@ -14,16 +14,24 @@
 <script defer src="play.js"></script>
 <style>
 
+:root {
+	--suf-75: hsl(273 39% 75%);
+	--suf-85: hsl(273 39% 85%);
+
+	--opp-75: hsl(16 85% 75%);
+	--opp-85: hsl(16 85% 85%);
+}
+
 main {
 	background-color: slategray;
 }
 
-#role_Suffragist .role_name { background-color: hsl(273 39% 85%); }
-#role_Opposition .role_name { background-color: hsl(16 85% 85%); }
+#role_Suffragist .role_name { background-color: var(--suf-85); }
+#role_Opposition .role_name { background-color: var(--opp-85); }
 .role.active span { text-decoration: underline; }
 
-body.Suffragist header.your_turn { background-color: hsl(273 39% 75%); }
-body.Opposition header.your_turn { background-color: hsl(16 85% 75%);; }
+body.Suffragist header.your_turn { background-color: var(--suf-75); }
+body.Opposition header.your_turn { background-color: var(--opp-75); }
 .role_info {
 	padding: 3px 18px;
 	background-color: gainsboro;
@@ -42,8 +50,8 @@ body.Opposition header.your_turn { background-color: hsl(16 85% 75%);; }
 #log .h1 { background-color: silver; }
 #log .h2 { background-color: gainsboro; }
 
-#log .suf { background-color: hsl(273 39% 85%); }
-#log .opp { background-color: hsl(16 85% 85%); }
+#log .suf { background-color: var(--suf-85); }
+#log .opp { background-color: var(--opp-85); }
 #log .tip { cursor: pointer; }
 #log .tip:hover { text-decoration: underline; }
 
@@ -149,6 +157,25 @@ div.region:hover {
 	background-color: #fff8;
 }
 
+div.persistent_box {
+	position: absolute;
+	background-color: #FBF9F1;
+	width: 124px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.persistent_card {
+	font-family: var(--font-small);
+	font-size: 12px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	text-align: center;
+}
+.persistent_card.support { background-color: var(--suff-85); }
+.persistent_card.opposition { background-color: var(--opp-85); }
+
 .piece {
 	position: absolute;
 	background-repeat: no-repeat;
@@ -846,6 +873,9 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
 		<!-- END SVG -->
 		</svg>
 
+		<div id="persistent_turn" class="persistent_box" style="left:25px;top:648px;"></div>
+		<div id="persistent_game" class="persistent_box" style="left:170px;top:648px;"></div>
+		<div id="persistent_ballot" class="persistent_box" style="left:315px;top:648px;"></div>
 
 		<div id="VT" class="state" style="top:125px;left:785px;"></div>
 		<div id="NH" class="state" style="top:63px;left:857px;"></div>
diff --git a/play.js b/play.js
index 58d88c8..bbfd7c2 100644
--- a/play.js
+++ b/play.js
@@ -346,6 +346,17 @@ function on_update() { // eslint-disable-line no-unused-vars
 	for (let c of view.out_of_play)
 		document.getElementById("out_of_play").appendChild(ui.cards[c])
 
+	for (let id of ['persistent_turn', 'persistent_game', 'persistent_ballot']) {
+		document.getElementById(id).replaceChildren()
+		for (let c of view[id] || []) {
+			let elt = create("div", {
+				className: `persistent_card ${CARDS[c].type}`,
+				innerHTML: sub_card_name(null, c)
+			})
+			document.getElementById(id).appendChild(elt)
+		}
+	}
+
 	action_button("commit_1_button", "+1 Button")
 	action_button("defer", "Defer")
 	action_button("match", "Match")
diff --git a/rules.js b/rules.js
index 78ae175..52acd9f 100644
--- a/rules.js
+++ b/rules.js
@@ -147,9 +147,9 @@ exports.setup = function (seed, _scenario, _options) {
 		strategy_draw: [],
 		states_draw: [],
 
-		persisted_turn: [],
-		persisted_game: [],
-		persisted_ballot: [],
+		persistent_turn: [],
+		persistent_game: [],
+		persistent_ballot: [],
 
 		support_deck: [],
 		support_discard: [],
@@ -242,9 +242,9 @@ exports.view = function(state, player) {
 		strategy_draw: game.strategy_draw,
 		states_draw: game.states_draw,
 
-		persisted_turn: game.persisted_turn,
-		persisted_game: game.persisted_game,
-		persisted_ballot: game.persisted_ballot,
+		persistent_turn: game.persistent_turn,
+		persistent_game: game.persistent_game,
+		persistent_ballot: game.persistent_ballot,
 
 		support_deck: game.support_deck.length,
 		support_discard: game.support_discard, // top_discard?
@@ -565,16 +565,16 @@ states.cleanup_phase = {
 
 function cleanup_persistent_turn_cards() {
 	// any cards in the “Cards in Effect for the Rest of the Turn box” are placed in the appropriate discard pile.
-	for (let c of game.persisted_turn) {
+	for (let c of game.persistent_turn) {
 		if (is_support_card(c)) {
 			game.support_discard.push(c)
 		} else if (is_opposition_card(c)) {
 			game.opposition_discard.push(c)
 		} else {
-			throw Error(`Unexpected card ${c} on persisted_turn`)
+			throw Error(`Unexpected card ${c} on persistent_turn`)
 		}
 	}
-	game.persisted_turn = []
+	game.persistent_turn = []
 }
 
 function end_cleanup_phase() {