diff options
| -rw-r--r-- | play.html | 28 | ||||
| -rw-r--r-- | play.js | 27 |
2 files changed, 55 insertions, 0 deletions
@@ -282,6 +282,30 @@ div.congress_box.action { .piece.no { width: 42px; height: 32px; background-size: 42px 32px; background-image: url(pieces/no.svg); } .piece.congress { width: 32px; height: 32px; background-size: 32px 32px; background-image: url(pieces/cog.svg); } +div.button_box { + position: absolute; + box-sizing: border-box; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: start; + gap: 4px; +} + +.button { + width: 40px; + height: 40px; + background-size: 40px 40px; + filter: drop-shadow(0px 1px 2px #0004); +} + +.button_1{background-image:url(images/badge1.png)} +.button_2{background-image:url(images/badge2.png)} +.button_3{background-image:url(images/badge3.png)} +.button_4{background-image:url(images/badge4.png)} +.button_5{background-image:url(images/badge5.png)} +.button_6{background-image:url(images/badge6.png)} + .card { background-size: cover; background-repeat: no-repeat; @@ -965,6 +989,10 @@ 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 <div id="turn" class="piece turn" style="left:800px;top:765px;"></div> <div id="congress_box" class="congress_box" style="left:490px;top:760px;width:270px;height:60px;"> </div> + <div id="support_buttons" class="button_box" style="left:4px;top:40px;width:50px;height:534px;"> + </div> + <div id="opposition_buttons" class="button_box" style="left:1056px;top:460px;width:50px;height:270px;"> + </div> <div id="pieces"></div> @@ -40,6 +40,11 @@ let ui = { document.getElementById("role_Opposition"), ], pieces: document.getElementById("pieces"), + pieces: document.getElementById("pieces"), + support_button_box: document.getElementById("support_buttons"), + support_buttons: [], + opposition_button_box: document.getElementById("opposition_buttons"), + opposition_buttons: [], campaigners: [], cubes: [], green_checks: [], @@ -392,6 +397,18 @@ function build_user_interface() { elt.addEventListener("click", on_click_congress) } + for (let i = 0; i < 12; ++i) { + elt = ui.support_buttons[i] = create("div", { + className: `button button_${(i % 4) + 1}`, + }) + } + + for (let i = 0; i < 6; ++i) { + elt = ui.opposition_buttons[i] = create("div", { + className: `button button_${(i % 2) + 1}`, + }) + } + for (let c = 1; c <= card_count; ++c) { elt = ui.cards[c] = create("div", { className: `card card_${c}`, @@ -594,6 +611,16 @@ function on_update() { // eslint-disable-line no-unused-vars ui.congress[c].classList.toggle("action", is_action("congress")) } + ui.support_button_box.replaceChildren() + for (let i = 0; i < view.support_buttons; ++i) { + ui.support_button_box.appendChild(ui.support_buttons[i]) + } + + ui.opposition_button_box.replaceChildren() + for (let i = 0; i < view.opposition_buttons; ++i) { + ui.opposition_button_box.appendChild(ui.opposition_buttons[i]) + } + document.getElementById("hand").replaceChildren() document.getElementById("support_claimed").replaceChildren() document.getElementById("support_discard").replaceChildren() |