WIP card display order

3 files changed, 44 insertions, 103 deletions

diff --git a/play.css b/play.css
index d33f84e..710ba57 100644
--- a/play.css
+++ b/play.css
@@ -234,22 +234,10 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); }
 	min-height: 350px;
 }
 
-.panel:has(.panel_body:empty) {
+.panel.autohide:has(.panel_body:empty) {
 	display: none;
 }
 
-#scoring_card_panel {
-	display: flex;
-	flex-direction: column; 
-	width: 100%; 
-}
-
-#scoring_card_panel .card_row {
-	display: flex;
-	gap: 10px;
-}
-
-
 /* CARD IMAGES */
 
 #tooltip {
diff --git a/play.html b/play.html
index 97882fd..3dfa2a7 100644
--- a/play.html
+++ b/play.html
@@ -66,72 +66,49 @@
 </div>
 </div>
 
-<!-- EVENTS ON THE TABLE -->
-<div id="table_panel" class="panel">
-	<div id="table_header" class="panel_header">Cards on the Table</div>
-	<div id="table_cards" class="panel_body"></div>
-</div>
-
-<!-- PLAYED CARD -->
 <div id="played_card_panel" class="panel">
 	<div id="played_card_header" class="panel_header">Played Card</div>
 	<div id="played_card" class="panel_body"></div>
-	<!--- <div id="power_card_header" class="panel_header">Power Struggle</div>
-	<div id="communist_card" class="panel_body"></div>
-	<div id="democrat_card" class="panel_body"></div> --->
-
-</div>
-
-<!-- PLAYED CARD - POWERSTRUGGLE -->
-<div id="scoring_card_panel" class="panel">
-	<div id="scoring_card_header" class="panel_header">Power Struggle</div>
-	<div class="card_row">
-		<div id="scoring_card" class="panel_body"></div>
-		<div id="power_card_1" class="panel_body"></div>
-		<div id="power_card_2" class="panel_body"></div>
-	</div>
 </div>
 
-
-<!-- POWERSTRUGGLE -->
-<div id="played_power_card_panel" class="panel">
-	<div id="played_power_card_header" class="panel_header">Power Struggle</div>
-	<div id="played_power_card" class="panel_body"></div>
-</div>
-<div id="ceausescu_panel" class="panel">
-	<div id="ceausescu_header" class="panel_header">Ceausescu Cards</div>
-	<div id="ceausescu_hand" class="panel_body"></div>
-</div>
-<div id="power_panel" class="panel">
+<div id="power_panel" class="autohide panel">
 	<div id="power_header" class="panel_header">Power Struggle Hand</div>
 	<div id="power_hand" class="panel_body"></div>
 </div>
 
+<div id="ceausescu_panel" class="autohide panel">
+	<div id="ceausescu_header" class="panel_header">The Crowd Turns Against Ceausescu</div>
+	<div id="ceausescu_hand" class="panel_body"></div>
+</div>
 
+<div id="power_discard_panel" class="autohide panel">
+	<div id="power_discard_header" class="panel_header">Power Struggle Discard</div>
+	<div id="power_discard" class="panel_body"></div>
+</div>
 
-<!-- HAND -->
 <div id="hand_panel" class="panel">
 	<div id="hand_header" class="panel_header">Hand</div>
 	<div id="hand" class="panel_body"></div>
 </div>
 
 <!-- OPPONENT HAND -->
-<div id="opp_hand_panel" class="panel">
+<div id="opp_hand_panel" class="autohide panel">
 	<div id="opp_hand_header" class="panel_header">Opponent Hand</div>
 	<div id="opp_hand" class="panel_body"></div>
 </div>
 
-<div id="opp_power_hand_panel" class="panel">
-	<div id="opp_power_hand_header" class="panel_header">Opponent Power Struggle Hand</div>
-	<div id="opp_power_hand" class="panel_body"></div>
-</div>
-
 <!-- SAMIZDAT CARD -->
-<div id="samizdat_panel" class="panel">
-	<div id="samizdat_header" class="panel_header">Samizdat Card</div>
+<div id="samizdat_panel" class="autohide panel">
+	<div id="samizdat_header" class="panel_header">Samizdat</div>
 	<div id="samizdat_card" class="panel_body"></div>
 </div>
 
+<!-- EVENTS ON THE TABLE -->
+<div id="persistent_panel" class="panel">
+	<div id="persistent_header" class="panel_header">Persistent Events on the Table</div>
+	<div id="persistent" class="panel_body"></div>
+</div>
+
 <!-- PERMANENTLY REMOVED -->
 <div id="removed_panel" class="panel hide">
 	<div id="removed_header" class="panel_header">Permanently Removed Events</div>
@@ -144,7 +121,6 @@
 	<div id="discard" class="panel_body"></div>
 </div>
 
-
 </main>
 
 <footer id="status"></footer>
diff --git a/play.js b/play.js
index b0c0644..6babd3b 100644
--- a/play.js
+++ b/play.js
@@ -370,17 +370,13 @@ const ui = {
 	event_reminder_list: document.getElementById("event_reminder_list"),
 
 	played_card: document.getElementById("played_card"),
-	scoring_card: document.getElementById("scoring_card"),
-	played_power_card: document.getElementById("played_power_card"),
-	power_card_1: document.getElementById("power_card_1"),
-	power_card_2: document.getElementById("power_card_2"),
 	hand: document.getElementById("hand"),
 	power_hand: document.getElementById("power_hand"),
+	power_discard: document.getElementById("power_discard"),
 	opp_hand: document.getElementById("opp_hand"),
-	opp_power_hand: document.getElementById("opp_power_hand"),
 	discard: document.getElementById("discard"),
 	removed: document.getElementById("removed"),
-	table_cards: document.getElementById("table_cards"),
+	persistent: document.getElementById("persistent"),
 
 	ceausescu_hand: document.getElementById("ceausescu_hand"),
 	samizdat_card: document.getElementById("samizdat_card"),
@@ -643,27 +639,6 @@ function on_update() {
 
 	// UPDATE CARD DISPLAYS
 
-	ui.played_card.replaceChildren()
-	ui.power_card_1.replaceChildren()
-	ui.power_card_2.replaceChildren()
-
-	if (!view.is_pwr_struggle) {
-		if (view.played_card > 0)
-			ui.played_card.appendChild(ui.cards[view.played_card])
-		document.getElementById("scoring_card_panel").style.display = "none"
-	} else {
-		document.getElementById("scoring_card_panel").style.display = "flex"
-		if (view.played_card > 0)
-			ui.scoring_card.appendChild(ui.cards[view.played_card])
-		if (view.power_card_1)
-			ui.power_card_1.appendChild(ui.power_cards[view.power_card_1])
-		if (view.power_card_2)	
-			ui.power_card_2.appendChild(ui.power_cards[view.power_card_2])
-	}
-/*	ui.played_power_card.replaceChildren()
-	if (view.played_power_card > 0)
-		ui.played_power_card.appendChild(ui.power_cards[view.played_power_card])*/
-
 	ui.samizdat_card.replaceChildren()
 	if (view.samizdat > 0)
 		ui.samizdat_card.appendChild(ui.cards[view.samizdat])
@@ -676,14 +651,16 @@ function on_update() {
 	if (view.power_hand)
 		for (let c of view.power_hand)
 			ui.power_hand.appendChild(ui.power_cards[c])
-	
+
+	ui.power_discard.replaceChildren()
+	if (view.power_struggle_discard)
+		for (let c of view.power_struggle_discard)
+			ui.power_discard.appendChild(ui.power_cards[c])
+
 	ui.opp_hand.replaceChildren()
-	if (view.show_opp_hand && view.opp_hand)
+	if (view.opp_hand)
 		for (let c of view.opp_hand)
 			ui.opp_hand.appendChild(ui.cards[c])
-
-	// TODO: fix rules to set view.opp_power_hand
-	ui.opp_power_hand.replaceChildren()
 	if (view.opp_power_hand)
 		for (let c of view.opp_power_hand)
 			ui.opp_hand.appendChild(ui.power_cards[c])
@@ -694,24 +671,24 @@ function on_update() {
 			ui.ceausescu_hand.appendChild(ui.power_cards[c])
 
 	ui.discard.replaceChildren()
-	for (let c of view.strategy_discard) {
-		if (c === view.played_card) continue
-		ui.discard.appendChild(ui.cards[c]) }
-	if (view.discard) 
-		document.getElementById("discard_panel").classList.remove("hide")
-	else 
-		document.getElementById("discard_panel").classList.add("hide")
+	for (let c of view.strategy_discard)
+		ui.discard.appendChild(ui.cards[c])
 
 	ui.removed.replaceChildren()
-	for (let c of view.strategy_removed) {
-		if (c === view.played_card) continue
-		ui.removed.appendChild(ui.cards[c]) }
-
-	ui.table_cards.replaceChildren()
-	if (view.table_cards)
-		for (let c of view.table_cards) {
-			if (c === view.played_card) continue
-			ui.table_cards.appendChild(ui.cards[c]) }
+	for (let c of view.strategy_removed)
+		ui.removed.appendChild(ui.cards[c])
+
+	ui.persistent.replaceChildren()
+	for (let c of view.persistent_events)
+		ui.persistent.appendChild(ui.cards[c])
+
+	ui.played_card.replaceChildren()
+	if (view.played_card > 0)
+		ui.played_card.appendChild(ui.cards[view.played_card])
+	if (view.power_card_1 > 0)
+		ui.played_card.appendChild(ui.power_cards[view.power_card_1])
+	if (view.power_card_2 > 0)
+		ui.played_card.appendChild(ui.power_cards[view.power_card_2])
 
 	for (let e of action_register)
 		e.classList.toggle("action", is_action(e.my_action, e.my_id))