diff options
| -rw-r--r-- | play.css | 3 | ||||
| -rw-r--r-- | play.html | 20 | ||||
| -rw-r--r-- | play.js | 129 |
3 files changed, 53 insertions, 99 deletions
@@ -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; @@ -18,21 +18,6 @@ <div id="tooltip"></div> -<menu id="popup"> - <li class="title">CARD - <li class="separator"> - <li data-action="card_play_event">🎴 Play Event - <li data-action="card_discard_event">❌ Discard for PC action - <li data-action="card_campaign">👥 Play Campaign - <li data-action="card_ops_general">👤 Activate a General - <li data-action="card_ops_pc">⭕ Place PC markers - <li data-action="card_ops_reinforcements">🚩 Bring on Reinforcements - <li data-action="card_ops_queue">⌛ Place into Operations Queue - <li data-action="card_battle_play">🎲 Play for +2 DRM - <li data-action="card_battle_discard">🎲 Discard for +1 DRM - <li data-action="exchange_for_discard">♻ Exchange for Discarded Event -</menu> - <header> <div id="toolbar"> <details> @@ -43,7 +28,7 @@ <li><a href="info/cards.html" target="blank">Cards</a> </menu> </details> - <button onclick="toggle_markers()"><img src="/images/earth-america.svg"></button> + <button onclick="toggle_counters()"><img src="/images/earth-america.svg"></button> </div> </header> @@ -66,11 +51,12 @@ <div id="log"></div> </aside> -<main onclick="hide_popup_menu()"> +<main data-max-zoom="2"> <div id="mapwrap"> <div id="map"> <div id="spaces"></div> + <div id="markers"></div> <div id="pieces"></div> <div id="war_ends"></div> <div id="played_british_reinforcements" class="reinforcements"></div> @@ -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) { |