Battle box #2.

3 files changed, 44 insertions, 11 deletions

diff --git a/play.css b/play.css
index b1bc25e..0547a56 100644
--- a/play.css
+++ b/play.css
@@ -181,6 +181,12 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 	box-shadow: 0 0 0px 4px white;
 }
 
+.town.battle {
+	opacity: 1;
+	border-color: #700c;
+	background-color: #6008;
+}
+
 #sea {
 	fill: skyblue;
 	fill-opacity: 0.4;
@@ -286,10 +292,15 @@ body.shift .block.known:hover {
 .block.r2.halfhit { transform: rotate(-195deg); }
 .block.r3.halfhit { transform: rotate(-285deg); }
 
+/*
+.block.battle { filter: grayscale(60%) brightness(60%) !important }
+*/
+.block.battle { opacity: 0; pointer-events: none; }
+
 .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 BOARD */
diff --git a/play.html b/play.html
index eac2d0e..2dd0591 100644
--- a/play.html
+++ b/play.html
@@ -59,7 +59,7 @@
 	<div id="log"></div>
 </aside>
 
-<main data-min-zoom="1" data-max-zoom="2" data-map-width="1323" data-map-height="1323">
+<main data-min-zoom="1" data-max-zoom="2" data-map-width="1323" data-map-height="2475">
 
 <div id="padmap">
 <div id="map">
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()