Mobile layout.

3 files changed, 110 insertions, 106 deletions

diff --git a/play.css b/play.css
index 1a5ebf1..5f28741 100644
--- a/play.css
+++ b/play.css
@@ -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; }
-}
diff --git a/play.html b/play.html
index cc4a6e4..aecfdef 100644
--- a/play.html
+++ b/play.html
@@ -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"> &#x2b05; Play to left side
+	<li data-action="play_right"> &#x27a1; 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">
diff --git a/play.js b/play.js
index 348290b..642223d 100644
--- a/play.js
+++ b/play.js
@@ -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")