show psl and ap on aside

2 files changed, 32 insertions, 6 deletions

diff --git a/play.html b/play.html
index aa3dfd8..25d12e3 100644
--- a/play.html
+++ b/play.html
@@ -17,6 +17,12 @@ main { background-color: dimgray }
 #role_FLN .role_name { background-color: #C1E1C1;}
 #role_Government .role_name { background-color: #BCDDFF;}
 
+.role.active span { text-decoration: underline; }
+.role_ap_text { color: #555; float: right; margin-right: 4px; }
+.role_ap { float: right; margin-right: 8px;}
+.role_psl_text { color: #555; float: right; margin-right: 4px;}
+.role_psl { float: right; }
+
 #log { background-color: whitesmoke; }
 #log .h1 { background-color: silver; font-weight: bold; padding-top:4px; padding-bottom:4px; margin: 8px 0; text-align: center; }
 #log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }
@@ -232,15 +238,19 @@ main { background-color: dimgray }
 <aside>
 	<div id="roles">
 		<div class="role" id="role_FLN">
-			<div class="role_name">
-				FLN &#x2013;
-				<span class="role_user">-</span>
+			<div class="role_name"><span>FLN</span>
+				<div class="role_psl"></div>
+				<div class="role_psl_text">PSL</div>
+				<div class="role_ap"></div>
+				<div class="role_ap_text">AP</div>
+				<div class="role_user">-</div>
 			</div>
 		</div>
 		<div class="role" id="role_Government">
-			<div class="role_name">
-				Government &#x2013;
-				<span class="role_user">-</span>
+			<div class="role_name"><span>Government</span>
+				<div class="role_psl"></div>
+				<div class="role_psl_text">PSL</div>
+				<div class="role_user">-</div>
 			</div>
 		</div>
 	</div>
diff --git a/play.js b/play.js
index 4250a4c..f913a23 100644
--- a/play.js
+++ b/play.js
@@ -4,6 +4,9 @@
 
 const SCALE = 1.8033333333333332
 
+const FLN = 0
+const GOV = 1
+
 const DEPLOY = 1
 const ELIMINATED = 2
 
@@ -47,6 +50,11 @@ let ui = {
 		document.getElementById("role_FLN"),
 		document.getElementById("role_Government"),
 	],
+	ap: document.querySelector("#role_FLN .role_ap"),
+	psl: [
+		document.querySelector("#role_FLN .role_psl"),
+		document.querySelector("#role_Government .role_psl"),
+	],
 	markers: {
 		turn: document.getElementById("turn_now"),
 		fln_psl: document.getElementById("fln_psl"),
@@ -392,6 +400,14 @@ Node.prototype.appendChildAnimated = function(e) {
 
 function update_map() {
 	console.log("VIEW", view)
+
+	ui.player[FLN].classList.toggle("active", view.active === "FLN")
+	ui.player[GOV].classList.toggle("active", view.active === "Government")
+
+	ui.ap.textContent = view.fln_ap
+	ui.psl[FLN].textContent = view.fln_psl
+	ui.psl[GOV].textContent = view.gov_psl
+
 	ui.tracker[view.turn % 100].appendChildAnimated(ui.markers.turn)
 	ui.tracker[view.fln_ap].appendChildAnimated(ui.markers.fln_ap)
 	ui.tracker[view.fln_psl].appendChildAnimated(ui.markers.fln_psl)