From f481d263508bdf25d8dedb4e98e3ba3d80817eec Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Thu, 10 Jun 2021 16:44:16 +0200
Subject: tripoli: UI tweaks.

---
 play.html | 124 ++++++++++++++++++++++++++++++-----------------------
 rules.js  | 135 +++++++++++++++++++++++++++++++---------------------------
 ui.js     | 143 +++++++++++++++++++++++++++++++++++++++++++++-----------------
 3 files changed, 248 insertions(+), 154 deletions(-)

diff --git a/play.html b/play.html
index fdeb7fd..c8e4a7f 100644
--- a/play.html
+++ b/play.html
@@ -46,6 +46,10 @@
 	border-radius: 12px;
 }
 
+.card.blank {
+	background-color: dimgray;
+}
+
 .card_info .card {
 	margin: 15px auto;
 	width: 100px;
@@ -53,6 +57,13 @@
 	border-radius: 5px;
 }
 
+.card_separator {
+	margin-top: 130px;
+	user-select: none;
+	font-size: 48px;
+	color: aliceblue;
+}
+
 .card_info .card:hover {
 	transform: scale(2) translateY(-30px);
 }
@@ -92,48 +103,65 @@
 	transition-timing-function: ease;
 }
 
-#map .harbor {
-	fill: white;
-	fill-opacity: 0.3;
+#map use {
+	pointer-events: none;
+}
+
+#map use.highlight {
+	pointer-events: all;
+	cursor: pointer;
 	stroke: white;
-	stroke-width: 2;
-	opacity: 0;
 }
 
-#map .harbor.highlight {
-	opacity: 1
+#map use.highlight.damaged {
+	stroke: lightgray;
 }
 
-#map .harbor.where, #map .patrol_zone.where {
-	opacity: 1;
-	stroke: yellow;
-	fill: yellow;
+.us_frigate { fill: #0977bd; }
+.us_gunboat { fill: #0977bd; }
+.se_frigate { fill: #fdd527; }
+.tr_frigate { fill: #de333e; }
+.tr_corsair { fill: #de333e; }
+.al_corsair { fill: #f39331; }
+.us_marine { fill: #0977bd; }
+.ar_infantry { fill: #e0e0e0; }
+.tr_infantry { fill: #de333e; }
+
+.us_frigate.damaged { fill: #005577; }
+.tr_frigate.damaged { fill: #881111; }
+
+.harbor {
+	fill-opacity: 0;
+	stroke: white;
+	stroke-width: 4;
+	opacity: 0;
 }
 
-#map .patrol_zone {
-	fill: white;
-	fill-opacity: 0.3;
+.patrol_zone {
+	fill-opacity: 0;
 	stroke: white;
-	stroke-width: 2;
+	stroke-width: 4;
 	opacity: 0;
 }
 
-#map .patrol_zone.highlight {
-	opacity: 1
+.patrol_zone.highlight, .harbor.highlight {
+	opacity: 1;
+	cursor: pointer;
 }
 
-#map .us_frigate { fill: #0977bd; }
-#map .us_gunboat { fill: #0977bd; }
-#map .se_frigate { fill: #fdd527; }
-#map .tr_frigate { fill: #de333e; }
-#map .tr_corsair { fill: #de333e; }
-#map .al_corsair { fill: #f39331; }
-#map .us_marine { fill: #0977bd; }
-#map .ar_infantry { fill: #e0e0e0; }
-#map .tr_infantry { fill: #de333e; }
+#map .harbor.where {
+	opacity: 1;
+	fill-opacity: 0.5;
+	fill: gold;
+	stroke: gold;
+}
 
-#map .us_frigate.damaged { fill: #005577; }
-#map .tr_frigate.damaged { fill: #881111; }
+#map .patrol_zone.where {
+	opacity: 1;
+	fill-opacity: 0.5;
+	fill: gold;
+	stroke: white;
+}
 
 /* CARD ACTION POPUP MENU */
 
@@ -262,7 +290,7 @@
 			</div>
 		</div>
 
-		<div class="image_button" onclick="toggle_fit()"><img src="/images/earth-africa-europe.svg"></div>
+		<div class="image_button" onclick="toggle_fit()"><img src="/images/magnifying-glass.svg"></div>
 		<div class="image_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
 		<div class="image_button chat_button" onclick="toggle_chat()"><img src="/images/chat-bubble.svg"></div>
 
@@ -296,16 +324,21 @@
 <svg id="map" class="fit" viewBox="0 0 2476 801">
 <defs>
 <symbol id="corsair" x="-15" y="-13" width="33.2" height="27" viewBox="0 0 332 270">
-<path d="M113.3 16.2c-.4.7-1 38.5-1.1 84-.2 45.6-.5 82.9-.5 83-.1.1-20.1.5-44.4.8-55.9.6-50.8-2.4-50.8 30.3 0 23.2 0 23.2 2.7 27.7 3.4 5.8 6.3 8.4 11.8 10.9 4.4 1.9 7.6 2 114.5 2.3 110 .3 110 .3 114.9-2 8.5-3.9 12.4-8 22.1-22.7 10.4-15.7 16.4-22.4 23.4-25.9 7.6-3.9 9.6-6.8 9.6-13.6 0-4.8-.4-6.3-2.3-8.3-4-4.2-7.4-5.1-14.5-3.8-18.5 3.5-96.7 6.9-96.7 4.3 0-.7 1.5-3.6 3.4-6.5 6.2-9.6 8.1-17.3 8.1-32.2-.1-10.5-.5-14.6-2.4-21.5-2.8-10.3-10-25.6-17.2-36.5C178 62.1 148.6 34.9 120 18c-5.9-3.5-5.6-3.4-6.7-1.8z" stroke-width="10"/>
+<path d="M113.3 16.2c-.4.7-1 38.5-1.1 84-.2 45.6-.5 82.9-.5 83-.1.1-20.1.5-44.4.8-55.9.6-50.8-2.4-50.8 30.3 0 23.2 0 23.2 2.7 27.7 3.4 5.8 6.3 8.4 11.8 10.9 4.4 1.9 7.6 2 114.5 2.3 110 .3 110 .3 114.9-2 8.5-3.9 12.4-8 22.1-22.7 10.4-15.7 16.4-22.4 23.4-25.9 7.6-3.9 9.6-6.8 9.6-13.6 0-4.8-.4-6.3-2.3-8.3-4-4.2-7.4-5.1-14.5-3.8-18.5 3.5-96.7 6.9-96.7 4.3 0-.7 1.5-3.6 3.4-6.5 6.2-9.6 8.1-17.3 8.1-32.2-.1-10.5-.5-14.6-2.4-21.5-2.8-10.3-10-25.6-17.2-36.5C178 62.1 148.6 34.9 120 18c-5.9-3.5-5.6-3.4-6.7-1.8z" stroke-width="15"/>
 </symbol>
 <symbol id="frigate" x="-20" y="-15" width="42.9" height="29.6" viewBox="0 0 428 296">
-<path d="M153.5 17.2c-.3.7-.6 42.7-.8 93.3l-.2 92-16.2.3c-9.3.1-16.3-.1-16.3-.7 0-.5 1.1-3.7 2.4-7.2 4-10.6 5.1-23.4 3.3-36.4-5.2-36.2-28-73.7-63.4-104.4-11.9-10.4-10.8-17.6-11.1 71.7L51 203h-9.6c-7.9 0-10.1.3-12.4 2-4.9 3.5-5.1 5.5-4.8 35.1.3 26.9.3 27.5 2.7 31.6 1.4 2.4 4.3 5.5 6.5 7 4 2.6 4.7 2.7 22.1 3.4 9.9.4 61.2.8 114 .8 101 .1 104 0 117-4.4 14-4.8 26.4-13.8 37-27.1 11.3-14 15.9-17.5 36.1-27.8 9.8-5.1 23.3-12 30-15.4 12.6-6.5 14.4-8.2 14.4-14.2 0-6.3-4.5-11-10.5-11-2.2 0-33.6 10.1-48.5 15.6-10.6 3.9-24 5.6-24 3.1 0-.7.4-1.7.9-2.3 1.9-1.9 5-13.7 6.2-23.3 1.3-10.6.3-24.7-2.7-37.6-4.9-21.7-19.8-50.7-37.4-72.7-6.8-8.6-29.4-30.8-31.3-30.8-.8 0-1.8.7-2.1 1.6-.3.9-.6 38.7-.6 84V203h-18c-9.9 0-18-.2-18-.5 0-.2 1.4-3.9 3-8.1 1.7-4.2 3.7-11.1 4.5-15.3 2.9-15.2 1.3-42.1-3.4-56.9-1.2-3.5-2.6-8.2-3.2-10.5-.6-2.3-3.1-8.9-5.5-14.6-11.7-27.2-26.7-49.6-48.1-71.9-8.7-9-10.9-10.5-11.8-8z" stroke-width="10"/>
+<path d="M153.5 17.2c-.3.7-.6 42.7-.8 93.3l-.2 92-16.2.3c-9.3.1-16.3-.1-16.3-.7 0-.5 1.1-3.7 2.4-7.2 4-10.6 5.1-23.4 3.3-36.4-5.2-36.2-28-73.7-63.4-104.4-11.9-10.4-10.8-17.6-11.1 71.7L51 203h-9.6c-7.9 0-10.1.3-12.4 2-4.9 3.5-5.1 5.5-4.8 35.1.3 26.9.3 27.5 2.7 31.6 1.4 2.4 4.3 5.5 6.5 7 4 2.6 4.7 2.7 22.1 3.4 9.9.4 61.2.8 114 .8 101 .1 104 0 117-4.4 14-4.8 26.4-13.8 37-27.1 11.3-14 15.9-17.5 36.1-27.8 9.8-5.1 23.3-12 30-15.4 12.6-6.5 14.4-8.2 14.4-14.2 0-6.3-4.5-11-10.5-11-2.2 0-33.6 10.1-48.5 15.6-10.6 3.9-24 5.6-24 3.1 0-.7.4-1.7.9-2.3 1.9-1.9 5-13.7 6.2-23.3 1.3-10.6.3-24.7-2.7-37.6-4.9-21.7-19.8-50.7-37.4-72.7-6.8-8.6-29.4-30.8-31.3-30.8-.8 0-1.8.7-2.1 1.6-.3.9-.6 38.7-.6 84V203h-18c-9.9 0-18-.2-18-.5 0-.2 1.4-3.9 3-8.1 1.7-4.2 3.7-11.1 4.5-15.3 2.9-15.2 1.3-42.1-3.4-56.9-1.2-3.5-2.6-8.2-3.2-10.5-.6-2.3-3.1-8.9-5.5-14.6-11.7-27.2-26.7-49.6-48.1-71.9-8.7-9-10.9-10.5-11.8-8z" stroke-width="15"/>
 </symbol>
 <symbol id="infantry" x="-10" y="-10" width="21" height="21" viewBox="0 0 105 105">
-<path d="M8 53v44h89V9H8v44z" stroke-width="5"/>
+<path d="M8 53v44h89V9H8v44z" stroke-width="6"/>
 </symbol>
 </defs>
 <image href="map.jpg" x="0" y="0" width="2476" height="801" />
+<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"/>
+<path class="patrol_zone" d="M1275.5 86a136 136 0 00-136 136 136 136 0 003.915 31.739 92.27 92.27 0 0188.835-67.76 92.27 92.27 0 0192.27 92.271 92.27 92.27 0 01-45.858 79.638A136 136 0 001411.5 222a136 136 0 00-136-136z" id="tunis_patrol_zone"/>
+<path class="patrol_zone" d="M1514.121 309.44a243 243 0 00-232.214 171.452c.44.816.461 1.972.293 4.108-.1 2.4.5 7.7 1.4 11.7 1.4 5.9 1.5 7.7.5 9.9-1.3 3-.7 4.4 1.1 2.6 1.9-1.9 2.5-1.5 6.3 4.3 2.1 3 4.1 5.5 4.7 5.5.5 0 2.2 1.4 3.8 3.2 2.3 2.5 3.2 2.9 4.3 2 1.1-1 2-.8 4 .8 1.4 1.1 3.3 2 4.2 2 .376 0 .983.2 1.68.517a127.92 127.92 0 01101.91-50.79 127.92 127.92 0 01119.673 83.173c.745-.355 1.238-.383 1.238 0 0 .6.599 1.1 1.299 1.1.6 0 2.3.9 3.7 2 1.5 1.2 4.1 2 6.4 2 4.2 0 7.6 2.2 7.6 5 0 1-1.1 3.4-2.5 5.5l-2.6 3.7 2.1 4.4c1.2 2.4 3.1 4.6 4.3 5 3.5 1 5.7 3.5 5.7 6.3.1 1.4.7 3.7 1.5 5.1 2 3.5 1.8 6.4-.5 8.5-1.1 1-2 2.9-2 4.2 0 2.8 3.2 9.4 5.5 11.3 3 2.5 4.5 6.8 5.1 15.4.5 5.8 1.2 9 2.2 9.8 1.3 1.1 1.4.8.7-3.2-.4-2.5-.8-7.4-1-11-.3-7.6-1.7-13.2-4.4-17.7-1.7-2.7-1.8-3.4-.6-5 1.3-1.7 1.4-1.7 3.9.6 1.4 1.3 3.1 4.5 3.9 6.9.9 3.3 2.1 5 4.2 6.2 2.8 1.6 3 2.1 3.1 8.1.1 8.5.1 8.7 2.4 9.9 1.5.8 4.9.7 12.7-.4 11.4-1.6 12.9-1.3 16.9 2.9 1.8 1.9 3.1 2.3 9 2.3 3.9 0 8.1-.6 9.6-1.4 2.3-1.2 2.9-1.2 4.2.2.9.8 1.6 2.3 1.6 3.3 0 2.4-1.7 11.1-2.6 13.5-.6 1.6-.4 1.8 2.2 1.3 7.5-1.5 9.2-2.1 12.7-4.9 4.2-3.3 6.7-3.1 6.7.6s2.9 6.3 10.5 9.2c7.3 2.7 8.9 3 14.2 1.9 3-.7 3.4-.4 6.3 4.1 1.6 2.6 3 5.4 3 6.1 0 .7.5 1.3 1 1.3.6 0 1-1 1-2.3 0-1.2 1.3-4.2 3-6.7 2.6-3.9 2.8-4.6 1.5-6-.8-.9-1.5-2.1-1.5-2.6 0-1.7 5.5-6.4 7.4-6.4.9 0 3-1.4 4.6-3.1 2.5-2.8 3.2-3.1 6.5-2.5 3 .6 3.9 1.4 5.7 5.1 1.2 2.4 2.8 4.7 3.6 5 .9.346 1.918.18 2.867-.31a243 243 0 006.885-14.25c-.886-1.077-1.551-2.136-1.551-2.54 0-.762 2.217-2.868 4.513-4.644a243 243 0 0017.607-90.317 243 243 0 00-243-243z" id="tripoli_patrol_zone"/>
 <circle class="harbor" id="tangier_harbor" r="92" cy="426" cx="296.5"/>
 <circle class="harbor" id="gibraltar_harbor" r="92" cy="216" cx="374.25"/>
 <circle class="harbor" id="algiers_harbor" r="92" cy="318" cx="883.5"/>
@@ -315,11 +348,6 @@
 <circle class="harbor" id="benghazi_harbor" r="92" cy="583" cx="1877"/>
 <circle class="harbor" id="alexandria_harbor" r="92" cy="454.5" cx="2335.5"/>
 <circle class="harbor" id="tripoli_harbor" r="128" cy="604.5" cx="1416"/>
-<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"/>
-<path class="patrol_zone" d="M1275.5 86a136 136 0 00-136 136 136 136 0 003.915 31.739 92.27 92.27 0 0188.835-67.76 92.27 92.27 0 0192.27 92.271 92.27 92.27 0 01-45.858 79.638A136 136 0 001411.5 222a136 136 0 00-136-136z" id="tunis_patrol_zone"/>
-<path class="patrol_zone" d="M1514.121 309.44a243 243 0 00-232.214 171.452c.44.816.461 1.972.293 4.108-.1 2.4.5 7.7 1.4 11.7 1.4 5.9 1.5 7.7.5 9.9-1.3 3-.7 4.4 1.1 2.6 1.9-1.9 2.5-1.5 6.3 4.3 2.1 3 4.1 5.5 4.7 5.5.5 0 2.2 1.4 3.8 3.2 2.3 2.5 3.2 2.9 4.3 2 1.1-1 2-.8 4 .8 1.4 1.1 3.3 2 4.2 2 .376 0 .983.2 1.68.517a127.92 127.92 0 01101.91-50.79 127.92 127.92 0 01119.673 83.173c.745-.355 1.238-.383 1.238 0 0 .6.599 1.1 1.299 1.1.6 0 2.3.9 3.7 2 1.5 1.2 4.1 2 6.4 2 4.2 0 7.6 2.2 7.6 5 0 1-1.1 3.4-2.5 5.5l-2.6 3.7 2.1 4.4c1.2 2.4 3.1 4.6 4.3 5 3.5 1 5.7 3.5 5.7 6.3.1 1.4.7 3.7 1.5 5.1 2 3.5 1.8 6.4-.5 8.5-1.1 1-2 2.9-2 4.2 0 2.8 3.2 9.4 5.5 11.3 3 2.5 4.5 6.8 5.1 15.4.5 5.8 1.2 9 2.2 9.8 1.3 1.1 1.4.8.7-3.2-.4-2.5-.8-7.4-1-11-.3-7.6-1.7-13.2-4.4-17.7-1.7-2.7-1.8-3.4-.6-5 1.3-1.7 1.4-1.7 3.9.6 1.4 1.3 3.1 4.5 3.9 6.9.9 3.3 2.1 5 4.2 6.2 2.8 1.6 3 2.1 3.1 8.1.1 8.5.1 8.7 2.4 9.9 1.5.8 4.9.7 12.7-.4 11.4-1.6 12.9-1.3 16.9 2.9 1.8 1.9 3.1 2.3 9 2.3 3.9 0 8.1-.6 9.6-1.4 2.3-1.2 2.9-1.2 4.2.2.9.8 1.6 2.3 1.6 3.3 0 2.4-1.7 11.1-2.6 13.5-.6 1.6-.4 1.8 2.2 1.3 7.5-1.5 9.2-2.1 12.7-4.9 4.2-3.3 6.7-3.1 6.7.6s2.9 6.3 10.5 9.2c7.3 2.7 8.9 3 14.2 1.9 3-.7 3.4-.4 6.3 4.1 1.6 2.6 3 5.4 3 6.1 0 .7.5 1.3 1 1.3.6 0 1-1 1-2.3 0-1.2 1.3-4.2 3-6.7 2.6-3.9 2.8-4.6 1.5-6-.8-.9-1.5-2.1-1.5-2.6 0-1.7 5.5-6.4 7.4-6.4.9 0 3-1.4 4.6-3.1 2.5-2.8 3.2-3.1 6.5-2.5 3 .6 3.9 1.4 5.7 5.1 1.2 2.4 2.8 4.7 3.6 5 .9.346 1.918.18 2.867-.31a243 243 0 006.885-14.25c-.886-1.077-1.551-2.136-1.551-2.54 0-.762 2.217-2.868 4.513-4.644a243 243 0 0017.607-90.317 243 243 0 00-243-243z" id="tripoli_patrol_zone"/>
 <g id="markers" fill="#444" stroke="black" stroke-width="2">
 <circle id="year" r="26" cx="175" cy="728"/>
 <circle id="season" r="26" cx="893" cy="728"/>
@@ -395,7 +423,13 @@
 </g>
 </svg>
 
-<div id="hand" class="hand">
+<div id="core" class="hand">
+<div id="tr_card_1" class="show card tr_card_1"></div>
+<div id="tr_card_2" class="show card tr_card_2"></div>
+<div id="tr_card_3" class="show card tr_card_3"></div>
+<div id="us_card_1" class="show card us_card_1"></div>
+<div id="us_card_2" class="show card us_card_2"></div>
+<div id="us_card_3" class="show card us_card_3"></div>
 <div id="tr_card_4" class="card tr_card_4"></div>
 <div id="tr_card_5" class="card tr_card_5"></div>
 <div id="tr_card_6" class="card tr_card_6"></div>
@@ -446,20 +480,6 @@
 <div id="us_card_27" class="card us_card_27"></div>
 </div>
 
-<div id="tr_table" class="hand">
-<div id="tr_card_deck" class="show card tr_card_back">24</div>
-<div id="tr_card_1" class="show card tr_card_1"></div>
-<div id="tr_card_2" class="show card tr_card_2"></div>
-<div id="tr_card_3" class="show card tr_card_3"></div>
-</div>
-
-<div id="us_table" class="hand">
-<div id="us_card_deck" class="show card us_card_back">24</div>
-<div id="us_card_1" class="show card us_card_1"></div>
-<div id="us_card_2" class="show card us_card_2"></div>
-<div id="us_card_3" class="show card us_card_3"></div>
-</div>
-
 <div id="popup" onmouseleave="hide_popup_menu()">
 <div id="menu_card_event" onclick="on_card_event()">Play Event</div>
 <div id="menu_card_take" onclick="on_card_take()">Place in hand</div>
diff --git a/rules.js b/rules.js
index 80d70fb..07a3335 100644
--- a/rules.js
+++ b/rules.js
@@ -330,23 +330,16 @@ function roll_d6() {
 	return Math.floor(Math.random() * 6) + 1;
 }
 
-function reset_deck() {
-	let deck = [];
-	for (let c = 1; c <= 27; ++c)
-		deck.push(c);
-	return deck;
-}
-
-function reshuffle_discard(deck, discard) {
+function reshuffle_discard(draw, discard) {
 	while (discard.length > 0)
-		deck.push(discard.pop());
+		draw.push(discard.pop());
 }
 
-function draw_cards(hand, deck, n) {
+function draw_cards(hand, draw, n) {
 	for (let i = 0; i < n; ++i) {
-		let c = Math.floor(Math.random() * deck.length);
-		hand.push(deck[c]);
-		deck.splice(c, 1);
+		let c = Math.floor(Math.random() * draw.length);
+		hand.push(draw[c]);
+		draw.splice(c, 1);
 	}
 }
 
@@ -360,10 +353,10 @@ function discard_random_card(hand, discard) {
 
 function is_not_removed(card) {
 	return game.us.hand.includes(card) ||
-		game.us.deck.includes(card) ||
+		game.us.draw.includes(card) ||
 		game.us.discard.includes(card) ||
 		game.tr.hand.includes(card) ||
-		game.tr.deck.includes(card) ||
+		game.tr.draw.includes(card) ||
 		game.tr.discard.includes(card);
 }
 
@@ -389,7 +382,9 @@ function play_card(player, card) {
 	log(game.active + " plays \"" + CARD_NAMES[card] + "\".");
 	remove_from_array(player.core, card);
 	remove_from_array(player.hand, card);
-	if (!REMOVE_AFTER_PLAY.includes(card))
+	if (REMOVE_AFTER_PLAY.includes(card))
+		game.removed.push(card);
+	else
 		player.discard.push(card);
 	game.active_card = card;
 }
@@ -398,6 +393,7 @@ function play_battle_card(player, card) {
 	log("");
 	log(game.active + " plays \"" + CARD_NAMES[card] + "\".");
 	remove_from_array(player.hand, card);
+	game.removed.push(card);
 }
 
 function deploy(piece_name, space) {
@@ -610,18 +606,18 @@ function start_of_year() {
 	move_all_pieces(TR_FRIGATES, YEAR_TURN_TRACK[game.year], TRIPOLI_HARBOR);
 
 	if (game.year <= 1804) {
-		draw_cards(game.us.hand, game.us.deck, 6);
-		draw_cards(game.tr.hand, game.tr.deck, 6);
+		draw_cards(game.us.hand, game.us.draw, 6);
+		draw_cards(game.tr.hand, game.tr.draw, 6);
 	}
 	if (game.year == 1805) {
-		reshuffle_discard(game.us.deck, game.us.discard);
-		draw_cards(game.us.hand, game.us.deck, 6);
-		reshuffle_discard(game.tr.deck, game.tr.discard);
-		draw_cards(game.tr.hand, game.tr.deck, 6);
+		reshuffle_discard(game.us.draw, game.us.discard);
+		draw_cards(game.us.hand, game.us.draw, 6);
+		reshuffle_discard(game.tr.draw, game.tr.discard);
+		draw_cards(game.tr.hand, game.tr.draw, 6);
 	}
 	if (game.year == 1806) {
-		draw_cards(game.us.hand, game.us.deck, game.us.deck.length);
-		draw_cards(game.tr.hand, game.tr.deck, game.tr.deck.length);
+		draw_cards(game.us.hand, game.us.draw, game.us.draw.length);
+		draw_cards(game.tr.hand, game.tr.draw, game.tr.draw.length);
 	}
 
 	goto_american_discard();
@@ -654,7 +650,8 @@ states.american_discard = {
 	prompt: function (view, current) {
 		if (is_inactive_player(current))
 			return view.prompt = "American hand limit.";
-		view.prompt = "American hand limit: discard down to eight cards in hand.";
+		let n = game.us.hand.length - 8;
+		view.prompt = "American hand limit: discard " + n + " cards.";
 		gen_action_undo(view);
 		if (game.us.hand.length > 8) {
 			for (let c of game.us.hand)
@@ -679,7 +676,8 @@ states.tripolitan_discard = {
 	prompt: function (view, current) {
 		if (is_inactive_player(current))
 			return view.prompt = "Tripolitan hand limit.";
-		view.prompt = "Tripolitan hand limit: discard down to eight cards in hand.";
+		let n = game.tr.hand.length - 8;
+		view.prompt = "Tripolitan hand limit: discard " + n + " cards.";
 		gen_action_undo(view);
 		if (game.tr.hand.length > 8) {
 			for (let c of game.tr.hand)
@@ -852,18 +850,14 @@ states.raid_before_intercept = {
 }
 
 function goto_pirate_raid_intercept(us_dice) {
+	game.happy_hunting = false;
 	let patrol_zone = game.where;
 	let harbor = HARBOR[patrol_zone];
 	interception_roll(harbor, patrol_zone, us_dice);
-	if (can_play_happy_hunting(harbor)) {
-		game.state = 'raid_before_hunt';
-		return;
-	}
-	if (can_play_us_signal_books_overboard(patrol_zone)) {
+	if (can_play_happy_hunting(harbor) || can_play_us_signal_books_overboard(patrol_zone))
 		game.state = 'raid_before_hunt';
-		return;
-	}
-	goto_pirate_raid_hunt();
+	else
+		goto_pirate_raid_hunt();
 }
 
 states.raid_before_hunt = {
@@ -888,25 +882,26 @@ states.raid_before_hunt = {
 		if (card == US_SIGNAL_BOOKS_OVERBOARD) {
 			let c = discard_random_card(game.us.hand, game.us.discard);
 			log("United States discards \"" + CARD_NAMES[c] + "\".");
-			// allow playing happy hunting too!
 		}
 		if (card == HAPPY_HUNTING) {
-			// TODO: allow play of Happy Hunting before US Signal Books Overboard
-			return goto_pirate_raid_hunt(true);
+			game.happy_hunting = true;
 		}
+		if (!can_play_happy_hunting() && !can_play_us_signal_books_overboard())
+			goto_pirate_raid_hunt();
 	},
 	next: function () {
-		goto_pirate_raid_hunt(false);
+		goto_pirate_raid_hunt();
 	},
 }
 
-function goto_pirate_raid_hunt(happy_hunting) {
+function goto_pirate_raid_hunt() {
 	let patrol_zone = game.where;
 	let harbor = HARBOR[patrol_zone];
 	let corsairs = count_corsairs(harbor);
 	let merchants = capture("Corsair", corsairs);
-	if (happy_hunting)
+	if (game.happy_hunting)
 		merchants += capture("Happy Hunting", 3);
+	delete game.happy_hunting;
 	log("Merchant ships captured: " + merchants + ".");
 	give_gold(merchants);
 	if (check_gold_victory())
@@ -967,23 +962,20 @@ function interception_roll(harbor, patrol_zone, us_dice) {
 }
 
 // AMERICAN NAVAL MOVEMENT
-// TODO: click 'from' location to go back to selecting source?
-// TODO: select multiple frigates then destination?
 
 function goto_move_up_to_n_american_frigates(n) {
 	game.moves = n;
 	game.active = US;
 	game.state = 'move_us_frigate_from';
-	push_undo();
 }
 
 states.move_us_frigate_from = {
 	prompt: function (view, current) {
 		if (is_inactive_player(current))
-			return view.prompt = "United States: Move up to " + game.moves + " frigates.";
-		view.prompt = "United States: Move up to " + game.moves + " frigates."
+			return view.prompt = "United States: Naval Movement.";
+		view.prompt = "United States: Naval Movement. " + game.moves + " moves left.";
 		if (game.moves > 0) {
-			view.prompt += " Select a frigate to move.";
+			view.prompt += " Select an origin.";
 			for (let space of FRIGATE_SPACES) {
 				if (count_american_frigates(space) > 0)
 					gen_action(view, 'space', space);
@@ -1009,20 +1001,31 @@ states.move_us_frigate_from = {
 states.move_us_frigate_to = {
 	prompt: function (view, current) {
 		if (is_inactive_player(current))
-			return view.prompt = "United States: Move up to " + game.moves + " frigates.";
-		view.prompt = "United States: Move up to " + game.moves + " frigates. Select a destination.";
+			return view.prompt = "United States: Naval Movement.";
+		view.prompt = "United States: Naval Movement. " + game.moves + " moves left. Select a destination.";
 		for (let space of FRIGATE_SPACES)
-			if (space != game.where)
-				gen_action(view, 'space', space);
+			gen_action(view, 'space', space);
+		gen_action(view, 'next');
 		gen_action_undo(view);
 	},
 	space: function (space) {
-		log(game.active + " moves a frigate from " + SPACES[game.where] + " to " + SPACES[space] + ".");
-		move_one_piece(US_FRIGATES, game.where, space);
-		--game.moves;
+		push_undo();
+		if (space != game.where) {
+			log(game.active + " moves a frigate from " + SPACES[game.where] + " to " + SPACES[space] + ".");
+			move_one_piece(US_FRIGATES, game.where, space);
+			--game.moves;
+			if (count_american_frigates(game.where) > 0 && game.moves > 0)
+				return;
+		}
 		game.where = null;
 		game.state = 'move_us_frigate_from'
 	},
+	next: function () {
+		if (count_naval_battle_or_bombardment_locations() > 0)
+			goto_allocate_gunboats();
+		else
+			end_american_play();
+	},
 	undo: pop_undo
 }
 
@@ -2402,6 +2405,7 @@ function play_corsairs_confiscated() {
 	move_all_pieces(TR_CORSAIRS, GIBRALTAR_HARBOR, TRIPOLITAN_SUPPLY);
 	log("\"Murad Reis Breaks Out\" card removed.");
 	remove_from_array(game.tr.core, MURAD_REIS_BREAKS_OUT);
+	game.removed.push(MURAD_REIS_BREAKS_OUT);
 	end_american_play();
 }
 
@@ -2675,16 +2679,17 @@ exports.setup = function (scenario, players) {
 		us: {
 			core: [],
 			hand: [],
-			deck: [],
+			draw: [],
 			discard: [],
 		},
 		tr: {
 			core: [],
 			hand: [],
-			deck: [],
+			draw: [],
 			discard: [],
 			gold: 0,
 		},
+		removed: [],
 		where: null,
 		undo: [],
 	};
@@ -2701,8 +2706,8 @@ exports.setup = function (scenario, players) {
 	game.us.core.push(HAMETS_ARMY_CREATED);
 
 	for (let i = 4; i <= 27; ++i) {
-		game.us.deck.push(i);
-		game.tr.deck.push(i+27);
+		game.us.draw.push(i);
+		game.tr.draw.push(i+27);
 	}
 
 	deploy("us_frigate_1", GIBRALTAR_HARBOR);
@@ -2798,31 +2803,35 @@ exports.view = function(state, current) {
 		actions: null,
 		tr: {
 			core: game.tr.core,
-			deck: game.tr.deck.length,
+			draw: game.tr.draw.length,
 			discard: game.tr.discard.length,
 			hand: game.tr.hand.length,
 			gold: game.tr.gold,
 		},
 		us: {
 			core: game.us.core,
-			deck: game.us.deck.length,
+			draw: game.us.draw.length,
 			discard: game.us.discard.length,
 			hand: game.us.hand.length,
 		},
 		card: game.active_card,
+		removed: game.removed,
 		where: game.where,
 	};
 
 	states[game.state].prompt(view, current);
 
-	if (current == US && game.state == 'bainbridge_supplies_intel')
+	if (current == US && game.state == 'bainbridge_supplies_intel') {
 		view.hand = game.us.discard;
-	else if (current == US)
+	} else if (current == US) {
 		view.hand = game.us.hand;
-	else if (current == TR)
+		view.core = game.us.core;
+	} else if (current == TR) {
 		view.hand = game.tr.hand;
-	else
+		view.core = game.tr.core;
+	} else {
 		view.hand = [];
+	}
 
 	return view;
 }
diff --git a/ui.js b/ui.js
index 6071a9c..3302229 100644
--- a/ui.js
+++ b/ui.js
@@ -21,7 +21,16 @@ function create_piece_list(n, name) {
 
 const US_FRIGATES = create_piece_list(8, 'us_frigate_');
 const TR_FRIGATES = create_piece_list(2, 'tr_frigate_');
+const SE_FRIGATES = create_piece_list(2, 'se_frigate_');
+const US_GUNBOATS = create_piece_list(3, 'us_gunboat_');
+const TR_CORSAIRS = create_piece_list(9, 'tr_corsair_');
+const AL_CORSAIRS = create_piece_list(9, 'al_corsair_');
+const US_MARINES = create_piece_list(4, 'us_marine_');
+const AR_INFANTRY = create_piece_list(10, 'ar_infantry_');
+const TR_INFANTRY = create_piece_list(20, 'tr_infantry_');
+
 const FRIGATES = US_FRIGATES.concat(TR_FRIGATES);
+const CORSAIRS = TR_CORSAIRS.concat(AL_CORSAIRS);
 
 const ALEXANDRIA_HARBOR = get_space_id("Alexandria Harbor");
 const ALGIERS_HARBOR = get_space_id("Algiers Harbor");
@@ -111,7 +120,29 @@ function build_map() {
 	}
 }
 
+const CARD_ACTIONS = [
+	'card_build_corsair',
+	'card_build_gunboat',
+	'card_event',
+	'card_move_frigates',
+	'card_pirate_raid',
+	'card_take',
+	'discard',
+];
+
+function is_card_enabled(c) {
+	if (game.actions)
+		for (let a of CARD_ACTIONS)
+			if (game.actions[a] && game.actions[a].includes(c))
+				return true;
+	return false;
+}
+
 function update_card(c, show) {
+	if (is_card_enabled(c))
+		ui.cards[c].classList.add('enabled');
+	else
+		ui.cards[c].classList.add('enabled');
 	if (show)
 		ui.cards[c].classList.add('show');
 	else
@@ -119,11 +150,9 @@ function update_card(c, show) {
 }
 
 function update_cards() {
-	document.getElementById("us_card_deck").textContent = game.us.deck;
-	document.getElementById("tr_card_deck").textContent = game.tr.deck;
 	for (let i = 1; i <= 3; ++i) {
-		update_card(i, game.us.core.includes(i));
-		update_card(i+27, game.tr.core.includes(i+27));
+		update_card(i, game.core.includes(i));
+		update_card(i+27, game.core.includes(i+27));
 	}
 	for (let i = 4; i <= 27; ++i) {
 		update_card(i, game.hand.includes(i));
@@ -135,20 +164,18 @@ function update_cards() {
 
 function tr_info() {
 	let text = "";
-	if (game.tr.hand == 1)
-		text += "1 card in hand";
-	else
-		text += game.tr.hand + " cards in hand";
-	text += "\n$" + game.tr.gold;
+	text += "Hand: " + game.tr.hand + "\n";
+	text += "Draw: " + game.tr.draw + "\n";
+	text += "Discard: " + game.tr.discard + "\n";
+	text += "Gold: " + game.tr.gold + "\n";
 	return text;
 }
 
 function us_info() {
 	let text = "";
-	if (game.us.hand == 1)
-		text += "1 card in hand";
-	else
-		text += game.us.hand + " cards in hand";
+	text += "Hand: " + game.us.hand + "\n";
+	text += "Draw: " + game.us.draw + "\n";
+	text += "Discard: " + game.us.discard + "\n";
 	return text;
 }
 
@@ -160,7 +187,9 @@ function on_update() {
 	document.getElementById("tr_info").textContent = tr_info();
 	document.getElementById("us_info").textContent = us_info();
 
-	if (game.card == "United States")
+	if (game.card == undefined)
+		document.getElementById("active_card").className = "card show blank";
+	else if (game.card == "United States")
 		document.getElementById("active_card").className = "card show us_card_back";
 	else if (game.card == "Tripolitania")
 		document.getElementById("active_card").className = "card show tr_card_back";
@@ -194,37 +223,67 @@ function set_piece_xy(p, x, y) {
 	e.setAttribute("y", y);
 }
 
-function layout_space(location, s, x0, y0, wrap, dx=45, dy=30) {
-	let n = 0;
-	for (let p = 0; p < PIECES.length; ++p)
-		if (location[p] == s)
-			++n;
-	let rows = Math.ceil(n / wrap);
-	let cols = rows == 1 ? n : wrap;
-	let y = y0 - (rows-1)/2 * dx;
-	let x = x0 - (cols-1)/2 * dx;
-	let k = 0;
+function layout_space(location, s, x0, y0, size) {
+	const LOUT_W = { se_f:46, us_f:46, tr_f:46, us_g:36, tr_c:36, al_c:36, us_m:28, ar_i:28, tr_i:28 };
+	const LOUT_H = { se_f:32, us_f:32, tr_f:32, us_g:28, tr_c:28, al_c:28, us_m:28, ar_i:28, tr_i:28 };
+	function lout(row, prefix) {
+		row.w = LOUT_W[prefix];
+		row.h = LOUT_H[prefix];
+		return row;
+	}
+
+	let pps = { se_f:[], us_f:[], us_g:[], us_m:[], ar_i:[], tr_f:[], tr_c:[], al_c:[], tr_i:[] };
 	for (let p = 0; p < PIECES.length; ++p) {
 		if (location[p] == s) {
-			set_piece_xy(p, x + k * dx, y);
-			if (++k == wrap) {
-				y += dy;
-				k = 0;
+			let prefix = PIECES[p].substring(0,4);
+			if (prefix == 'se_f') prefix = 'us_f';
+			if (prefix == 'al_c') prefix = 'tr_c';
+			pps[prefix].push(p);
+		}
+	}
+
+	let rows = [];
+	for (let prefix in pps) {
+		let row = pps[prefix];
+		if (row.length > 0) {
+			let wrap = (prefix == 'ar_i' || prefix == 'tr_i') ? size+1 : size;
+			if (row.length > wrap*2) {
+				rows.push(lout(row.slice(0,wrap), prefix))
+				rows.push(lout(row.slice(wrap,wrap*2), prefix))
+				rows.push(lout(row.slice(wrap*2), prefix))
+			} else if (row.length > wrap) {
+				rows.push(lout(row.slice(0,wrap), prefix))
+				rows.push(lout(row.slice(wrap), prefix))
+			} else {
+				rows.push(lout(row, prefix));
 			}
 		}
 	}
+
+	let h = rows.reduce((acc, row) => acc + row.h, 0);
+	let y = y0 - h / 2;
+	for (let r = 0; r < rows.length; ++r) {
+		let row = rows[r];
+		let w = row.w * row.length;
+		let x = x0 - w / 2 + row.w/2;
+		for (let c = 0; c < row.length; ++c) {
+			let p = row[c];
+			set_piece_xy(p, x + c * row.w, y + row.h/2);
+		}
+		y += row.h;
+	}
 }
 
 function update_pieces() {
-	layout_space(game.location, UNITED_STATES_SUPPLY, 1933, 180, 6, 38, 26);
-	layout_space(game.location, TRIPOLITAN_SUPPLY, 2195, 180, 6, 38, 26);
+	layout_space(game.location, UNITED_STATES_SUPPLY, 1933, 180, 6);
+	layout_space(game.location, TRIPOLITAN_SUPPLY, 2195, 180, 6);
 
-	layout_space(game.location, TRACK_1801, YEAR_X[1801], 625, 1);
-	layout_space(game.location, TRACK_1802, YEAR_X[1802], 625, 1);
-	layout_space(game.location, TRACK_1803, YEAR_X[1803], 625, 1);
-	layout_space(game.location, TRACK_1804, YEAR_X[1804], 625, 1);
-	layout_space(game.location, TRACK_1805, YEAR_X[1805], 625, 1);
-	layout_space(game.location, TRACK_1806, YEAR_X[1806], 625, 1);
+	layout_space(game.location, TRACK_1801, YEAR_X[1801], 625, 2);
+	layout_space(game.location, TRACK_1802, YEAR_X[1802], 625, 2);
+	layout_space(game.location, TRACK_1803, YEAR_X[1803], 625, 2);
+	layout_space(game.location, TRACK_1804, YEAR_X[1804], 625, 2);
+	layout_space(game.location, TRACK_1805, YEAR_X[1805], 625, 2);
+	layout_space(game.location, TRACK_1806, YEAR_X[1806], 625, 2);
 
 	layout_space(game.location, ALEXANDRIA_HARBOR, 2335, 454, 3);
 	layout_space(game.location, ALGIERS_HARBOR, 883, 318, 3);
@@ -233,13 +292,13 @@ function update_pieces() {
 	layout_space(game.location, GIBRALTAR_HARBOR, 374, 216, 3);
 	layout_space(game.location, MALTA_HARBOR, 1592, 189, 3);
 	layout_space(game.location, TANGIER_HARBOR, 296, 426, 3);
-	layout_space(game.location, TRIPOLI_HARBOR, 1416, 604, 4);
+	layout_space(game.location, TRIPOLI_HARBOR, 1416, 604, 5);
 	layout_space(game.location, TUNIS_HARBOR, 1232, 278, 3);
 
 	layout_space(game.location, ALGIERS_PATROL_ZONE, 875, 170, 3);
 	layout_space(game.location, GIBRALTAR_PATROL_ZONE, 560, 245, 3);
 	layout_space(game.location, TANGIER_PATROL_ZONE, 125, 410, 3);
-	layout_space(game.location, TRIPOLI_PATROL_ZONE, 1575, 390, 6);
+	layout_space(game.location, TRIPOLI_PATROL_ZONE, 1575, 420, 5);
 	layout_space(game.location, TUNIS_PATROL_ZONE, 1300, 130, 3);
 
 	for (let p of FRIGATES) {
@@ -248,6 +307,13 @@ function update_pieces() {
 		else
 			ui.pieces[p].classList.remove("damaged");
 	}
+
+	for (let p = 0; p < PIECES.length; ++p) {
+		if (game.actions && game.actions.piece && game.actions.piece.includes(p))
+			ui.pieces[p].classList.add("highlight");
+		else
+			ui.pieces[p].classList.remove("highlight");
+	}
 }
 
 function update_spaces() {
@@ -260,7 +326,6 @@ function update_spaces() {
 	}
 	if (game.actions && game.actions.space) {
 		for (let space of game.actions.space) {
-			console.log("enable space " + space);
 			ui.spaces[space].classList.add('highlight');
 		}
 	}
-- 
cgit v1.2.3