From 7044a825dca95cc97e912c35c345a014d7948519 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Wed, 7 Aug 2024 00:54:13 +0200 Subject: toggle pieces. remove unused popup menu code. --- play.css | 3 ++ play.html | 20 ++-------- play.js | 129 +++++++++++++++++++++++--------------------------------------- 3 files changed, 53 insertions(+), 99 deletions(-) diff --git a/play.css b/play.css index 5671132..e9485b7 100644 --- a/play.css +++ b/play.css @@ -55,6 +55,9 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) } box-shadow: 1px 1px 8px #0008; } +#map.hide_pieces #pieces { display: none; } +#map.hide_markers #markers { display: none; } + @media (max-width: 800px) { #tooltip { top: 0; diff --git a/play.html b/play.html index 8379323..3c78e97 100644 --- a/play.html +++ b/play.html @@ -18,21 +18,6 @@
- -
  • CARD -
  • -
  • 🎴 Play Event -
  • ❌ Discard for PC action -
  • 👥 Play Campaign -
  • 👤 Activate a General -
  • ⭕ Place PC markers -
  • 🚩 Bring on Reinforcements -
  • ⌛ Place into Operations Queue -
  • 🎲 Play for +2 DRM -
  • 🎲 Discard for +1 DRM -
  • ♻ Exchange for Discarded Event -
    •  -
    @@ -43,7 +28,7 @@
  • Cards
    • - +
    @@ -66,11 +51,12 @@
    -
    +
    +
    diff --git a/play.js b/play.js index 530b40f..3b11b69 100644 --- a/play.js +++ b/play.js @@ -5,6 +5,20 @@ */ // TODO: show "reshuffle" flag next to card deck display +// TODO: improve animations by having one CU stack per general and one CU stack per space + +function toggle_counters() { + // Cycle between showing everything, only markers, and nothing. + if (ui.map.classList.contains("hide_markers")) { + ui.map.classList.remove("hide_markers") + ui.map.classList.remove("hide_pieces") + } else if (ui.map.classList.contains("hide_pieces")) { + ui.map.classList.add("hide_markers") + } else { + ui.map.classList.add("hide_pieces") + } +} + /* COMMON */ @@ -144,7 +158,9 @@ let ui = { last_played: document.getElementById("last_played"), hand: document.getElementById("hand"), + map: document.getElementById("map"), spaces_element: document.getElementById("spaces"), + markers_element: document.getElementById("markers"), pieces_element: document.getElementById("pieces"), cards: [], @@ -214,7 +230,6 @@ function on_init() { e.className = "card card_" + c if (c > 0) { e.my_id = c - e.onclick = on_click_card register_action(e, "card", c) } } @@ -319,11 +334,7 @@ function show_move_marker(marker, s1, s2) { marker.style.left = (x|0) - 24 + "px" marker.style.top = (y|0) - 24 + "px" marker.style.transform = "rotate(" + (a + Math.PI/2) + "rad)" - ui.pieces_element.appendChild(marker) -} - -function show_marker(e) { - ui.pieces_element.appendChild(e) + ui.markers_element.appendChild(marker) } function toggle_marker(e, cond) { @@ -331,6 +342,10 @@ function toggle_marker(e, cond) { show_marker(e) } +function show_marker(e) { + ui.markers_element.appendChild(e) +} + function show_marker_at(e, x, y) { show_marker(e) e.style.left = x - e.my_dx + "px" @@ -341,9 +356,23 @@ function show_marker_at_xy(e, xy) { show_marker_at(e, xy[0], xy[1]) } -function toggle_marker_with_number_at(e, n, x, y) { +function show_piece(e) { + ui.pieces_element.appendChild(e) +} + +function show_piece_at(e, x, y) { + show_piece(e) + e.style.left = x - e.my_dx + "px" + e.style.top = y - e.my_dy + "px" +} + +function show_piece_at_xy(e, xy) { + show_piece_at(e, xy[0], xy[1]) +} + +function show_piece_with_number_at(e, n, x, y) { if (n > 0) { - show_marker(e) + show_piece(e) e.textContent = n e.style.left = x - e.my_dx + "px" e.style.top = y - e.my_dy + "px" @@ -477,13 +506,13 @@ function get_static_bcu(s) { function layout_all_cu(an, fn, bn, ae, fe, be, pos) { let [ x, y ] = pos - toggle_marker_with_number_at(ae, an, x, y) + show_piece_with_number_at(ae, an, x, y) if (an > 0) x += 30 - toggle_marker_with_number_at(fe, fn, x, y) + show_piece_with_number_at(fe, fn, x, y) if (fn > 0) x += 30 - toggle_marker_with_number_at(be, bn, x, y) + show_piece_with_number_at(be, bn, x, y) if (bn > 0) x += 30 // if (an > 0 || fn > 0 || bn > 0) x -= 10 @@ -510,6 +539,7 @@ function on_update() { ui.last_played.className = "card shrink card_" + view.last_played + ui.markers_element.replaceChildren() ui.pieces_element.replaceChildren() for (let s = 0; s < data.spaces.length; ++s) { @@ -518,16 +548,16 @@ function on_update() { } if (view.congress === CONTINENTAL_CONGRESS_DISPERSED) - show_marker_at(ui.congress, data.spaces[view.congress].x, data.spaces[view.congress].y) + show_piece_at(ui.congress, data.spaces[view.congress].x, data.spaces[view.congress].y) else - show_marker_at(ui.congress, data.spaces[view.congress].x+20, data.spaces[view.congress].y-10) + show_piece_at(ui.congress, data.spaces[view.congress].x+20, data.spaces[view.congress].y-10) if (view.french_navy < 0) - show_marker_at(ui.french_navy, data.spaces[FRENCH_REINFORCEMENTS].x-65, data.spaces[FRENCH_REINFORCEMENTS].y) + show_piece_at(ui.french_navy, data.spaces[FRENCH_REINFORCEMENTS].x-65, data.spaces[FRENCH_REINFORCEMENTS].y) else if (view.french_navy > 1700) - show_marker_at_xy(ui.french_navy, data.layout.turn[view.french_navy]) + show_piece_at_xy(ui.french_navy, data.layout.turn[view.french_navy]) else - show_marker_at(ui.french_navy, data.layout.sea[view.french_navy][0]-15, data.layout.sea[view.french_navy][1]+42) + show_piece_at(ui.french_navy, data.layout.sea[view.french_navy][0]-15, data.layout.sea[view.french_navy][1]+42) if (view.move && view.move.from !== view.move.to) show_move_marker(ui.combat, view.move.from, view.move.to) @@ -628,7 +658,6 @@ function on_update() { if (view.react && view.react.who === g) [ x, y ] = ui.layout_react - ui.generals[g].classList.toggle("selected", view.selected_general === g) if (view.move && view.move.who === g) { @@ -654,7 +683,7 @@ function on_update() { } } - show_marker_at(ui.generals[g], x, y) + show_piece_at(ui.generals[g], x, y) } for (let i = 0; i < 14; ++i) { @@ -743,70 +772,6 @@ function on_update() { } -/* POPUP MENU */ - -function show_popup_menu(evt, menu_id, card, title) { - let menu = document.getElementById(menu_id) - - let show = false - for (let item of menu.querySelectorAll("li")) { - let action = item.dataset.action - if (action) { - if (is_action(action, card)) { - show = true - item.classList.add("action") - item.classList.remove("disabled") - item.onclick = function () { - send_action(action, card) - hide_popup_menu() - evt.stopPropagation() - } - } else { - item.classList.remove("action") - item.classList.add("disabled") - item.onclick = null - } - } - } - - if (show) { - menu.onmouseleave = hide_popup_menu - menu.style.display = "block" - if (title) { - let item = menu.querySelector("li.title") - if (item) { - item.onclick = hide_popup_menu - item.textContent = title - } - } - - let w = menu.clientWidth - let h = menu.clientHeight - let x = Math.max(5, Math.min(evt.clientX - w / 2, window.innerWidth - w - 5)) - let y = Math.max(5, Math.min(evt.clientY - 12, window.innerHeight - h - 40)) - menu.style.left = x + "px" - menu.style.top = y + "px" - - evt.stopPropagation() - } else { - menu.style.display = "none" - } -} - -function hide_popup_menu() { - document.getElementById("popup").style.display = "none" -} - -function on_click_card(evt) { - if (view.actions) { - let c = evt.target.my_id - if (is_action("card", c)) - send_action("card", c) - else - show_popup_menu(evt, "popup", c, data.cards[c].title) - } -} - /* LOG */ function sub_space(_match, p1) { -- cgit v1.2.3