persistent cards

1 files changed, 36 insertions, 6 deletions

diff --git a/play.html b/play.html
index ea74b9a..c3667c3 100644
--- a/play.html
+++ b/play.html
@@ -14,16 +14,24 @@
 <script defer src="play.js"></script>
 <style>
 
+:root {
+	--suf-75: hsl(273 39% 75%);
+	--suf-85: hsl(273 39% 85%);
+
+	--opp-75: hsl(16 85% 75%);
+	--opp-85: hsl(16 85% 85%);
+}
+
 main {
 	background-color: slategray;
 }
 
-#role_Suffragist .role_name { background-color: hsl(273 39% 85%); }
-#role_Opposition .role_name { background-color: hsl(16 85% 85%); }
+#role_Suffragist .role_name { background-color: var(--suf-85); }
+#role_Opposition .role_name { background-color: var(--opp-85); }
 .role.active span { text-decoration: underline; }
 
-body.Suffragist header.your_turn { background-color: hsl(273 39% 75%); }
-body.Opposition header.your_turn { background-color: hsl(16 85% 75%);; }
+body.Suffragist header.your_turn { background-color: var(--suf-75); }
+body.Opposition header.your_turn { background-color: var(--opp-75); }
 .role_info {
 	padding: 3px 18px;
 	background-color: gainsboro;
@@ -42,8 +50,8 @@ body.Opposition header.your_turn { background-color: hsl(16 85% 75%);; }
 #log .h1 { background-color: silver; }
 #log .h2 { background-color: gainsboro; }
 
-#log .suf { background-color: hsl(273 39% 85%); }
-#log .opp { background-color: hsl(16 85% 85%); }
+#log .suf { background-color: var(--suf-85); }
+#log .opp { background-color: var(--opp-85); }
 #log .tip { cursor: pointer; }
 #log .tip:hover { text-decoration: underline; }
 
@@ -149,6 +157,25 @@ div.region:hover {
 	background-color: #fff8;
 }
 
+div.persistent_box {
+	position: absolute;
+	background-color: #FBF9F1;
+	width: 124px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.persistent_card {
+	font-family: var(--font-small);
+	font-size: 12px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	text-align: center;
+}
+.persistent_card.support { background-color: var(--suff-85); }
+.persistent_card.opposition { background-color: var(--opp-85); }
+
 .piece {
 	position: absolute;
 	background-repeat: no-repeat;
@@ -846,6 +873,9 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
 		<!-- END SVG -->
 		</svg>
 
+		<div id="persistent_turn" class="persistent_box" style="left:25px;top:648px;"></div>
+		<div id="persistent_game" class="persistent_box" style="left:170px;top:648px;"></div>
+		<div id="persistent_ballot" class="persistent_box" style="left:315px;top:648px;"></div>
 
 		<div id="VT" class="state" style="top:125px;left:785px;"></div>
 		<div id="NH" class="state" style="top:63px;left:857px;"></div>