Tweak panel layout.

2 files changed, 40 insertions, 44 deletions

diff --git a/play.html b/play.html
index c34c5e3..c528d7e 100644
--- a/play.html
+++ b/play.html
@@ -20,12 +20,10 @@ body.Versailles header.your_turn { background-color: skyblue; }
 #role_Commune { background-color: salmon; }
 #role_Versailles { background-color: skyblue; }
 
-#log { background-color: ivory; }
-#log .h1 { background-color: hsl(40, 50%, 67%); font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
-#log .h2 { background-color: hsl(40, 50%, 77%); padding-top:2px; padding-bottom:2px; text-align: center; }
-#log .h3 { text-decoration: underline }
-#log .commune { background-color: lightpink }
-#log .versailles { background-color: lightblue }
+#log { background-color: #f7f4e1; }
+#log .h1 { background-color: #dcd7af; font-weight: bold; padding:2px 0; text-align: center; }
+#log .h2 { background-color: #dcd7af; padding: 0; text-align: center; }
+#log .h3 { text-decoration: underline #575a53; }
 #log > .i { padding-left: 20px; }
 #log .tip { font-style: italic }
 #log .tip:hover { cursor: pointer; text-decoration: underline; }
@@ -61,24 +59,20 @@ body.Versailles header.your_turn { background-color: skyblue; }
 	gap: 20px;
 }
 
-#hand, #discard, #set_aside, #commune_cards, #versailles_cards {
+#hand, #discard, #set_aside, #red_objective, #blue_objective {
 	min-height: 350px;
 }
 
 #hand { min-width: 1060px }
 #hand.censorship { min-width: 1330px }
-#commune_cards { min-width: 790px }
-#versailles_cards { min-width: 790px }
+#red_objective { min-width: 250px }
+#blue_objective { min-width: 250px }
 #set_aside { min-width: 790px }
 #discard { min-width: 250px }
+#final { min-width: 520px }
 
-#commune_cards_header {
-	background-color: #633;
-}
-
-#versailles_cards_header {
-	background-color: #345;
-}
+#red_objective_header { background-color: #761c1e; }
+#blue_objective_header { background-color: #2a4e6e; }
 
 #hand, #set_aside {
 	flex-grow: 1
@@ -469,19 +463,27 @@ body.Observer #set_aside_panel { display: none }
 <div id="hand" class="panel_body"></div>
 </div>
 
+</div>
+<div class="panel_grid">
+
 <div id="discard_panel" class="panel">
 <div id="discard_header" class="panel_header">Discard</div>
 <div id="discard" class="panel_body"></div>
 </div>
 
-<div id="versailles_cards_panel" class="panel">
-<div id="versailles_cards_header" class="panel_header">Versailles</div>
-<div id="versailles_cards" class="panel_body"></div>
+<div id="final_panel" class="panel">
+<div id="final_header" class="panel_header">Final Cards</div>
+<div id="final" class="panel_body"></div>
+</div>
+
+<div id="blue_objective_panel" class="panel">
+<div id="blue_objective_header" class="panel_header">Versailles Objective</div>
+<div id="blue_objective" class="panel_body"></div>
 </div>
 
-<div id="commune_cards_panel" class="panel">
-<div id="commune_cards_header" class="panel_header">Commune</div>
-<div id="commune_cards" class="panel_body"></div>
+<div id="red_objective_panel" class="panel">
+<div id="red_objective_header" class="panel_header">Commune Objective</div>
+<div id="red_objective" class="panel_body"></div>
 </div>
 
 <div id="set_aside_panel" class="panel">
diff --git a/play.js b/play.js
index 4dcf283..fe3d55c 100644
--- a/play.js
+++ b/play.js
@@ -353,7 +353,6 @@ function sub_space_name(match, p1, offset, string) {
 		if (c <= 11)
 			return '<span class="paris">' + n + "</span>"
 	}
-
 	if (true) {
 		if (c <= 2)
 			return '<img class="s" src="space_institutional.svg">' + n
@@ -416,12 +415,7 @@ function on_log(text) {
 
 	if (text.match(/^\.h2/)) {
 		text = text.substring(4)
-		if (text === 'Commune')
-			p.className = 'h2 commune'
-		else if (text === 'Versailles')
-			p.className = 'h2 versailles'
-		else
-			p.className = 'h2'
+		p.className = 'h2'
 	}
 
 	if (text.match(/^\.h3/)) {
@@ -429,16 +423,11 @@ function on_log(text) {
 		p.className = 'h3'
 	}
 
-	if (text.match(/^.hr$/)) {
-		p.className = "hr";
-		text = "";
-	}
-
 	p.innerHTML = text
 	return p
 }
 
-function on_update_objective(parent, objective) {
+function on_update_objective(panel, parent, objective) {
 	if (typeof objective === "object") {
 		for (let c of objective)
 			parent.appendChild(ui.cards[c])
@@ -446,7 +435,6 @@ function on_update_objective(parent, objective) {
 		parent.appendChild(ui.objective_back[0])
 	} else if (objective === 2) {
 		parent.appendChild(ui.objective_back[0])
-		parent.appendChild(ui.objective_back[1])
 	} else if (objective > 2) {
 		parent.appendChild(ui.cards[objective])
 	}
@@ -477,18 +465,20 @@ function on_update() {
 	document.querySelector("body").classList.toggle("censorship", view.censorship === 1)
 
 	document.getElementById("hand").replaceChildren()
+	document.getElementById("final").replaceChildren()
 	document.getElementById("discard").replaceChildren()
 	document.getElementById("set_aside").replaceChildren()
-	document.getElementById("commune_cards").replaceChildren()
-	document.getElementById("versailles_cards").replaceChildren()
+	document.getElementById("red_objective").replaceChildren()
+	document.getElementById("blue_objective").replaceChildren()
 
+	if (view.blue_final)
+		document.getElementById("final").appendChild(ui.cards[view.blue_final])
 	if (view.red_final)
-		document.getElementById("commune_cards").appendChild(ui.cards[view.red_final])
-	on_update_objective(document.getElementById("commune_cards"), view.red_objective)
+		document.getElementById("final").appendChild(ui.cards[view.red_final])
 
-	if (view.blue_final)
-		document.getElementById("versailles_cards").appendChild(ui.cards[view.blue_final])
-	on_update_objective(document.getElementById("versailles_cards"), view.blue_objective)
+	on_update_objective(document.getElementById("blue_objective_panel"), document.getElementById("blue_objective"), view.blue_objective)
+
+	on_update_objective(document.getElementById("red_objective_panel"), document.getElementById("red_objective"), view.red_objective)
 
 	if (view.discard)
 		document.getElementById("discard").appendChild(ui.cards[view.discard])
@@ -496,9 +486,13 @@ function on_update() {
 	if (view.hand)
 		for (let c of view.hand)
 			document.getElementById("hand").appendChild(ui.cards[c])
-	if (view.set_aside)
+	if (view.set_aside) {
+		document.getElementById("set_aside_panel").classList.remove("hide")
 		for (let c of view.set_aside)
 			document.getElementById("set_aside").appendChild(ui.cards[c])
+	} else {
+		document.getElementById("set_aside_panel").classList.add("hide")
+	}
 
 	for (let i = 0; i < space_names.length; ++i)
 		layout[i] = []