diff options
| -rw-r--r-- | minefield.svg | 1 | ||||
| -rw-r--r-- | play.html | 69 | ||||
| -rw-r--r-- | play.js | 34 | ||||
| -rw-r--r-- | rules.js | 72 |
4 files changed, 141 insertions, 35 deletions
diff --git a/minefield.svg b/minefield.svg new file mode 100644 index 0000000..20c0ebb --- /dev/null +++ b/minefield.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M239 263h43v213h-43zM447 36v211H61V36zM299 197.33v-25.14l46-23.35-7.24-14.27L307.44 150A59.58 59.58 0 1 0 195 122.42a61.11 61.11 0 0 0 9.45 31.91l-32.75-14.9-6.63 14.57L210 174.43v25l-38.74 19.66 7.24 14.27L228.45 208h55.37l52.76 24 6.63-14.56zm-13.45-44l-2.55 2.31V192h-57v-36.36l-2.17-2.34a43.88 43.88 0 0 1 .17-61.76 43.59 43.59 0 1 1 61.54 61.75zm-46.76-1.23a11.12 11.12 0 1 0-11.12-11.12 11.12 11.12 0 0 0 11.12 11.08zm26 16.94l-9.93-17.15L245 169zm16.95-28.06a11.12 11.12 0 1 0-11.12 11.12 11.12 11.12 0 0 0 11.14-11.16zM155.18 384.75c-24.85 0-45 3.81-45 8.5 0 4.69 20.15 8.5 45 8.5s45-3.81 45-8.5c0-4.69-20.18-8.5-45-8.5zM446.55 332c-16.29 0-29.5 2.19-29.5 4.89 0 2.7 13.21 4.89 29.5 4.89s29.5-2.19 29.5-4.89c0-2.7-13.21-4.89-29.5-4.89zm-390.1-36.75c-11.32 0-20.5 1.34-20.5 3s9.18 3 20.5 3 20.5-1.34 20.5-3-9.18-3-20.5-3zm280.22-.42c-11.32 0-20.5 1.43-20.5 3.2 0 1.77 9.18 3.2 20.5 3.2s20.5-1.43 20.5-3.2c0-1.77-9.17-3.2-20.5-3.2zm62.69 122.41c-39.76 0-72 7.81-72 17.45s32.24 17.45 72 17.45 72-7.81 72-17.45-32.23-17.45-72-17.45z" fill="#000000" fill-opacity="1"></path></svg> @@ -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 { <!-- END INSERT MAP FILE --> <div id="calendar"> -<div class="month">1</div> -<div class="month">2</div> -<div class="month">3</div> -<div class="month">4</div> -<div class="month">5</div> -<div class="month">6</div> -<div class="month">7</div> -<div class="month">8</div> -<div class="month">9</div> -<div class="month">10</div> +<div class="month" id="month1">1</div> +<div class="month" id="month2">2</div> +<div class="month" id="month3">3</div> +<div class="month" id="month4">4</div> +<div class="month" id="month5">5</div> +<div class="month" id="month6">6</div> +<div class="month" id="month7">7</div> +<div class="month" id="month8">8</div> +<div class="month" id="month9">9</div> +<div class="month" id="month10">10</div> </div> <div id="calendar2"> -<div class="month">11</div> -<div class="month">12</div> -<div class="month">13</div> -<div class="month">14</div> -<div class="month">15</div> -<div class="month">16</div> -<div class="month">17</div> -<div class="month">18</div> -<div class="month">19</div> -<div class="month">20</div> +<div class="month" id="month11">11</div> +<div class="month" id="month12">12</div> +<div class="month" id="month13">13</div> +<div class="month" id="month14">14</div> +<div class="month" id="month15">15</div> +<div class="month" id="month16">16</div> +<div class="month" id="month17">17</div> +<div class="month" id="month18">18</div> +<div class="month" id="month19">19</div> +<div class="month" id="month20">20</div> </div> + +<div id="minefields"></div> <div id="units"></div> <div style="position:absolute;bottom:20px;right:24px;display:flex;gap:20px;align-items:end"> @@ -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)) @@ -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 |
