Mobile layout.

1 files changed, 50 insertions, 70 deletions

diff --git a/play.js b/play.js
index e5b2cc5..3a0c7ec 100644
--- a/play.js
+++ b/play.js
@@ -419,86 +419,67 @@ function on_update() {
 	}
 }
 
-let 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, 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');
+function show_popup_menu(evt, menu_id, target_id, 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, 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
+			}
+		}
 	}
-	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;
+	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"
+
+		return true
 	}
-}
 
-function on_card_play_event() {
-	send_action('card_play_event', current_popup_card);
-	hide_popup_menu();
-}
-function on_card_discard_event() {
-	send_action('card_discard_event', current_popup_card);
-	hide_popup_menu();
+	return false
 }
-function on_card_campaign() {
-	send_action('card_campaign', current_popup_card);
-	hide_popup_menu();
-}
-function on_card_ops_general() {
-	send_action('card_ops_general', current_popup_card);
-	hide_popup_menu();
-}
-function on_card_ops_pc() {
-	send_action('card_ops_pc', current_popup_card);
-	hide_popup_menu();
-}
-function on_card_ops_reinforcements() {
-	send_action('card_ops_reinforcements', current_popup_card);
-	hide_popup_menu();
-}
-function on_card_ops_queue() {
-	send_action('card_ops_queue', current_popup_card);
-	hide_popup_menu();
-}
-function on_card_ops_queue() {
-	send_action('card_ops_queue', current_popup_card);
-	hide_popup_menu();
-}
-function on_card_battle_play() {
-	send_action('card_battle_play', current_popup_card);
-	hide_popup_menu();
-}
-function on_card_battle_discard() {
-	send_action('card_battle_discard', current_popup_card);
-	hide_popup_menu();
-}
-function on_exchange_for_discard() {
-	send_action('exchange_for_discard', current_popup_card);
-	hide_popup_menu();
+
+function hide_popup_menu() {
+	document.getElementById("popup").style.display = "none"
 }
 
 function on_card(evt) {
 	if (view.actions) {
 		let c = evt.target.id.split("+")[1] | 0;
-		let menu = [];
-		for (let action in view.actions)
-			if (Array.isArray(view.actions[action]) && view.actions[action].includes(c))
-				menu.push(action);
-		if (menu.length > 0) {
-			current_popup_card = c;
-			show_popup_menu(evt, menu);
-		}
+		show_popup_menu(evt, "popup", c, CARDS[c].title)
+		evt.stopPropagation()
 	}
 }
 
@@ -533,4 +514,3 @@ function toggle_markers() {
 	document.querySelector("#map").classList.toggle("hide_markers");
 }
 
-scroll_with_middle_mouse("main", 2);