show persistent cards as stack

2 files changed, 15 insertions, 27 deletions

diff --git a/play.html b/play.html
index f087bc8..9e7ce2f 100644
--- a/play.html
+++ b/play.html
@@ -191,24 +191,14 @@ div.region.tip {
 
 div.persistent_box {
 	position: absolute;
-	background-color: #FBF9F1;
-	width: 124px;
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
+	width: 125px;
 }
 
-.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(--suf-85); }
-.persistent_card.opposition { background-color: var(--opp-85); }
-.persistent_card.action {
-	box-shadow: 0 0 0 3px yellow;
+.persistent_box .card {
+	position: absolute;
+	width: 125px;
+	height: 175px;
+	border: 1px solid #444;
 }
 
 div.congress_box {
diff --git a/play.js b/play.js
index 13980e2..f4a1aa4 100644
--- a/play.js
+++ b/play.js
@@ -655,18 +655,16 @@ 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])
 
-	// TODO Replace with stacked cards
 	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),
-				my_card: c
-			})
-			elt.addEventListener("click", on_click_card)
-			elt.classList.toggle("action", is_card_enabled(c))
-			document.getElementById(id).appendChild(elt)
+		const container = document.getElementById(id)
+		container.replaceChildren()
+		const stack = view[id] || []
+		for (let i = 0; i < stack.length; ++i) {
+			const c = stack[i]
+			const elt = ui.cards[c]
+			elt.style.top = -85 * i + "px"
+			elt.style.zIndex = i + 10
+			container.appendChild(elt)
 		}
 	}