show approximate ceil(count / 5) discard piles

4 files changed, 125 insertions, 49 deletions

diff --git a/play.css b/play.css
index 89b1bdd..219132f 100644
--- a/play.css
+++ b/play.css
@@ -8,6 +8,52 @@
 	unicode-range:U+2660-2667;
 }
 
+#prompt {
+	font-family: "Suit Symbols", var(--font-widget);
+	font-variant-numeric: tabular-nums;
+}
+
+#log {
+	font-family: "Suit Symbols", var(--font-small);
+	font-variant-numeric: tabular-nums;
+}
+
+#role_Frederick { background-color: var(--color-role-prussia) }
+#role_Elisabeth { background-color: var(--color-role-russia) }
+#role_Maria_Theresa { background-color: var(--color-role-austria) }
+#role_Pompadour { background-color: var(--color-role-france) }
+
+.role.active span { text-decoration: dotted underline; }
+
+header.your_turn.prussia { background-color: var(--color-light-prussia); }
+header.your_turn.hanover { background-color: var(--color-light-hanover); }
+header.your_turn.russia { background-color: var(--color-light-russia); }
+header.your_turn.sweden { background-color: var(--color-light-sweden); }
+header.your_turn.austria { background-color: var(--color-light-austria); }
+header.your_turn.imperial { background-color: var(--color-light-imperial); }
+header.your_turn.france { background-color: var(--color-light-france); }
+
+#mapwrap {
+	width: 2485px;
+	height: 1654px;
+	box-shadow: 2px 2px 4px #0006;
+}
+
+#map {
+	position: absolute;
+	width: 2485px;
+	height: 1654px;
+	background-size: cover;
+	background-image: url(Fried.Gameboard.075.jpg);
+	background-color: #ece1a9;
+}
+
+body {
+	background-color: slategray;
+}
+
+/* COLORS */
+
 :root {
 	--color-prussia: #005478;
 	--color-hanover: #91c9ed;
@@ -66,52 +112,8 @@
 	--color-reserve: #0094c9;
 }
 
-#role_Frederick { background-color: var(--color-role-prussia) }
-#role_Elisabeth { background-color: var(--color-role-russia) }
-#role_Maria_Theresa { background-color: var(--color-role-austria) }
-#role_Pompadour { background-color: var(--color-role-france) }
-
-.role.active span { text-decoration: dotted underline; }
-
-#prompt {
-	font-family: "Suit Symbols", var(--font-widget);
-	font-variant-numeric: tabular-nums;
-}
-
-header.your_turn.prussia { background-color: var(--color-light-prussia); }
-header.your_turn.hanover { background-color: var(--color-light-hanover); }
-header.your_turn.russia { background-color: var(--color-light-russia); }
-header.your_turn.sweden { background-color: var(--color-light-sweden); }
-header.your_turn.austria { background-color: var(--color-light-austria); }
-header.your_turn.imperial { background-color: var(--color-light-imperial); }
-header.your_turn.france { background-color: var(--color-light-france); }
-
-#mapwrap {
-	width: 2485px;
-	height: 1654px;
-	box-shadow: 2px 2px 4px #0006;
-}
-
-#map {
-	position: absolute;
-	width: 2485px;
-	height: 1654px;
-	background-size: cover;
-	background-image: url(Fried.Gameboard.075.jpg);
-	background-color: #ece1a9;
-}
-
-body {
-	background-color: slategray;
-}
-
 /* LOG */
 
-#log {
-	font-family: "Suit Symbols", var(--font-small);
-	font-variant-numeric: tabular-nums;
-}
-
 #log { background-color: #f3ebd4 }
 
 #log div:empty {
@@ -170,6 +172,7 @@ span.suit.reserve { font-weight: bold; font-family: "Source Serif SmText"; }
 #hand_imperial_header { background-color: var(--color-light-imperial); }
 #hand_france_header { background-color: var(--color-light-france); }
 #clock_of_fate_header { background-color: var(--color-light-clock); }
+#discard_pile_header { background-color: var(--color-light-clock); }
 
 #hand_prussia_panel { background-color: var(--color-medium-prussia); }
 #hand_hanover_panel { background-color: var(--color-medium-hanover); }
@@ -179,6 +182,7 @@ span.suit.reserve { font-weight: bold; font-family: "Source Serif SmText"; }
 #hand_imperial_panel { background-color: var(--color-medium-imperial); }
 #hand_france_panel { background-color: var(--color-medium-france); }
 #clock_of_fate_panel { background-color: var(--color-medium-clock); }
+#discard_pile_panel { background-color: var(--color-medium-clock); }
 
 .panel {
 	background-color: darkgray;
@@ -202,7 +206,7 @@ span.suit.reserve { font-weight: bold; font-family: "Source Serif SmText"; }
 	flex-wrap: wrap;
 	padding: 18px;
 	gap: 18px;
-	min-height: 256px;
+	min-height: calc(257px + 4px);
 }
 
 /* MARKERS */
@@ -458,7 +462,7 @@ body.shift .card.tc.face.deck_1 { box-shadow: 0 0 0 2px silver; }
 
 .card {
 	width: 165px;
-	height: 256px;
+	height: 257px;
 	background-size: 100%;
 	background-color: #f3ebd5;
 	border-radius: 8px;
@@ -488,11 +492,19 @@ body.shift .card.tc.face.deck_1 { box-shadow: 0 0 0 2px silver; }
 
 .draw-break { margin-left: 145px; }
 .card.tc { margin-right: -145px; }
+.card.tc.reverse { margin-right: -165px; }
 .panel_body { padding-right: calc(18px + 145px); }
 
 #clock_of_fate { padding: 18px; }
 #clock_of_fate .card.tc { margin-right: 0px; }
 
+.discard_pile {
+	display: flex;
+	flex-wrap: wrap;
+	width: 230px;
+	gap: 4px;
+}
+
 .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 73242cc..01e7de3 100644
--- a/play.html
+++ b/play.html
@@ -99,6 +99,17 @@
 
 </div>
 
+<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>
+</div>
+
 </main>
 
 <footer id="status"></footer>
diff --git a/play.js b/play.js
index 1d6f3bb..65fb519 100644
--- a/play.js
+++ b/play.js
@@ -442,6 +442,13 @@ const ui = {
 	pieces_element: document.getElementById("pieces"),
 	markers_element: document.getElementById("markers"),
 	clock_of_fate: document.getElementById("clock_of_fate"),
+	discard: [
+		document.getElementById("discard_1"),
+		document.getElementById("discard_2"),
+		document.getElementById("discard_3"),
+		document.getElementById("discard_4"),
+		document.getElementById("discard_5"),
+	],
 	power_panel_list: document.getElementById("power_panel_list"),
 	power_header: [
 		document.getElementById("hand_prussia_header"),
@@ -526,12 +533,12 @@ function make_tc_deck(n) {
 	for (let suit = 0; suit <= 3; ++suit) {
 		for (let value = 2; value <= 13; ++value) {
 			let c = (n << 7) | (suit << 4) | value
-			ui.tc[c] = create_element("card", c, "card tc deck_" + (n+1) + " " + suit_class[suit] + " " + suit_letter[suit] + value)
+			ui.tc[c] = create_element("card", c, "card tc face deck_" + (n+1) + " " + suit_class[suit] + " " + suit_letter[suit] + value)
 		}
 	}
 	for (let value = 2; value <= 3; ++value) {
 		let c = (n << 7) | (4 << 4) | value
-		ui.tc[c] = create_element("card", c, "card tc deck_" + (n+1) + " reserve R")
+		ui.tc[c] = create_element("card", c, "card tc face deck_" + (n+1) + " reserve R")
 	}
 }
 
@@ -545,6 +552,16 @@ function make_tc_deck_back(n) {
 	return list
 }
 
+function make_tc_deck_discard(n) {
+	let list = []
+	for (let i = 0; i < 10; ++i) {
+		let e = document.createElement("div")
+		e.className = "card tc discard reverse " + n
+		list.push(e)
+	}
+	return list
+}
+
 function make_fate_card(fc) {
 	let e = document.createElement("div")
 	if (fc === 0)
@@ -647,6 +664,14 @@ function on_init() {
 		make_tc_deck_back("deck_5"),
 	]
 
+	ui.tc_discard = [
+		make_tc_deck_discard("deck_1"),
+		make_tc_deck_discard("deck_2"),
+		make_tc_deck_discard("deck_3"),
+		make_tc_deck_discard("deck_4"),
+		make_tc_deck_discard("deck_5"),
+	]
+
 	ui.combat = document.createElement("div")
 	ui.combat.id = "combat"
 	ui.combat.style.zIndex = 2000
@@ -1079,6 +1104,12 @@ function on_update() {
 		for (let c of view.fate)
 			ui.clock_of_fate.appendChild(ui.fate[c])
 
+	for (let deck = 0; deck < 5; ++deck) {
+		ui.discard[deck].replaceChildren()
+		for (let i = 0; i < view.discard[deck]; ++i)
+			ui.discard[deck].appendChild(ui.tc_discard[deck][i])
+	}
+
 	ui.markers_element.replaceChildren()
 	for (let s of view.conquest)
 		ui.markers_element.appendChild(ui.conquest[s])
diff --git a/rules.js b/rules.js
index 89d84e3..ae613e7 100644
--- a/rules.js
+++ b/rules.js
@@ -1050,7 +1050,7 @@ function find_largest_discard(u) {
 	throw "OUT OF CARDS"
 }
 
-function next_tactics_deck() {
+function count_used_cards() {
 	let held = [ 0, 0, 0, 0, 0 ]
 
 	// count cards in hands
@@ -1058,12 +1058,26 @@ function next_tactics_deck() {
 		for (let c of game.hand[pow])
 			held[to_deck(c)]++
 	}
+
+	// count cards currently being drawn
 	if (game.draw)
 		for (let c of game.draw)
 			held[to_deck(c)]++
+
+	// count cards remaining in deck
+	for (let c of game.deck)
+		held[to_deck(c)]++
+
+	// set-aside prussian card
 	if (game.oo > 0)
 		held[to_deck(game.oo)]++
 
+	return held
+}
+
+function next_tactics_deck() {
+	let held = count_used_cards()
+
 	// find next unused deck
 	for (let i = 1; i < 5; ++i) {
 		if (held[i] === 0) {
@@ -4425,6 +4439,13 @@ function total_troops_list() {
 	return list
 }
 
+function total_discard_list() {
+	let discard = count_used_cards()
+	for (let i = 0; i < 5; ++i)
+		discard[i] = Math.ceil((50 - discard[i]) / 5)
+	return discard
+}
+
 exports.view = function (state, player) {
 	game = state
 	view = {
@@ -4440,6 +4461,7 @@ exports.view = function (state, player) {
 		hand: mask_hand(player),
 		oo: game.oo,
 		pt: total_troops_list(),
+		discard: total_discard_list(),
 
 		power: game.power,
 		retro: game.retro,