New player list.

3 files changed, 40 insertions, 92 deletions

diff --git a/play.css b/play.css
index abe5881..01d5cdf 100644
--- a/play.css
+++ b/play.css
@@ -5,9 +5,11 @@ main { background-color: #777; }
 #role_Cartels, header.cartels.your_turn { background-color: darkseagreen; }
 #role_FARC, header.farc.your_turn { background-color: lightcoral; }
 
-#role_Government_\+_AUC { background-image: linear-gradient(150deg, skyblue 40%, khaki 60%) }
-#role_FARC_\+_Cartels { background-image: linear-gradient(150deg, lightcoral 40%, hsl(60, 20%, 60%) 52%, darkseagreen 60%) }
-#role_AUC_\+_Cartels { background-image: linear-gradient(150deg, khaki 40%, darkseagreen 60%) }
+#role_Government___AUC { background-image: linear-gradient(150deg, skyblue 40%, khaki 60%) }
+#role_FARC___Cartels { background-image: linear-gradient(150deg, lightcoral 40%, hsl(60, 20%, 60%) 52%, darkseagreen 60%) }
+#role_AUC___Cartels { background-image: linear-gradient(150deg, khaki 40%, darkseagreen 60%) }
+
+#role_Solo { background-image: linear-gradient(120deg,skyblue, khaki, lightcoral, darkseagreen) }
 
 #log { background-color: whitesmoke; }
 #log .h1 { background-color: silver; font-weight: bold; padding-top:4px; padding-bottom:4px; margin: 8px 0; text-align: center; }
@@ -32,8 +34,6 @@ main { background-color: #777; }
 
 .role.active span { text-decoration: underline; }
 
-.role_vp { float: right; }
-
 #card_tip {
 	position: fixed;
 	z-index: 100;
diff --git a/play.html b/play.html
index dcef1c6..ff504c7 100644
--- a/play.html
+++ b/play.html
@@ -49,50 +49,7 @@
 </header>
 
 <aside>
-	<div id="roles">
-		<div class="role hide" id="role_Government">
-			<div class="role_name"><span>Government</span>
-				<div class="role_vp"></div>
-				<div class="role_user">-</div>
-			</div>
-		</div>
-		<div class="role hide" id="role_Government_+_AUC">
-			<div class="role_name"><span>Government + AUC</span>
-				<div class="role_vp"></div>
-				<div class="role_user">-</div>
-			</div>
-		</div>
-		<div class="role hide" id="role_FARC">
-			<div class="role_name"><span>FARC</span>
-				<div class="role_vp"></div>
-				<div class="role_user">-</div>
-			</div>
-		</div>
-		<div class="role hide" id="role_FARC_+_Cartels">
-			<div class="role_name"><span>FARC + Cartels</span>
-				<div class="role_vp"></div>
-				<div class="role_user">-</div>
-			</div>
-		</div>
-		<div class="role hide" id="role_AUC">
-			<div class="role_name"><span>AUC</span>
-				<div class="role_vp"></div>
-				<div class="role_user">-</div>
-			</div>
-		</div>
-		<div class="role hide" id="role_AUC_+_Cartels">
-			<div class="role_name"><span>AUC + Cartels</span>
-				<div class="role_vp"></div>
-				<div class="role_user">-</div>
-			</div>
-		</div>
-		<div class="role hide" id="role_Cartels">
-			<div class="role_name"><span>Cartels</span>
-				<div class="role_vp"></div>
-				<div class="role_user">-</div>
-			</div>
-		</div>
-	</div>
+	<div id="roles"></div>
 	<div id="log"></div>
 </aside>
 
diff --git a/play.js b/play.js
index b3fa4e4..4a4cece 100644
--- a/play.js
+++ b/play.js
@@ -178,9 +178,15 @@ const GOVT = 0
 const FARC = 1
 const AUC = 2
 const CARTELS = 3
-const GOVT_AUC = 4
-const FARC_CARTELS = 5
-const AUC_CARTELS = 6
+
+const NAME_GOVT = "Government"
+const NAME_FARC = "FARC"
+const NAME_AUC = "AUC"
+const NAME_CARTELS = "Cartels"
+const NAME_GOVT_AUC = "Government + AUC"
+const NAME_FARC_CARTELS = "FARC + Cartels"
+const NAME_AUC_CARTELS = "AUC + Cartels"
+const NAME_SOLO = "Solo"
 
 // Pieces
 const BASE = 0
@@ -304,24 +310,6 @@ let ui = {
 	favicon: document.getElementById("favicon"),
 	header: document.querySelector("header"),
 	status: document.getElementById("status"),
-	player: [
-		document.getElementById("role_Government"),
-		document.getElementById("role_FARC"),
-		document.getElementById("role_AUC"),
-		document.getElementById("role_Cartels"),
-		document.getElementById("role_Government_+_AUC"),
-		document.getElementById("role_FARC_+_Cartels"),
-		document.getElementById("role_AUC_+_Cartels"),
-	],
-	victory: [
-		document.querySelector("#role_Government .role_vp"),
-		document.querySelector("#role_FARC .role_vp"),
-		document.querySelector("#role_AUC .role_vp"),
-		document.querySelector("#role_Cartels .role_vp"),
-		document.querySelector("#role_Government_\\+_AUC .role_vp"),
-		document.querySelector("#role_FARC_\\+_Cartels .role_vp"),
-		document.querySelector("#role_AUC_\\+_Cartels .role_vp"),
-	],
 	capabilities: [
 		document.getElementById("cap_first_div"),
 		document.getElementById("cap_ospina"),
@@ -1113,6 +1101,16 @@ function make_card_class_name(c) {
 		return "card card_" + c + " u" + data.card_unshaded_lines[c] + " s" + data.card_shaded_lines[c]
 }
 
+function update_player_active(name, x) {
+	if (roles[name])
+		roles[name].element.classList.toggle("active", x)
+}
+
+function update_player_info(name, x) {
+	if (roles[name])
+		roles[name].stat.textContent = x
+}
+
 let once = true
 function on_update() {
 	if (once) {
@@ -1138,34 +1136,27 @@ function on_update() {
 	ui.resources[AUC].classList.toggle("action", is_action("resources", AUC))
 	ui.resources[CARTELS].classList.toggle("action", is_action("resources", CARTELS))
 
-	ui.player[GOVT].classList.toggle("hide", view.scenario < 3)
-	ui.player[AUC].classList.toggle("hide", view.scenario < 4)
-	ui.player[CARTELS].classList.toggle("hide", view.scenario < 4)
-	ui.player[FARC].classList.toggle("hide", view.scenario < 3)
-	ui.player[GOVT_AUC].classList.toggle("hide", view.scenario !== 2)
-	ui.player[FARC_CARTELS].classList.toggle("hide", view.scenario !== 2)
-	ui.player[AUC_CARTELS].classList.toggle("hide",  view.scenario !== 3)
-
-	ui.player[GOVT].classList.toggle("active", view.current === GOVT)
-	ui.player[AUC].classList.toggle("active", view.current === AUC)
-	ui.player[CARTELS].classList.toggle("active", view.current === CARTELS)
-	ui.player[FARC].classList.toggle("active", view.current === FARC)
-	ui.player[GOVT_AUC].classList.toggle("active", view.current === GOVT || view.current === AUC)
-	ui.player[FARC_CARTELS].classList.toggle("active", view.current === FARC || view.current === CARTELS)
-	ui.player[AUC_CARTELS].classList.toggle("active",  view.current === AUC || view.current === CARTELS)
+	update_player_active(NAME_GOVT, view.current === GOVT)
+	update_player_active(NAME_AUC, view.current === AUC)
+	update_player_active(NAME_CARTELS, view.current === CARTELS)
+	update_player_active(NAME_FARC, view.current === FARC)
+	update_player_active(NAME_GOVT_AUC, view.current === GOVT || view.current === AUC)
+	update_player_active(NAME_FARC_CARTELS, view.current === FARC || view.current === CARTELS)
+	update_player_active(NAME_AUC_CARTELS,  view.current === AUC || view.current === CARTELS)
 
 	let vm_g = govt_victory_margin()
 	let vm_a = auc_victory_margin()
 	let vm_f = farc_victory_margin()
 	let vm_c = cartels_victory_margin()
 
-	ui.victory[GOVT].textContent = vm_g
-	ui.victory[AUC].textContent = vm_a
-	ui.victory[CARTELS].textContent = vm_c
-	ui.victory[FARC].textContent = vm_f
-	ui.victory[GOVT_AUC].textContent = vm_g + " / " + vm_a
-	ui.victory[FARC_CARTELS].textContent = vm_f + " / " + vm_c
-	ui.victory[AUC_CARTELS].textContent = vm_a + " / " + vm_c
+	update_player_info(NAME_GOVT, vm_g)
+	update_player_info(NAME_AUC, vm_a)
+	update_player_info(NAME_CARTELS, vm_c)
+	update_player_info(NAME_FARC, vm_f)
+	update_player_info(NAME_GOVT_AUC, vm_g + " / " + vm_a)
+	update_player_info(NAME_FARC_CARTELS, vm_f + " / " + vm_c)
+	update_player_info(NAME_AUC_CARTELS, vm_a + " / " + vm_c)
+	update_player_info(NAME_SOLO, `G ${vm_g} / A ${vm_a} / C ${vm_c} / F ${vm_f}`)
 
 	ui.tokens.president.style.left = [ 0, "254px", "337px", "420px" ][view.president]