diff options
| -rw-r--r-- | play.html | 16 | ||||
| -rw-r--r-- | play.js | 30 |
2 files changed, 45 insertions, 1 deletions
@@ -193,6 +193,17 @@ div.persistent_box { .persistent_card.support { background-color: var(--suff-85); } .persistent_card.opposition { background-color: var(--opp-85); } +div.congress_box { + position: absolute; + box-sizing: border-box; +} + +div.congress_box.action { + background-clip: padding-box; + background-color: #fff8; + border: 5px solid white; +} + .piece { position: absolute; background-repeat: no-repeat; @@ -919,7 +930,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="Northeast" class="region" style="top:158px;left:881px;"></div> <div id="turn" class="piece turn" style="left:800px;top:765px;"></div> - <div class="piece congress" style="left:500px;top:765px;"></div> + <div id="congress_box" class="congress_box" style="left:490px;top:760px;width:270px;height:60px;"> + <!-- <div class="piece congress" style="left:500px;top:765px;"></div> --> + </div> + <div class="piece red1" style="left:350px;top:100px;"></div> <div class="piece red2 action" style="left:450px;top:175px;"></div> <div class="piece red3" style="left:550px;top:150px;"></div> @@ -30,6 +30,9 @@ const card_count = 128 let ui = { status: document.getElementById("status"), + turn: document.getElementById("turn"), + congress_box: document.getElementById("congress_box"), + congress: [ null ], player: [ document.getElementById("role_Suffragist"), document.getElementById("role_Opposition"), @@ -239,6 +242,15 @@ function on_click_card(evt) { } } +function on_click_congress(evt) { + if (evt.button === 0) { + console.log("congress") + if (send_action('congress')) + evt.stopPropagation() + } + hide_popup_menu() +} + function on_click_region(evt) { if (evt.button === 0) { if (send_action('region', evt.target.my_region)) @@ -282,6 +294,15 @@ function create(t, p, ...c) { function build_user_interface() { let elt + ui.congress_box.onmousedown = on_click_congress + for (let c = 1; c <= 6; ++c) { + elt = ui.congress[c] = create("div", { + className: "piece congress", + style: `left:${10 + (c-1) * 42}px;top:5px;`, + onmousedown: on_click_congress + }) + } + for (let c = 1; c <= card_count; ++c) { elt = ui.cards[c] = create("div", { className: `card card_${c}`, @@ -381,6 +402,15 @@ function on_update() { // eslint-disable-line no-unused-vars document.getElementById("support_info").textContent = support_info() document.getElementById("opposition_info").textContent = opposition_info() + ui.turn.style.left = 800 + (42 * (view.turn - 1)) + "px" + + ui.congress_box.replaceChildren() + ui.congress_box.classList.toggle("action", !view.congress && is_action("congress")) + for (let c = 1; c <= view.congress; ++c) { + ui.congress_box.appendChild(ui.congress[c]) + ui.congress[c].classList.toggle("action", is_action("congress")) + } + document.getElementById("hand").replaceChildren() document.getElementById("support_claimed").replaceChildren() document.getElementById("support_discard").replaceChildren() |