summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMischa Untaga <99098079+MischaU8@users.noreply.github.com>2023-11-28 10:34:48 +0100
committerMischa Untaga <99098079+MischaU8@users.noreply.github.com>2023-11-28 10:34:48 +0100
commit8f868927fecdb4cf36dc33721a6aeccbb6d15001 (patch)
tree549cfd78452b9feeb5d66bcd2a693a8c43205ac7
parent8f83dd64c05b7313008970d8947c9fc2abe0766a (diff)
downloadvotes-for-women-8f868927fecdb4cf36dc33721a6aeccbb6d15001.tar.gz
dom render cleanup
-rw-r--r--play.js104
1 files changed, 26 insertions, 78 deletions
diff --git a/play.js b/play.js
index 48d5a34..77e9676 100644
--- a/play.js
+++ b/play.js
@@ -17,13 +17,6 @@ const REGION_NAMES = [
"Northeast"
]
-const PURPLE = 1
-const YELLOW = 2
-// const PURPLE_OR_YELLOW = 3
-const RED = 4
-// const GREEN_CHECK = 5
-// const RED_X = 6
-
const region_count = 6
const us_states_count = region_count * 8
const card_count = 128
@@ -243,20 +236,8 @@ function is_us_state_action(i) {
return false
}
-function is_purple_cube_action(i) {
- if (view.actions && view.actions.purple_cube && view.actions.purple_cube.includes(i))
- return true
- return false
-}
-
-function is_yellow_cube_action(i) {
- if (view.actions && view.actions.yellow_cube && view.actions.yellow_cube.includes(i))
- return true
- return false
-}
-
-function is_red_cube_action(i) {
- if (view.actions && view.actions.red_cube && view.actions.red_cube.includes(i))
+function is_color_cube_action(color, i) {
+ if (view.actions && view.actions[color + "_cube"] && view.actions[color + "_cube"].includes(i))
return true
return false
}
@@ -335,11 +316,7 @@ function on_click_campaigner(evt) {
function on_click_cube(evt) {
if (evt.button === 0) {
- if (evt.target.my_cube === PURPLE && send_action('purple_cube', evt.target.my_us_state))
- evt.stopPropagation()
- if (evt.target.my_cube === YELLOW && send_action('yellow_cube', evt.target.my_us_state))
- evt.stopPropagation()
- if (evt.target.my_cube === RED && send_action('red_cube', evt.target.my_us_state))
+ if (send_action(evt.target.my_cube_color + '_cube', evt.target.my_us_state))
evt.stopPropagation()
}
hide_popup_menu()
@@ -447,13 +424,10 @@ function build_user_interface() {
]
for (let i = 0; i < 190; ++i) {
- // XXX do we need to set the color here?
- // let color = (i < 65) ? "purple" : (i < 130) ? "yellow" : "red"
elt = ui.cubes[i] = create("div", {
className: `piece cube`,
onmousedown: on_click_cube,
})
- document.getElementById("pieces").appendChild(elt)
}
for (let i = 0; i < green_check_count; ++i) {
@@ -461,7 +435,6 @@ function build_user_interface() {
className: `piece yes`,
onmousedown: on_click_green_check,
})
- document.getElementById("pieces").appendChild(elt)
}
for (let i = 0; i < red_x_count; ++i) {
@@ -469,7 +442,6 @@ function build_user_interface() {
className: `piece no`,
onmousedown: on_click_red_x,
})
- document.getElementById("pieces").appendChild(elt)
}
}
@@ -726,17 +698,17 @@ function on_update() { // eslint-disable-line no-unused-vars
ui.us_states[i].classList.toggle("action", is_us_state_action(i))
}
+ // Pieces (Campaigners, Cubes, Checks and Xs)
+ const pieces = new DocumentFragment()
for (let i = 0; i < ui.campaigners.length; ++i) {
let campaigner_region = view.campaigners[i]
if (campaigner_region) {
- ui.pieces.appendChild(ui.campaigners[i])
+ pieces.append(ui.campaigners[i])
let [x, y] = REGIONS_LAYOUT[campaigner_region]
ui.campaigners[i].style.left = x - 30 + (15 * (i % 4)) + "px"
ui.campaigners[i].style.top = y - 40 + (30 * Math.floor(i / 4)) + "px"
ui.campaigners[i].classList.toggle("action", is_campaigner_action(1 + i))
ui.campaigners[i].classList.toggle("selected", 1 + i === view.selected_campaigner)
- } else {
- ui.campaigners[i].remove()
}
}
@@ -744,40 +716,26 @@ function on_update() { // eslint-disable-line no-unused-vars
let green_check_idx = 0
let red_x_idx = 0
let e = null
+ const colors = ["purple", "yellow", "red"]
+ function place_cubes(state_cubes, us_state, count, color) {
+ let others = colors.filter(c => c !== color)
+ for (let c = 0; c < count; ++c) {
+ e = ui.cubes[cube_idx++]
+ e.my_us_state = us_state
+ e.my_cube_color = color
+ e.classList.add(color)
+ e.classList.remove(...others)
+ e.classList.toggle("action", is_color_cube_action(color, us_state))
+ state_cubes.push(e)
+ pieces.append(e)
+ }
+ }
for (let i = 1; i < ui.us_states.length; ++i) {
- // TODO Cleanup
if (view.us_states[i]) {
let state_cubes = []
- for (let c = 0; c < purple_cubes(i); ++c) {
- e = ui.cubes[cube_idx++]
- e.my_us_state = i
- e.my_cube = PURPLE
- e.classList.add("purple")
- e.classList.remove("yellow", "red")
- e.classList.toggle("action", is_purple_cube_action(i))
- state_cubes.push(e)
- ui.pieces.appendChild(e)
- }
- for (let c = 0; c < yellow_cubes(i); ++c) {
- e = ui.cubes[cube_idx++]
- e.my_us_state = i
- e.my_cube = YELLOW
- e.classList.add("yellow")
- e.classList.remove("purple", "red")
- e.classList.toggle("action", is_yellow_cube_action(i))
- state_cubes.push(e)
- ui.pieces.appendChild(e)
- }
- for (let c = 0; c < red_cubes(i); ++c) {
- e = ui.cubes[cube_idx++]
- e.my_us_state = i
- e.my_cube = RED
- e.classList.add("red")
- e.classList.remove("purple", "yellow")
- e.classList.toggle("action", is_red_cube_action(i))
- state_cubes.push(e)
- ui.pieces.appendChild(e)
- }
+ place_cubes(state_cubes, i, purple_cubes(i), "purple")
+ place_cubes(state_cubes, i, yellow_cubes(i), "yellow")
+ place_cubes(state_cubes, i, red_cubes(i), "red")
let [x, y] = US_STATES_LAYOUT[i]
if (state_cubes.length) {
@@ -788,29 +746,19 @@ function on_update() { // eslint-disable-line no-unused-vars
e.classList.toggle("action", is_green_check_action(i))
e.style.left = x - 21 + "px"
e.style.top = y - 16 + "px"
- ui.pieces.appendChild(e)
+ pieces.append(e)
} else if (is_red_x(i)) {
e = ui.red_xs[red_x_idx++]
e.my_us_state = i
e.classList.toggle("action", is_red_x_action(i))
e.style.left = x - 21 + "px"
e.style.top = y - 16 + "px"
- ui.pieces.appendChild(e)
+ pieces.append(e)
}
}
ui.us_states[i].classList.toggle("selected", i === view.selected_us_state)
}
-
- // remove remaining unused cubes & checks & xs from DOM
- for (let i = cube_idx; i < ui.cubes.length; ++i) {
- ui.cubes[i].remove()
- }
- for (let i = green_check_idx; i < ui.green_checks.length; ++i) {
- ui.green_checks[i].remove()
- }
- for (let i = red_x_idx; i < ui.red_xs.length; ++i) {
- ui.red_xs[i].remove()
- }
+ ui.pieces.replaceChildren(pieces)
action_button("commit_1_button", "+1 Button")
action_button("defer", "Defer")