show buttons on the board

2 files changed, 55 insertions, 0 deletions

diff --git a/play.html b/play.html
index 3b98ad5..00ee86f 100644
--- a/play.html
+++ b/play.html
@@ -282,6 +282,30 @@ div.congress_box.action {
 .piece.no { width: 42px; height: 32px; background-size: 42px 32px; background-image: url(pieces/no.svg); }
 .piece.congress { width: 32px; height: 32px; background-size: 32px 32px; background-image: url(pieces/cog.svg); }
 
+div.button_box {
+	position: absolute;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	justify-content: start;
+	gap: 4px;
+}
+
+.button {
+	width: 40px;
+	height: 40px;
+	background-size: 40px 40px;
+	filter: drop-shadow(0px 1px 2px #0004);
+}
+
+.button_1{background-image:url(images/badge1.png)}
+.button_2{background-image:url(images/badge2.png)}
+.button_3{background-image:url(images/badge3.png)}
+.button_4{background-image:url(images/badge4.png)}
+.button_5{background-image:url(images/badge5.png)}
+.button_6{background-image:url(images/badge6.png)}
+
 .card {
 	background-size: cover;
 	background-repeat: no-repeat;
@@ -965,6 +989,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="turn" class="piece turn" style="left:800px;top:765px;"></div>
 		<div id="congress_box" class="congress_box" style="left:490px;top:760px;width:270px;height:60px;">
 		</div>
+		<div id="support_buttons" class="button_box" style="left:4px;top:40px;width:50px;height:534px;">
+		</div>
+		<div id="opposition_buttons" class="button_box" style="left:1056px;top:460px;width:50px;height:270px;">
+		</div>
 
 		<div id="pieces"></div>
 
diff --git a/play.js b/play.js
index da42be1..ac11b1c 100644
--- a/play.js
+++ b/play.js
@@ -40,6 +40,11 @@ let ui = {
 		document.getElementById("role_Opposition"),
 	],
 	pieces: document.getElementById("pieces"),
+	pieces: document.getElementById("pieces"),
+	support_button_box: document.getElementById("support_buttons"),
+	support_buttons: [],
+	opposition_button_box: document.getElementById("opposition_buttons"),
+	opposition_buttons: [],
 	campaigners: [],
 	cubes: [],
 	green_checks: [],
@@ -392,6 +397,18 @@ function build_user_interface() {
 		elt.addEventListener("click", on_click_congress)
 	}
 
+	for (let i = 0; i < 12; ++i) {
+		elt = ui.support_buttons[i] = create("div", {
+			className: `button button_${(i % 4) + 1}`,
+		})
+	}
+
+	for (let i = 0; i < 6; ++i) {
+		elt = ui.opposition_buttons[i] = create("div", {
+			className: `button button_${(i % 2) + 1}`,
+		})
+	}
+
     for (let c = 1; c <= card_count; ++c) {
 		elt = ui.cards[c] = create("div", {
 			className: `card card_${c}`,
@@ -594,6 +611,16 @@ function on_update() { // eslint-disable-line no-unused-vars
 		ui.congress[c].classList.toggle("action", is_action("congress"))
 	}
 
+	ui.support_button_box.replaceChildren()
+	for (let i = 0; i < view.support_buttons; ++i) {
+		ui.support_button_box.appendChild(ui.support_buttons[i])
+	}
+
+	ui.opposition_button_box.replaceChildren()
+	for (let i = 0; i < view.opposition_buttons; ++i) {
+		ui.opposition_button_box.appendChild(ui.opposition_buttons[i])
+	}
+
 	document.getElementById("hand").replaceChildren()
 	document.getElementById("support_claimed").replaceChildren()
 	document.getElementById("support_discard").replaceChildren()