From 779ee568c78238027d86028c39beb7b6bf959ab7 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Tue, 7 Nov 2023 15:25:58 +0100
Subject: congress and turn ui

---
 play.html | 16 +++++++++++++++-
 play.js   | 30 ++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/play.html b/play.html
index 4948e79..beefd3b 100644
--- a/play.html
+++ b/play.html
@@ -193,6 +193,17 @@ div.persistent_box {
 .persistent_card.support { background-color: var(--suff-85); }
 .persistent_card.opposition { background-color: var(--opp-85); }
 
+div.congress_box {
+	position: absolute;
+	box-sizing: border-box;
+}
+
+div.congress_box.action {
+	background-clip: padding-box;
+	background-color: #fff8;
+	border: 5px solid white;
+}
+
 .piece {
 	position: absolute;
 	background-repeat: no-repeat;
@@ -919,7 +930,10 @@ 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="Northeast" class="region" style="top:158px;left:881px;"></div>
 
 		<div id="turn" class="piece turn" style="left:800px;top:765px;"></div>
-		<div class="piece congress" style="left:500px;top:765px;"></div>
+		<div id="congress_box" class="congress_box" style="left:490px;top:760px;width:270px;height:60px;">
+		<!-- <div class="piece congress" style="left:500px;top:765px;"></div> -->
+		</div>
+
 		<div class="piece red1" style="left:350px;top:100px;"></div>
 		<div class="piece red2 action" style="left:450px;top:175px;"></div>
 		<div class="piece red3" style="left:550px;top:150px;"></div>
diff --git a/play.js b/play.js
index eb8d8f2..584ba34 100644
--- a/play.js
+++ b/play.js
@@ -30,6 +30,9 @@ const card_count = 128
 
 let ui = {
 	status: document.getElementById("status"),
+	turn: document.getElementById("turn"),
+	congress_box: document.getElementById("congress_box"),
+	congress: [ null ],
 	player: [
 		document.getElementById("role_Suffragist"),
 		document.getElementById("role_Opposition"),
@@ -239,6 +242,15 @@ function on_click_card(evt) {
 	}
 }
 
+function on_click_congress(evt) {
+	if (evt.button === 0) {
+		console.log("congress")
+		if (send_action('congress'))
+			evt.stopPropagation()
+	}
+	hide_popup_menu()
+}
+
 function on_click_region(evt) {
 	if (evt.button === 0) {
 		if (send_action('region', evt.target.my_region))
@@ -282,6 +294,15 @@ function create(t, p, ...c) {
 function build_user_interface() {
 	let elt
 
+	ui.congress_box.onmousedown = on_click_congress
+	for (let c = 1; c <= 6; ++c) {
+		elt = ui.congress[c] = create("div", {
+			className: "piece congress",
+			style: `left:${10 + (c-1) * 42}px;top:5px;`,
+			onmousedown: on_click_congress
+		})
+	}
+
     for (let c = 1; c <= card_count; ++c) {
 		elt = ui.cards[c] = create("div", {
 			className: `card card_${c}`,
@@ -381,6 +402,15 @@ function on_update() { // eslint-disable-line no-unused-vars
 	document.getElementById("support_info").textContent = support_info()
 	document.getElementById("opposition_info").textContent = opposition_info()
 
+	ui.turn.style.left = 800 + (42 * (view.turn - 1)) + "px"
+
+	ui.congress_box.replaceChildren()
+	ui.congress_box.classList.toggle("action", !view.congress && is_action("congress"))
+	for (let c = 1; c <= view.congress; ++c) {
+		ui.congress_box.appendChild(ui.congress[c])
+		ui.congress[c].classList.toggle("action", is_action("congress"))
+	}
+
 	document.getElementById("hand").replaceChildren()
 	document.getElementById("support_claimed").replaceChildren()
 	document.getElementById("support_discard").replaceChildren()
-- 
cgit v1.2.3