Place battle and pursuit boxes next to the hexes.

1 files changed, 37 insertions, 20 deletions

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")