show nineteenth amendment voting score

2 files changed, 30 insertions, 4 deletions

diff --git a/play.html b/play.html
index b039fd0..39998f0 100644
--- a/play.html
+++ b/play.html
@@ -279,6 +279,18 @@ div.congress_box.action {
 	border: 5px solid white;
 }
 
+div.nineteenth_amendment_score:not(.hide) {
+	position: absolute;
+	background-color: #EEE7D2;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+
+	font-weight: bold;
+	font-size: 24pt;
+}
+
 .piece {
 	pointer-events: none;
 	position: absolute;
@@ -1059,6 +1071,13 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
 		<div id="turn" class="piece turn" style="left:806px;top:770px;"></div>
 		<div id="congress_box" class="congress_box" style="left:490px;top:760px;width:270px;height:60px;">
 		</div>
+		<div id="nineteenth_amendment_score" class="nineteenth_amendment_score" style="left:490px;top:760px;width:270px;height:60px;">
+			<div id="green_checks_count" class="score">0</div>
+			<div class="piece yes" style="position:relative"></div>
+			<div style="width: 10px;"></div>
+			<div id="red_xs_count" class="score">0</div>
+			<div class="piece no" style="position:relative"></div>
+		</div>
 		<div id="support_buttons" class="button_box" style="left:25px;top:25px;">
 		</div>
 		<div id="opposition_buttons" class="button_box h" style="right:485px;top:30px;">
diff --git a/play.js b/play.js
index 4a3506b..e685fbd 100644
--- a/play.js
+++ b/play.js
@@ -29,6 +29,9 @@ let ui = {
 	turn: document.getElementById("turn"),
 	congress_box: document.getElementById("congress_box"),
 	congress: [ null ],
+	nineteenth_amendment_score: document.getElementById("nineteenth_amendment_score"),
+	green_checks_count: document.getElementById("green_checks_count"),
+	red_xs_count: document.getElementById("red_xs_count"),
 	player: [
 		document.getElementById("role_Suffragist"),
 		document.getElementById("role_Opposition"),
@@ -578,13 +581,11 @@ function on_log(text) { // eslint-disable-line no-unused-vars
 
 
 function support_info() {
-	// TODO show the # of green_checks and red_xs instead of the congress circles when the 19th has passed instead
-	return `${view.support_buttons}\u{2b50} ${view.support_hand}\u{1f3b4} ${view.green_checks} \u{2713}`
+	return `${view.support_buttons}\u{2b50} ${view.support_hand}\u{1f3b4}`
 }
 
 function opposition_info() {
-	// TODO show the # of green_checks and red_xs instead of the congress circles when the 19th has passed instead
-	return `${view.opposition_buttons}\u{2b50} ${view.opposition_hand}\u{1f3b4} ${view.red_xs} \u{2717}`
+	return `${view.opposition_buttons}\u{2b50} ${view.opposition_hand}\u{1f3b4}`
 }
 
 function layout_cubes(list, xorig, yorig) {
@@ -631,6 +632,12 @@ function on_update() { // eslint-disable-line no-unused-vars
 		ui.congress[c].classList.toggle("action", is_action("congress"))
 	}
 
+	ui.nineteenth_amendment_score.classList.toggle("hide", !view.nineteenth_amendment)
+	if (view.nineteenth_amendment) {
+		ui.green_checks_count.textContent = view.green_checks
+		ui.red_xs_count.textContent = view.red_xs
+	}
+
 	ui.support_button_box.replaceChildren()
 	for (let i = 0; i < view.support_buttons; ++i) {
 		ui.support_button_box.appendChild(ui.support_buttons[i])