From d0b765b52b6cf2bda1216fbe61ab650dcec6361e Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Wed, 18 Oct 2023 19:05:58 +0200
Subject: Mobile layout (and changed default map size).

---
 about.html |   8 ++--
 map.jpg    | Bin 325614 -> 324322 bytes
 play.css   | 127 +++++++++++++++++++++++++++-----------------------------
 play.html  |  63 +++++++++++++++-------------
 play.js    | 137 +++++++++++++++++++++++++++++--------------------------------
 rules.js   |   2 -
 6 files changed, 166 insertions(+), 171 deletions(-)

diff --git a/about.html b/about.html
index 2af7db4..61e65a6 100644
--- a/about.html
+++ b/about.html
@@ -14,13 +14,13 @@ consequences. As the bashaw of Tripoli, the other player will continue the
 lucrative piracy of the fearsome corsairs while countering the American threat
 on land and sea.
 
-<br clear=left>
-
-<p>
-Designer: Kevin Bertram
 
 <p>
+Designer: Kevin Bertram.
+<br>
 Copyright &copy; 2020 <a href="https://www.fortcircle.com/games/">Fort Circle Games</a>.
+<br>
+Programming &copy; 2021 Tor Andersson.
 
 <ul>
 <li><a href="/shores-of-tripoli/info/rules.html">Rules of the Game</a>
diff --git a/map.jpg b/map.jpg
index e709d28..58e7af3 100644
Binary files a/map.jpg and b/map.jpg differ
diff --git a/play.css b/play.css
index e556ccf..56ef381 100644
--- a/play.css
+++ b/play.css
@@ -23,18 +23,28 @@ body.United_States header.your_turn { background-color: skyblue; }
 	flex-wrap: wrap;
 	min-height: 300px;
 	justify-content: left;
-	max-width: 2476px;
-	margin: 15px auto;
-}
-
-.hand .card {
-	margin: 10px;
+	max-width: 1620px;
+	margin: 0 auto;
+	padding: 15px;
+	gap: 15px;
 }
 
 .hand_separator {
+	margin: 0 auto;
+	max-width: 1650px;
 	border-bottom: 2px dotted gainsboro;
 }
 
+@media (max-width: 800px) {
+	.hand, .hand_separator {
+		min-width: 1650px;
+	}
+}
+
+@media (max-height: 700px) {
+	.card_info { display: none }
+}
+
 body.Observer #hand_cards { display: none; }
 body.Observer .hand_separator { display: none; }
 
@@ -53,7 +63,7 @@ body.Observer .hand_separator { display: none; }
 	height: 350px;
 	border-radius: 12px;
 	display: none;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: 1px 1px 5px #0008;
 }
 
 .card.show {
@@ -92,9 +102,10 @@ body.Observer .hand_separator { display: none; }
 	padding: 4px;
 }
 
-#tooltip.card {
+#tooltip {
+	pointer-events: none;
 	position: fixed;
-	z-index: 100;
+	z-index: 600;
 	right: 240px;
 	top: 60px;
 }
@@ -102,19 +113,32 @@ body.Observer .hand_separator { display: none; }
 	display: block;
 }
 
+@media (max-width: 800px) {
+	#tooltip {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+	}
+}
+
 /* MAP */
 
 #mapwrap {
-	box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
-	width: 2476px;
-	height: 801px;
+	box-shadow: 0px 0px 15px #0008;
+	width: 1650px;
+	height: 532px;
+	margin-bottom: 5px;
 }
 
 #map {
 	display: block;
-	width: 2476px;
-	height: 801px;
+	width: 1650px;
+	height: 532px;
 	background-color: black;
+	background-image: url(map.jpg);
+	background-size: 1650px 532px;
 }
 
 svg {
@@ -136,7 +160,7 @@ svg circle, .piece {
 	pointer-events: none;
 	background-size: cover;
 	background-repeat: no-repeat;
-	filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.5));
+	filter: drop-shadow(0px 1px 3px #0008);
 }
 
 .piece.highlight {
@@ -146,20 +170,20 @@ svg circle, .piece {
 }
 
 .piece.damaged {
-	filter: brightness(60%) drop-shadow(1px 1px 4px rgba(0,0,0,0.5));
+	filter: brightness(60%) drop-shadow(0px 1px 3px #0008);
 }
 
-.piece.us_frigate { width: 42px; height: 29px; background-image: url("icons/us_frigate.svg"); }
-.piece.se_frigate { width: 42px; height: 29px; background-image: url("icons/se_frigate.svg"); }
-.piece.tr_frigate { width: 42px; height: 29px; background-image: url("icons/tr_frigate.svg"); }
-.piece.us_gunboat { width: 33px; height: 27px; background-image: url("icons/us_gunboat.svg"); }
-.piece.tr_corsair { width: 33px; height: 27px; background-image: url("icons/tr_corsair.svg"); }
-.piece.al_corsair { width: 33px; height: 27px; background-image: url("icons/al_corsair.svg"); }
-.piece.us_marine { width: 21px; height: 21px; background-image: url("icons/us_marine.svg"); }
-.piece.ar_infantry { width: 21px; height: 21px; background-image: url("icons/ar_infantry.svg"); }
-.piece.tr_infantry { width: 21px; height: 21px; background-image: url("icons/tr_infantry.svg"); }
-.piece.gold { width: 40px; height: 40px; background-image: url("icons/gold.png"); }
-.piece.marker { width: 50px; height: 50px; border-radius: 50%; background-color: #444; border: 2px solid black; }
+.piece.us_frigate { width: 29px; height: 20px; background-image: url("icons/us_frigate.svg"); }
+.piece.se_frigate { width: 29px; height: 20px; background-image: url("icons/se_frigate.svg"); }
+.piece.tr_frigate { width: 29px; height: 20px; background-image: url("icons/tr_frigate.svg"); }
+.piece.us_gunboat { width: 22px; height: 18px; background-image: url("icons/us_gunboat.svg"); }
+.piece.tr_corsair { width: 22px; height: 18px; background-image: url("icons/tr_corsair.svg"); }
+.piece.al_corsair { width: 22px; height: 18px; background-image: url("icons/al_corsair.svg"); }
+.piece.us_marine { width: 16px; height: 16px; background-image: url("icons/us_marine.svg"); }
+.piece.ar_infantry { width: 16px; height: 16px; background-image: url("icons/ar_infantry.svg"); }
+.piece.tr_infantry { width: 16px; height: 16px; background-image: url("icons/tr_infantry.svg"); }
+.piece.gold { width: 28px; height: 28px; background-image: url("icons/gold.png"); }
+.piece.marker { width: 34px; height: 34px; border-radius: 50%; background-color: #444; border: 2px solid black; }
 
 .harbor {
 	fill-opacity: 0;
@@ -196,47 +220,18 @@ svg circle, .piece {
 
 /* CARD ACTION POPUP MENU */
 
-#popup {
-	position: fixed;
-	user-select: none;
-	background-color: gainsboro;
-	left: 10px;
-	top: 100px;
-	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
-	z-index: 200;
-	min-width: 20ex;
-	white-space: nowrap;
-	display: none;
-}
-#popup div { padding: 3pt 8pt; color: gray; display: none; }
-#popup div.enabled { color: black; display: block; }
-#popup div.enabled:hover { background-color: teal; color: white; }
-#popup div.always { display: block; }
-body.Tripolitania #popup div.tr_always { display: block; }
-body.United_States #popup div.us_always { display: block; }
+#us_popup, #tr_popup { box-shadow: 0px 8px 16px 0px #0004; }
 
-/* MOBILE PHONE LAYOUT */
+#us_popup { background-color: hsl(207, 50%, 90%) }
+#us_popup li.title { background-color: hsl(207, 50%, 66%) }
+#us_popup li.action:hover { background-color: hsl(207, 50%, 26%) }
 
-@media (max-width: 640px) {
-	.hand .card {
-		width: 125px;
-		height: 175px;
-		border-radius: 6px;
-	}
-	.hand {
-		min-height: 125px;
-	}
-	.hand_separator {
-		display: none;
-	}
-	#core_cards {
-		background-color: darkslategray;
-	}
-	#tooltip.card {
-		top: 10px;
-		right: 10px;
-	}
-}
+#tr_popup { background-color: hsl(3, 50%, 90%) }
+#tr_popup li.title { background-color: hsl(3, 50%, 71%) }
+#tr_popup li.action:hover { background-color: hsl(3, 50%, 31%) }
+
+#us_popup li[data-action="card_take"].disabled { display: none }
+#tr_popup li[data-action="card_take"].disabled { display: none }
 
 /* CARD IMAGES */
 
diff --git a/play.html b/play.html
index c28055b..ca107c6 100644
--- a/play.html
+++ b/play.html
@@ -2,14 +2,14 @@
 <!-- vim:set nowrap: -->
 <html>
 <head>
-<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content">
 <meta charset="UTF-8">
 <title>SHORES OF TRIPOLI</title>
 <link rel="icon" href="Flag_of_Tripoli_18th_century.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="data.js"></script>
 <script defer src="play.js"></script>
 </head>
@@ -17,30 +17,38 @@
 
 <div id="tooltip" class="card"></div>
 
-<div id="popup" onmouseleave="hide_popup_menu()">
-<div id="menu_card_event" class="always" onclick="on_card_event()">Play Event</div>
-<div id="menu_card_move_frigates" class="us_always" onclick="on_card_move_frigates()">Discard to move two frigates</div>
-<div id="menu_card_build_gunboat" class="us_always" onclick="on_card_build_gunboat()">Discard to build a gunboat</div>
-<div id="menu_card_pirate_raid" class="tr_always" onclick="on_card_pirate_raid()">Discard to pirate raid</div>
-<div id="menu_card_build_corsair" class="tr_always" onclick="on_card_build_corsair()">Discard to build a corsair</div>
-<div id="menu_card_take" onclick="on_card_take()">Place in hand</div>
-</div>
+<menu id="us_popup">
+	<li class="title">TITLE
+	<li class="separator">
+	<li data-action="card_event"> &#x1f3b4; &nbsp; Event
+	<li data-action="card_move_frigates"> &#x26f5; &nbsp; Move two frigates
+	<li data-action="card_build_gunboat"> &#x1f528; &nbsp; Build a gunboat
+	<li data-action="card_take"> &#x270b; &nbsp; Place in hand
+</menu>
+
+<menu id="tr_popup">
+	<li class="title">TITLE
+	<li class="separator">
+	<li data-action="card_event"> &#x1f3b4; &nbsp; Event
+	<li data-action="card_pirate_raid"> &#x1f6a3; &nbsp; Pirate raid
+	<li data-action="card_build_corsair"> &#x1f528; &nbsp; Build a corsair
+	<li data-action="card_take"> &#x270b; &nbsp; Place in hand
+</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/history.html" target="_blank">History</a>
-			<div class="menu_separator"></div>
-			<a class="menu_item" href="info/tr_cards.html" target="_blank">Tripolitan Cards</a>
-			<a class="menu_item" href="info/us_cards.html" target="_blank">United States 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_zoom()"><img src="/images/magnifying-glass.svg"></div>
+		<details>
+			<summary><img src="/images/cog.svg"></summary>
+			<menu>
+				<li><a class="menu_item" href="info/rules.html" target="_blank">Rules</a>
+				<li><a class="menu_item" href="info/history.html" target="_blank">History</a>
+				<li class="separator">
+				<li><a class="menu_item" href="info/tr_cards.html" target="_blank">Tripolitan Cards</a>
+				<li><a class="menu_item" href="info/us_cards.html" target="_blank">United States Cards</a>
+				<li class="resign separator">
+				<li class="resign" onclick="confirm_resign()">Resign
+			</menu>
+		</details>
 	</div>
 	<div id="prompt"></div>
 	<div id="actions"></div>
@@ -69,12 +77,11 @@
 	<div id="log"></div>
 </aside>
 
-<main>
+<main data-min-zoom="0.75" data-max-zoom="1.5" onclick="hide_popup_menu()">
 
-<div id="mapwrap" class="fit">
+<div id="mapwrap">
 <div id="map">
-<svg id="svgmap" width="2476px" height="801px" viewBox="0 0 2476 801">
-<image href="map.jpg" x="0" y="0" width="2476" height="801" />
+<svg id="svgmap" width="1650px" height="532px" viewBox="0 0 2475 798">
 <path class="patrol_zone" d="M184.82 276.533a136 136 0 00-136 136 136 136 0 0073.566 120.69c1.096.19 2.461.65 4.215 1.378 3.6 1.5 4.499 1.5 10.399.1 3.6-.9 10.3-2.1 15-2.7 4.7-.7 12.3-2.601 16.9-4.301 7.3-2.8 9.3-4.1 15.5-10.2 3.9-3.9 10-8.7 13.6-10.7 4.5-2.5 8.9-6.3 14-12 3.316-3.722 7.856-8.463 11.225-11.737a92.27 92.27 0 01-19.04-55.945 92.27 92.27 0 0192.075-92.26 136 136 0 00-111.44-58.325z" id="tangier_patrol_zone"/>
 <path class="patrol_zone" d="M615.705 21.148c-2.433.155-2.407.483-1.205 1.352 3.9 2.8 4.2 3.4 4.1 7.7-.2 4.9-1.2 7.1-2.8 6.2-.6-.4-2-.7-3.2-.8-1.7-.1-2.1-.7-1.9-2.9.2-2.4 0-2.7-1.3-1.6-1.7 1.4-.9 7.5 1.3 9.7 1.6 1.7 1.6 1.7-.2 5.1-.8 1.7-1.2 4.2-.9 6.3.5 2.9.3 3.5-2 4.6-2.8 1.3-5.4 5.7-4.1 7 .4.4 1 .1 1.2-.6.3-.6 1.1-1.2 1.9-1.2 1.9 0 1.9 6.4-.1 8-1.9 1.6-1.9 3 .1 4.5 1.4.9 1.4 1.6.5 3.3-1.4 2.7-.6 4.3 1.6 3.5 1.4-.5 1.5-.1.9 2.8-.5 1.9-.8 3.8-.8 4.4 0 1.8 2 12.9 2.7 15.1.5 1.8.1 2.3-2.6 3.3-1.7.6-4.2 1.1-5.5 1.1-1.2 0-3.5 1.3-5.1 3-3.2 3.4-4.8 3.8-5.7 1.3-.6-1.4-.8-1.4-2.2.5-.8 1.2-2.4 2.2-3.4 2.2-1.6 0-1.8.5-1.4 2.9.3 1.6.1 3.8-.5 5-1 1.8-1.5 1.9-3.2 1-2.4-1.2-2.5-1.1-4.7 3.3-1.6 3.1-2 3.3-6.3 3.1l-4.7-.1-.7 8.1c-.4 4.5-1.1 8.8-1.7 9.4-.6.7-1.9 4.5-2.9 8.5-1 3.9-2.5 7.8-3.3 8.7-1.1 1.3-1.2 3.2-.6 9.1.6 5.6.4 8.2-.6 10.4-.8 1.6-1.4 3.7-1.4 4.8 0 1-1.1 2.4-2.5 3-2.7 1.2-2.7 1-2.9 13.7-.1 9.3-1.4 11.3-4.1 6.2-.8-1.7-2.2-3.1-3.1-3.1-.8 0-1.9-1-2.4-2.3-1.2-2.8-4.5-6.7-5.8-6.7-.5 0-1.5.7-2.2 1.6-.8.8-2.5 1.4-4.1 1.2-1.6-.1-3.6.5-4.8 1.6-1.1 1-2.5 1.5-3.1 1.1-.6-.4-1.7-.2-2.4.4-.7.6-2.1.9-3 .5-1-.4-1.8 0-2.2 1-.8 2-4 2.1-4.8.1-.3-.8-1.6-1.5-3-1.5s-2.8-.5-3.2-1.1c-.4-.7-1.6-.1-3.4 1.6-2.1 2-3.3 2.5-5.4 1.9-2.3-.5-2.7-1-2.1-3.1.4-1.6.2-2.2-.5-1.8-.5.3-1 1.6-1 2.9 0 2.4-3.4 4.6-6.9 4.6-1 0-2.4.7-3.1 1.5-.7.8-2.1 1.5-3.2 1.5s-2.6.7-3.4 1.5c-1.522 1.439-2.921 1.203-5.975-1.378.038.626.07 1.252.094 1.878 0 50.96-41.31 92.27-92.269 92.27-50.96 0-92.27-41.31-92.27-92.27a92.27 92.27 0 015.942-32.45c-4.284-.742-6.922-1.72-6.922-2.75 0-.5-1.2-.7-2.8-.3-3.5.7-4.1 0-8.7-9.4-1.9-3.9-4-7.1-4.6-7.1-.6 0-.9.3-.7.7 2.1 4.1 3.6 8.5 4.2 12 .5 3.5.2 4.6-1.7 6.9-2.4 2.8-11.9 6-13.9 4.7-.6-.3-2.7-.6-4.6-.5-1.823.076-3.414-.312-4.951-1.246C260.979 286.86 348.139 359.979 450 360c115.98 0 210-94.02 210-210a210 210 0 00-44.295-128.852z" id="gibraltar_patrol_zone"/>
 <path class="patrol_zone" d="M879 113.5a136 136 0 00-136 136 136 136 0 009.45 49.746c.019.017.033.036.05.054 2.1 2 3.6 2.5 7.6 2.5 6.3.1 10.3.8 15 2.8 3.2 1.4 4 1.4 6.5.1 1.6-.8 4.199-2.7 5.699-4.2 2.228-2.228 3.107-2.635 6.176-2.204A92.27 92.27 0 01883.5 225.73a92.27 92.27 0 0183.928 54.151c.461-.22.86-.38 1.073-.38 1 0 1.799-1.6 5.499-9.7 1.2-2.7 2.6-5.1 3.2-5.4 2.6-1.6 19.8-2.4 22-1 1.3.8 2.3.8 3.6-.1 1.1-.6 3.8-.9 6.4-.6 2.986.365 4.169.353 5.17-.606a136 136 0 00.63-12.594 136 136 0 00-136-136z" id="algiers_patrol_zone"/>
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()
 		}
 	}
 }
diff --git a/rules.js b/rules.js
index f9e5532..a3946a8 100644
--- a/rules.js
+++ b/rules.js
@@ -2979,8 +2979,6 @@ exports.resign = function (state, current) {
 	return game;
 }
 
-exports.is_checkpoint = (a, b) => a.season !== b.season;
-
 exports.view = function(state, current) {
 	game = state;
 
-- 
cgit v1.2.3