UI and piece layout.

1 files changed, 125 insertions, 43 deletions

diff --git a/play.css b/play.css
index b2f7a25..b78fbb3 100644
--- a/play.css
+++ b/play.css
@@ -3,12 +3,16 @@ main { background-color: dimgray; }
 header { background-color: silver; }
 header.your_turn { background-color: orange; }
 #role_Red .role_name { background-color: salmon; }
-#role_Blue .role_name { background-color: #a0caec; }
-#role_Yellow .role_name { background-color: #ffe175; }
-#role_Green .role_name { background-color: #80b563; }
+#role_Blue .role_name { background-color: skyblue; }
+#role_Yellow .role_name { background-color: khaki; }
+#role_Green .role_name { background-color: darkseagreen; }
 #turn_info { background-color: gainsboro; }
 .role_vp { float: right; }
 
+.action {
+	cursor: pointer;
+}
+
 #mapwrap {
 	width: 2550px;
 	height: 1650px;
@@ -34,23 +38,47 @@ header.your_turn { background-color: orange; }
 	right: 93px;
 }
 
-#crisis_table.p2 {
+body.p2 #crisis_table {
 	display: block;
 	background-image: url(overlay_2p_75.jpg);
 }
-#crisis_table.p3 {
+
+body.p3 #crisis_table {
 	display: block;
 	background-image: url(overlay_3p_75.jpg);
 }
 
-#pieces div {
+svg {
 	position: absolute;
 }
 
-#pieces .no_place_governor {
-	margin-top: 6px;
-	margin-left: 6px;
-	border-radius: 0;
+svg .region, svg .sea {
+	fill: transparent;
+	stroke: transparent;
+	stroke-width: 3px;
+}
+
+svg .region.action {
+	fill: gold;
+	fill-opacity: 0.2;
+	stroke: yellow;
+	stroke-opacity: 0.8;
+	stroke-width: 3px;
+}
+
+svg .sea.action {
+	fill: blue;
+	fill-opacity: 0.2;
+	stroke: blue;
+	stroke-opacity: 0.8;
+	stroke-width: 3px;
+}
+
+#pieces div {
+	position: absolute;
+	transition-property: top, left, transform;
+	transition-duration: 200ms;
+	transition-timing-function: ease;
 }
 
 .dice {
@@ -83,6 +111,49 @@ header.your_turn { background-color: orange; }
 .dice.black { border-color: #595959 #303030 #303030 #595959; box-shadow: 0 0 0 1px #0c0c0c, 1px 2px 4px #0008; }
 .dice.white { border-color: #ffffff #b1b1b1 #b1b1b1 #ffffff; box-shadow: 0 0 0 1px #424242, 1px 2px 4px #0008; }
 
+/* MAGIC TRACKS */
+
+.governor.s1 { transform: translateX(52px) }
+.governor.s2 { transform: translateX(104px) }
+.governor.s3 { transform: translateX(156px) }
+.governor.s4 { transform: translateX(208px) }
+.governor.s5 { transform: translate(26px, 52px) }
+.governor.s6 { transform: translate(78px, 52px) }
+.governor.s7 { transform: translate(129px, 52px) }
+.governor.s8 { transform: translate(181px, 52px) }
+
+.capital {
+	width: 60px;
+	height: 60px;
+}
+
+.capital.action {
+	border: 6px solid white;
+	box-shadow: 0px 0px 8px white;
+}
+
+body.p3 #Hispania_NPG { display: block }
+body.p3 #Africa_NPG { display: block }
+body.p3 #Aegyptus_NPG { display: block }
+
+body.p2 #Britannia_NPG { display: block }
+body.p2 #Hispania_NPG { display: block }
+body.p2 #Africa_NPG { display: block }
+body.p2 #Aegyptus_NPG { display: block }
+body.p2 #Syria_NPG { display: block }
+body.p2 #Galatia_NPG { display: block }
+
+body.p3 #Hispania_Governor { display: none }
+body.p3 #Africa_Governor { display: none }
+body.p3 #Aegyptus_Governor { display: none }
+
+body.p2 #Britannia_Governor { display: none }
+body.p2 #Hispania_Governor { display: none }
+body.p2 #Africa_Governor { display: none }
+body.p2 #Aegyptus_Governor { display: none }
+body.p2 #Syria_Governor { display: none }
+body.p2 #Galatia_Governor { display: none }
+
 /* COUNTERS */
 
 .amphitheater, .basilica, .limes { background-color: #efebea; }
@@ -98,6 +169,7 @@ header.your_turn { background-color: orange; }
 .rival { background-color: #b8b996; }
 .militia, .legion { background-color: #ffffff; }
 .neutral { background-color: #e3dedc; }
+.no_place_governor { background-color: #6e6e6e; }
 
 /* :r !node tools/gencolors.js */
 .amphitheater, .basilica, .limes { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, 1px 2px 4px #0008; }
@@ -116,39 +188,39 @@ header.your_turn { background-color: orange; }
 .legion { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; }
 .no_place_governor { border-color: #8e8e8e #505050 #505050 #8e8e8e; box-shadow: 0 0 0 1px #191919, 1px 2px 4px #0008; }
 
-#legion_1 { background-position: 0px 0px }
-#legion_2 { background-position: -55px 0px }
-#legion_3 { background-position: -110px 0px }
-#legion_4 { background-position: -165px 0px }
-#legion_5 { background-position: -220px 0px }
-#legion_6 { background-position: -275px 0px }
-#legion_7 { background-position: -330px 0px }
-#legion_8 { background-position: -385px 0px }
-#legion_9 { background-position: -440px 0px }
-#legion_10 { background-position: 0px -55px }
-#legion_11 { background-position: -55px -55px }
-#legion_12 { background-position: -110px -55px }
-#legion_13 { background-position: -165px -55px }
-#legion_14 { background-position: -220px -55px }
-#legion_15 { background-position: -275px -55px }
-#legion_16 { background-position: -330px -55px }
-#legion_17 { background-position: -385px -55px }
-#legion_18 { background-position: -440px -55px }
-#legion_19 { background-position: 0px -110px }
-#legion_20 { background-position: -55px -110px }
-#legion_21 { background-position: -110px -110px }
-#legion_22 { background-position: -165px -110px }
-#legion_23 { background-position: -220px -110px }
-#legion_24 { background-position: -275px -110px }
-#legion_25 { background-position: -330px -110px }
-#legion_26 { background-position: -385px -110px }
-#legion_27 { background-position: -440px -110px }
-#legion_28 { background-position: 0px -165px }
-#legion_29 { background-position: -55px -165px }
-#legion_30 { background-position: -110px -165px }
-#legion_31 { background-position: -165px -165px }
-#legion_32 { background-position: -220px -165px }
-#legion_33 { background-position: -275px -165px }
+#legion_0 { background-position: 0px 0px }
+#legion_1 { background-position: -55px 0px }
+#legion_2 { background-position: -110px 0px }
+#legion_3 { background-position: -165px 0px }
+#legion_4 { background-position: -220px 0px }
+#legion_5 { background-position: -275px 0px }
+#legion_6 { background-position: -330px 0px }
+#legion_7 { background-position: -385px 0px }
+#legion_8 { background-position: -440px 0px }
+#legion_9 { background-position: 0px -55px }
+#legion_10 { background-position: -55px -55px }
+#legion_11 { background-position: -110px -55px }
+#legion_12 { background-position: -165px -55px }
+#legion_13 { background-position: -220px -55px }
+#legion_14 { background-position: -275px -55px }
+#legion_15 { background-position: -330px -55px }
+#legion_16 { background-position: -385px -55px }
+#legion_17 { background-position: -440px -55px }
+#legion_18 { background-position: 0px -110px }
+#legion_19 { background-position: -55px -110px }
+#legion_20 { background-position: -110px -110px }
+#legion_21 { background-position: -165px -110px }
+#legion_22 { background-position: -220px -110px }
+#legion_23 { background-position: -275px -110px }
+#legion_24 { background-position: -330px -110px }
+#legion_25 { background-position: -385px -110px }
+#legion_26 { background-position: -440px -110px }
+#legion_27 { background-position: 0px -165px }
+#legion_28 { background-position: -55px -165px }
+#legion_29 { background-position: -110px -165px }
+#legion_30 { background-position: -165px -165px }
+#legion_31 { background-position: -220px -165px }
+#legion_32 { background-position: -275px -165px }
 
 .amphitheater, .basilica, .limes {
 	width: 92px;
@@ -165,11 +237,21 @@ header.your_turn { background-color: orange; }
 	width: 55px;
 	height: 55px;
 	background-size: 55px 55px;
+	background-repeat: no-repeat;
 	border-radius: 8px;
 	border-width: 2px;
 	border-style: solid;
 }
 
+.no_place_governor {
+	display: none;
+	margin: 4px 0 0 4px;
+	width: 58px;
+	height: 58px;
+	background-position: center;
+	border-radius: 0;
+}
+
 .governor, .legacy, .legacy_40 {
 	width: 50px;
 	height: 50px;