Battle box.

3 files changed, 79 insertions, 34 deletions

diff --git a/play.css b/play.css
index 12b1b9d..bc2a2ac 100644
--- a/play.css
+++ b/play.css
@@ -125,10 +125,6 @@ header.your_turn { background-color: orange; }
 	position: absolute;
 }
 
-#map svg image {
-	pointer-events: none;
-}
-
 #map svg path.area {
 	fill-opacity: 0;
 	fill: white;
@@ -155,7 +151,6 @@ header.your_turn { background-color: orange; }
 /* TURN MARKER */
 
 div.turn {
-	pointer-events: none;
 	position: absolute;
 	width: 66px;
 	height: 66px;
@@ -197,11 +192,11 @@ body.shift .block.known:hover {
 .oldblocks div.block { border-radius: 8px; }
 .newblocks div.block { border-radius: 4px; }
 
-#map div.block {
+#blocks > div.block {
 	position: absolute;
 }
 
-#battle div.block {
+#battle > div.block {
 	position: relative;
 }
 
@@ -239,11 +234,23 @@ div.block.r3 { transform: rotate(-270deg); }
 div.block:hover { z-index: 1; }
 
 div.block {
-	transition-property: top, left, transform;
-	transition-duration: 700ms, 700ms, 200ms;
-	transition-timing-function: ease;
+	transition-property: top, left, transform, opacity;
+	transition-duration: 700ms, 700ms, 250ms, 250ms;
+	transition-timing-function: ease, ease, ease, linear;
 }
 
+/* BATTLE BOX HIDING */
+
+#map svg path.area.battle {
+	fill-opacity: 0.5;
+	fill: black;
+}
+
+/*
+div.block.battle { filter: grayscale(60%) brightness(60%) !important }
+*/
+div.block.battle { opacity: 0; pointer-events: none }
+
 /* HERALD DIALOG */
 
 #herald {
@@ -262,8 +269,6 @@ body.Scotland #herald li.action:hover { background-color: hsl(0, 59%, 35%); }
 
 /* BATTLE BOARD */
 
-#battle { top: 160px; left: 185px; }
-
 #battle { background-color: silver; }
 #battle_message { background-color: lightsteelblue; }
 #battle_header { background-color: steelblue; color: white; }
diff --git a/play.html b/play.html
index c81d84e..bae7d80 100644
--- a/play.html
+++ b/play.html
@@ -41,7 +41,7 @@
 			<menu>
 				<li onclick="old_block_style()">Classic labels
 				<li onclick="new_block_style()">New labels
-				<li class="menu_separator">
+				<li class="separator">
 				<li><a href="info/notes.html" target="_blank">Notes</a>
 				<li><a href="info/rules.html" target="_blank">Rules</a>
 				<li><a href="info/cards.html" target="_blank">Cards</a>
@@ -86,14 +86,14 @@
 <div id="mapwrap">
 <div id="map">
 
-<div id="battle">
-<div id="battle_header"></div>
+<details id="battle">
+<summary id="battle_header"></summary>
 <div id="ER"></div>
 <div id="EF"></div>
 <div id="FF"></div>
 <div id="FR"></div>
 <div id="battle_message"></div>
-</div>
+</details>
 
 <svg id="svgmap" width="1688px" height="1950px" viewBox="0 0 1688 1950">
 <g id="areas" transform="translate(0,1950) scale(0.1,-0.1)">
diff --git a/play.js b/play.js
index 3c91b19..e45fa4e 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
@@ -131,7 +125,7 @@ function on_blur_area_tip(x) {
 }
 
 function on_click_area_tip(x) {
-	ui.areas[x].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" })
+	scroll_into_view(ui.areas[x])
 }
 
 function sub_area_name(match, p1, offset, string) {
@@ -525,6 +519,16 @@ function hide_block(element) {
 		ui.offmap_element.appendChild(element)
 }
 
+function is_in_battle(b) {
+	if (view.battle) {
+		if (view.battle.ER.includes(b)) return true
+		if (view.battle.SR.includes(b)) return true
+		if (view.battle.EF.includes(b)) return true
+		if (view.battle.SF.includes(b)) return true
+	}
+	return false
+}
+
 function update_map() {
 	let overflow = { England: [], Scotland: [] }
 	let layout = {}
@@ -544,12 +548,15 @@ function update_map() {
 		}
 	}
 
+	let is_battle_open = document.getElementById("battle").getAttribute("open") !== null
+
 	for (let b = 0; b < BLOCKS.length; ++b) {
 		let info = BLOCKS[b]
 		let element = ui.blocks[b]
 		let area = view.location[b]
 		if (area > 0 || BLOCKS[b].mortal) {
 			let moved = (set_has(view.moved, b) && view.who !== b) ? " moved" : ""
+			let battle = (is_battle_open && is_in_battle(b)) ? " battle" : ""
 			if (is_known_block(b) || area === 0) {
 				let image = " block_" + info.image
 				let steps = " r" + (info.steps - view.steps[b])
@@ -558,9 +565,9 @@ function update_map() {
 					moved = " moved"
 					steps = " r0"
 				}
-				element.classList = info.owner + known + " block" + image + steps + moved
+				element.classList = info.owner + known + " block" + image + steps + moved + battle
 			} else {
-				element.classList = info.owner + " block" + moved
+				element.classList = info.owner + " block" + moved + battle
 			}
 			if (area > 0) {
 				if (info.owner === "Scotland")
@@ -583,6 +590,7 @@ function update_map() {
 		if (ui.areas[area]) {
 			ui.areas[area].classList.remove('highlight')
 			ui.areas[area].classList.remove('where')
+			ui.areas[area].classList.remove('battle')
 		}
 	}
 	if (view.actions && view.actions.area)
@@ -601,6 +609,8 @@ function update_map() {
 				ui.blocks[b].classList.add('highlight')
 		if (view.who >= 0)
 			ui.blocks[view.who].classList.add('selected')
+	} else {
+		ui.areas[view.where].classList.add('battle')
 	}
 }
 
@@ -655,6 +665,38 @@ function insert_battle_block(root, node, block) {
 	root.appendChild(node)
 }
 
+function show_battle() {
+	let box = document.getElementById("battle")
+	let space = AREAS[view.where]
+	let sh = ui.areas[view.where].getBoundingClientRect().height >> 1
+
+	// 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 = space.x - w / 2
+	if (x < 130)
+		x = 130
+	if (x > 1460 - w)
+		x = 1460 - w
+
+	let y = space.y - sh - h - 40
+	if (y < 200)
+		y = space.y + sh + 40
+
+	box.style.top = y + "px"
+	box.style.left = x + "px"
+
+	scroll_into_view_if_needed(box)
+}
+
 function update_battle() {
 	function fill_cell(name, list, reserve) {
 		let cell = window[name]
@@ -747,11 +789,10 @@ function on_update() {
 	document.getElementById("scotland_vp").textContent = view.s_vp
 	document.getElementById("turn_info").textContent = `Turn ${view.turn} of Year ${view.year}`
 
-	for (let c = 1; c <= 25; ++c) {
+	for (let c = 1; c <= 25; ++c)
 		remember_position(ui.cards[c])
 
 	update_cards()
-	update_map()
 
 	if (view.actions && view.actions.noble) {
 		document.getElementById("herald").style.display = "block"
@@ -772,18 +813,17 @@ function on_update() {
 	if (view.battle) {
 		document.getElementById("battle_header").textContent = view.battle.title
 		document.getElementById("battle_message").textContent = view.battle.flash
-		if (!document.getElementById("battle").classList.contains("show")) {
-			document.getElementById("battle").classList.add("show")
-			scroll_into_view_if_mobile(document.getElementById("battle"))
-		}
 		update_battle()
+		if (!document.getElementById("battle").classList.contains("show"))
+			show_battle()
 	} else {
 		document.getElementById("battle").classList.remove("show")
 	}
 
-	for (let c = 1; c <= 25; ++c) {
+	update_map()
+
+	for (let c = 1; c <= 25; ++c)
 		animate_position(ui.cards[c])
 }
 
-drag_element_with_mouse("#battle", "#battle_header")
-scroll_with_middle_mouse("main", 2)
+document.getElementById("battle").addEventListener("toggle", on_update)