Gazala sequence. Cleaned up regions. Style stuff.

1 files changed, 42 insertions, 10 deletions

diff --git a/play.html b/play.html
index 45abfbb..38ba172 100644
--- a/play.html
+++ b/play.html
@@ -279,8 +279,14 @@ td img { vertical-align: middle }
 
 /* MAP */
 
+svg .fortress {
+	fill: indianred;
+	stroke: saddlebrown;
+}
+
 svg .fortress.axis {
-	fill: #264;
+	fill: seagreen;
+	stroke: darkgreen;
 }
 
 svg .side {
@@ -438,7 +444,7 @@ svg #lines line.axis_supply.allied_supply {
 	background-image: url(units-simple.svg);
 }
 
-.unit.italian, .unit.german {
+.unit.axis {
 	background-color: #9aa880;
 	border-color: #899572;
 	box-shadow: 0 0 2px 1px #2d292c80;
@@ -449,15 +455,33 @@ svg #lines line.axis_supply.allied_supply {
 	border-color: #b7a889;
 	box-shadow: 0 0 2px 1px #5c3a1e80;
 }
+/*
+*/
 
-.unit.italian.revealed {
-	background-color: #f9e3b3;
+/*
+.unit.axis {
+	background-color: gray;
+	border-color: dimgray;
+	box-shadow: 0 0 2px 1px #2226;
+}
+
+.unit.allied {
+	background-color: indianred;
+	border-color: brown;
+	background-color: #a85;
+	border-color: #642;
+	box-shadow: 0 0 2px 1px #4116;
 }
+*/
 
-.unit.german.revealed {
+.unit.axis.revealed {
 	background-color: #abba8e;
 }
 
+.unit.axis.italian.revealed {
+	background-color: #f9e3b3;
+}
+
 .unit.allied.revealed {
 	background-color: #e4d1ab;
 }
@@ -467,7 +491,7 @@ svg #lines line.axis_supply.allied_supply {
 }
 
 .unit.action.hit {
-	box-shadow: 0 0 0 2px black, 0 0 2px 2px black;
+	box-shadow: 0 0 0 2px white, 0 0 0 4px black;
 }
 
 .unit.selected {
@@ -481,15 +505,15 @@ svg #lines line.axis_supply.allied_supply {
 }
 
 .unit.disrupted {
-	border-color: black;
+	border-color: #222;
 }
 
 .unit.unsupplied {
-	border-color: brown;
+	border-color: blue;
 }
 
 .unit.disrupted.unsupplied {
-	border-color: black brown;
+	border-color: #222 blue;
 }
 
 .unit.r0 { transform: rotate(0deg); }
@@ -744,7 +768,7 @@ svg #lines line.axis_supply.allied_supply {
 <div id="minefields"></div>
 <div id="units"></div>
 
-<div style="position:absolute;bottom:20px;right:24px;display:flex;gap:20px;align-items:end">
+<div style="position:absolute;bottom:20px;right:24px;display:flex;gap:20px;align-items:end;pointer-events:none">
 
 <table>
 <tr><th colspan="2">ROAD BONUS
@@ -754,6 +778,14 @@ svg #lines line.axis_supply.allied_supply {
 </table>
 
 <table>
+<tr><th colspan="2">SUPPLY RANGE
+<tr><td>Highway<td>&#x221e;
+<tr><td>Track<td>3
+<tr><td>Trail<td>2
+<tr><td>None<td>1
+</table>
+
+<table>
 <tr><th colspan="2">UNIT SPEED
 <tr><td>
 <img src="icons/recon.svg">