diff options
| -rw-r--r-- | play.html | 12 | ||||
| -rw-r--r-- | play.js | 25 |
2 files changed, 28 insertions, 9 deletions
@@ -33,9 +33,9 @@ header.your_turn { background-color: orange; } /* BATTLE DIALOG */ +#battle { background-color: #d6c4a9; background: url(texture_clear.png); } #battle_header { background-color: brown; color: gold } #battle_hits { background-color: #c4ab8b; } -#battle_line_1, #battle_line_2 { background-color: #d6c4a9; background: url(texture_clear.png); } #battle_buttons { background-color: #c4ab8b; } #battle_message { background-color: #d6c4a9; } @@ -86,8 +86,8 @@ header.your_turn { background-color: orange; } vertical-align: middle } -#battle_line_1, #battle_line_2 { - padding: 20px; +.battle_line { + margin: 24px; min-height: 60px; display: flex; flex-wrap: wrap; @@ -447,8 +447,10 @@ svg .hex.allied_control { <img class="hits_icon" src="icons/artillery.svg"> <div class="hits_text" id="hits_artillery">0</div> </div> - <div id="battle_line_1"></div> - <div id="battle_line_2"></div> + <div class="battle_line" id="battle_line_1"></div> + <div class="battle_line" id="battle_line_2"></div> + <div class="battle_line" id="battle_line_3"></div> + <div class="battle_line" id="battle_line_4"></div> <div id="battle_buttons"> <button id="target_armor_button" onclick="send_action('armor')">Armor</button> <button id="target_infantry_button" onclick="send_action('infantry')">Infantry</button> @@ -8,6 +8,13 @@ const svgNS = "http://www.w3.org/2000/svg" const round = Math.round const sqrt = Math.sqrt +const class_name = [ "armor", "infantry", "anti-tank", "artillery" ] + +const ARMOR = 0 +const INFANTRY = 1 +const ANTITANK = 2 +const ARTILLERY = 3 + function set_has(set, item) { let a = 0 let b = set.length - 1 @@ -48,6 +55,8 @@ let ui = { battle_message: document.getElementById("battle_message"), battle_line_1: document.getElementById("battle_line_1"), battle_line_2: document.getElementById("battle_line_2"), + battle_line_3: document.getElementById("battle_line_3"), + battle_line_4: document.getElementById("battle_line_4"), onmap: document.getElementById("units"), focus: null, } @@ -87,6 +96,10 @@ function is_unit_selected(unit) { return !!(view.selected && view.selected.includes(unit)) } +function is_artillery_unit(u) { + return units[u].class === ARTILLERY +} + function is_allied_unit(u) { return units[u].nationality === 'allied' } @@ -462,11 +475,15 @@ function update_battle() { 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) + update_battle_line(ui.battle_line_1, u => is_axis_unit(u) && is_artillery_unit(u)) + update_battle_line(ui.battle_line_2, u => is_axis_unit(u) && !is_artillery_unit(u)) + update_battle_line(ui.battle_line_3, u => is_allied_unit(u) && !is_artillery_unit(u)) + update_battle_line(ui.battle_line_4, u => is_allied_unit(u) && is_artillery_unit(u)) } else { - update_battle_line(ui.battle_line_1, is_allied_unit) - update_battle_line(ui.battle_line_2, is_axis_unit) + update_battle_line(ui.battle_line_1, u => is_allied_unit(u) && is_artillery_unit(u)) + update_battle_line(ui.battle_line_2, u => is_allied_unit(u) && !is_artillery_unit(u)) + update_battle_line(ui.battle_line_3, u => is_axis_unit(u) && !is_artillery_unit(u)) + update_battle_line(ui.battle_line_4, u => is_axis_unit(u) && is_artillery_unit(u)) } target_button("armor") target_button("infantry") |