Show minefields. Fix bugs. Show active months.

1 files changed, 45 insertions, 24 deletions

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