Add badges for disrupted/unsupplied enemy units.

1 files changed, 26 insertions, 18 deletions

diff --git a/play.html b/play.html
index f92658d..c35e8e7 100644
--- a/play.html
+++ b/play.html
@@ -317,22 +317,9 @@ svg .hex.action.forced_march {
 	stroke: crimson;
 }
 
-svg .hex.from {
-	stroke: yellow;
-	stroke-dasharray: none;
-}
-
-svg .hex.to {
-	stroke: yellow;
-	stroke-dasharray: 4 4;
-}
-
-svg .hex.to.from {
-	stroke-dasharray: 8 4;
-}
-
 svg .hex.selected {
 	stroke: yellow;
+	stroke-dasharray: none;
 }
 
 svg .hex.tip {
@@ -432,6 +419,7 @@ svg #lines line.axis_supply.allied_supply {
 
 .unit {
 	background-size: 1000%;
+	background-repeat: no-repeat;
 	border-style: solid;
 	transition: top 200ms, left 200ms, transform 200ms;
 }
@@ -455,8 +443,6 @@ svg #lines line.axis_supply.allied_supply {
 	border-color: #b7a889;
 	box-shadow: 0 0 2px 1px #5c3a1e80;
 }
-/*
-*/
 
 /*
 .unit.axis {
@@ -508,12 +494,34 @@ svg #lines line.axis_supply.allied_supply {
 	border-color: #222;
 }
 
+.unit.disrupted:not(.revealed) {
+	background-image: url(disrupted.svg);
+	background-size: 75%;
+	background-position: center;
+}
+
 .unit.unsupplied {
-	border-color: blue;
+	border-color: royalblue;
+}
+
+.unit.unsupplied:not(.revealed) {
+	background-image: url(unsupplied.svg);
+	background-size: 75%;
+	background-position: center;
 }
 
 .unit.disrupted.unsupplied {
-	border-color: #222 blue;
+	border-color: #222 royalblue;
+}
+
+.unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 {
+	border-color: royalblue #222;
+}
+
+.unit.disrupted.unsupplied:not(.revealed) {
+	background-image: url(unsupplied.svg), url(disrupted.svg);
+	background-size: 50%, 50%;
+	background-position: 0% 90%, 90% 10%;
 }
 
 .unit.r0 { transform: rotate(0deg); }