diff options
| -rw-r--r-- | disrupted.svg | 1 | ||||
| -rw-r--r-- | play.html | 44 | ||||
| -rw-r--r-- | play.js | 64 | ||||
| -rw-r--r-- | rules.js | 39 | ||||
| -rw-r--r-- | unsupplied.svg | 1 |
5 files changed, 83 insertions, 66 deletions
diff --git a/disrupted.svg b/disrupted.svg new file mode 100644 index 0000000..d8d5e01 --- /dev/null +++ b/disrupted.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M326.594 14.97l-39.78 45.468L285.717 170l52.56-95.78-11.686-59.25zM204.438 27.78l-8.25 72.095 53.03 95.063-1.562-108.875-43.22-58.282zM69.75 61.157l35.438 74.28 105.187 77.75-37.72-78.874L69.75 61.156zm365.72 20.25l-66.564 28.875-55.812 93.5 93.5-55.81 28.875-66.564zm.28 91.094l-75 53.063L449.53 223 495 180l-59.25-7.5zm-159.063 21.375l-11.968 38.28-35.908-29.905 13.157 50.875-51.47 18.53 50.28 7.783-11.968 58.062 29.844-36.063 15.97 20.375-.345-46.562 35.94 7.78-11.97-26.905 43.063-41.313-46.063 11.97-18.563-32.907zm-259.218 5.28l91.75 50.94 94.843-.94-81.657-48.218-104.937-1.78zm376.592 47.782l-58.656 20.782 94.094 15.874 62.313-22-97.75-14.656zM81.156 279.063l-45.47 39.75 59.252 11.72 75-47.688-88.782-3.78zm244.22 16.188l78.093 75.875 71.78 10.656-45.125-56.81-104.75-29.72zm-107.22 3.906l-88.97 50.188-58.155 96.906 96.907-58.156 50.22-88.938zm75.47 2.625l15.812 104.158 73.375 76-24.97-108.657-64.218-71.5zm-31.907 40.814l-22 62.344 15.905 94.093 20.78-58.655-14.686-97.78zm-44.19 24.937l-54.374 75.033 6.438 59.25 43.812-45.47 4.125-88.812z" fill="#000" fill-opacity="0.5"></path></svg> @@ -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); } @@ -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) @@ -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 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M411 68.31v.7c0 25.9-53.6 46.99-155 46.99-106.5 0-155-21.09-155-46.99v-1.2c0-15 16.7-26.9 49.7-35.3 28.2-7.2 65.6-11.1 105.3-11.1 39.6 0 77 3.9 105.3 11.1 33 8.4 49.7 20.3 49.7 35.3zm-177-.5c0-4.2-13.2-7.5-29.4-7.5-16.3 0-29.5 3.3-29.5 7.5 0 4.1 13.2 7.5 29.5 7.5 16.2 0 29.4-3.4 29.4-7.5zm167.6 97.89v-60.2c-8.7 6.6-21.9 12.2-39.6 16.7-28.5 7.3-66.1 11.2-106 11.2-39.9 0-77.5-4-106-11.2-17.7-4.5-30.9-10-39.6-16.7v60.2c-6.3 5.3-9.4 11.2-9.4 17.7v1.1c0 25.9 48.5 46.9 155 46.9 101.4 0 155-21 155-46.9v-1.1c0-6.5-3.1-12.4-9.4-17.7zm0 128.9v-73.5c-8.7 6.6-21.9 12.2-39.6 16.7-28.5 7.2-66.1 11.2-106 11.2-39.9 0-77.5-4-106-11.2-17.7-4.5-30.9-10.1-39.6-16.7v73.5c-6.3 5.3-9.4 11.2-9.4 17.7v.9c0 25.9 48.5 46.9 155 46.9 101.4 0 155-21 155-46.9v-.9c0-6.6-3.1-12.5-9.4-17.7zm8.9 145.4c-1.1-4.9-4-9.4-8.9-13.5V350c-8.7 6.6-21.9 12.2-39.6 16.7-28.5 7.2-66.1 11.2-106 11.2-39.9 0-77.5-4-106-11.2-17.7-4.5-30.9-10.1-39.6-16.7v76.5c-4.9 4.1-7.8 8.6-8.9 13.5-.3 1.2-.5 2.5-.5 3.7v.5c0 5.7 2.3 10.9 7 15.6 17 18 64.8 30.8 148 30.8 60.2 0 103.6-7.4 128.9-18.9 17.3-7.5 26.1-16.6 26.1-27.5v-.5c0-1.2-.2-2.5-.5-3.7z" fill="#000" fill-opacity="0.5"></path></svg> |
