Battle box.

1 files changed, 59 insertions, 15 deletions

diff --git a/play.js b/play.js
index ca2e644..329c94a 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" })
-}
-
 const LANCASTER = "Lancaster"
 const YORK = "York"
 const ENEMY = { York: "Lancaster", Lancaster: "York" }
@@ -148,7 +142,7 @@ function on_blur_space_tip(x) {
 }
 
 function on_click_space_tip(x) {
-	ui.areas[x].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" })
+	scroll_into_view(ui.areas[x])
 }
 
 function sub_space_name(match, p1, offset, string) {
@@ -578,6 +572,16 @@ function is_perma_dead(who) {
 	return false
 }
 
+function is_in_battle(b) {
+	if (view.battle) {
+		if (view.battle.LR.includes(b)) return true
+		if (view.battle.YR.includes(b)) return true
+		if (view.battle.LF.includes(b)) return true
+		if (view.battle.YF.includes(b)) return true
+	}
+	return false
+}
+
 function update_map() {
 	let overflow = { Lancaster: [], York: [], Rebel: [] }
 	let layout = {}
@@ -590,6 +594,8 @@ function update_map() {
 	for (let area = 0; area < AREAS.length; ++area)
 		layout[area] = { Lancaster: [], York: [] }
 
+	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]
@@ -621,6 +627,11 @@ function update_map() {
 		} else {
 			hide_block(element)
 		}
+
+		if (is_battle_open && is_in_battle(b))
+			element.classList.add("battle")
+		else
+			element.classList.remove("battle")
 	}
 
 	for (let area = 1; area < AREAS.length; ++area) {
@@ -639,6 +650,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)
@@ -646,6 +658,8 @@ function update_map() {
 			ui.areas[area].classList.add('highlight')
 	if (view.where !== NOWHERE)
 		ui.areas[view.where].classList.add('where')
+	if (view.battle)
+		ui.areas[view.where].classList.add('battle')
 
 	for (let b = 0; b < BLOCKS.length; ++b) {
 		ui.blocks[b].classList.remove('highlight')
@@ -717,6 +731,38 @@ function sort_battle_row(root) {
 	} while (swapped)
 }
 
+function show_battle() {
+	let box = document.getElementById("battle")
+	let space = AREAS[view.where].layout
+	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 < 60)
+		x = 60
+	if (x > 1688 - w - 60)
+		x = 1688 - w - 60
+
+	let y = space.y - sh - h - 60
+	if (y < 60)
+		y = space.y + sh + 60
+
+	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]
@@ -816,25 +862,23 @@ function on_update() {
 		remember_position(ui.cards[c])
 
 	update_cards()
-	update_map()
 
 	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")
 	}
 
+	update_map()
+
 	for (let c = 1; c <= 25; ++c)
 		animate_position(ui.cards[c])
 }
 
-build_map()
+document.getElementById("battle").addEventListener("toggle", on_update)
 
-drag_element_with_mouse("#battle", "#battle_header")
-scroll_with_middle_mouse("main", 2)
+build_map()