Show battle box near battle site.

1 files changed, 60 insertions, 14 deletions

diff --git a/play.js b/play.js
index 6f05391..e404ab0 100644
--- a/play.js
+++ b/play.js
@@ -1,11 +1,5 @@
 "use strict"
 
-function scroll_into_view_if_mobile(e) {
-	// if ("ontouchstart" in window)
-	if (window.innerWidth <= 800)
-		e.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" })
-}
-
 function set_has(set, item) {
 	let a = 0
 	let b = set.length - 1
@@ -166,7 +160,7 @@ function on_blur_space_tip(x) {
 }
 
 function on_click_space_tip(x) {
-	ui.towns[x].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" })
+	scroll_into_view(ui.towns[x])
 }
 
 function sub_space_name(match, p1, offset, string) {
@@ -788,6 +782,59 @@ function insert_battle_block(root, node, block) {
 	root.appendChild(node)
 }
 
+function show_battle() {
+	let box = document.getElementById("battle")
+	let space = TOWNS[view.battle.town].layout
+	let rotate = false
+
+	// reset position
+	box.classList.add("show")
+	box.style.top = null
+	box.style.left = null
+	box.style.bottom = null
+	box.style.right = null
+	box.setAttribute("open", true)
+
+	// calculate size
+	let w = box.clientWidth
+	let h = box.clientHeight
+
+	/* LANDSCAPE selector */
+	if (window.matchMedia("(min-width: 2000px)").matches) {
+		let x = space.y - w / 2
+		if (x < 80)
+			x = 80
+		if (x > 2475 - w - 80)
+			x = 2475 - w - 80
+
+		//let y = space.x - h - 120 if (y < 80) y = space.x + 120
+		let y = space.x + h + 120
+		if (y > 1275)
+			y = space.x - 120
+
+		box.style.top = x + "px"
+		box.style.left = y + "px"
+	} else {
+		// place above town if possible, else below
+		let y = space.y - h - 120
+		if (y < 80)
+			y = space.y + 120
+
+		// place centered above town if possible, clamp to edges
+		let x = space.x - w / 2
+		console.log("XY", space.x, w, x)
+		if (x < 80)
+			x = 80
+		if (x > 1275 - w - 80)
+			x = 1275 - w - 80
+
+		box.style.top = y + "px"
+		box.style.left = x + "px"
+	}
+
+	scroll_into_view_if_mobile(box)
+}
+
 function update_battle() {
 	function fill_cell(name, list, show) {
 		let cell = document.getElementById(name)
@@ -926,11 +973,8 @@ function on_update() {
 		document.getElementById("battle_message").textContent = view.battle.flash
 		if (view.flash_next)
 			start_flash()
-		if (!document.getElementById("battle").classList.contains("show")) {
-			document.getElementById("battle").classList.add("show")
-			scroll_into_view_if_mobile(document.getElementById("battle"))
-		}
 		update_battle()
+		show_battle()
 	} else {
 		document.getElementById("battle").classList.remove("show")
 	}
@@ -939,7 +983,9 @@ function on_update() {
 		animate_position(ui.cards[c])
 }
 
-build_map()
+window.addEventListener("resize", function (evt) {
+	if (view && view.battle)
+		setTimeout(show_battle, 1)
+})
 
-drag_element_with_mouse("#battle", "#battle_header")
-scroll_with_middle_mouse("main", 3)
+build_map()