striped background for discard and removed card panels

3 files changed, 27 insertions, 12 deletions

diff --git a/play.css b/play.css
index 8ed5a11..52cc044 100644
--- a/play.css
+++ b/play.css
@@ -317,6 +317,19 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); }
 	display: none;
 }
 
+#discard_header, #removed_header {
+	background-color: hsl(210,15%,38%);
+}
+#discard_panel, #removed_panel {
+	background-image: repeating-linear-gradient(135deg,
+		hsl(210,15%,33%),
+		hsl(210,15%,33%) 60px,
+		hsl(210,15%,30%) 60px,
+		hsl(210,15%,30%) 120px
+	)
+}
+
+
 /* CARD IMAGES */
 
 #tooltip {
diff --git a/play.html b/play.html
index 1cdc979..76418ae 100644
--- a/play.html
+++ b/play.html
@@ -32,7 +32,7 @@
 			</menu>
 		</details>
 		<details>
-			<summary><img src="images/trash-can.svg"></summary>
+			<summary><img src="images/all-seeing-eye.svg"></summary>
 			<menu>
 				<li id="show_removed_menu" onclick="toggle_removed()">Show/hide removed events
 				<li id="show_discard_menu" onclick="toggle_discard()">Show/hide discard
@@ -54,7 +54,7 @@
 	<div id="spaces"></div>
 	<div id="markers">
 		<div id="marker_turn" class="marker" style="left: 600px; top: 79px;"></div>
-		<div id="marker_action_round" class="marker dem" style="left: 655px; top: 141px;"></div>
+		<div id="marker_action_round" class="marker dem" style="left: 655px; top: 140px;"></div>
 		<div id="marker_stability_track" class="marker" style="left: 1380px; top: 1080px;"></div>
 		<div id="marker_dem_tst" class="marker" style="left: 12px; top: 2117px;"></div>
 		<div id="marker_com_tst" class="marker" style="left: 12px; top: 2246px;"></div>
@@ -108,20 +108,20 @@
 	<div id="samizdat_card" class="panel_body"></div>
 </div>
 
-<!-- DISCARD -->
-<div id="discard_panel" class="panel hide">
-	<div id="discard_header" class="panel_header">Discard</div>
-	<div id="discard" class="panel_body"></div>
-</div>
-
 <!-- PERSISTENT EVENTS -->
 <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>
 
+<!-- DISCARD -->
+<div id="discard_panel" class="panel ">
+	<div id="discard_header" class="panel_header">Discard</div>
+	<div id="discard" class="panel_body"></div>
+</div>
+
 <!-- PERMANENTLY REMOVED -->
-<div id="removed_panel" class="panel hide">
+<div id="removed_panel" class="panel ">
 	<div id="removed_header" class="panel_header">Permanently Removed Events</div>
 	<div id="removed" class="panel_body"></div>
 </div>
diff --git a/play.js b/play.js
index 590d68d..0c4d6a4 100644
--- a/play.js
+++ b/play.js
@@ -553,7 +553,7 @@ function layout_turn_marker() {
 
 function layout_round_marker() {
 	let x = 709 + 24 + (view.round - 1) * 53
-	let y = 142 + 24
+	let y = 141 + 24
 	ui.round.style.left = x - 25 + "px"
 	ui.round.style.top = y - 25 + "px"
 	if (view.round_player === "Democrat")
@@ -880,7 +880,7 @@ function on_update() {
 	if (view.discard)
 		document.getElementById("discard_panel").classList.remove("hide")
 	else
-		document.getElementById("discard_panel").classList.add("hide")
+		document.getElementById("discard_panel").classList.toggle("hide", discard_toggle)
 
 	ui.removed.replaceChildren()
 	for (let c of view.strategy_removed)
@@ -1187,8 +1187,10 @@ function on_click_space_tip(id) {
 	scroll_into_view(ui.spaces[id])
 }
 
+let discard_toggle = document.getElementById("discard_panel").classList.contains("hide")
 function toggle_discard() {
-	document.getElementById("discard_panel").classList.toggle("hide")
+	discard_toggle = !discard_toggle
+	document.getElementById("discard_panel").classList.toggle("hide", discard_toggle)
 }
 
 function toggle_removed() {