Add panels for different card areas - hand, objective, final.

3 files changed, 72 insertions, 9 deletions

diff --git a/play.html b/play.html
index 1a2151b..c722096 100644
--- a/play.html
+++ b/play.html
@@ -37,18 +37,54 @@ body.Versailles header.your_turn { background-color: skyblue; }
 	cursor: pointer;
 }
 
-#hand {
+/* PANELS */
+
+.panel_grid {
+	display: grid;
+	grid-template-columns: min-content 1fr;
+	max-width: 1500px;
+	margin: 18px auto;
+	gap: 18px;
+}
+
+#hand_panel {
+	grid-column: 1 / 3;
+}
+
+#objective {
+	min-width: 250px;
+}
+
+.panel {
+	background-color: #555;
+}
+
+.panel_header {
+	background-color: #444;
+	color: white;
+	user-select: none;
+	font-weight: bold;
+	text-align: center;
+	padding: 3px 1em;
+}
+
+.panel_body {
 	display: flex;
+	justify-content: start;
 	flex-wrap: wrap;
-	justify-content: center;
-	margin: 20px;
-	gap: 20px;
+	padding: 18px;
+	gap: 18px;
+	min-height: 350px;
 }
 
+body.Observer #final_panel { display: none }
+
+/* CARDS */
+
 .card {
 	background-size: cover;
 	background-repeat: no-repeat;
-	background-color: ivory;
+	background-color: #555;
 	width: 250px;
 	height: 350px;
 	border-radius: 16px;
@@ -375,7 +411,7 @@ body.Versailles header.your_turn { background-color: skyblue; }
 
 <main>
 
-<div id="mapwrap" class="fit">
+<div id="mapwrap">
 <div id="map">
 <div id="spaces"></div>
 <div id="pieces">
@@ -388,7 +424,24 @@ body.Versailles header.your_turn { background-color: skyblue; }
 </div>
 </div>
 
-<div id="hand"></div>
+<div class="panel_grid">
+
+<div id="hand_panel" class="panel">
+<div id="hand_header" class="panel_header">Hand</div>
+<div id="hand" class="panel_body"></div>
+</div>
+
+<div id="objective_panel" class="panel">
+<div id="objective_header" class="panel_header">Objective</div>
+<div id="objective" class="panel_body"></div>
+</div>
+
+<div id="final_panel" class="panel">
+<div id="final_header" class="panel_header">Set-aside cards</div>
+<div id="final" class="panel_body"></div>
+</div>
+
+</div>
 
 </main>
 
diff --git a/play.js b/play.js
index f2691b2..1c3c137 100644
--- a/play.js
+++ b/play.js
@@ -357,11 +357,16 @@ function on_update() {
 	ui.political_vp.className = `piece cylinder orange vp${5+view.political_vp}`
 
 	document.getElementById("hand").replaceChildren()
-	if (view.objective)
-		document.getElementById("hand").appendChild(ui.cards[view.objective])
+	document.getElementById("final").replaceChildren()
+	document.getElementById("objective").replaceChildren()
 	if (view.hand)
 		for (let c of view.hand)
 			document.getElementById("hand").appendChild(ui.cards[c])
+	if (view.final)
+		for (let c of view.final)
+			document.getElementById("final").appendChild(ui.cards[c])
+	if (view.objective)
+		document.getElementById("objective").appendChild(ui.cards[view.objective])
 
 	for (let i = 0; i < space_names.length; ++i)
 		layout[i] = []
diff --git a/rules.js b/rules.js
index 55cd221..9672559 100644
--- a/rules.js
+++ b/rules.js
@@ -1034,9 +1034,11 @@ exports.setup = function (seed, scenario, options) {
 		discard: 0,
 
 		red_hand: [ 34 ],
+		red_final: [],
 		red_objective: 0,
 
 		blue_hand: [ 17 ],
+		blue_final: [],
 		blue_objective: 0,
 
 		presence: 0,
@@ -1146,15 +1148,18 @@ exports.view = function(state, player) {
 
 		discard: game.discard,
 		hand: 0,
+		final: 0,
 		objective: 0
 	}
 
 	if (player === COMMUNE) {
 		view.hand = game.red_hand
+		view.final = game.red_final
 		view.objective = game.red_objective
 	}
 	if (player === VERSAILLES) {
 		view.hand = game.blue_hand
+		view.final = game.blue_final
 		view.objective = game.blue_objective
 	}