experiment with reserve position

2 files changed, 136 insertions, 120 deletions

diff --git a/cards.css b/cards.css
index 16dde96..b7506d3 100644
--- a/cards.css
+++ b/cards.css
@@ -21,6 +21,18 @@
 	user-select: none;
 }
 
+.flip .card {
+	box-shadow: -1px -2px 8px #0008;
+}
+
+.flip .card, .flip .card > div {
+	transform: rotate(180deg);
+}
+
+.flip .card > div.link {
+	transform: none;
+}
+
 /* FORMATION CARD */
 
 .name {
diff --git a/play.html b/play.html
index 323d4e2..d478f12 100644
--- a/play.html
+++ b/play.html
@@ -15,10 +15,36 @@
 <script defer src="play.js"></script>
 <style>
 
+:root {
+	--red: hsl(360, 77%, 51%);
+	--pink: hsl(359, 81%, 78%);
+	--blue: hsl(211, 78%, 52%);
+	--dkblue: hsl(240, 69%, 57%);
+
+	--hi-red: hsl(360, 77%, 61%);
+	--hi-pink: hsl(359, 81%, 83%);
+	--hi-blue: hsl(211, 78%, 62%);
+	--hi-dkblue: hsl(240, 69%, 67%);
+
+	--lo-red: hsl(360, 77%, 41%);
+	--lo-pink: hsl(359, 81%, 68%);
+	--lo-blue: hsl(211, 78%, 42%);
+	--lo-dkblue: hsl(240, 69%, 47%);
+
+	--gray: hsl(0, 0%, 90%);
+	--lo-gray: hsl(0, 0%, 75%);
+	--hi-gray: hsl(0, 0%, 100%);
+}
+
 #replay_panel { background-color: tan; }
 #roles { background-color: bisque; }
 #log { background-color: floralwhite; }
 
+.role.blue { background-color: #8bf }
+.role.red { background-color: #f88 }
+
+/* LOG */
+
 #log .h1 {
 	text-align: center;
 	font-weight: bold;
@@ -61,8 +87,20 @@
 #log .red { background-color: pink; }
 #log .pink { background-color: mistyrose; }
 
-.role.blue { background-color: #8bf }
-.role.red { background-color: #f88 }
+.mini {
+	display: inline-block;
+	vertical-align: -3px;
+	width: 12px;
+	height: 12px;
+	border-width: 1px;
+	background-size: 600% 100%;
+	background-repeat: no-repeat;
+	background-image: url(images/die_black_pips.svg);
+	background-color: #ccc;
+	border: 1px solid black;
+}
+
+/* PANELS */
 
 main {
 	background-color: #666;
@@ -71,31 +109,37 @@ main {
 	box-shadow: inset 0 0 8px #0008;
 }
 
-#player1, #player2 {
-	padding: 1px;
-}
-
 /* TODO: set min-width per scenario */
 .table { min-width: fit-content; }
 
-.card, .card * {
-	pointer-events: none;
+/* TODO: set this if side ever has any reserves */
+.table_reserve.always { min-height: 449px; }
+
+.player_pool {
+	width: 500px;
+	background-color: #0002;
+	margin: 0 auto;
 }
 
-.card.action, .card *.action {
-	pointer-events: auto;
+#player1 .player_pool {
+	margin: 0 auto 23px auto;
+	border-radius: 0 0 24px 24px;
+	padding-bottom: 4px;
 }
 
-.number { display: none; }
-body.shift .number { display: block; }
+#player2 .player_pool {
+	margin: 23px auto 0 auto;
+	border-radius: 24px 24px 0 0;
+	padding-top: 4px;
+}
 
+/*
 .player_pool {
-	width: 500px;
-	margin: 24px auto;
-	background-color: #2225;
-	padding: 2px;
+	margin: 23px auto;
 	border-radius: 24px;
+	padding: 4px;
 }
+*/
 
 .player_name {
 	color: antiquewhite;
@@ -104,43 +148,57 @@ body.shift .number { display: block; }
 	text-align: center;
 	font-style: italic;
 	font-family: "Source Serif";
-	margin: 4px;
+	//padding: 4px;
 }
 
-.table_reserve, .table_front, .table_pool {
+.table_pool {
+	display: flex;
+	justify-content: center;
+	height: 36px;
+	gap: 12px;
+	align-items: center;
+	margin: 8px;
+}
+
+.table_reserve, .table_front {
 	display: flex;
 	justify-content: center;
 	gap: 24px;
-	padding: 0 23px;
+	padding: 0 24px;
 }
 
-.table_reserve, .table_front { align-items: start; }
-.flip .table_reserve, .flip .table_front { align-items: end; }
+#player1 .table_reserve, #player1 .table_front { align-items: end; }
+#player2 .table_reserve, #player2 .table_front { align-items: start; }
 
 .table_front {
 	min-height: 509px;
 }
 
 .table_reserve {
-	min-height: 1px;
+	background-color: #0002;
+}
+
+#player1 .table_reserve { padding: 24px 24px 0 24px; }
+#player2 .table_reserve { padding: 0 24px 24px 24px; }
+
+#player1 .table_reserve, #player1 .table_front {
+	flex-direction: row-reverse;
 }
 
-.table_reserve .slot_dice { display: none }
+/* CARD SLOTS */
 
 .slot_cubes {
 	height: 87px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
-	align-items: end;
 	flex-wrap: wrap;
 	gap: 8px;
 	margin: 12px;
 }
 
-.flip .slot_cubes {
-	align-items: start;
-}
+#player1 .slot_cubes { align-items: start; }
+#player2 .slot_cubes { align-items: end; }
 
 /* S38 Fleurus - Retreat to Nivelles */
 [data-card="237A"] .slot_cubes:empty { display: none }
@@ -150,17 +208,20 @@ body.shift .number { display: block; }
 	margin: 12px;
 	min-height: 87px;
 	display: flex;
-	flex-direction: column;
-	justify-content: end;
 	align-items: center;
 	gap: 1px;
 }
 
-.flip .slot_sticks {
+#player1 .slot_sticks {
 	justify-content: start;
 	flex-direction: column-reverse;
 }
 
+#player2 .slot_sticks {
+	justify-content: end;
+	flex-direction: column;
+}
+
 .slot_shift {
 	min-height: 11px;
 	display: flex;
@@ -180,39 +241,43 @@ body.shift .number { display: block; }
 	height: 36px;
 	flex-direction: row;
 	justify-content: center;
-	align-ntems: end;
 	flex-wrap: wrap;
 	gap: 6px;
 	margin: 12px 0;
 }
 
-.stick {
-	width: 90%;
-	//margin: 0 auto;
-	height: 6px;
-	border: 2px solid black;
-	box-shadow: 0 0 0 1px #0008, 1px 1px 3px 1px #0004;
+.table_reserve .slot_dice {
+	display: none;
 }
 
-:root {
-	--red: hsl(360, 77%, 51%);
-	--pink: hsl(359, 81%, 78%);
-	--blue: hsl(211, 78%, 52%);
-	--dkblue: hsl(240, 69%, 57%);
+/* PIECES */
 
-	--hi-red: hsl(360, 77%, 61%);
-	--hi-pink: hsl(359, 81%, 83%);
-	--hi-blue: hsl(211, 78%, 62%);
-	--hi-dkblue: hsl(240, 69%, 67%);
+.card, .card * {
+	pointer-events: none;
+}
 
-	--lo-red: hsl(360, 77%, 41%);
-	--lo-pink: hsl(359, 81%, 68%);
-	--lo-blue: hsl(211, 78%, 42%);
-	--lo-dkblue: hsl(240, 69%, 47%);
+.card.action, .card *.action {
+	pointer-events: auto;
+}
 
-	--gray: hsl(0, 0%, 90%);
-	--lo-gray: hsl(0, 0%, 75%);
-	--hi-gray: hsl(0, 0%, 100%);
+.card .number { display: none; }
+body.shift .card .number { display: block; }
+
+.cube {
+	width: 24px;
+	height: 24px;
+	background-color: #eee;
+	border-style: solid;
+	border-width: 2px;
+	border-color: #fff #ccc #ccc #fff;
+	box-shadow: 0 0 0 1px #333, 1px 2px 3px 1px #0004;
+}
+
+.stick {
+	width: 90%;
+	height: 6px;
+	border: 2px solid black;
+	box-shadow: 0 0 0 1px #0008, 1px 1px 3px 1px #0004;
 }
 
 .red .stick { background-color: var(--red); }
@@ -227,49 +292,6 @@ body.shift .number { display: block; }
 
 .hit.stick { background-color: var(--gray); border-color: var(--hi-gray) var(--lo-gray) var(--lo-gray) var(--hi-gray); }
 
-.table_pool {
-	margin: 12px;
-	height: 36px;
-	gap: 12px;
-	align-items: center;
-}
-
-.flip .table_reserve, .flip .table_front {
-	flex-direction: row-reverse;
-}
-
-.card {
-	box-shadow: 1px 2px 8px #0008;
-}
-
-.flip .card {
-	box-shadow: -1px -2px 8px #0008;
-}
-
-.flip .card, .flip .card > div {
-	transform: rotate(180deg);
-}
-
-.flip .card > div.link {
-	transform: none;
-}
-
-.table_separator {
-	text-align: center;
-	color: orange;
-	font-size: 48px;
-}
-
-.cube {
-	width: 24px;
-	height: 24px;
-	background-color: #eee;
-	border-style: solid;
-	border-width: 2px;
-	border-color: #fff #ccc #ccc #fff;
-	box-shadow: 0 0 0 1px #333, 1px 2px 3px 1px #0004;
-}
-
 .die {
 	width: 32px;
 	height: 32px;
@@ -284,19 +306,6 @@ body.shift .number { display: block; }
 	box-shadow: 0 0 0 1px #333, 1px 2px 3px 1px #0004;
 }
 
-.mini {
-	display: inline-block;
-	vertical-align: -3px;
-	width: 12px;
-	height: 12px;
-	border-width: 1px;
-	background-size: 600% 100%;
-	background-repeat: no-repeat;
-	background-image: url(images/die_black_pips.svg);
-	background-color: #ccc;
-	border: 1px solid black;
-}
-
 .d0 { background-position: -100% 0 }
 .d1 { background-position: 0% 0; }
 .d2 { background-position: 20% 0; }
@@ -316,6 +325,8 @@ body.shift .number { display: block; }
 	text-align: center;
 }
 
+/* ACTION HIGHLIGHTS */
+
 .die.action { box-shadow: 0 0 0 1px #333, 0 0 0px 3px white; }
 .card.action { box-shadow: 0 0 0 3px whitesmoke; }
 .card.selected { box-shadow: 0 0 0px 3px gold; }
@@ -337,13 +348,6 @@ body.shift .number { display: block; }
 	background-color: #fff4;
 }
 
-/*
-.card.blue.selected { box-shadow: 0 0 0px 3px dodgerblue; }
-.card.dkblue.selected { box-shadow: 0 0 0px 3px dodgerblue; }
-.card.pink.selected { box-shadow: 0 0 0px 3px red; }
-.card.red.selected { box-shadow: 0 0 0px 3px red; }
-*/
-
 </style>
 </head>
 <body>
@@ -382,23 +386,23 @@ body.shift .number { display: block; }
 	<div class="table">
 
 		<div class="flip" id="player1">
+			<div id="reserve1" class="table_reserve"></div>
 			<div class="player_pool">
-				<div id="name1" class="player_name"></div>
+				<div id="name1" class="player_name">&nbsp;</div>
 				<div id="pool1" class="table_pool"></div>
 				<div id="morale1" class="table_pool"></div>
 			</div>
-			<div id="reserve1" class="table_reserve"></div>
 			<div id="front1" class="table_front"></div>
 		</div>
 
 		<div id="player2">
 			<div id="front2" class="table_front"></div>
-			<div id="reserve2" class="table_reserve"></div>
 			<div class="player_pool">
 				<div id="morale2" class="table_pool"></div>
 				<div id="pool2" class="table_pool"></div>
-				<div id="name2" class="player_name"></div>
+				<div id="name2" class="player_name">&nbsp;</div>
 			</div>
+			<div id="reserve2" class="table_reserve"></div>
 		</div>
 
 	<div class="table">