wip client

1 files changed, 98 insertions, 39 deletions

diff --git a/play2.css b/play2.css
index bebfc07..bd161e6 100644
--- a/play2.css
+++ b/play2.css
@@ -19,6 +19,104 @@ main {
 	#map { background-image: url(images/map150.jpg); }
 }
 
+#map > .token {
+	position: absolute;
+}
+
+.track {
+	position: absolute;
+	background-color: #fff4;
+	border: 3px solid lime;
+	width: 52px;
+	height: 54px;
+}
+
+.front {
+	position: absolute;
+	background-color: #fff4;
+	border: 6px solid lime;
+	border-radius: 34px;
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+}
+
+.token {
+	background-color: #fff4;
+	border: 3px solid black;
+	width: 45px;
+	height: 45px;
+	box-shadow: 0 0 0 1px black, 1px 1px 4px #0006;
+}
+
+.token.round { width: 58px; height: 58px; }
+.token.square { width: 45px; height: 45px; }
+.token.standee { width: 44px; height: 54px; }
+.token.medallion { width: 53px; height: 53px; }
+
+.token.blank {
+	width: 45px;
+	height: 45px;
+	background-color: red;
+	border-radius: 50%;
+}
+
+.token.round, .token.blank {
+	background-color: red;
+	border-radius: 50%;
+	border-color: pink darkred darkred pink;
+}
+
+.token.round.off {
+	background-color: gray;
+	border-color: silver gray gray silver;
+}
+
+.token.standee {
+	background-color: white;
+	border-radius: 10px;
+	border-color: #ddd #888 #888 #ddd;
+}
+
+.standee_0 { background-image: url(images/tokens75/standee_0.png); }
+.standee_1 { background-image: url(images/tokens75/standee_1.png); }
+.standee_2 { background-image: url(images/tokens75/standee_2.png); }
+.standee_3 { background-image: url(images/tokens75/standee_3.png); }
+.standee_4 { background-image: url(images/tokens75/standee_4.png); }
+
+.medallion_0 { background-image: url(images/tokens75/medallion_0.png); }
+.medallion_1 { background-image: url(images/tokens75/medallion_1.png); }
+.medallion_2 { background-image: url(images/tokens75/medallion_2.png); }
+.medallion_3 { background-image: url(images/tokens75/medallion_3.png); }
+.medallion_4 { background-image: url(images/tokens75/medallion_4.png); }
+.medallion_5 { background-image: url(images/tokens75/medallion_5.png); }
+.medallion_6 { background-image: url(images/tokens75/medallion_6.png); }
+.medallion_7 { background-image: url(images/tokens75/medallion_7.png); }
+.medallion_8 { background-image: url(images/tokens75/medallion_8.png); }
+.medallion_9 { background-image: url(images/tokens75/medallion_9.png); }
+
+.bonus_morale.off { background-image: url(images/tokens75/bonus_morale_off.png); }
+.bonus_morale.on { background-image: url(images/tokens75/bonus_morale_on.png); }
+.bonus_teamwork.off { background-image: url(images/tokens75/bonus_teamwork_off.png); }
+.bonus_teamwork.on { background-image: url(images/tokens75/bonus_teamwork_on.png); }
+
+.token.medallion {
+	background-color: tan;
+	border-radius: 10px;
+	border-color: wheat brown brown wheat;
+}
+
+.medallion_container {
+	position: absolute;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	width: 70px;
+	height: 70px;
+}
+
 /* PANELS */
 
 .panel {
@@ -72,45 +170,6 @@ main {
   background-image: url("images/initiative_counter_clockwise.png");
 }
 
-.standee[data-standee-id="0"] {
-  background-image: url("images/standees/standee_0.png");
-}
-
-.standee[data-standee-id="1"] {
-  background-image: url("images/standees/standee_1.png");
-}
-
-.standee[data-standee-id="2"] {
-  background-image: url("images/standees/standee_2.png");
-}
-
-.standee[data-standee-id="3"] {
-  background-image: url("images/standees/standee_3.png");
-}
-
-.standee[data-standee-id="4"] {
-  background-image: url("images/standees/standee_4.png");
-}
-
-.bonus[data-bonus-id="0"][data-bonus-on="0"] {
-  background-image: url("images/bonus/bonus_0_off.png");
-}
-
-.bonus[data-bonus-id="0"][data-bonus-on="1"] {
-  background-image: url("images/bonus/bonus_0_on.png");
-}
-
-.bonus[data-bonus-id="1"][data-bonus-on="0"] {
-  background-image: url("images/bonus/bonus_1_off.png");
-}
-
-.bonus[data-bonus-id="1"][data-bonus-on="1"] {
-  background-image: url("images/bonus/bonus_1_on.png");
-}
-
-.medallion[data-medallion-id="0"] {
-  background-image: url("images/medallions/medallion_0.png");
-}
 
 .medallion[data-medallion-id="1"] {
   background-image: url("images/medallions/medallion_1.png");