From ddd0520b63316ed91fe70b6981402fda9aafb2eb Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sat, 12 Apr 2025 15:43:34 +0200
Subject: left-align card display on table so it doesn't jump around

update the discard view even when null
---
 play.css  | 12 +++---------
 play.html |  2 +-
 play.js   |  5 ++++-
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/play.css b/play.css
index 77745f0..5c929a4 100644
--- a/play.css
+++ b/play.css
@@ -39,17 +39,11 @@ header.your_turn.ve { background-color: hsl(40, 100%, 70%) }
 	display: flex;
 	flex-wrap: wrap;
 	align-content: start;
-	justify-content: center;
+	justify-content: start;
 	gap: 16px;
 	padding: 16px;
 }
 
-@media (max-width: 800px) {
-	#card_panel {
-		justify-content: start;
-	}
-}
-
 #table {
 	display: grid;
 	width: 100%;
@@ -408,11 +402,11 @@ path.campaign { stroke: black; stroke-dasharray: 4 4; }
 }
 
 #discard_pile .card.side {
-	margin-left: -226px;
+	margin-left: -206px;
 }
 
 #discard_pile .card.stack {
-	margin-top: -325px;
+	margin-top: -305px;
 }
 
 .card.card_back {
diff --git a/play.html b/play.html
index dd37fd1..129f450 100644
--- a/play.html
+++ b/play.html
@@ -361,6 +361,7 @@ c-32 0 -38 0 -46 2 -11 2 -20 5 -23 6 -2 0 -5 2 -8 3 -4 1 -10 4 -14 6 -6 4
 <div id="card_panel">
 	<div id="this_card" class="card card_1"><div id="unshaded_event" class="unshaded_event"></div><div id="shaded_event" class="shaded_event"></div></div>
 	<div id="deck_outer" class="card card_back"><div id="deck_size">35</div></div>
+	<div id="of_gods_and_kings" class="hide"><div id="gk_unshaded_event" class="unshaded_event"></div><div id="gk_shaded_event" class="shaded_event"></div></div>
 	<div id="discard_pile">
 		<div id="dynasty_card" class="card card_dynasty_khalji" style="z-index: 5;"></div>
 		<div id="stack1" class="" style="z-index: 4"></div>
@@ -368,7 +369,6 @@ c-32 0 -38 0 -46 2 -11 2 -20 5 -23 6 -2 0 -5 2 -8 3 -4 1 -10 4 -14 6 -6 4
 		<div id="stack3" class="" style="z-index: 2"></div>
 		<div id="stack4" class="" style="z-index: 1"></div>
 	</div>
-	<div id="of_gods_and_kings" class="hide"><div id="gk_unshaded_event" class="unshaded_event"></div><div id="gk_shaded_event" class="shaded_event"></div></div>
 </div>
 
 </div>
diff --git a/play.js b/play.js
index a5c824b..d9c7ff7 100644
--- a/play.js
+++ b/play.js
@@ -979,10 +979,13 @@ function update_discard() {
 				ui.discard[i].className = ""
 			}
 		}
+	} else {
+		for (let i = 0; i < 4; ++i)
+			ui.discard[i].className = ""
 	}
 }
-window.addEventListener("resize", update_discard)
 
+window.addEventListener("resize", update_discard)
 
 let once = true
 function on_update() {
-- 
cgit v1.2.3