From 0da45c31bfab31ea98d00e88f2536850653680f4 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Mon, 28 Oct 2024 00:32:36 +0100
Subject: Use icons for power action buttons

---
 play.css | 19 ++++++++++++-------
 play.js  | 13 +++++++++++--
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/play.css b/play.css
index 0b4186e..bf9dbf7 100644
--- a/play.css
+++ b/play.css
@@ -19,13 +19,22 @@ button span.suit {
 	line-height: 1;
 }
 
+button {
+	height: 30px;
+}
+
 body {
 	background-color: slategray;
 }
 
-#role_Maria_Theresa { background-color: whitesmoke; }
-#role_Frederick { background-color: skyblue; }
-#role_Louis_XV { background-color: salmon; }
+#role_Maria_Theresa { background-color: var(--color-light-austria); }
+#role_Louis_XV { background-color: var(--color-light-france); }
+#role_Frederick {
+	background-image: linear-gradient(60deg,
+		var(--color-light-prussia) 50%,
+		var(--color-light-pragmatic) 70%
+	);
+}
 
 .role.active span { font-weight: bold }
 
@@ -155,10 +164,6 @@ header.your_turn.austria { background-color: var(--color-light-austria); }
 	--color-medium-political: hsl(50, 35%, 60%);
 	--color-medium-discard: hsl(52, 25%, 70%);
 
-	--color-role-louis: hsl(0, 70%, 80%);
-	--color-role-frederick: hsl(210, 80%, 75%);
-	--color-role-maria: hsl(0, 0%, 97%);
-
 	--color-clubs: #0079a1;
 	--color-diamonds: #9d403f;
 	--color-hearts: #ed1c23;
diff --git a/play.js b/play.js
index 0e35b5d..5838520 100644
--- a/play.js
+++ b/play.js
@@ -613,6 +613,15 @@ function make_badge(power) {
 	return e
 }
 
+const power_image = [
+	'<img style="border-radius:50%" height="24" src="images/role_france.2x.png" alt="France">',
+	'<img style="border-radius:50%" height="24" src="images/role_prussia.2x.png" alt="Prussia">',
+	'<img style="border-radius:50%" height="24" src="images/role_pragmatic.2x.png" alt="Pragmatic Army">',
+	'<img style="border-radius:50%" height="24" src="images/role_austria.2x.png" alt="Austria">',
+	'<img style="border-radius:50%" height="24" src="images/role_bavaria.2x.png" alt="Bavaria">',
+	'<img style="border-radius:50%" height="24" src="images/role_saxony.2x.png" alt="Saxony">',
+]
+
 const power_badge = [
 	make_badge("france"),
 	make_badge("prussia"),
@@ -1401,10 +1410,10 @@ function on_update() {
 		action_button_with_argument("value", v, v)
 
 	for (let p = 0; p < 20; ++p)
-		action_button_with_argument("supreme", p, power_name[piece_power[p]])
+		action_button_with_argument("supreme", p, power_image[piece_power[p]])
 
 	for (let pow of all_powers)
-		action_button_with_argument("power", pow, power_name[pow])
+		action_button_with_argument("power", pow, power_image[pow])
 
 	action_button("subsidy", "Subsidy")
 	action_button("cancel", "Cancel")
-- 
cgit v1.2.3