Place battle and pursuit boxes next to the hexes.

3 files changed, 67 insertions, 41 deletions

diff --git a/play.css b/play.css
index c8b8fd7..1536227 100644
--- a/play.css
+++ b/play.css
@@ -29,8 +29,8 @@ header.your_turn { background-color: orange; }
 /* CARDS */
 
 .hand {
-	margin: 0 auto;
-	padding:  24px;
+	margin: 0 auto 85px auto;
+	padding: 24px;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
@@ -71,20 +71,21 @@ header.your_turn { background-color: orange; }
 /* BATTLE & PURSUIT DIALOGS */
 
 #battle, #pursuit {
-	z-index: 100;
+	position: absolute;
+	scroll-margin: 20px;
+	z-index: 200;
 	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
 	border: 1px solid black;
-	user-select: none;
-}
-
-#battle, #pursuit {
-	position: absolute;
 	min-width: 524px; /* 6 blocks wide */
 	min-width: 550px; /* 4.5 hexes wide */
 }
 
-#battle { left: 696px; top: 475px; }
-#pursuit { left: 696px; top: 590px; }
+@media (max-width: 400px) {
+	#battle, #pursuit {
+		min-width: 90vw;
+		min-width: 90dvw;
+	}
+}
 
 /* BATTLE DIALOG */
 
@@ -95,12 +96,17 @@ header.your_turn { background-color: orange; }
 #battle_message { background-color: #d6c4a9; }
 
 #battle_header {
-	cursor: move;
+	list-style: none;
+	cursor: s-resize;
 	padding: 2px 8px;
 	line-height: 24px;
 	min-height: 24px;
 	text-align: center;
 	font-weight: bold;
+}
+
+#battle[open] #battle_header {
+	cursor: n-resize;
 	border-bottom: 1px solid black;
 }
 
@@ -158,12 +164,17 @@ header.your_turn { background-color: orange; }
 #pursuit_message { background-color: #d6c4a9; }
 
 #pursuit_header {
-	cursor: move;
+	list-style: none;
+	cursor: s-resize;
 	padding: 2px 8px;
 	line-height: 24px;
 	min-height: 24px;
 	text-align: center;
 	font-weight: bold;
+}
+
+#pursuit[open] #pursuit_header {
+	cursor: n-resize;
 	border-bottom: 1px solid black;
 }
 
@@ -193,7 +204,7 @@ header.your_turn { background-color: orange; }
 
 /* TABLES */
 
-table { border-collapse: collapse; font-size: 12px; user-select: none; }
+table { border-collapse: collapse; font-size: 12px; }
 td.blank { background-color: transparent; border: none }
 td,th { border: 1px solid #222; text-align: center; padding: 2px 4px; }
 td { min-width: 16px; height: 19px; }
@@ -225,11 +236,9 @@ td img { vertical-align: middle }
 #mapsvg {
 	display: block;
 	position: absolute;
-	user-select: none;
 }
 
 #calendar, #calendar2 {
-	user-select: none;
 	position: absolute;
 	display: flex;
 	top: 24px;
diff --git a/play.html b/play.html
index 2fd0b18..7c227f6 100644
--- a/play.html
+++ b/play.html
@@ -54,8 +54,8 @@
 
 <main data-min-zoom="1" data-max-zoom="2">
 
-<div id="battle" class="hide">
-	<div id="battle_header"></div>
+<details id="battle" class="hide">
+	<summary id="battle_header"></summary>
 	<div id="battle_hits">
 		<img class="hits_icon" src="icons/armor.svg">
 		<div class="hits_text" id="hits_armor">0</div>
@@ -79,10 +79,10 @@
 		<button id="battle_end_fire_button" onclick="send_action('end_fire')">Done</button>
 	</div>
 	<div id="battle_message"></div>
-</div>
+</details>
 
-<div id="pursuit" class="hide">
-	<div id="pursuit_header">Pursuit Fire: $NAME</div>
+<details id="pursuit" class="hide">
+	<summary id="pursuit_header">Pursuit Fire: $NAME</summary>
 	<div id="pursuit_hits">0 hits</div>
 	<div class="battle_line" id="pursuit_line_1"></div>
 	<div class="battle_line" id="pursuit_line_2"></div>
@@ -91,7 +91,7 @@
 		<button id="pursuit_end_fire_button" onclick="send_action('end_fire')">End fire</button>
 	</div>
 	<div id="pursuit_message"></div>
-</div>
+</details>
 
 <div id="map">
 
diff --git a/play.js b/play.js
index 2a8ae7f..f1d659f 100644
--- a/play.js
+++ b/play.js
@@ -6,12 +6,6 @@ const svgNS = "http://www.w3.org/2000/svg"
 const round = Math.round
 const sqrt = Math.sqrt
 
-function scroll_into_view_if_mobile(e) {
-	// if ("ontouchstart" in window)
-	if (window.innerWidth <= 800)
-		e.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" })
-}
-
 // refit and queue hexes
 const MALTA = 4
 const hex_special = [ 47, 48, 49, 53, 102, 127, MALTA ]
@@ -942,11 +936,6 @@ function update_battle_line(hex, line, test) {
 }
 
 function update_battle() {
-	if (ui.battle.classList.contains("hide")) {
-		ui.battle.classList.remove("hide")
-		scroll_into_view_if_mobile(ui.battle)
-
-	}
 	ui.battle_header.textContent = hex_name[view.battle]
 	ui.battle_message.textContent = view.flash
 	if (player === ALLIED) {
@@ -968,13 +957,41 @@ function update_battle() {
 	battle_button("battle_artillery_button", "artillery")
 	battle_button("battle_end_hits_button", "end_hits")
 	battle_button("battle_end_fire_button", "end_fire")
+	if (ui.battle.classList.contains("hide")) {
+		ui.battle.classList.remove("hide")
+		show_battle_box(ui.battle, view.battle)
+	}
+}
+
+function show_battle_box(box, hex_id) {
+	// reset position
+	box.classList.add("show")
+	box.style.top = null
+	box.style.left = null
+	box.setAttribute("open", true)
+
+	// calculate size
+	let w = box.clientWidth
+	let h = box.clientHeight
+
+	// center where possible
+	let x = ui.hex_x[hex_id] - w / 2
+	if (x < 60)
+		x = 60
+	if (x > 2672 - w - 60)
+		x = 2672 - w - 60
+
+	let y = ui.hex_y[hex_id] - h - 160
+	if (y < 20)
+		y = ui.hex_y[hex_id] + 160
+
+	box.style.top = y + "px"
+	box.style.left = x + "px"
+
+	scroll_into_view_if_needed(box)
 }
 
 function update_pursuit() {
-	if (ui.pursuit.classList.contains("hide")) {
-		ui.pursuit.classList.remove("hide")
-		scroll_into_view_if_mobile(ui.pursuit)
-	}
 	ui.pursuit_header.textContent = "Pursuit Fire at " + hex_name[view.pursuit]
 	ui.pursuit_message.textContent = view.flash
 	if (player === ALLIED) {
@@ -991,6 +1008,10 @@ function update_pursuit() {
 		ui.pursuit_hits.textContent = view.hits + " hits"
 	battle_button("pursuit_end_hits_button", "end_hits")
 	battle_button("pursuit_end_fire_button", "end_fire")
+	if (ui.pursuit.classList.contains("hide")) {
+		ui.pursuit.classList.remove("hide")
+		show_battle_box(ui.pursuit, view.pursuit)
+	}
 }
 
 function battle_button(id, action) {
@@ -1091,7 +1112,7 @@ function on_focus_hex_tip(x) {
 }
 
 function on_click_hex_tip(x) {
-	ui.hexes[x].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" })
+	scroll_into_view(ui.hexes[x])
 }
 
 function on_blur_hex_tip(x) {
@@ -1170,7 +1191,3 @@ function on_log(text) {
 }
 
 build_hexes()
-
-drag_element_with_mouse("#battle", "#battle_header")
-drag_element_with_mouse("#pursuit", "#pursuit_header")
-scroll_with_middle_mouse("main")