From d0b765b52b6cf2bda1216fbe61ab650dcec6361e Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Wed, 18 Oct 2023 19:05:58 +0200 Subject: Mobile layout (and changed default map size). --- play.js | 137 +++++++++++++++++++++++++++++++--------------------------------- 1 file changed, 66 insertions(+), 71 deletions(-) (limited to 'play.js') diff --git a/play.js b/play.js index e38d7f3..bc5ec92 100644 --- a/play.js +++ b/play.js @@ -1,5 +1,7 @@ "use strict"; +const SCALE = 2/3 + const SEASON_X = [ 893, 978, 1064, 1149 ]; const YEAR_X = { 1801: 175, 1802: 294, 1803: 413, 1804: 532, 1805: 652, 1806: 771 }; const YEAR_Y = 728; @@ -335,26 +337,26 @@ function on_update() { function update_year_marker(year) { let e = document.getElementById("year"); - e.style.left = Math.round(YEAR_X[year] - 27) + "px"; - e.style.top = Math.round(YEAR_Y - 27) + "px"; + e.style.left = Math.round((YEAR_X[year] - 27) * SCALE) + "px"; + e.style.top = Math.round((YEAR_Y - 27) * SCALE) + "px"; } function update_season_marker(season) { let e = document.getElementById("season"); - e.style.left = Math.round(SEASON_X[season] - 27) + "px"; - e.style.top = Math.round(YEAR_Y - 27) + "px"; + e.style.left = Math.round((SEASON_X[season] - 27) * SCALE) + "px"; + e.style.top = Math.round((YEAR_Y - 27) * SCALE) + "px"; } function set_piece_xy(p, x, y) { let e = ui.pieces[p]; - e.style.left = Math.round(x - e.offsetWidth/2) + "px"; - e.style.top = Math.round(y - e.offsetHeight/2) + "px"; + e.style.left = Math.round(x * SCALE - e.offsetWidth/2) + "px"; + e.style.top = Math.round(y * SCALE - e.offsetHeight/2) + "px"; } function set_gold_xy(i, x, y) { let e = ui.gold[i]; - e.style.left = Math.round(x - e.offsetWidth/2) + "px"; - e.style.top = Math.round(y - e.offsetHeight/2) + "px"; + e.style.left = Math.round(x * SCALE - e.offsetWidth/2) + "px"; + e.style.top = Math.round(y * SCALE - e.offsetHeight/2) + "px"; } function layout_space(location, s, x0, y0, size) { @@ -485,81 +487,74 @@ function update_spaces() { /* CARD ACTION MENU */ -let current_popup_card = 0; - -function show_popup_menu(evt, list) { - document.querySelectorAll("#popup div").forEach(e => e.classList.remove('enabled')); - for (let item of list) { - let e = document.getElementById("menu_" + item); - e.classList.add('enabled'); - } - let popup = document.getElementById("popup"); - popup.style.display = 'block'; - popup.style.left = (evt.clientX-50) + "px"; - popup.style.top = (evt.clientY-12) + "px"; - ui.cards[current_popup_card].classList.add("selected"); -} - -function hide_popup_menu() { - let popup = document.getElementById("popup"); - popup.style.display = 'none'; - if (current_popup_card) { - ui.cards[current_popup_card].classList.remove("selected"); - current_popup_card = 0; +function is_action(action, card) { + return view.actions && view.actions[action] && view.actions[action].includes(card) +} + +function show_popup_menu(evt, menu_id, target_id, title) { + let menu = document.getElementById(menu_id) + + let show = true + for (let item of menu.querySelectorAll("li")) { + let action = item.dataset.action + if (action) { + if (is_action(action, target_id)) { + show = true + item.classList.add("action") + item.classList.remove("disabled") + item.onclick = function () { + send_action(action, target_id) + hide_popup_menu() + evt.stopPropagation() + } + } else { + item.classList.remove("action") + item.classList.add("disabled") + item.onclick = null + } + } } -} - -function on_card_event() { - if (send_action('card_event', current_popup_card)) - hide_popup_menu(); -} -function on_card_take() { - if (send_action('card_take', current_popup_card)) - hide_popup_menu(); -} + 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 + } + } -function on_card_move_frigates() { - if (send_action('card_move_frigates', current_popup_card)) - hide_popup_menu(); -} + 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" -function on_card_pirate_raid() { - if (send_action('card_pirate_raid', current_popup_card)) - hide_popup_menu(); -} - -function on_card_build_gunboat() { - if (send_action('card_build_gunboat', current_popup_card)) - hide_popup_menu(); -} + return true + } -function on_card_build_corsair() { - if (send_action('card_build_corsair', current_popup_card)) - hide_popup_menu(); + return false } -function is_card_action(action, card) { - return view.actions && view.actions[action] && view.actions[action].includes(card); +function hide_popup_menu() { + document.getElementById("us_popup").style.display = "none" + document.getElementById("tr_popup").style.display = "none" } function on_click_card(evt) { if (view.actions) { - let card = evt.target.card; - if (is_card_action('discard', card)) { - send_action('discard', card); + let card = evt.target.card + if (is_action("discard", card)) { + send_action("discard", card) } else { - let menu = []; - if (is_card_action('card_event', card)) menu.push('card_event'); - if (is_card_action('card_take', card)) menu.push('card_take'); - if (is_card_action('card_move_frigates', card)) menu.push('card_move_frigates'); - if (is_card_action('card_pirate_raid', card)) menu.push('card_pirate_raid'); - if (is_card_action('card_build_gunboat', card)) menu.push('card_build_gunboat'); - if (is_card_action('card_build_corsair', card)) menu.push('card_build_corsair'); - if (menu.length > 0) { - current_popup_card = card; - show_popup_menu(evt, menu); - } + if (card >= 1 && card <= 27) + show_popup_menu(evt, "us_popup", card, US_CARD_NAMES[card - 1]) + else + show_popup_menu(evt, "tr_popup", card, TR_CARD_NAMES[card - 28]) + evt.stopPropagation() } } } -- cgit v1.2.3