stack deck for clock of fate

3 files changed, 24 insertions, 12 deletions

diff --git a/play.css b/play.css
index fb0bda2..d6a3b9e 100644
--- a/play.css
+++ b/play.css
@@ -479,19 +479,25 @@ body.shift span.value.deck_5 { background-color: #0002 }
 .card.tc { margin-right: calc(-167px + 40px); }
 .card.tc.reverse { margin-right: calc(-167px + 20px); }
 .card.tc.discard { margin-right: calc(-167px + 6px); }
+.card.fate.reverse { margin-right: calc(-167px + 6px); }
 .panel_body { padding-right: calc(18px + 167px); }
 .panel_body { gap: 18px 0; }
 
-#clock_of_fate { padding: 18px; }
-#discard_pile_body { padding: 18px; gap: 18px; }
+#discard_pile_body, #clock_of_fate { padding: 18px; gap: 18px; }
 #clock_of_fate .card.tc { margin-right: 0px; }
 
-.discard_pile {
+.card_pile {
 	display: flex;
 	flex-wrap: wrap;
 	width: calc(167px + 6px * 9);
 }
 
+#clock_of_fate_display {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 18px;
+}
+
 .card.tc.S13 { background-image: url(cards/Friedrich.TC.01.075.jpg) }
 .card.tc.S12 { background-image: url(cards/Friedrich.TC.02.075.jpg) }
 .card.tc.S11 { background-image: url(cards/Friedrich.TC.03.075.jpg) }
diff --git a/play.html b/play.html
index 01e7de3..5bd90a8 100644
--- a/play.html
+++ b/play.html
@@ -94,6 +94,13 @@
 <div id="clock_of_fate_panel" class="panel">
 <div id="clock_of_fate_header" class="panel_header">Clock of Fate</div>
 <div id="clock_of_fate" class="panel_body">
+	<div id="clock_of_fate_deck" class="card_pile">
+		<div class="card fate reverse"></div>
+		<div class="card fate reverse"></div>
+		<div class="card fate reverse"></div>
+		<div class="card fate reverse"></div>
+	</div>
+	<div id="clock_of_fate_display"></div>
 </div>
 </div>
 
@@ -102,11 +109,11 @@
 <div id="discard_pile_panel" class="panel">
 <div id="discard_pile_header" class="panel_header">Decks &amp; Discard Piles</div>
 <div id="discard_pile_body" class="panel_body">
-	<div class="discard_pile" id="discard_1"></div>
-	<div class="discard_pile" id="discard_2"></div>
-	<div class="discard_pile" id="discard_3"></div>
-	<div class="discard_pile" id="discard_4"></div>
-	<div class="discard_pile" id="discard_5"></div>
+	<div class="card_pile" id="discard_1"></div>
+	<div class="card_pile" id="discard_2"></div>
+	<div class="card_pile" id="discard_3"></div>
+	<div class="card_pile" id="discard_4"></div>
+	<div class="card_pile" id="discard_5"></div>
 </div>
 </div>
 
diff --git a/play.js b/play.js
index badf42c..965e363 100644
--- a/play.js
+++ b/play.js
@@ -441,7 +441,7 @@ const ui = {
 	spaces_element: document.getElementById("spaces"),
 	pieces_element: document.getElementById("pieces"),
 	markers_element: document.getElementById("markers"),
-	clock_of_fate: document.getElementById("clock_of_fate"),
+	clock_of_fate: document.getElementById("clock_of_fate_display"),
 	discard: [
 		document.getElementById("discard_1"),
 		document.getElementById("discard_2"),
@@ -1097,12 +1097,11 @@ function on_update() {
 	}
 
 	ui.clock_of_fate.replaceChildren()
-	if (view.oo > 0)
-		ui.clock_of_fate.appendChild(ui.tc[view.oo])
-	ui.clock_of_fate.appendChild(ui.fate[0])
 	if (typeof view.fate === "object")
 		for (let c of view.fate)
 			ui.clock_of_fate.appendChild(ui.fate[c])
+	if (view.oo > 0)
+		ui.clock_of_fate.appendChild(ui.tc[view.oo])
 
 	for (let deck = 0; deck < 5; ++deck) {
 		ui.discard[deck].replaceChildren()