Show battle box near battle site.

3 files changed, 69 insertions, 25 deletions

diff --git a/play.css b/play.css
index 8f77a7c..b1bc25e 100644
--- a/play.css
+++ b/play.css
@@ -296,8 +296,6 @@ body.shift .block.known:hover {
 
 #battle {
 	background-color: tan;
-	left: calc(90px + max(0px, calc(50% - (1275px + 48px) / 2)));
-	top: 320px;
 }
 #battle_message {
 	background-color: gainsboro;
@@ -353,8 +351,8 @@ body.shift .block.known:hover {
 
 @media (min-width: 2000px) {
 	#battle {
-		top: 745px;
-		left: calc(500px + max(0px, calc(50% - 2475px / 2)));
+		transform-origin: top left;
+		transform: rotate(90deg);
 	}
 	.hand {
 		width: 2475px;
diff --git a/play.html b/play.html
index 7e68f3e..eac2d0e 100644
--- a/play.html
+++ b/play.html
@@ -32,7 +32,7 @@
 				<li class="resign" onclick="confirm_resign()">Resign
 			</menu>
 		</details>
-		<div class="icon_button" onclick="toggle_blocks()"><img src="/images/earth-africa-europe.svg"></div>
+		<button onclick="toggle_blocks()"><img src="/images/earth-africa-europe.svg"></button>
 	</div>
 </header>
 
@@ -61,8 +61,11 @@
 
 <main data-min-zoom="1" data-max-zoom="2" data-map-width="1323" data-map-height="1323">
 
-<div id="battle">
-<div id="battle_header"></div>
+<div id="padmap">
+<div id="map">
+
+<details id="battle">
+<summary id="battle_header"></summary>
 <div id="ER"></div>
 <div id="EC"></div>
 <div id="EF"></div>
@@ -70,10 +73,7 @@
 <div id="FC"></div>
 <div id="FR"></div>
 <div id="battle_message"></div>
-</div>
-
-<div id="padmap">
-<div id="map">
+</details>
 
 <svg id="svgmap" width="1275px" height="2475px" viewBox="0 0 1275 2475">
 <path id="sea" d="M30 1201v1170l2-1c1 0 4-1 5-3 2-1 4-2 5-2 2 0 5-1 7-2 3-2 7-4 11-6 3-2 7-4 8-6 1-1 3-2 3-2 2 0 47-23 54-27 4-2 10-6 14-8 7-3 13-7 27-19 4-3 5-4 5-8l1-4h5c4 0 7-1 12-5 6-4 27-24 41-41 7-8 20-21 23-24 1-1 4-3 5-6l6-6c1-1 3-3 4-5 2-3 3-4 10-12 3-3 6-7 6-9 1-1 2-3 3-4 2-1 5-5 7-9 2-3 4-6 5-6 2 0 5-6 5-9 0-2 2-6 5-10s5-7 5-8 0-1 1-1 1-1 2-3c1-4 3-9 8-14 4-5 7-12 7-14 0-1 2-6 4-10 3-4 5-9 6-10 0-1 1-4 3-5 1-2 2-4 2-5 0 0 1-3 3-5 2-3 3-5 3-10 0-6 1-9 4-14 2-3 3-7 3-8 0-3 4-20 6-22 2-3 4-11 4-17 0-1 0-3 1-3 0 0 2-2 2-5 1-2 3-7 4-9 1-3 2-9 3-15 1-11 1-10 0-18 0-5 0-7 1-9s2-5 2-7c1-3 1-5 2-7 0-1 1-4 1-6v-8c4-22 4-23 3-26-1-2-1-4 0-6s1-8 1-13 1-9 1-10v-5c-1-3-1-8-1-12v-10-36c0-8-1-21-2-23 0-1-1-5-1-10 0-14-1-27-2-35-1-3-1-8-1-11s-2-10-5-17c-1-1-1-2 0-3 1-2 1-2 0-3 0-1-1-2 0-2 0-1 0-2-1-3 0-1 0-4-1-7 0-3-1-6-2-9-1-2-2-4-1-4 0-1-1-2-2-2-1-2-1-2 1-3s2-1 3-8c0-5 0-8-2-11-1-2-1-7-1-11-1-5-1-8-3-12-4-6-3-10 0-13 5-4 18-4 26 0l5 3 3-2c1-2 4-3 6-4 3-1 10-9 15-16 2-3 2-3 1-12-2-13-4-18-9-16-2 0-3 0-2-3 0-2-1-4-3-7-2-4-2-5-3-16 0-22-1-28-2-29s-1-2 0-3c2-1-1-9-3-12-2-1-2-2-1-5 0-4 2-7 8-9 9-5 10-5 10-6s1-3 3-5c1-2 2-5 2-6-1-1-1-2 0-3 1 0 1-2 1-2-1-2 0-2 3-2 2 0 4-1 6-3 3-3 4-9 3-10s0-2 1-3c4-3 3-5 0-16-2-5-3-6-6-8-2-1-6-2-8-2-5 0-5-2-1-2 6-2 7-2 8-4 0-2 1-5 2-8 0-3 1-6 2-7s1-3 1-3c-1-1 0-2 0-3 1 0 1-3 1-6v-13c0-4-1-8-1-9-1-2-1-3 1-4 2-2 2-2 1-5 0-2-1-4 0-4 0-1 1-3 2-5 1-3 1-4-1-5-1-1-1-1 2-3 2-2 3-3 3-4s1-2 3-2c4-2 12-10 16-16 2-2 3-4 4-4 0 0 1-1 2-3 1-1 2-4 4-6s2-3 2-6c-1-2-1-5-1-6s0-3-1-4-1-1 1-3c4-3 6-11 4-14-1-2-1-2 1-4 1-2 1-2 0-6-1-2-2-5-1-6 0 0 0-2-1-2-1-2 0-2 3-4l4-3-2-6c-1-3-2-7-3-7-2-1 1-4 4-4s7-4 7-8c0-1-1-4-2-5-2-3-3-6-2-7 1 0 1-1 1-2s2-6 5-11c4-7 4-9 4-13-1-11-12-33-16-33-2 0-7-3-7-4s5-4 8-5c1 0 7 0 12-1s10-1 11-2c3-2 6-1 7 1 1 3 3 4 3 2 0-3 3-5 7-6 7-2 11-4 13-9 1-2 2-4 2-5v-7c-1-4 0-6 1-7 1 0 2-2 1-4 0-2 0-3 3-4 1 0 3-2 3-3 1-1 2-2 5-2 5-1 8-5 6-8-1-2-6-4-11-4-1 0-3-1-4-1-2-2-1-13 0-16 1-1 2-5 2-9 1-8 1-9-2-12-2-2-4-4-5-4 0 0-2-1-2-3-2-2-3-3-6-4-6-1-7-1-7-3 0-1-1-3-2-5-1-3-2-5-2-7 0-1-1-3-2-4-1-3-1-5 3-7 3-3 6-9 4-11 0-1-1-3 0-4 0-1-1-2-3-4-3-3-3-3-2-4 1-2 1-2-2-3-4-3-4-4 1-8 3-2 3-3 3-6-1-4-1-4 4-6 4-3 5-3 8-2 7 1 14-2 15-6v-5c1-1 0-4 0-7-2-3-2-5-1-5 0-1 1-3 1-4 0-3 0-3 3-5 2 0 5-1 7-1 1 0 3-1 5-2 0-1 2-2 3-2l4-2c1-2 3-3 4-3 0 0 2-1 3-3 1-1 5-3 7-4 4-2 4-3 4-6 0-1-1-3-2-4-2-1-4-3-5-4-1-2-4-3-5-4-5-1-3-2 4-2 6 0 13-1 14-3 1-1 11-5 16-6 2-1 4-2 4-3 0-2 5-4 10-3 3 0 4 0 9-5 3-3 6-6 6-7 0-2 13-13 15-14 2 0 5-1 8-2l5-2v-6c0-5-1-7-4-14-2-4-6-10-8-12-5-6-28-25-36-28-2-1-6-5-9-8-4-3-7-6-8-7-4-1-8-6-11-12-2-5-3-7-7-9-2-2-5-3-5-3-1 0-9-5-10-6-5-5-19-15-22-16-1-1-2-2-2-3l-5-5c-7-5-9-9-9-15-1-4-2-7-5-9 0-1-1-2-1-4s0-3-1-3-1-2-2-4c0-3 0-4 4-8 2-2 4-5 4-5 0-2-12-14-15-16-4-2-5-6-3-9s1-5-3-7c-3-1-4-4-2-5 1-1 1-2 1-3s1-3 3-4c2-2 3-3 3-5 0-1 0-4 2-6 2-3 3-5 1-8s0-5 5-8c5-2 9-6 9-8 0-4-20-18-30-22-8-3-10-6-10-12-1-6-1-7-6-13-2-3-4-6-4-8 0-1-2-5-6-9-7-9-8-11-7-15 0-3 0-3-3-4-1-1-6-2-11-2-11-2-10-2-27-9-4-2-8-3-11-3s-10-1-15-2c-5 0-10-1-11-1-7 0-15 2-19 4s-8 2-9-1c0-1 0-3 1-4 2-3 1-6-1-8-1-1-6-2-13-3-14-2-15-2-13-5 1-2 1-3 0-4s-2-1-6 1c-2 1-4 2-5 2 0-1 4-4 11-8 5-2 7-3 7-5 0-1 1-2 3-3 1 0 2-1 2-3s0-3 1-4c1 0 1-1 1-3s-1-3-4-5c-2-2-5-3-6-4-4-1-5-3-2-7 1-2 3-3 7-4 5-1 5-1 8-7 1-3 3-6 5-7 1-1 3-4 3-7 1-3 3-7 3-8 1-1 1-3 1-4-1-3-11-13-17-16-3-2-7-5-10-8-2-2-5-4-7-4-1 0-2-1-3-2s-2-2-4-3l-3-1 7-2c3 0 9-1 12-2 7-1 12-3 18-7 5-4 7-8 7-15 0-5 1-7 10-14 1-1 2-3 2-4 0-3 5-14 9-18s5-6 4-9c0-2 0-3 4-5 6-2 6-4-1-9-6-4-9-7-14-13-2-1-5-4-7-6-3-2-7-5-8-7-2-1-6-3-9-4-2-1-5-2-6-3-2-1-13-6-15-6s-11-4-11-5c-1-1-9-5-18-10-18-8-30-15-35-18-2-2-12-5-31-10-7-3-12-7-12-11 0-2 1-4 5-7 4-4 6-7 7-10l2-5 9-5c10-4 12-6 12-12s1-7 8-10c10-5 11-7 11-12-1-4-1-5 4-9 4-5 9-8 21-12 4-1 11-4 15-7 9-4 10-5 11-9 2-8 8-13 18-16 8-2 11-6 12-13v-5H30v1171z"/>
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()