Battle box.

4 files changed, 99 insertions, 36 deletions

diff --git a/play.css b/play.css
index 08c5229..39a21f2 100644
--- a/play.css
+++ b/play.css
@@ -118,8 +118,6 @@ header.your_turn { background-color: orange; }
 
 /* BATTLE BOARD */
 
-#battle { top: 60px; left: 160px; }
-
 #battle { background-color: tan; }
 #battle_message { background-color: wheat; }
 #battle_header { background-color: brown; color: lemonchiffon; }
@@ -185,6 +183,16 @@ header.your_turn { background-color: orange; }
 	border-style: dashed;
 	z-index: 9;
 }
+.space.battle {
+	opacity: 1;
+	border-color: #700c;
+	background-color: #6008;
+}
+.space.sea.battle {
+	opacity: 1;
+	border-color: #037c;
+	background-color: #0368;
+}
 
 #blocks.hide_blocks {
 	display: none;
@@ -196,11 +204,12 @@ body.shift .block.known:hover {
 	z-index: 100;
 }
 
-#battle .block { position: relative; }
-#map .block { position: absolute; z-index: 2; }
-#map .block.highlight { z-index: 3; }
-#map .block.selected { z-index: 4; }
-#map .block.known:hover { z-index: 5; }
+#battle > .block { position: relative; }
+
+#blocks > .block { position: absolute; z-index: 2; }
+#blocks > .block.highlight { z-index: 3; }
+#blocks > .block.selected { z-index: 4; }
+#blocks > .block.known:hover { z-index: 5; }
 
 .block.highlight { cursor: pointer; }
 
@@ -248,6 +257,11 @@ body.shift .block.known:hover {
 	background-position: center;
 }
 
+/*
+.block.battle { filter: grayscale(60%) brightness(60%) !important }
+*/
+.block.battle { opacity: 0; pointer-events: none; }
+
 body.Observer .simple-labels .known.jupiter.Caesar { border: 2px solid #862; }
 body.Observer .simple-labels .known.jupiter.Pompeius { border: 2px solid #822; }
 body.Observer .simple-labels .known.jupiter.Cleopatra { border: 2px solid #822; }
@@ -258,9 +272,9 @@ body.Observer .columbia-labels .known.jupiter.Cleopatra { border: 3px solid #822
 .block { box-shadow: 0px 0px 4px 0px black; }
 
 .block {
-	transition-property: top, left, transform, filter;
-	transition-duration: 700ms, 700ms, 300ms, 300ms;
-	transition-timing-function: ease;
+	transition-property: top, left, transform, opacity;
+	transition-duration: 700ms, 700ms, 250ms, 250ms;
+	transition-timing-function: ease, ease, ease, linear;
 }
 
 #replay_panel {
diff --git a/play.html b/play.html
index bf2781f..779559c 100644
--- a/play.html
+++ b/play.html
@@ -66,15 +66,17 @@
 
 <main data-min-zoom="1" data-max-zoom="2">
 	<div id="mapwrap">
-		<div id="battle">
-			<div id="battle_header"></div>
-			<div id="ER"></div>
-			<div id="EF"></div>
-			<div id="FF"></div>
-			<div id="FR"></div>
-			<div id="battle_message"></div>
-		</div>
 		<div id="map">
+
+			<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>
+			</details>
+
 			<div id="offmap" style="visibility:hidden"></div>
 			<div id="blocks"></div>
 			<div id="spaces"></div>
diff --git a/play.js b/play.js
index 0fedce8..7c89572 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
@@ -150,7 +144,7 @@ function on_blur_space_tip(x) {
 }
 
 function on_click_space_tip(x) {
-	ui.spaces[x].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" })
+	scroll_into_view(ui.spaces[x])
 }
 
 function sub_space_name(match, p1, offset, string) {
@@ -559,13 +553,26 @@ function is_visible_block(where, who) {
 	return true
 }
 
+function is_in_battle(b) {
+	if (view.battle) {
+		if (view.battle.CR.includes(b)) return true
+		if (view.battle.PR.includes(b)) return true
+		if (view.battle.CF.includes(b)) return true
+		if (view.battle.PF.includes(b)) return true
+	}
+	return false
+}
+
 function update_map() {
 	let layout = {}
 
 	for (let s = 0; s < space_count; ++s)
 		layout[s] = { north: [], south: [] }
 
+	let is_battle_open = document.getElementById("battle").getAttribute("open") !== null
+
 	for (let b in view.location) {
+		b = b | 0
 		let info = BLOCKS[b]
 		let element = ui.blocks[b]
 		let space = view.location[b]
@@ -573,10 +580,13 @@ function update_map() {
 			let moved = set_has(view.moved, b) ? " moved" : ""
 			if (space === DEAD && info.type !== 'leader')
 				moved = " moved"
+			let battle = ""
+			if (is_battle_open && is_in_battle(b))
+				battle = " battle"
 			if (is_known_block(b)) {
 				let image = " block_" + b
 				let known = " known"
-				element.classList = block_color(b) + known + " block" + image + moved
+				element.classList = block_color(b) + known + " block" + image + moved + battle
 				update_steps(b, element, true)
 			} else {
 				let jupiter = ""
@@ -588,7 +598,7 @@ function update_map() {
 					mars = " mars"
 				if (block_owner(b) === view.neptune && space === view.surprise)
 					neptune = " neptune"
-				element.classList = block_color(b) + " block" + moved + jupiter + mars + neptune
+				element.classList = block_color(b) + " block" + moved + jupiter + mars + neptune + battle
 			}
 			if (block_owner(b) === CAESAR)
 				layout[space].north.push(element)
@@ -609,6 +619,7 @@ function update_map() {
 		if (ui.spaces[s]) {
 			ui.spaces[s].classList.remove('highlight')
 			ui.spaces[s].classList.remove('where')
+			ui.spaces[s].classList.remove('battle')
 		}
 	}
 	if (view.actions && view.actions.space)
@@ -625,6 +636,8 @@ function update_map() {
 				ui.blocks[b].classList.add('highlight')
 		if (view.who >= 0)
 			ui.blocks[view.who].classList.add('selected')
+	} else {
+		ui.spaces[view.battle.where].classList.add('battle')
 	}
 
 	for (let b = 0; b < block_count; ++b) {
@@ -660,6 +673,37 @@ function sort_battle_row(root, ballista) {
 	} while (swapped)
 }
 
+function show_battle() {
+	let box = document.getElementById("battle")
+	let space = SPACES[view.battle.where].layout
+
+	// 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 < 140)
+		x = 140
+	if (x > 2475 - w - 60)
+		x = 2475 - w - 60
+
+	let y = space.y - h - 120
+	if (y < 50)
+		y = space.y + 120
+
+	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, ballista) {
 		let cell = window[name]
@@ -707,6 +751,10 @@ function update_battle() {
 				ui.battle_block[block].classList.remove("known")
 			else
 				ui.battle_block[block].classList.add("known")
+			if (set_has(view.traitor, block))
+				ui.battle_block[block].classList.add("jupiter")
+			else
+				ui.battle_block[block].classList.remove("jupiter")
 		}
 
 		for (let b = 0; b < block_count; ++b) {
@@ -798,20 +846,19 @@ 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()
+
 	ui.old_location = Object.assign({}, view.location)
 	ui.old_steps = Object.assign({}, view.steps)
 
@@ -823,10 +870,9 @@ function select_card(c) {
 	send_action('card', c)
 }
 
+document.getElementById("battle").addEventListener("toggle", on_update)
+
 build_map()
 
 document.getElementById("blocks").classList.add(label_style+'-labels')
 document.getElementById("battle").classList.add(label_style+'-labels')
-
-drag_element_with_mouse("#battle", "#battle_header")
-scroll_with_middle_mouse("main")
diff --git a/rules.js b/rules.js
index f082338..7105997 100644
--- a/rules.js
+++ b/rules.js
@@ -2788,7 +2788,8 @@ function make_battle_view() {
 		A: attacker,
 		CF: [], CR: [],
 		PF: [], PR: [],
-		flash: game.flash
+		flash: game.flash,
+		where: game.where
 	}
 
 	bv.title = attacker