Space ordering.

8 files changed, 75 insertions, 57 deletions

diff --git a/data.js b/data.js
index 7449228..ba639f7 100644
--- a/data.js
+++ b/data.js
@@ -219,17 +219,17 @@ const data = {
 				214,
 				207
 			],
-			"Continental Congress Dispersed": [
-				542,
-				332,
-				88,
-				104
-			],
 			"Captured Generals": [
 				1400,
 				46,
 				205,
 				136
+			],
+			"Continental Congress Dispersed": [
+				542,
+				332,
+				88,
+				104
 			]
 		}
 	},
@@ -1518,6 +1518,17 @@ const data = {
 			"y": 1353
 		},
 		{
+			"name": "British Reinforcement Box",
+			"type": "box",
+			"adjacent": [],
+			"path": [],
+			"wilderness": [],
+			"port": -1,
+			"colony": -1,
+			"x": 1465,
+			"y": 1776
+		},
+		{
 			"name": "American Leader Reinforcements",
 			"type": "box",
 			"adjacent": [],
@@ -1529,15 +1540,15 @@ const data = {
 			"y": 361
 		},
 		{
-			"name": "British Reinforcement Box",
+			"name": "French Reinforcements",
 			"type": "box",
 			"adjacent": [],
 			"path": [],
 			"wilderness": [],
 			"port": -1,
 			"colony": -1,
-			"x": 1465,
-			"y": 1776
+			"x": 170,
+			"y": 362
 		},
 		{
 			"name": "Captured Generals",
@@ -1560,17 +1571,6 @@ const data = {
 			"colony": -1,
 			"x": 586,
 			"y": 384
-		},
-		{
-			"name": "French Reinforcements",
-			"type": "box",
-			"adjacent": [],
-			"path": [],
-			"wilderness": [],
-			"port": -1,
-			"colony": -1,
-			"x": 170,
-			"y": 362
 		}
 	],
 	"space_index": {
@@ -1640,11 +1640,11 @@ const data = {
 		"Wilmington": 63,
 		"York": 64,
 		"Yorktown": 65,
-		"American Leader Reinforcements": 66,
-		"British Reinforcement Box": 67,
-		"Captured Generals": 68,
-		"Continental Congress Dispersed": 69,
-		"French Reinforcements": 70
+		"British Reinforcement Box": 66,
+		"American Leader Reinforcements": 67,
+		"French Reinforcements": 68,
+		"Captured Generals": 69,
+		"Continental Congress Dispersed": 70
 	},
 	"colonies": [
 		[
diff --git a/play.css b/play.css
index 871bb54..40fadd3 100644
--- a/play.css
+++ b/play.css
@@ -2,9 +2,6 @@ main {
 	background-color: slategray;
 }
 
-.x_britain { background-color: hsl(15, 88%, 66%) }
-.x_america { background-color: hsl(211, 52%, 64%) }
-
 body.Britain header.your_turn { background-color: hsl(15, 90%, 75%) }
 body.America header.your_turn { background-color: hsl(211, 50%, 75%) }
 
@@ -66,6 +63,21 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) }
 #log div.i { padding-left: 32px; text-indent: -12px; }
 #log div.ii { padding-left: 44px; text-indent: -12px; }
 
+#turn_info {
+	position: relative;
+	white-space: normal;
+}
+
+#reshuffle {
+	position: absolute;
+	bottom: 6px;
+	right: 4px;
+	font-style: normal;
+	font-size: 16px;
+	line-height: 16px;
+	color: #000a;
+}
+
 #tooltip {
 	pointer-events: none;
 	position: fixed;
diff --git a/play.html b/play.html
index 3c78e97..6698361 100644
--- a/play.html
+++ b/play.html
@@ -36,18 +36,18 @@
 	<div id="roles">
 		<div class="role" id="role_Britain">
 			<div class="role_name">Britain</div>
-			<div class="role_stat">VP</div>
+			<div class="role_stat"></div>
 			<div class="role_user">-</div>
 			<div class="role_info"></div>
 		</div>
 		<div class="role" id="role_America">
 			<div class="role_name">America</div>
-			<div class="role_stat">VP</div>
+			<div class="role_stat"></div>
 			<div class="role_user">-</div>
 			<div class="role_info"></div>
 		</div>
 	</div>
-	<div id="turn_info"><div id="last_played" class="card shrink card_0"></div></div>
+	<div id="turn_info"><div id="last_played" class="card shrink card_0"></div><div id="reshuffle" class="hide">&#x1f504;</div></div>
 	<div id="log"></div>
 </aside>
 
diff --git a/play.js b/play.js
index f601076..991bf75 100644
--- a/play.js
+++ b/play.js
@@ -5,7 +5,6 @@
 */
 
 // TODO: show "reshuffle" flag next to card deck display
-// TODO: improve animations by having one CU stack per general and one CU stack per space
 
 function toggle_counters() {
 	// Cycle between showing everything, only markers, and nothing.
@@ -19,7 +18,6 @@ function toggle_counters() {
 	}
 }
 
-
 /* COMMON */
 
 function lerp(a, b, t) {
@@ -59,6 +57,7 @@ const CARDS = data.cards
 const P_BRITAIN = "Britain"
 const P_AMERICA = "America"
 
+const F_RESHUFFLE = 1
 const F_REGULARS = 2
 const F_EUROPEAN_WAR = 4
 const F_MUTINIES = 16
@@ -156,7 +155,10 @@ let ui = {
 	header: document.querySelector("header"),
 	status: document.getElementById("status"),
 
+	turn_info: document.getElementById("turn_info"),
+	war_ends: document.getElementById("war_ends"),
 	last_played: document.getElementById("last_played"),
+	reshuffle: document.getElementById("reshuffle"),
 	hand: document.getElementById("hand"),
 	map: document.getElementById("map"),
 	spaces_element: document.getElementById("spaces"),
@@ -225,11 +227,11 @@ function build_piece(cn, w, h) {
 }
 
 function on_init() {
-	document.getElementById("war_ends").addEventListener("mouseenter", on_focus_war_ends)
-	document.getElementById("war_ends").addEventListener("mouseleave", on_blur_war_ends)
+	ui.war_ends.addEventListener("mouseenter", on_focus_war_ends)
+	ui.war_ends.addEventListener("mouseleave", on_blur_war_ends)
 
-	document.getElementById("last_played").addEventListener("mouseenter", on_focus_last_played)
-	document.getElementById("last_played").addEventListener("mouseleave", on_blur_last_played)
+	ui.last_played.addEventListener("mouseenter", on_focus_last_played)
+	ui.last_played.addEventListener("mouseleave", on_blur_last_played)
 
 	for (let c = 0; c <= 110; ++c) {
 		let e = ui.cards[c] = document.createElement("div")
@@ -703,6 +705,7 @@ function on_update() {
 		toggle_marker(ui.a_colony[i], control > 0)
 	}
 
+	ui.reshuffle.classList.toggle("hide", !(view.flags & F_RESHUFFLE))
 	ui.turn_marker.classList.toggle("no_regulars", !(view.flags & F_REGULARS))
 	ui.french_alliance.classList.toggle("european_war", !!(view.flags & F_EUROPEAN_WAR))
 
diff --git a/rules.js b/rules.js
index 117a310..cac0bbd 100644
--- a/rules.js
+++ b/rules.js
@@ -3257,6 +3257,7 @@ events.advance_french_alliance = function (card) {
 
 events.remove_french_navy = function () {
 	// TODO: remove french navy manual?
+	// NOTE: Technically it should be game.year but this way we avoid stacking with the turn marker.
 	game.french_navy = game.year + 1
 	end_strategy_card()
 }
diff --git a/tools/layout.json b/tools/layout.json
index 8e0bc12..e2c4c2d 100644
--- a/tools/layout.json
+++ b/tools/layout.json
@@ -642,18 +642,18 @@
                 "name": "French Reinforcements"
             },
             {
-                "x": 542,
-                "y": 332,
-                "w": 88,
-                "h": 104,
-                "name": "Continental Congress Dispersed"
-            },
-            {
                 "x": 1400,
                 "y": 46,
                 "w": 205,
                 "h": 136,
                 "name": "Captured Generals"
+            },
+            {
+                "x": 542,
+                "y": 332,
+                "w": 88,
+                "h": 104,
+                "name": "Continental Congress Dispersed"
             }
         ],
         "Card Boxes": [
@@ -1287,14 +1287,14 @@
                 "name": "French Reinforcements"
             },
             {
-                "x": 586,
-                "y": 384,
-                "name": "Continental Congress Dispersed"
-            },
-            {
                 "x": 1502.5,
                 "y": 114,
                 "name": "Captured Generals"
+            },
+            {
+                "x": 586,
+                "y": 384,
+                "name": "Continental Congress Dispersed"
             }
         ],
         "Card Boxes": [
diff --git a/tools/layout.svg b/tools/layout.svg
index aded2e6..629e3c4 100644
--- a/tools/layout.svg
+++ b/tools/layout.svg
@@ -775,14 +775,6 @@
        y="258"
        inkscape:label="French Reinforcements" />
     <rect
-       style="opacity:1;fill:#000000;fill-opacity:0.46748;stroke:none;stroke-width:3"
-       id="rect1606"
-       width="88"
-       height="104"
-       x="542"
-       y="332"
-       inkscape:label="Continental Congress Dispersed" />
-    <rect
        style="opacity:0.99;fill:#ff0000;fill-opacity:0.46748;stroke:none;stroke-width:3.23342"
        id="rect1094"
        width="205"
@@ -790,6 +782,14 @@
        x="1400"
        y="46"
        inkscape:label="Captured Generals" />
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:0.46748;stroke:none;stroke-width:3"
+       id="rect1606"
+       width="88"
+       height="104"
+       x="542"
+       y="332"
+       inkscape:label="Continental Congress Dispersed" />
   </g>
   <g
      id="g607"
diff --git a/tools/process-layout.js b/tools/process-layout.js
index 6de0844..2d19c04 100644
--- a/tools/process-layout.js
+++ b/tools/process-layout.js
@@ -95,6 +95,8 @@ for (let item of layout.points.box)
 const TYPE_SORT = [ "fortified_port", "winter_quarters", "regular", "box" ]
 
 spaces.sort((a,b) => {
+	if (a.type === "box" && b.type === "box")
+		return 0
 	let at = TYPE_SORT.indexOf(a.type)
 	let bt = TYPE_SORT.indexOf(b.type)
 	if (at < bt) return -1