summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--play.css10
-rw-r--r--play.html45
-rw-r--r--play.js77
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]