Battle box #2.

1 files changed, 29 insertions, 7 deletions

diff --git a/play.js b/play.js
index e404ab0..cf4f4d7 100644
--- a/play.js
+++ b/play.js
@@ -603,6 +603,18 @@ function is_known_block(info, who, town) {
 	return false
 }
 
+function is_in_battle(b) {
+	if (view.battle) {
+		if (view.battle.FR.includes(b)) return true
+		if (view.battle.FC.includes(b)) return true
+		if (view.battle.FF.includes(b)) return true
+		if (view.battle.SR.includes(b)) return true
+		if (view.battle.SC.includes(b)) return true
+		if (view.battle.SF.includes(b)) return true
+	}
+	return false
+}
+
 function update_map() {
 	let layout = {}
 
@@ -622,11 +634,14 @@ function update_map() {
 	for (let t = 0; t < TOWNS.length; ++t)
 		layout[t] = { north: [], south: [] }
 
+	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 town = view.location[b]
 		let moved = (set_has(view.moved, b) && b !== view.who) ? " moved" : ""
+		let battle = (is_battle_open && is_in_battle(b)) ? " battle" : ""
 		if (town === DEAD) {
 			moved = " moved"
 		}
@@ -638,7 +653,7 @@ function update_map() {
 			let image = " block_" + info.image
 			let steps = " r" + (info.steps - view.steps[b])
 			let known = " known"
-			element.classList = info.owner + known + " block" + image + steps + moved
+			element.classList = info.owner + known + " block" + image + steps + moved + battle
 		} else {
 			let besieging = ""
 			if (view.sieges[town] === info.owner) {
@@ -650,7 +665,7 @@ function update_map() {
 			let jihad = ""
 			if (view.jihad === town && info.owner === view.p1)
 				jihad = " jihad"
-			element.classList = info.owner + " block" + moved + besieging + jihad
+			element.classList = info.owner + " block" + moved + besieging + jihad + battle
 		}
 		if (town !== DEAD) {
 			if (info.owner === FRANKS)
@@ -693,6 +708,7 @@ function update_map() {
 			ui.towns[t].classList.remove('highlight')
 			ui.towns[t].classList.remove('muster')
 			ui.towns[t].classList.remove('bad')
+			ui.towns[t].classList.remove('battle')
 		}
 	}
 	if (view.actions && view.actions.town) {
@@ -713,6 +729,8 @@ function update_map() {
 		if (view.actions && view.actions.block)
 			for (let b of view.actions.block)
 				ui.blocks[b].classList.add('highlight')
+	} else {
+		ui.towns[view.battle.town].classList.add('battle')
 	}
 	if (view.who >= 0 && !view.battle)
 		ui.blocks[view.who].classList.add('selected')
@@ -807,7 +825,6 @@ function show_battle() {
 		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
@@ -822,7 +839,6 @@ function show_battle() {
 
 		// 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)
@@ -832,7 +848,7 @@ function show_battle() {
 		box.style.left = x + "px"
 	}
 
-	scroll_into_view_if_mobile(box)
+	scroll_into_view_if_needed(box)
 }
 
 function update_battle() {
@@ -974,7 +990,8 @@ function on_update() {
 		if (view.flash_next)
 			start_flash()
 		update_battle()
-		show_battle()
+		if (!document.getElementById("battle").classList.contains("show"))
+			show_battle()
 	} else {
 		document.getElementById("battle").classList.remove("show")
 	}
@@ -985,7 +1002,12 @@ function on_update() {
 
 window.addEventListener("resize", function (evt) {
 	if (view && view.battle)
-		setTimeout(show_battle, 1)
+		setTimeout(function () {
+			document.getElementById("battle").classList.remove("show")
+			show_battle()
+		}, 1)
 })
 
+document.getElementById("battle").addEventListener("toggle", on_update)
+
 build_map()