From 910f4ce43eb2ad1c0078473ff37d13eb7a46a331 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Sat, 2 Dec 2023 16:50:46 +0100
Subject: show asterisk for states that have claimable cards
---
play.html | 31 +++++++++++++++++++------------
play.js | 20 +++++++++++++++++---
2 files changed, 36 insertions(+), 15 deletions(-)
diff --git a/play.html b/play.html
index c5cda10..de32069 100644
--- a/play.html
+++ b/play.html
@@ -274,6 +274,13 @@ div.label.large {
height: 15px;
}
+div.label.claimable::after {
+ content: '*';
+ position: relative;
+ top: -0.5em;
+ font-size: 80%;
+}
+
div.state.selected {
border-color: yellow;
}
@@ -1113,7 +1120,7 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
- NJ
+ NJ
CT
RI
MA
@@ -1123,16 +1130,16 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
MD
ME
- NY
+ NY
NC
- VA
- PA
+ VA
+ PA
WV
KY
TN
- OH
+ OH
IN
- IL
+ IL
MI
WI
MO
@@ -1140,26 +1147,26 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
MN
FL
SC
- GA
+ GA
AL
MS
LA
AR
- TX
+ TX
OK
- KS
+ KS
NE
SD
ND
CO
WY
- MT
+ MT
NM
AZ
- UT
+ UT
NV
ID
- CA
+ CA
OR
WA
diff --git a/play.js b/play.js
index a57676f..c136495 100644
--- a/play.js
+++ b/play.js
@@ -48,6 +48,7 @@ let ui = {
cards: [ null ],
us_states: [ null ],
regions: [ null ],
+ labels: {},
}
// :r !python3 tools/genlayout.py
@@ -111,6 +112,10 @@ const LAYOUT = {
const US_STATES_LAYOUT = [ null ]
const REGIONS_LAYOUT = [ null ]
+function find_us_state(name) {
+ return US_STATES.findIndex((x) => x && x.name === name)
+}
+
// bits
// RED cubes (6 bits), YELLOW cubes (7 bits), PURPLE cubes (7 bits), RED_X (1 bit), GREEN_CHECK (1 bit),
@@ -409,12 +414,16 @@ function build_user_interface() {
}
for (let s = 1; s <= us_states_count; ++s) {
- let us_state_css = US_STATES[s].code
- elt = ui.us_states[s] = document.querySelector(`#map #${us_state_css}`)
+ let us_state_code = US_STATES[s].code
+ elt = ui.us_states[s] = document.querySelector(`#map #${us_state_code}`)
elt.my_us_state = s
elt.addEventListener("mousedown", on_click_us_state)
elt.addEventListener("mouseenter", on_focus_us_state)
elt.addEventListener("mouseleave", on_blur)
+
+ let label = document.getElementById("label_" + us_state_code)
+ if (label)
+ ui.labels[us_state_code] = label
}
ui.campaigners = [
@@ -676,8 +685,11 @@ function on_update() { // eslint-disable-line no-unused-vars
for (let c of view.opposition_claimed)
document.getElementById("opposition_claimed").appendChild(ui.cards[c])
- for (let c of view.states_draw)
+ let claimable = new Set()
+ for (let c of view.states_draw) {
document.getElementById("states_draw").appendChild(ui.cards[c])
+ claimable.add(find_us_state(CARDS[c].name))
+ }
for (let c of view.strategy_draw)
document.getElementById("strategy_draw").appendChild(ui.cards[c])
@@ -766,6 +778,8 @@ function on_update() { // eslint-disable-line no-unused-vars
}
}
ui.us_states[i].classList.toggle("selected", i === view.selected_us_state)
+ if (US_STATES[i].code in ui.labels)
+ ui.labels[US_STATES[i].code].classList.toggle("claimable", claimable.has(i))
}
ui.pieces.replaceChildren(pieces)
--
cgit v1.2.3