diff options
| -rw-r--r-- | play.css | 73 | ||||
| -rw-r--r-- | play.html | 43 | ||||
| -rw-r--r-- | play.js | 100 |
3 files changed, 110 insertions, 106 deletions
@@ -1,4 +1,4 @@ -main { background-color: slategray; } +html { background-color: slategray; } header { background-color: silver; } #role_Gray { background-color: #b7b2b0; } #role_Blue { background-color: #95b4ca; } @@ -34,7 +34,7 @@ main { #tooltip { pointer-events: none; position: fixed; - z-index: 100; + z-index: 600; right: 240px; top: 60px; box-shadow: 0 0 20px black; @@ -57,25 +57,6 @@ body.shift #tooltip.focus { display: block; } font-style: italic; } -#popup { - position: fixed; - user-select: none; - background-color: white; - left: 10px; - top: 100px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3); - z-index: 300; - min-width: 20ex; - white-space: nowrap; - display: none; - border: 1px solid black; -} -#popup div { padding: 3pt 8pt; color: gray; display: none; } -#popup div.enabled { color: black; display: block; } -#popup div.enabled:hover { background-color: black; color: white; } -#popup div.always { display: block; } -#popup #menu_label { border-bottom: 1px solid silver; } - #banner { cursor: pointer; display: flex; @@ -97,6 +78,24 @@ body.shift #tooltip.focus { display: block; } filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); } +#popup { box-shadow: 2px 2px 4px #0004; } + +#popup.Intelligence li { background-color: hsl(215, 55%, 90%) } +#popup.Intelligence li.title { background-color: hsl(215, 55%, 68%) } +#popup.Intelligence li.action:hover { background-color: hsl(215, 55%, 28%) } + +#popup.Military li { background-color: hsl(354, 55%, 90%) } +#popup.Military li.title { background-color: hsl(354, 55%, 68%) } +#popup.Military li.action:hover { background-color: hsl(354, 55%, 28%) } + +#popup.Economic li { background-color: hsl(31, 76%, 90%) } +#popup.Economic li.title { background-color: hsl(31, 76%, 63%) } +#popup.Economic li.action:hover { background-color: hsl(31, 76%, 23%) } + +#popup.Political li { background-color: hsl(299, 30%, 90%) } +#popup.Political li.title { background-color: hsl(299, 30%, 63%) } +#popup.Political li.action:hover { background-color: hsl(299, 30%, 28%) } + #favored_suit_banner.Political { background-image: url(icons/suit_political.svg) } #favored_suit_banner.Intelligence { background-image: url(icons/suit_intelligence.svg) } #favored_suit_banner.Economic { background-image: url(icons/suit_economic.svg) } @@ -576,9 +575,9 @@ body.shift #tooltip.focus { display: block; } justify-content: center; align-items: center; padding: 0 25px; - gap: 15px; margin: 15px auto; - max-width: min(calc(100% - 30px), 1260px); + gap: 15px; + min-width: 1280px; } .hand { @@ -587,10 +586,9 @@ body.shift #tooltip.focus { display: block; } box-sizing: border-box; justify-content: start; padding: 15px; - margin: 15px auto 0 auto; + margin: 15px 15px 0 15px; gap: 15px; min-height: calc(260px + 30px); - max-width: min(calc(100% - 20px), 1260px); } .hand .card { @@ -601,15 +599,6 @@ body.shift #tooltip.focus { display: block; } margin-top: calc(-15px - 195px); } -/* hide backs when minimized hands */ -/* -body.open .hand.minimize .card { - pointer-events: none; - background-image: url(cards/card_back_116.jpg); - filter: none; -} -*/ - body.open .hand.minimize .card { filter: brightness(60%); } @@ -617,9 +606,8 @@ body.open .hand.minimize .card { .player_area { box-sizing: border-box; margin: 15px auto; - min-width: min(100%, 1280px); - width: fit-content; - max-width: 100%; + min-width: 1280px; + max-width: fit-content; } .player_court { @@ -905,9 +893,9 @@ body.open .hand.minimize .card { /* MOBILE PHONE LAYOUT */ -@media (max-width: 640px) { +@media (max-width: 800px) { #tooltip { - top: 75px; + top: 0; left: 0; right: 0; bottom: 0; @@ -915,15 +903,10 @@ body.open .hand.minimize .card { } } -@media (max-width: 400px) or (max-height: 590px) { +@media (max-width: 400px) or (max-height: 600px) { #tooltip.card { width: 248px; height: 344px; border-radius: 13px; } } - -@media (max-width: 1200px) { - .hand.minimize + .player_court { margin-top: -290px; } - body.open .hand.minimize + .player_court { margin-top: -290px; } -} @@ -2,41 +2,40 @@ <!-- vim:set nowrap: --> <html lang="en"> <head> -<meta name="viewport" content="width=device-width, initial-scale=1"> +<meta name="viewport" content="width=device-width, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover"> +<meta name="theme-color" content="#444"> <meta charset="UTF-8"> <title>PAX PAMIR</title> <link rel="icon" href="favicon.svg"> <link rel="stylesheet" href="/fonts/fonts.css"> -<link rel="stylesheet" href="/common/play.css"> +<link rel="stylesheet" href="/common/client.css"> <link rel="stylesheet" href="play.css"> -<script defer src="/common/play.js"></script> +<script defer src="/common/client.js"></script> <script defer src="cards.js"></script> <script defer src="play.js"></script> </head> <body> -<div id="popup" onmouseleave="hide_popup_menu()"> -<div id="popup_label" class="always">Actions</div> -<div id="menu_play_left" onclick="popup_action('play_left')">Play to left side</div> -<div id="menu_play_right" onclick="popup_action('play_right')">Play to right side</div> -</div> +<menu id="popup"> + <li class="title">CARD + <li class="separator"> + <li data-action="play_left"> ⬅ Play to left side + <li data-action="play_right"> ➡ Play to right side +</menu> <header> <div id="toolbar"> - <div class="menu"> - <div class="menu_title"><img src="/images/cog.svg"></div> - <div class="menu_popup"> - <a class="menu_item" href="info/rules.html" target="_blank")">Rules</a> - <a class="menu_item" href="info/pac.html" target="_blank")">Player Aid</a> - <a class="menu_item" href="info/cards.html" target="_blank")">Cards</a> - <div class="resign menu_separator"></div> - <div class="resign menu_item" onclick="confirm_resign()">Resign</div> - </div> - </div> - <div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div> + <details> + <summary><img src="/images/cog.svg"></summary> + <menu> + <li><a href="info/rules.html" target="_blank")">Rules</a> + <li><a href="info/pac.html" target="_blank")">Player Aid</a> + <li><a href="info/cards.html" target="_blank")">Cards</a> + <li class="resign separator"> + <li class="resign" onclick="confirm_resign()">Resign + </menu> + </details> </div> - <div id="prompt"></div> - <div id="actions"></div> </header> <aside> @@ -113,7 +112,7 @@ <div id="tooltip" class="hide"></div> -<main> +<main data-min-zoom="1" data-max-zoom="2" onclick="hide_popup_menu()"> <div id="market"> <div id="market_a"> @@ -12,7 +12,7 @@ function remember_position(e) { e.my_y = rect.y } else { e.my_visible = 0 - e.my_parent = e.parentElement + e.my_parent = null e.my_x = 0 e.my_y = 0 e.my_z = 0 @@ -40,13 +40,13 @@ function animate_position(e) { { opacity: 0 }, { opacity: 1 } ], - { duration: 350, easing: "ease" } + { duration: 500, easing: "ease" } ) } if (dx !== 0 || dy !== 0) { let dist = Math.sqrt((dx * dx) + (dy * dy)) - let time = Math.max(350, Math.min(1000, dist / 2)) + let time = Math.max(500, Math.min(1000, dist / 2)) e.animate( [ { transform: `translate(${dx}px, ${dy}px)`, }, @@ -285,7 +285,7 @@ function is_piece_road(i) { return (view.pieces[i] >= 301 && view.pieces[i] <= 309) } -function is_card_action(action, card) { +function is_action(action, card) { if (view.actions && view.actions[action] && view.actions[action].includes(card)) return true return false @@ -401,51 +401,67 @@ function toggle_hand(p) { // CARD MENU -const card_action_menu = [ - 'play_left', - 'play_right', -] +function show_popup_menu(evt, menu_id, target_id, title) { + let menu = document.getElementById(menu_id) + + menu.className = cards[target_id].suit + + let show = false + 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 + } + } + } + + 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 current_popup_card = 0 + 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 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') + return true } - 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") - ui.popup_label.textContent = cards[current_popup_card].name -} -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 - } + return false } -function popup_action(action) { - send_action(action, current_popup_card) - hide_popup_menu() +function hide_popup_menu() { + document.getElementById("popup").style.display = "none" } function on_click_card(evt) { let c = evt.target.card - if (is_card_action('card', c)) { + if (is_action('card', c)) { send_action('card', c) } else { - let menu = card_action_menu.filter(a => is_card_action(a, c)) - if (menu.length > 0) { - current_popup_card = c - show_popup_menu(evt, menu) - } + show_popup_menu(evt, "popup", c, cards[c].name) + evt.stopPropagation() } } @@ -721,7 +737,11 @@ function on_update() { } for (let i = 1; i < cards.length; ++i) { - ui.cards[i].classList.toggle('action', is_card_action('card', i)) + ui.cards[i].classList.toggle('action', + is_action('card', i) || + is_action('play_left', i) || + is_action('play_right', i) + ) } for (let i = 201; i <= 206; ++i) { @@ -878,7 +898,7 @@ function on_update() { for (let i = 0; i < ui.card_action_index[action].length; ++i) { let c = ui.card_action_index[action][i] let e = ui.card_action_element[action][i] - e.classList.toggle("action", is_card_action(action, c)) + e.classList.toggle("action", is_action(action, c)) } } @@ -1073,3 +1093,5 @@ function build_ui() { if (player !== 'Observer') ui.player[top].hand_size.classList.add("hide") } + +scroll_with_middle_mouse("main") |