From e5db278efbf5f22204526b9f8fafb853d1718e9e Mon Sep 17 00:00:00 2001
From: Joël Simoneau <simoneaujoel@gmail.com>
Date: Mon, 31 Mar 2025 17:12:00 -0400
Subject: Localized battle box

---
 images/gui_box_maximize.svg |  3 +++
 images/gui_box_minimize.svg |  3 +++
 play.css                    | 24 ++++++++++++++++++++----
 play.html                   | 45 +++++++++++++++++++++++----------------------
 play.js                     | 29 ++++++++++++++++++++++++-----
 5 files changed, 73 insertions(+), 31 deletions(-)
 create mode 100644 images/gui_box_maximize.svg
 create mode 100644 images/gui_box_minimize.svg

diff --git a/images/gui_box_maximize.svg b/images/gui_box_maximize.svg
new file mode 100644
index 0000000..038c71a
--- /dev/null
+++ b/images/gui_box_maximize.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16">
+<path stroke-width="3" stroke="gold" fill="none" d="M 14 5 L 8 11 L 2 5" />
+</svg>
diff --git a/images/gui_box_minimize.svg b/images/gui_box_minimize.svg
new file mode 100644
index 0000000..add3008
--- /dev/null
+++ b/images/gui_box_minimize.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16">
+<path stroke-width="3" stroke="gold" fill="none" d="M 14 11 L 8 5 L 2 11" />
+</svg>
diff --git a/play.css b/play.css
index feb06e5..b65830f 100644
--- a/play.css
+++ b/play.css
@@ -216,18 +216,16 @@ img.f {
 	z-index: 200;
 	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
 	border: 1px solid black;
-	min-width: 425px;
-	background-color: #d6c4a9;
+	min-width: 494px;
 }
 
-@media (max-width: 400px) {
+@media (max-width: 494px) {
 	#attack_table {
 		min-width: 90vw;
 		min-width: 90dvw;
 	}
 }
 
-#attack_header { background-color: brown; color: gold }
 #attack_header {
 	list-style: none;
 	cursor: move;
@@ -237,8 +235,26 @@ img.f {
 	text-align: center;
 	font-weight: bold;
 	font-size: 18px;
+
+	background-repeat: no-repeat;
+	background-position: 100% 50%;
+	background-image: url(images/gui_box_maximize.svg);
+	background-color: rgba(165, 42, 42, 0.637);
+	color: gold;
 }
 
+#attack_table[open] {
+	background-color: #d6c4a9;
+}
+
+#attack_table[open] #attack_header {
+	cursor: n-resize;
+	border-bottom: 1px solid black;
+	background-image: url(images/gui_box_minimize.svg);
+	background-color: brown;
+}
+
+
 /* SPACES */
 
 path { fill: none; stroke-width: 4; }
diff --git a/play.html b/play.html
index f5ea375..e91e13a 100644
--- a/play.html
+++ b/play.html
@@ -58,35 +58,36 @@
 
 <div id="table">
 
-<div id="attack_table" class="hide">
-	<summary id="attack_header">Attack in $NAME</summary>
 
-	<div id="attacker" class="player_pool">
-		<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 id="mapwrap">
+
+	<details id="attack_table" class="hide">
+		<summary id="attack_header">Attack in $NAME</summary>
+		<div id="attacker" class="player_pool">
+			<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>
-			<img class="f attacker_flag" src="images/Flags_DS.png">
 		</div>
-	</div>
-	<div id="defender" class="player_pool defender">
-		<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 id="defender" class="player_pool defender">
+			<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>
-			<img class="f defender_flag" src="images/Flags_DS.png">
 		</div>
-	</div>
-
-</div>
+	</details>
 
-<div id="mapwrap">
 	<div id="map">
-		<svg id="svgmap" width="1275" height="1650" viewBox="0 0 1275 1650">
+	<svg id="svgmap" width="1275" height="1650" viewBox="0 0 1275 1650">
 <g transform="translate(0.000000,1650.000000) scale(1.000000,-1.000000)" fill="#000000" stroke="none">
 <path class="mongol province" id="space_Mountain_Passes" d="M1 1478 l0 -92 3 1 c2 1 4 1 6 2 2 1 5 1 8 1 2 0 4 1 5 2 5 5 19 3
 28 -3 4 -3 8 -4 18 -5 2 -1 6 -3 9 -5 l4 -3 15 -1 c9 -1 16 -1 17 -1 2 0 14 2
diff --git a/play.js b/play.js
index d5caa27..d1c5878 100644
--- a/play.js
+++ b/play.js
@@ -178,6 +178,25 @@ const space_id = [
 	"space_Punjab",
 ]
 
+const bb_loc = {
+	0: {"x": 522, "y": 1260}, // S_ANDHRA
+	1: {"x": 776, "y": 730}, // S_BENGAL
+	2: {"x": 640, "y": 920}, // S_GONDWANA
+	3: {"x": 82, "y": 841}, // S_GUJARAT
+	4: {"x": 666, "y": 625}, // S_JAUNPUR
+	5: {"x": 698, "y": 1262}, // S_KARNATAKA
+	6: {"x": 446, "y": 987}, // S_MADHYADESH
+	7: {"x": 379, "y": 1140}, // S_MAHARASHTRA
+	8: {"x": 397, "y": 798}, // S_MALWA
+	9: {"x": 770, "y": 1068}, // S_ORISSA
+	10: {"x": 81, "y": 568}, // S_RAJPUT_KINGDOMS
+	11: {"x": 163, "y": 311}, // S_SINDH
+	12: {"x": 804, "y": 1357}, // S_TAMILAKAM
+	13: {"x": 401, "y": 536}, // S_DELHI
+	14: {"x": 152, "y": 235}, // S_MOUNTAIN_PASSES
+	15: {"x": 195, "y": 314}, // S_PUNJAB
+}
+
 /* LAYOUT DATA */
 // modified from tools/parse-layout.js
 const layout = {
@@ -549,8 +568,8 @@ function init_ui() {
 	ui.gk_unshaded_event.onmouseenter = on_focus_gk_unshaded_event
 	ui.gk_unshaded_event.onmouseleave = on_focus_this_event
 
-	// Make combat table draggable
-	dragElement(ui.attack_table)
+	// // Make combat table draggable
+	// dragElement(ui.attack_table)
 
 	// player cavalry tokens
 	for (let i = 0; i <= LAST_CAVALRY; ++i) {
@@ -925,15 +944,15 @@ function show_dice_box(box) {
 	box.classList.add("show")
 	box.style.top = null
 	box.style.left = null
-	// box.setAttribute("open", true)
+	box.setAttribute("open", true)
 
 	// calculate size
 	let w = box.clientWidth
 	let h = box.clientHeight
 
 	// center where possible
-	let x = 500
-	let y = 500
+	let x = bb_loc[view.attack.where].x
+	let y = bb_loc[view.attack.where].y
 
 	box.style.top = y + "px"
 	box.style.left = x + "px"
-- 
cgit v1.2.3