Mobile layout (and changed default map size).

1 files changed, 66 insertions, 71 deletions

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()
 		}
 	}
 }