diff options
| -rw-r--r-- | play.html | 22 | ||||
| -rw-r--r-- | play.js | 16 |
2 files changed, 32 insertions, 6 deletions
@@ -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 – - <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 – - <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> @@ -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) |