From e8a1a9911cc9c063e9e4b87ac607dfebe7ffd30f Mon Sep 17 00:00:00 2001 From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com> Date: Mon, 13 Nov 2023 16:49:25 +0100 Subject: cubes WIP --- play.js | 140 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 139 insertions(+), 1 deletion(-) (limited to 'play.js') diff --git a/play.js b/play.js index c09402d..da83033 100644 --- a/play.js +++ b/play.js @@ -24,6 +24,13 @@ 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 @@ -40,6 +47,7 @@ let ui = { pieces: document.getElementById("pieces"), support_campaigner: [], opposition_campaigner: [], + cubes: [], cards: [ null ], us_states: [ null ], regions: [ null ], @@ -106,6 +114,57 @@ const LAYOUT = { const US_STATES_LAYOUT = [ null ] const REGIONS_LAYOUT = [ null ] +// bits + +// RED cubes (6 bits), YELLOW cubes (7 bits), PURPLE cubes (7 bits), RED_X (1 bit), GREEN_CHECK (1 bit), +const GREEN_CHECK_SHIFT = 0 +const GREEN_CHECK_MASK = 1 << GREEN_CHECK_SHIFT + +const RED_X_SHIFT = 1 +const RED_X_MASK = 1 << RED_X_SHIFT + +const PURPLE_SHIFT = 2 +const PURPLE_MASK = 127 << PURPLE_SHIFT + +const YELLOW_SHIFT = 9 +const YELLOW_MASK = 127 << YELLOW_SHIFT + +const RED_SHIFT = 16 +const RED_MASK = 63 << RED_SHIFT + +function is_green_check(u) { + return (view.us_states[u] & GREEN_CHECK_MASK) === GREEN_CHECK_MASK +} + +function is_red_x(u) { + return (view.us_states[u] & RED_X_MASK) === RED_X_MASK +} + +function purple_cubes(u) { + return (view.us_states[u] & PURPLE_MASK) >> PURPLE_SHIFT +} + +function yellow_cubes(u) { + return (view.us_states[u] & YELLOW_MASK) >> YELLOW_SHIFT +} + +function red_cubes(u) { + return (view.us_states[u] & RED_MASK) >> RED_SHIFT +} + +function support_cubes(u) { + return purple_cubes(u) + yellow_cubes(u) +} + +function color_cubes(cube, u) { + if (cube === PURPLE) + return purple_cubes(u) + else if (cube === YELLOW) + return yellow_cubes(u) + else + return red_cubes(u) +} + // CARD MENU var card_action_menu = Array.from(document.getElementById("popup").querySelectorAll("li[data-action]")).map(e => e.dataset.action) @@ -368,6 +427,16 @@ function build_user_interface() { create_campaigner('red1', 1), create_campaigner('red2', 2), ] + + 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) + } } function on_focus_card_tip(card_number) { // eslint-disable-line no-unused-vars @@ -433,6 +502,27 @@ function opposition_info() { return `${pluralize(view.opposition_buttons, 'button')}, ${pluralize(view.opposition_hand, 'card')} in hand` } +function layout_cubes(list, xorig, yorig) { + const dx = 12 + const dy = 8 + if (list.length > 0) { + let ncol = Math.round(Math.sqrt(list.length)) + let nrow = Math.ceil(list.length / ncol) + function place_cube(row, col, e, z) { + let x = xorig - (row * dx - col * dx) - 10 + (nrow-ncol) * 6 + let y = yorig - (row * dy + col * dy) - 13 + (nrow-1) * 8 + e.style.left = x + "px" + e.style.top = y + "px" + e.style.zIndex = z + } + let z = 50 + let i = 0 + for (let row = 0; row < nrow; ++row) + for (let col = 0; col < ncol && i < list.length; ++col) + place_cube(row, col, list[list.length-(++i)], z--) + } +} + function on_update() { // eslint-disable-line no-unused-vars console.log("VIEW", view) @@ -485,6 +575,7 @@ function on_update() { // eslint-disable-line no-unused-vars for (let c of view.out_of_play) document.getElementById("out_of_play").appendChild(ui.cards[c]) + // TODO Replace with stacked cards for (let id of ['persistent_turn', 'persistent_game', 'persistent_ballot']) { document.getElementById(id).replaceChildren() for (let c of view[id] || []) { @@ -523,7 +614,6 @@ function on_update() { // eslint-disable-line no-unused-vars } for (let i = 0; i < ui.opposition_campaigner.length; ++i) { // TODO Cleanup - ui.opposition_campaigner[i].classList.toggle("hide", !view.opposition_campaigner[i]) let campaigner_region = view.opposition_campaigner[i] if (campaigner_region) { ui.pieces.appendChild(ui.opposition_campaigner[i]) @@ -535,6 +625,54 @@ function on_update() { // eslint-disable-line no-unused-vars } } + let ci = 0 + for (let i = 1; i < ui.us_states.length; ++i) { + // TODO Cleanup + if (view.us_states[i]) { + let state_cubes = [] + let cube = null + console.log("US_STATE", i, purple_cubes(i), yellow_cubes(i), red_cubes(i), is_green_check(i), is_red_x(i)) + for (let c = 0; c < purple_cubes(i); ++c) { + cube = ui.cubes[ci++] + // TODO track both state and color + cube.my_us_state = i + cube.my_cube = PURPLE + cube.classList.add("purple") + cube.classList.remove("yellow", "red") + state_cubes.push(cube) + ui.pieces.appendChild(cube) + console.log("add purple", cube) + } + for (let c = 0; c < yellow_cubes(i); ++c) { + cube = ui.cubes[ci++] + cube.my_us_state = i + cube.my_cube = YELLOW + cube.classList.add("yellow") + cube.classList.remove("purple", "red") + state_cubes.push(cube) + ui.pieces.appendChild(cube) + console.log("add yellow", cube) + } + for (let c = 0; c < red_cubes(i); ++c) { + cube = ui.cubes[ci++] + cube.my_us_state = i + cube.my_cube = RED + cube.classList.add("red") + cube.classList.remove("purple", "yellow") + state_cubes.push(cube) + ui.pieces.appendChild(cube) + console.log("add red", cube) + } + let [x, y] = US_STATES_LAYOUT[i] + layout_cubes(state_cubes, x, y) + } + } + + // remove remaining unused cubes from DOM + for (let i = ci; i < ui.cubes.length; ++i) { + ui.cubes[i].remove() + } + action_button("commit_1_button", "+1 Button") action_button("defer", "Defer") -- cgit v1.2.3