From 23882805614d548df2d4c5aecfbcb40438868207 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sun, 31 Jul 2022 13:11:25 +0200 Subject: Show minefields. Fix bugs. Show active months. --- minefield.svg | 1 + play.html | 69 ++++++++++++++++++++++++++++++++++++-------------------- play.js | 34 +++++++++++++++++++++++----- rules.js | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----- 4 files changed, 141 insertions(+), 35 deletions(-) create mode 100644 minefield.svg diff --git a/minefield.svg b/minefield.svg new file mode 100644 index 0000000..20c0ebb --- /dev/null +++ b/minefield.svg @@ -0,0 +1 @@ + diff --git a/play.html b/play.html index d7ef71d..16c303e 100644 --- a/play.html +++ b/play.html @@ -190,8 +190,9 @@ header.your_turn { background-color: orange; } table { border-collapse: collapse; font-size: 12px; user-select: none; } td.blank { background-color: transparent; border: none } td,th { border: 1px solid #222; text-align: center; padding: 2px 4px; } -th { background-color: #222; color: #e6d9c1; } -td { background-color: #e6d9c1; min-width: 20px; } +td { min-width: 20px; } +th { background-color: #222; color: oldlace; } +td { background-color: oldlace; } table .required_target { background-color: #b8d9ca } table .must_fire_first { background-color: #f7dc68 } table .only_unsupported { background-color: #f0b0af } @@ -232,16 +233,17 @@ td img { vertical-align: middle } display: flex; user-select: none; position: absolute; - top: 104px; + top: 24px; left: 1840px; gap: 9px; - display: none; } .month { + visibility: hidden; width: 68px; height: 68px; background-color: #fee0bf; + background-color: wheat; color: black; font-size: 40px; line-height: 68px; @@ -251,6 +253,14 @@ td img { vertical-align: middle } color: #231f20; } +.month.show { + visibility: visible; +} + +.month.now { + background-color: tan; +} + svg .side { stroke-linecap: round; stroke-width: 8px; @@ -357,6 +367,15 @@ svg .hex.tip { fill-opacity: 0.6; } +.minefield { + position: absolute; + pointer-events: none; + width: 48px; + height: 48px; + background-image: url(minefield.svg); + opacity: 0.5; +} + #map .unit { position: absolute; } @@ -656,29 +675,31 @@ svg .hex.tip {
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+ +
diff --git a/play.js b/play.js index 5715d70..a424ad8 100644 --- a/play.js +++ b/play.js @@ -72,6 +72,8 @@ let ui = { units: [], battle_units: [], cards: [], + minefields: [], + months: [], axis_supply: document.getElementById("axis_supply"), allied_supply: document.getElementById("allied_supply"), turn_info: document.getElementById("turn_info"), @@ -103,7 +105,8 @@ let ui = { pursuit_line_1: document.getElementById("pursuit_line_1"), pursuit_line_2: document.getElementById("pursuit_line_2"), - onmap: document.getElementById("units"), + units_holder: document.getElementById("units"), + minefields_holder: document.getElementById("minefields"), focus: null, loaded: false, } @@ -524,10 +527,12 @@ function build_hexes() { for (let month = 1; month <= 10; ++month) { ui.hex_y[map_w * map_h + month] = 24 + 37 ui.hex_x[map_w * map_h + month] = 1840 + 37 + (month-1) * 81 + ui.months[month] = document.getElementById("month" + month) } for (let month = 11; month <= 20; ++month) { ui.hex_y[map_w * map_h + month] = 24 + 37 // + 81 ui.hex_x[map_w * map_h + month] = 1840 + 37 + (month-11) * 81 + ui.months[month] = document.getElementById("month" + month) } document.getElementById("mapsvg").getElementById("grid").setAttribute("d", path.join(" ")) @@ -597,13 +602,13 @@ function update_map() { for (let u = 0; u < unit_count; ++u) { let e = ui.units[u] let hex = unit_hex(u) - if (view.month <= 10 && hex > hexdeploy + 10) + if (hex >= hexdeploy + view.month + 10) hex = 0 if (view.month <= 10 && hex === MALTA) hex = 0 if (hex) { - if (!ui.onmap.contains(e)) - ui.onmap.appendChild(e) + if (!ui.units_holder.contains(e)) + ui.units_holder.appendChild(e) stack[hex].push(u) e.stack = stack[hex] } else { @@ -611,6 +616,25 @@ function update_map() { } } + for (let i = 1; i <= 20; ++i) { + ui.months[i].classList.toggle("show", (i >= view.start && i <= view.end) && (i < view.month + 10)) + ui.months[i].classList.toggle("now", i === view.month) + } + + for (let i = ui.minefields.length; i < view.minefields.length; ++i) { + let elt = ui.minefields[i] = document.createElement("div") + elt.className = "minefield" + ui.minefields_holder.appendChild(elt) + } + for (let i = view.minefields.length; i < ui.minefields.length; ++i) { + ui.minefields[i].remove() + } + for (let i = 0; i < view.minefields.length; ++i) { + let hex = view.minefields[i] + ui.minefields[i].style.left = (ui.hex_x[hex] - 40) + "px" + ui.minefields[i].style.top = (ui.hex_y[hex] + 4) + "px" + } + for (let hex = 0; hex < stack.length; ++hex) { let start_x = ui.hex_x[hex] let start_y = ui.hex_y[hex] @@ -797,7 +821,7 @@ function on_update() { ui.axis_supply.textContent = view.axis_hand ui.allied_supply.textContent = view.allied_hand - ui.turn_info.textContent = `Month: ${view.month}\nSupply Commitment: ${view.commit}` + ui.turn_info.textContent = `Month: ${view.month} / ${view.end}\nSupply Commitment: ${view.commit}` for (let i = 0; i < 28; ++i) ui.cards[i].classList.toggle("action", !!(view.actions && view.actions.real_card)) diff --git a/rules.js b/rules.js index b03cd77..e205eed 100644 --- a/rules.js +++ b/rules.js @@ -93,6 +93,45 @@ const speed_name_cap = [ "Zero", "Leg", "Motorized", "Mechanized", "Recon" ] const die_face_hit = [ 0, '\u2776', '\u2777', '\u2778', '\u2779', '\u277A', '\u277B' ] const die_face_miss = [ 0, '\u2460', '\u2461', '\u2462', '\u2463', '\u2464', '\u2465' ] +const month_names_1940 = [ "", + "September 1940", + "October 1940", + "November 1940", + "December 1940", + "January 1940", + "February 1940", +] + +const month_names = [ "", + "April 1941", + "May 1941", + "June 1941", + "July 1941", + "August 1941", + "September 1941", + "October 1941", + "November 1941", + "December 1941", + "January 1942", + "February 1942", + "March 1942", + "April 1942", + "May 1942", + "June 1942", + "July 1942", + "August 1942", + "September 1942", + "October 1942", + "November 1942", +] + +function current_month_name() { + if (game.scenario === "1940") + return month_names_1940[game.month] + else + return month_names[game.month] +} + const SF = 6 const DF = 5 const TF = 4 @@ -1857,8 +1896,10 @@ function end_player_turn() { if (check_sudden_death_victory()) return - if (game.passed === 2) + if (game.passed === 2) { + game.passed = 0 return end_month() + } if (game.phasing === AXIS) game.phasing = ALLIED @@ -4290,7 +4331,7 @@ function end_month() { function goto_buildup() { ++game.month - log_h1(`Month ${game.month}`) + log_h1(current_month_name()) game.phasing = AXIS set_active_player() @@ -4767,7 +4808,6 @@ function end_buildup_spending() { set_enemy_player() goto_buildup_reinforcements() } else { - delete game.buildup goto_buildup_resupply() } } @@ -4803,6 +4843,8 @@ function goto_buildup_resupply() { deal_axis_supply_cards(axis_resupply) deal_allied_supply_cards(allied_resupply) + delete game.buildup + goto_player_initiative() } @@ -5073,7 +5115,7 @@ states.initial_supply_cards = { } function begin_game() { - log_h1(`Month ${game.month}`) + log_h1(current_month_name()) if (game.scenario === "Crusader") { game.phasing = ALLIED @@ -5639,8 +5681,12 @@ exports.setup = function (seed, scenario, options) { exports.view = function(state, current) { load_state(state) + let scenario = current_scenario() + view = { month: game.month, + start: scenario.start, + end: scenario.end, units: game.units, revealed: game.revealed, moved: game.moved, @@ -5654,14 +5700,28 @@ exports.view = function(state, current) { allied_sides: game.allied_sides, } - if (current === AXIS) + if (current === AXIS) { view.cards = game.axis_hand - if (current === ALLIED) + if (game.axis_minefields.length > 0) + view.minefields = game.minefields.concat(game.axis_minefields) + else + view.minefields = game.minefields + } + else if (current === ALLIED) { view.cards = game.allied_hand + if (game.allied_minefields.length > 0) + view.minefields = game.minefields.concat(game.allied_minefields) + else + view.minefields = game.minefields + } + else { + view.minefields = game.minefields + } if (current === game.active) view.selected = game.selected + if (game.from1) view.from1 = game.from1 if (game.from2) view.from2 = game.from2 if (game.to1) view.to1 = game.to1 -- cgit v1.2.3