From 68d249e1cff4b1638e4eefa463f3a680ffd62d6c Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Thu, 7 Jul 2022 23:48:36 +0200 Subject: Battle dialog. --- play.js | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 134 insertions(+), 20 deletions(-) (limited to 'play.js') 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") -- cgit v1.2.3