Moves.

1 files changed, 64 insertions, 4 deletions

diff --git a/play.html b/play.html
index 77f76ab..9b888f5 100644
--- a/play.html
+++ b/play.html
@@ -66,10 +66,20 @@ th { background-color: gainsboro; }
 	position: absolute;
 	display: flex;
 	top: 24px;
-	left: 1000px;
+	left: 1840px;
 	gap: 9px;
 }
 
+#calendar2 {
+	display: flex;
+	user-select: none;
+	position: absolute;
+	top: 104px;
+	left: 1840px;
+	gap: 9px;
+	display: none;
+}
+
 .month {
 	width: 68px;
 	height: 68px;
@@ -85,14 +95,14 @@ th { background-color: gainsboro; }
 
 svg .side {
 	stroke-linecap: round;
-	stroke-width: 6px;
+	stroke-width: 8px;
 }
 
 svg .side.axis_supply {
 	stroke-width: 64px;
 	stroke-linecap: butt;
 	stroke-dasharray: 8 100;
-	stroke-dashoffset: -41;
+	stroke-dashoffset: -31;
 	stroke-opacity: 0.6;
 	stroke: green;
 }
@@ -101,7 +111,7 @@ svg .side.allied_supply {
 	stroke-width: 64px;
 	stroke-linecap: butt;
 	stroke-dasharray: 8 100;
-	stroke-dashoffset: -41;
+	stroke-dashoffset: -31;
 	stroke-opacity: 0.6;
 	stroke: crimson;
 }
@@ -110,11 +120,37 @@ svg .side.allied_supply.axis_supply {
 	stroke: yellow;
 }
 
+svg .side.axis_control {
+	stroke: green;
+	stroke-width: 8px;
+	stroke-opacity: 0.8;
+	stroke-dasharray: 54 100;
+	stroke-dashoffset: -8;
+}
+
+svg .side.allied_control {
+	stroke: brown;
+	stroke-width: 8px;
+	stroke-opacity: 0.8;
+	stroke-dasharray: 54 100;
+	stroke-dashoffset: -8;
+}
+
 svg .hex.action {
 	stroke: white;
 	stroke-width: 2;
 }
 
+svg .hex.from {
+	fill: gold;
+	fill-opacity: 0.2;
+}
+
+svg .hex.to {
+	fill: plum;
+	fill-opacity: 0.2;
+}
+
 svg .hex.axis_supply {
 	fill: green;
 	fill-opacity: 0.3;
@@ -130,6 +166,16 @@ svg .hex.axis_supply.allied_supply {
 	fill-opacity: 0.3;
 }
 
+svg .hex.axis_control {
+	fill: green;
+	fill-opacity: 0.2;
+}
+
+svg .hex.allied_control {
+	fill: brown;
+	fill-opacity: 0.2;
+}
+
 #map .unit {
 	position: absolute;
 }
@@ -184,6 +230,18 @@ svg .hex.axis_supply.allied_supply {
 	box-shadow: 0 0 0 2px yellow;
 }
 
+.unit.disrupted {
+	border-color: crimson;
+}
+
+.unit.moved {
+	border-color: black;
+}
+
+.unit.unsupplied {
+	border-color: green;
+}
+
 .unit.r0 { transform: rotate(0deg); }
 .unit.r1 { transform: rotate(-90deg); }
 .unit.r2 { transform: rotate(-180deg); }
@@ -740,6 +798,8 @@ svg .hex.axis_supply.allied_supply {
 <div class="month">8</div>
 <div class="month">9</div>
 <div class="month">10</div>
+</div>
+<div id="calendar2">
 <div class="month">11</div>
 <div class="month">12</div>
 <div class="month">13</div>