From d6118aa16156b43f2908c69a258c603897e23a77 Mon Sep 17 00:00:00 2001
From: Joël Simoneau <simoneaujoel@gmail.com>
Date: Tue, 25 Mar 2025 11:12:17 -0400
Subject: Updating attack box

---
 images/Flags_MI.png | Bin 0 -> 14519 bytes
 play.css            |  20 +++++++++++++++++---
 play.html           |  20 ++++++++++++++++----
 play.js             |  22 +++++++++++++++++++---
 4 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 images/Flags_MI.png

diff --git a/images/Flags_MI.png b/images/Flags_MI.png
new file mode 100644
index 0000000..60159d6
Binary files /dev/null and b/images/Flags_MI.png differ
diff --git a/play.css b/play.css
index dc3dcf8..feb06e5 100644
--- a/play.css
+++ b/play.css
@@ -72,11 +72,11 @@ header.your_turn.ve { background-color: #ffbf32 }
 /* COMBAT TABLE */
 
 .player_pool {
-	width: 375px;
+	width: 450px;
 	background-color: #0003;
 	padding: 8px;
-	border-radius: 24px;
-	margin: 24px auto;
+	border-radius: 20px;
+	margin: 14px 14px;
 }
 
 .player_name {
@@ -127,6 +127,20 @@ header.your_turn.ve { background-color: #ffbf32 }
 
 .die.action { box-shadow: 0 0 0 1px #333, 0 0 0px 3px white; }
 
+.attacker_banner {
+	display: flex;
+	align-items: center;
+	justify-content: space-evenly;
+}
+.defender_banner {
+	display: flex;
+	align-items: center;
+	justify-content: space-evenly;
+}
+img.f {
+	height: 42px;
+}
+
 /* LOG */
 #log .h1 { background-color: silver; font-weight: bold; padding-top:4px; padding-bottom:4px; margin-top: 8px; margin-bottom: 4px; text-align: center; }
 #log .h1 { background-image: linear-gradient(60deg, gray, turquoise, gold); text-shadow: 0 0 4px white; }
diff --git a/play.html b/play.html
index f0688df..f5ea375 100644
--- a/play.html
+++ b/play.html
@@ -62,12 +62,24 @@
 	<summary id="attack_header">Attack in $NAME</summary>
 
 	<div id="attacker" class="player_pool">
-		<div id="name_attacker" class="player_name">Attacker</div>
-		<div id="pool_a" class="table_pool attacker"></div>
+		<div class="attacker_banner">
+			<img class="f attacker_flag" src="images/Flags_DS.png">
+			<div>
+				<div id="name_attacker" class="player_name">Attacker</div>
+				<div id="pool_a" class="table_pool attacker"></div>
+			</div>
+			<img class="f attacker_flag" src="images/Flags_DS.png">
+		</div>
 	</div>
 	<div id="defender" class="player_pool defender">
-		<div id="pool_d" class="table_pool"></div>
-		<div id="name_defender" class="player_name">Defender</div>
+		<div class="defender_banner">
+			<img class="f defender_flag" src="images/Flags_DS.png">
+			<div>
+				<div id="pool_d" class="table_pool"></div>
+				<div id="name_defender" class="player_name">Defender</div>
+			</div>
+			<img class="f defender_flag" src="images/Flags_DS.png">
+		</div>
 	</div>
 
 </div>
diff --git a/play.js b/play.js
index 2dabece..0a0b96c 100644
--- a/play.js
+++ b/play.js
@@ -10,6 +10,13 @@ const last_cavalry = 9
 
 const faction_name = [ "Delhi Sultanate", "Bahmani Kingdom", "Vijayanagara Empire", "Mongol Invaders" ]
 
+const faction_flags = [
+	"images/Flags_DS.png",
+	"images/Flags_BK.png",
+	"images/Flags_VE.png",
+	"images/Flags_MI.png"
+]
+
 // :r !python3 tools/genlayout.py
 const LAYOUT = {
 	"Andhra DS": [785, 1014],
@@ -478,6 +485,8 @@ let ui = {
 	attack_header: document.getElementById("attack_header"),
 	attack_attacker: document.getElementById("name_attacker"),
 	attack_defender: document.getElementById("name_defender"),
+	attacker_flag: document.querySelectorAll(".attacker_flag"),
+	defender_flag: document.querySelectorAll(".defender_flag")
 }
 
 function create(t, p, ...c) {
@@ -900,6 +909,13 @@ function update_dice_box() {
 	ui.attack_attacker.textContent = "Attacker - " + faction_name[view.attack.attacker]
 	ui.attack_defender.textContent = "Defender - " + faction_name[view.attack.target]
 
+	ui.attacker_flag.forEach(function(element){
+        element.src = faction_flags[view.attack.attacker];
+    });
+	ui.defender_flag.forEach(function(element){
+        element.src = faction_flags[view.attack.target];
+    });
+
 	if (ui.attack_table.classList.contains("hide"))
 		show_dice_box(ui.attack_table)
 }
@@ -959,9 +975,9 @@ function on_update() {
 	}
 
 	switch (player) {
-	case "Delhi Sultanate": ui.favicon.href = "images/Flags_DS.png"; break
-	case "Bahmani Kingdom": ui.favicon.href = "images/Flags_BK.png"; break
-	case "Vijayanagara Empire": ui.favicon.href = "images/Flags_VE.png"; break
+	case "Delhi Sultanate": ui.favicon.href = faction_flags[DS]; break
+	case "Bahmani Kingdom": ui.favicon.href = faction_flags[BK]; break
+	case "Vijayanagara Empire": ui.favicon.href = faction_flags[VE]; break
 	}
 
 	// Dice rolling
-- 
cgit v1.2.3