From bcfb60a802e8297b984b3519c8fe70efa5129b89 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Mon, 5 Sep 2022 19:02:29 +0200 Subject: Add badges for disrupted/unsupplied enemy units. --- disrupted.svg | 1 + play.html | 44 +++++++++++++++++++++++----------------- play.js | 64 ++++++++++++++++++++++++++++------------------------------ rules.js | 39 +++++++++++++++++++++-------------- unsupplied.svg | 1 + 5 files changed, 83 insertions(+), 66 deletions(-) create mode 100644 disrupted.svg create mode 100644 unsupplied.svg diff --git a/disrupted.svg b/disrupted.svg new file mode 100644 index 0000000..d8d5e01 --- /dev/null +++ b/disrupted.svg @@ -0,0 +1 @@ + diff --git a/play.html b/play.html index f92658d..c35e8e7 100644 --- a/play.html +++ b/play.html @@ -317,22 +317,9 @@ svg .hex.action.forced_march { stroke: crimson; } -svg .hex.from { - stroke: yellow; - stroke-dasharray: none; -} - -svg .hex.to { - stroke: yellow; - stroke-dasharray: 4 4; -} - -svg .hex.to.from { - stroke-dasharray: 8 4; -} - svg .hex.selected { stroke: yellow; + stroke-dasharray: none; } svg .hex.tip { @@ -432,6 +419,7 @@ svg #lines line.axis_supply.allied_supply { .unit { background-size: 1000%; + background-repeat: no-repeat; border-style: solid; transition: top 200ms, left 200ms, transform 200ms; } @@ -455,8 +443,6 @@ svg #lines line.axis_supply.allied_supply { border-color: #b7a889; box-shadow: 0 0 2px 1px #5c3a1e80; } -/* -*/ /* .unit.axis { @@ -508,12 +494,34 @@ svg #lines line.axis_supply.allied_supply { border-color: #222; } +.unit.disrupted:not(.revealed) { + background-image: url(disrupted.svg); + background-size: 75%; + background-position: center; +} + .unit.unsupplied { - border-color: blue; + border-color: royalblue; +} + +.unit.unsupplied:not(.revealed) { + background-image: url(unsupplied.svg); + background-size: 75%; + background-position: center; } .unit.disrupted.unsupplied { - border-color: #222 blue; + border-color: #222 royalblue; +} + +.unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 { + border-color: royalblue #222; +} + +.unit.disrupted.unsupplied:not(.revealed) { + background-image: url(unsupplied.svg), url(disrupted.svg); + background-size: 50%, 50%; + background-position: 0% 90%, 90% 10%; } .unit.r0 { transform: rotate(0deg); } diff --git a/play.js b/play.js index ddb552c..64cdc30 100644 --- a/play.js +++ b/play.js @@ -242,9 +242,11 @@ function is_side_allied_supply_line(side) { } function is_hex_selected(hex) { - if (hex === view.pursuit || hex === view.battle) + if (hex === view.pursuit || hex === view.battle || hex === view.selected_hexes) return true - return hex === view.selected_hexes || set_has(view.selected_hexes, hex) + if (Array.isArray(view.selected_hexes) && view.selected_hexes.includes(hex)) + return true + return false } function is_setup_hex(hex) { @@ -645,6 +647,29 @@ function build_cards() { build_units() build_cards() +function update_unit(e, u) { + if (is_unit_revealed(u)) { + 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("revealed", true) + if (is_italian_unit(u)) + e.classList.toggle("italian", true) + } else { + e.classList.toggle("r0", false) + e.classList.toggle("r1", false) + e.classList.toggle("r2", false) + e.classList.toggle("r3", false) + e.classList.toggle("revealed", false) + if (is_italian_unit(u)) + e.classList.toggle("italian", false) + } + e.classList.toggle("disrupted", is_unit_disrupted(u)) + e.classList.toggle("unsupplied", is_unit_unsupplied(u)) +} + let stack_list = new Array(map_w * map_h + 21) for (let i = 0; i < stack_list.length; ++i) stack_list[i] = [[],[]] @@ -693,30 +718,11 @@ function layout_stack(stack, hex, start_x, start_y, wrap, xdir) { e.style.left = x + "px" e.style.zIndex = z - if (is_unit_revealed(u)) { - 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("revealed", true) - if (is_italian_unit(u)) - e.classList.toggle("italian", true) - } else { - e.classList.toggle("r0", false) - e.classList.toggle("r1", false) - e.classList.toggle("r2", false) - e.classList.toggle("r3", false) - e.classList.toggle("revealed", false) - if (is_italian_unit(u)) - e.classList.toggle("italian", false) - } + update_unit(e, 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_unsupplied(u)) } } @@ -838,8 +844,6 @@ function update_map() { if (ui.hexes[hex]) { ui.hexes[hex].classList.toggle("action", is_hex_action(hex) || is_hex_forced_march_action(hex)) ui.hexes[hex].classList.toggle("forced_march", is_hex_forced_march_action(hex)) - ui.hexes[hex].classList.toggle("from", hex === view.from1 || hex === view.from2) - ui.hexes[hex].classList.toggle("to", hex === view.to1 || hex === view.to2) ui.hexes[hex].classList.toggle("selected", is_hex_selected(hex)) ui.hexes[hex].classList.toggle("axis_control", is_hex_axis_controlled(hex)) ui.hexes[hex].classList.toggle("allied_control", is_hex_allied_controlled(hex)) @@ -881,18 +885,12 @@ function update_battle_line(hex, line, test) { if (!line.contains(e)) insert_battle_block(line, e, u) - 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) + update_unit(e, u) + e.classList.toggle("selected", is_unit_selected(u)) e.classList.toggle("action", is_unit_action(u) || is_unit_hit_action(u)) e.classList.toggle("hit", is_unit_hit_action(u)) - e.classList.toggle("selected", is_unit_selected(u)) - e.classList.toggle("disrupted", is_unit_disrupted(u)) - e.classList.toggle("moved", is_unit_fired(u)) - e.classList.toggle("revealed", is_unit_revealed(u)) + e.classList.toggle("fired", is_unit_fired(u)) } else { if (line.contains(e)) line.removeChild(e) diff --git a/rules.js b/rules.js index ead708f..2811b83 100644 --- a/rules.js +++ b/rules.js @@ -2965,10 +2965,10 @@ function goto_move_phase() { } function show_move_commands() { - if (game.from1) view.from1 = game.from1 - if (game.from2) view.from2 = game.from2 - if (game.to1) view.to1 = game.to1 - if (game.to2) view.to2 = game.to2 + if (game.from1 && game.from2) + view.selected_hexes = [ game.from1, game.from2 ] + else if (game.from1) + view.selected_hexes = game.from1 } states.select_moves = { @@ -3082,10 +3082,13 @@ states.group_move_from = { }, hex(x) { push_undo() - if (game.from1 === 0) + if (game.from1 === 0) { game.from1 = x - else + print_move_1() + } else { game.from2 = x + print_move_2() + } if (x === friendly_queue()) { for_each_friendly_unit_in_hex(friendly_queue(), u => { @@ -3176,10 +3179,13 @@ states.regroup_move_destination = { }, hex(x) { push_undo() - if (game.from2 === 0) + if (game.from2 === 0) { game.to1 = x - else + print_move_1() + } else { game.to2 = x + print_move_2() + } if (game.turn_option === 'offensive' && !game.from2) game.state = 'select_moves' else @@ -3212,30 +3218,35 @@ function search_current_move(who, is_retreat) { } } -function goto_move() { +function print_move_1() { if (game.rommel === 1) { if (game.from1 && game.to1) - log(`Rommel Regroup move\nfrom #${game.from1}\nto #${game.to1}.`) + log(`Regroup move with Rommel\nfrom #${game.from1}\nto #${game.to1}.`) else if (game.from1) - log(`Rommel Group move\nfrom #${game.from1}.`) + log(`Group move with Rommel\nfrom #${game.from1}.`) } else { if (game.from1 && game.to1) log(`Regroup move\nfrom #${game.from1}\nto #${game.to1}.`) else if (game.from1) log(`Group move\nfrom #${game.from1}.`) } +} + +function print_move_2() { if (game.rommel === 2) { if (game.from2 && game.to2) - log(`Rommel Regroup move\nfrom #${game.from2}\nto #${game.to2}.`) + log(`Regroup (R) move\nfrom #${game.from2}\nto #${game.to2}.`) else if (game.from2) - log(`Rommel Group move\nfrom #${game.from2}.`) + log(`Group (R) move\nfrom #${game.from2}.`) } else { if (game.from2 && game.to2) log(`Regroup move\nfrom #${game.from2}\nto #${game.to2}.`) else if (game.from2) log(`Group move\nfrom #${game.from2}.`) } +} +function goto_move() { log_br() game.state = 'move' } @@ -3280,8 +3291,6 @@ states.move = { if (game.selected < 0) { view.prompt = `Move: Select unit to move.` - show_move_commands() - // Select Group Move 1 if (!game.to1 && game.from1) { if (!is_battle_hex(game.from1)) { diff --git a/unsupplied.svg b/unsupplied.svg new file mode 100644 index 0000000..af55bd0 --- /dev/null +++ b/unsupplied.svg @@ -0,0 +1 @@ + -- cgit v1.2.3