Show minefields. Fix bugs. Show active months.

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>
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 {
 <!-- 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">
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