Battle dialog.

1 files changed, 134 insertions, 20 deletions

diff --git a/play.js b/play.js
index 125bb19..615c25a 100644
--- a/play.js
+++ b/play.js
@@ -6,7 +6,7 @@ const svgNS = "http://www.w3.org/2000/svg"
 const round = Math.round
 const sqrt = Math.sqrt
 
-function set_index(set, item) {
+function set_has(set, item) {
 	let a = 0
 	let b = set.length - 1
 	while (a <= b) {
@@ -17,13 +17,9 @@ function set_index(set, item) {
 		else if (item > x)
 			a = m + 1
 		else
-			return m
+			return true
 	}
-	return -1
-}
-
-function set_has(set, item) {
-	return set_index(set, item) >= 0
+	return false
 }
 
 let ui = {
@@ -32,10 +28,31 @@ let ui = {
 	hex_x: [],
 	hex_y: [],
 	units: [],
+	battle_units: [],
+	battle: document.getElementById("battle"),
+	battle_hits: [
+		document.getElementById("hits_armor"),
+		document.getElementById("hits_infantry"),
+		document.getElementById("hits_antitank"),
+		document.getElementById("hits_artillery")
+	],
+	battle_buttons: [
+		document.getElementById("target_armor_button"),
+		document.getElementById("target_infantry_button"),
+		document.getElementById("target_antitank_button"),
+		document.getElementById("target_artillery_button")
+	],
+	battle_header: document.getElementById("battle_header"),
+	battle_message: document.getElementById("battle_message"),
+	battle_line_1: document.getElementById("battle_line_1"),
+	battle_line_2: document.getElementById("battle_line_2"),
 	onmap: document.getElementById("units"),
 	focus: null,
 }
 
+const AXIS = 'Axis'
+const ALLIED = 'Allied'
+
 function unit_hex(u) {
 	return view.units[u] >>> 5
 }
@@ -56,6 +73,10 @@ function is_unit_moved(u) {
 	return (view.units[u] & 16) === 16
 }
 
+function is_unit_fired(u) {
+	return set_has(view.fired, u)
+}
+
 function is_unit_action(unit) {
 	return !!(view.actions && view.actions.unit && view.actions.unit.includes(unit))
 }
@@ -64,6 +85,14 @@ function is_unit_selected(unit) {
 	return !!(view.selected && view.selected.includes(unit))
 }
 
+function is_allied_unit(u) {
+	return units[u].nationality === 'allied'
+}
+
+function is_axis_unit(u) {
+	return units[u].nationality !== 'allied'
+}
+
 function is_hex_action(hex) {
 	return !!(view.actions && view.actions.hex && view.actions.hex.includes(hex))
 }
@@ -137,6 +166,12 @@ function on_click_unit(evt) {
 	}
 }
 
+function on_click_battle_unit(evt) {
+	if (evt.button === 0) {
+		send_action('unit', evt.target.unit)
+	}
+}
+
 document.getElementById("map").addEventListener("mousedown", function (evt) {
 	if (evt.button === 0) {
 		blur_stack()
@@ -158,6 +193,12 @@ function on_focus_unit(evt) {
 	document.getElementById("status").textContent = `(${u}) ${data.nationality} ${data.elite ? "elite " : ""}${data.type} - ${data.steps} - ${data.name}`
 }
 
+function on_focus_battle_unit(evt) {
+	let u = evt.target.unit
+	let data = units[u]
+	document.getElementById("status").textContent = `(${u}) ${data.nationality} ${data.elite ? "elite " : ""}${data.type} - ${data.steps} - ${data.name}`
+}
+
 function toggle_units() {
 	document.getElementById("units").classList.toggle("hide")
 }
@@ -281,11 +322,18 @@ function build_hexes() {
 function build_units() {
 	function build_unit(u, data) {
 		let elt = ui.units[u] = document.createElement("div")
-		elt.className = `unit ${data.nationality} u${u} r0`
+		elt.className = `unit ${data.nationality} u${u} r0 m`
 		elt.addEventListener("mousedown", on_click_unit)
 		elt.addEventListener("mouseenter", on_focus_unit)
 		elt.addEventListener("mouseleave", on_blur)
 		elt.unit = u
+
+		elt = ui.battle_units[u] = document.createElement("div")
+		elt.className = `unit ${data.nationality} u${u} r0`
+		elt.addEventListener("mousedown", on_click_battle_unit)
+		elt.addEventListener("mouseenter", on_focus_battle_unit)
+		elt.addEventListener("mouseleave", on_blur)
+		elt.unit = u
 	}
 	for (let u = 0; u < units.length; ++u) {
 		build_unit(u, units[u])
@@ -322,19 +370,22 @@ function update_map() {
 			let x, y, z
 
 			if (stack[hex] === ui.focus) {
-				x = ui.hex_x[hex] - 30
-				y = ui.hex_y[hex] - 30 + i * 64
+				x = ui.hex_x[hex] - 25
+				y = ui.hex_y[hex] - 25 + i * 54
 				z = 100
 			} else {
-				if (stack[hex].length <= 4) {
-					x = ui.hex_x[hex] - 30 + i * 13
-					y = ui.hex_y[hex] - 30 + i * 16
+				if (stack[hex].length <= 1) {
+					x = ui.hex_x[hex] - 25 + i * 11
+					y = ui.hex_y[hex] - 25 + i * 14
+				} else if (stack[hex].length <= 4) {
+					x = ui.hex_x[hex] - 30 + i * 11
+					y = ui.hex_y[hex] - 30 + i * 14
 				} else if (stack[hex].length <= 8) {
-					x = ui.hex_x[hex] - 30 + i * 8
-					y = ui.hex_y[hex] - 30 + i * 8
+					x = ui.hex_x[hex] - 35 + i * 4
+					y = ui.hex_y[hex] - 35 + i * 4
 				} else {
-					x = ui.hex_x[hex] - 30 + i * 3
-					y = ui.hex_y[hex] - 30 + i * 3
+					x = ui.hex_x[hex] - 35 + i * 2
+					y = ui.hex_y[hex] - 35 + i * 2
 				}
 				z = 1 + i
 			}
@@ -349,12 +400,13 @@ function update_map() {
 			e.classList.toggle("r2", r === 2)
 			e.classList.toggle("r3", r === 3)
 
-			e.classList.toggle("action", is_unit_action(u))
-			e.classList.toggle("selected", is_unit_selected(u))
+			e.classList.toggle("action", !view.battle && is_unit_action(u))
+			e.classList.toggle("selected", !view.battle && is_unit_selected(u))
 			e.classList.toggle("disrupted", is_unit_disrupted(u))
 			e.classList.toggle("moved", is_unit_moved(u))
 			// e.classList.toggle("unsupplied", !is_unit_supplied(u))
 		}
+
 		if (ui.hexes[hex]) {
 			ui.hexes[hex].classList.toggle("action", is_hex_action(hex))
 			ui.hexes[hex].classList.toggle("from", hex === view.from1 || hex === view.from2)
@@ -379,13 +431,74 @@ function update_map() {
 	}
 }
 
+function update_battle_line(line, test) {
+	for (let u = 0; u < units.length; ++u) {
+		let e = ui.battle_units[u]
+		if (unit_hex(u) === view.battle && test(u)) {
+			if (!line.contains(e))
+				line.appendChild(e)
+
+			let r = unit_lost_steps(u)
+			e.classList.toggle("r0", r === 0)
+			e.classList.toggle("r1", r === 1)
+			e.classList.toggle("r2", r === 2)
+			e.classList.toggle("r3", r === 3)
+
+			e.classList.toggle("action", is_unit_action(u))
+			e.classList.toggle("selected", is_unit_selected(u))
+			e.classList.toggle("disrupted", is_unit_disrupted(u))
+			e.classList.toggle("fire", is_unit_fired(u))
+		} else {
+			if (line.contains(e))
+				line.removeChild(e)
+		}
+	}
+}
+
+function update_battle() {
+	ui.battle.classList.remove("hide")
+	ui.battle_header.textContent = hex_name[view.battle]
+	ui.battle_message.textContent = view.flash
+	if (player === ALLIED) {
+		update_battle_line(ui.battle_line_1, is_axis_unit)
+		update_battle_line(ui.battle_line_2, is_allied_unit)
+	} else {
+		update_battle_line(ui.battle_line_1, is_allied_unit)
+		update_battle_line(ui.battle_line_2, is_axis_unit)
+	}
+	target_button("target_armor")
+	target_button("target_infantry")
+	target_button("target_antitank")
+	target_button("target_artillery")
+}
+
+function target_button(action) {
+	let button = document.getElementById(action + "_button")
+	if (view.actions) {
+		button.classList.remove("hide")
+		if (view.actions[action])
+			button.disabled = false
+		else
+			button.disabled = true
+	} else {
+		button.classList.add("hide")
+	}
+}
+
 function on_update() {
 	update_map()
 
+	if (view.battle)
+		update_battle()
+	else
+		ui.battle.classList.add("hide")
+
 	action_button("overrun", "Overrun")
 	action_button("rommel", "Rommel")
-	action_button("end_move", "End move")
 	action_button("stop", "Stop")
+	action_button("end_move", "End move")
+
+	action_button("end_combat", "End combat")
 
 	action_button("group", "Group")
 	action_button("regroup", "Regroup")
@@ -400,4 +513,5 @@ function on_update() {
 	action_button("undo", "Undo")
 }
 
+drag_element_with_mouse("#battle", "#battle_header")
 scroll_with_middle_mouse("main")