From 7c197b11879d69a1dc84d601350d2ce129a5c671 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Thu, 14 Dec 2023 19:52:53 +0100
Subject: wing

---
 cards.css |  2 ++
 play.html |  3 +++
 play.js   | 17 ++++++++++-------
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/cards.css b/cards.css
index ea86ff0..e9da81e 100644
--- a/cards.css
+++ b/cards.css
@@ -43,7 +43,9 @@
 .name.red { background-color: #e32223; color: white; }
 .name.pink { background-color: #f49899; color: black; }
 .name.blue { background-color: #2482e4; color: white; }
+.name.dkblue { background-color: #04089f; color: white; }
 .name.dkblue { background-color: #1239c3; color: white; }
+.name.dkblue { background-color: #44d; color: white; }
 
 .name.sym {
 	padding-left: 30px;
diff --git a/play.html b/play.html
index 8442c9d..50debc2 100644
--- a/play.html
+++ b/play.html
@@ -19,6 +19,9 @@
 #roles { background-color: bisque; }
 #log { background-color: floralwhite; }
 
+.role.blue, .role.dkblue { background-color: #8bf }
+.role.red, .role.pink { background-color: #f88 }
+
 main {
 	background-color: #666;
 	background-image: url(images/background.png);
diff --git a/play.js b/play.js
index 3ea8f94..56f4b8e 100644
--- a/play.js
+++ b/play.js
@@ -7,6 +7,7 @@ const reactions = [ "Screen", "Counterattack", "Absorb" ]
 
 let ui = {
 	main: document.querySelector("main"),
+	role_panel: [ document.getElementById("role_First"), document.getElementById("role_Second") ],
 	role_name: [ document.getElementById("role1"), document.getElementById("role2") ],
 	role_stat: [ document.getElementById("stat1"), document.getElementById("stat2") ],
 	name: [ document.getElementById("name1"), document.getElementById("name2") ],
@@ -318,19 +319,21 @@ function on_update() {
 	let w1 = data.cards[view.front[0][0]].wing
 	let w2 = data.cards[view.front[1][0]].wing
 
-	console.log("W", w1, w2)
-	ui.role_name[p1].textContent = data.scenarios[view.scenario].players[0].name
-	ui.role_name[p2].textContent = data.scenarios[view.scenario].players[1].name
+	ui.role_panel[0].className = "role " + wing_name[w1]
+	ui.role_panel[1].className = "role " + wing_name[w2]
+
+	ui.role_name[0].textContent = data.scenarios[view.scenario].players[0].name
+	ui.role_name[1].textContent = data.scenarios[view.scenario].players[1].name
 
 	if (data.scenarios[view.scenario].players[1].tactical)
-		ui.role_stat[p1].textContent = `${view.morale[0]} (-${view.lost[0]})`
+		ui.role_stat[0].textContent = `${view.morale[0]} (-${view.lost[0]})`
 	else
-		ui.role_stat[p1].textContent = view.morale[0]
+		ui.role_stat[0].textContent = view.morale[0]
 
 	if (data.scenarios[view.scenario].players[0].tactical)
-		ui.role_stat[p2].textContent = `${view.morale[1]} (-${view.lost[1]})`
+		ui.role_stat[1].textContent = `${view.morale[1]} (-${view.lost[1]})`
 	else
-		ui.role_stat[p2].textContent = view.morale[1]
+		ui.role_stat[1].textContent = view.morale[1]
 
 	for (let e of animation_registry)
 		remember_position(e)
-- 
cgit v1.2.3