prepare for different options to obfuscate hand displays

4 files changed, 53 insertions, 19 deletions

diff --git a/info/readme.html b/info/readme.html
index 7619f2f..0b8021a 100644
--- a/info/readme.html
+++ b/info/readme.html
@@ -64,6 +64,14 @@ Click the name and the city will scroll into view.
 <hr>
 
 <p>
+How can I tell how many cards are in each discard pile?
+
+<p>
+Each visible card in the pile represents approximately 5 cards.
+
+<hr>
+
+<p>
 Why can I see (and count) other player's hands?
 
 <p>
diff --git a/play.css b/play.css
index 81bf912..69017bc 100644
--- a/play.css
+++ b/play.css
@@ -505,8 +505,9 @@ body.shift span.value.deck_5 { background-color: #0002 }
 .draw-break { margin-left: 167px; }
 .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); }
+.card.tc.pile { margin-right: calc(-167px + 6px); }
+.card.tc.hand { margin-right: calc(-167px + 10px); }
+.card.fate.pile { margin-right: calc(-167px + 6px); }
 .panel_body { padding-right: calc(18px + 167px); }
 .panel_body { gap: 18px 0; }
 
diff --git a/play.html b/play.html
index 66365b9..624bc26 100644
--- a/play.html
+++ b/play.html
@@ -96,10 +96,10 @@
 <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 class="card fate pile reverse"></div>
+		<div class="card fate pile reverse"></div>
+		<div class="card fate pile reverse"></div>
+		<div class="card fate pile reverse"></div>
 	</div>
 	<div id="clock_of_fate_display"></div>
 </div>
diff --git a/play.js b/play.js
index f860ac5..b77af95 100644
--- a/play.js
+++ b/play.js
@@ -635,11 +635,21 @@ function make_tc_deck_back(n) {
 	return list
 }
 
-function make_tc_deck_discard(n) {
+function make_tc_deck_pile(n) {
 	let list = []
 	for (let i = 0; i < 10; ++i) {
 		let e = document.createElement("div")
-		e.className = "card tc discard reverse " + n
+		e.className = "card tc pile reverse " + n
+		list.push(e)
+	}
+	return list
+}
+
+function make_tc_deck_hand(n) {
+	let list = []
+	for (let i = 0; i < 100; ++i) {
+		let e = document.createElement("div")
+		e.className = "card tc hand reverse " + n
 		list.push(e)
 	}
 	return list
@@ -747,12 +757,22 @@ function on_init() {
 		make_tc_deck_back("deck_5"),
 	]
 
+	ui.tc_hand = [
+		make_tc_deck_hand("deck_2"),
+		make_tc_deck_hand("deck_2"),
+		make_tc_deck_hand("deck_3"),
+		make_tc_deck_hand("deck_3"),
+		make_tc_deck_hand("deck_5"),
+		make_tc_deck_hand("deck_1"),
+		make_tc_deck_hand("deck_4"),
+	]
+
 	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"),
+		make_tc_deck_pile("deck_1"),
+		make_tc_deck_pile("deck_2"),
+		make_tc_deck_pile("deck_3"),
+		make_tc_deck_pile("deck_4"),
+		make_tc_deck_pile("deck_5"),
 	]
 
 	ui.combat = document.createElement("div")
@@ -1172,12 +1192,17 @@ function on_update() {
 		ui.power_panel[pow].classList.toggle("hide", has_removed_all_pieces(pow))
 
 		ui.hand[pow].replaceChildren()
-		view.hand[pow].sort(cmp_tc)
-		for (let c of view.hand[pow]) {
-			if ((c & 15) === 0)
-				ui.hand[pow].appendChild(ui.tc_back[c>>7][back[c>>7]++])
-			else
-				ui.hand[pow].appendChild(ui.tc[c])
+		if (typeof view.hand[pow] === "number") {
+			for (let i = 0; i < view.hand[pow]; ++i)
+				ui.hand[pow].appendChild(ui.tc_hand[pow][i])
+		} else {
+			view.hand[pow].sort(cmp_tc)
+			for (let c of view.hand[pow]) {
+				if ((c & 15) === 0)
+					ui.hand[pow].appendChild(ui.tc_back[c>>7][back[c>>7]++])
+				else
+					ui.hand[pow].appendChild(ui.tc[c])
+			}
 		}
 	}