Pursuit.

2 files changed, 54 insertions, 32 deletions

diff --git a/play.html b/play.html
index c299074..360e114 100644
--- a/play.html
+++ b/play.html
@@ -227,6 +227,17 @@ body.Teutons #plan_actions .russian { display: none }
 .defender #battle_mat { background-image: url(images/mat_battle_defender.png); }
 .attacker #battle_mat { background-image: url(images/mat_battle_attacker.png); }
 
+#mat_pursuit { position: absolute; }
+.defender #mat_pursuit { top: 150px; left: 139px; }
+.attacker #mat_pursuit { top: 175px; left: 139px; }
+
+.defender #mat_pursuit.rotate, .attacker #mat_pursuit:not(.rotate)
+{
+	transform: rotate(180deg);
+	border-color: #a68c61 #e7cb9e #e7cb9e #a68c61;
+	box-shadow: 0 0 0 1px #4e370a, -1px -2px 4px #0008;
+}
+
 .defender #mat_garrison { top: 172px; left: 8px; }
 .defender #mat_attacker_reserves { top: 4px; left: 8px; }
 .defender #mat_defender_reserves { bottom: 4px; left: 8px; }
@@ -266,7 +277,7 @@ body.Teutons #plan_actions .russian { display: none }
 .attacker #mat_defender_reserves { justify-content: end; }
 */
 
-#battle_mat > div {
+#battle_mat .mat_array {
 	position: absolute;
 	display: flex;
 	flex-wrap: wrap;
@@ -274,21 +285,21 @@ body.Teutons #plan_actions .russian { display: none }
 	align-items: center;
 }
 
-#battle_mat .reserves {
-	width: 356px;
+#battle_mat .mat_array {
+	width: 48px;
 	height: 48px;
-	gap: 8px;
 }
 
-#battle_mat .garrison {
+#battle_mat .mat_array.reserves {
 	width: 356px;
 	height: 48px;
-	gap: 2px;
+	gap: 8px;
 }
 
-#battle_mat .mat_array {
-	width: 48px;
+#battle_mat .mat_array.garrison {
+	width: 356px;
 	height: 48px;
+	gap: 2px;
 }
 
 #battle_mat .mat_array.action {
@@ -580,12 +591,6 @@ body.shift .mustered_vassals {
 	border-radius: 50%;
 }
 
-.marker.pursuit.rot180 {
-	transform: rotate(180deg);
-	border-color: #a68c61 #e7cb9e #e7cb9e #a68c61;
-	box-shadow: 0 0 0 1px #4e370a, -1px -2px 4px #0008;
-}
-
 .marker.turn.levy { background-image: url(images/marker_levy.png) }
 .marker.turn.campaign { background-image: url(images/marker_campaign.png) }
 .marker.storm { background-image: url(images/marker_storm.png) }
@@ -1321,28 +1326,29 @@ body.shift .mustered_vassals {
 <div id="battle_panel" class="panel hide">
 <div id="battle_header" class="panel_header">Battle</div>
 <div id="battle_grid">
-	<div class="grid_array att" id="grid_a1"></div>
-	<div class="grid_array att" id="grid_a2"></div>
-	<div class="grid_array att" id="grid_a3"></div>
 	<div class="grid_array" id="grid_bm">
 		<div id="battle_mat">
-			<div class="reserves" id="mat_attacker_reserves"></div>
-			<div class="mat_array" id="mat_a1"></div>
-			<div class="mat_array" id="mat_a2"></div>
-			<div class="mat_array" id="mat_a3"></div>
-			<div class="garrison" id="mat_garrison"></div>
-			<div class="mat_array" id="mat_d1"></div>
-			<div class="mat_array" id="mat_d2"></div>
-			<div class="mat_array" id="mat_d3"></div>
-			<div class="mat_array" id="mat_rd1"></div>
-			<div class="mat_array" id="mat_rd2"></div>
-			<div class="mat_array" id="mat_rd3"></div>
-			<div class="mat_array" id="mat_sa1"></div>
-			<div class="mat_array" id="mat_sa2"></div>
-			<div class="mat_array" id="mat_sa3"></div>
-			<div class="reserves" id="mat_defender_reserves"></div>
+			<div id="mat_pursuit" class="marker rectangle pursuit russian hide"></div>
+			<div id="mat_attacker_reserves" class="mat_array reserves"></div>
+			<div id="mat_garrison" class="mat_array garrison"></div>
+			<div id="mat_defender_reserves" class="mat_array reserves"></div>
+			<div id="mat_a1" class="mat_array"></div>
+			<div id="mat_a2" class="mat_array"></div>
+			<div id="mat_a3" class="mat_array"></div>
+			<div id="mat_d1" class="mat_array"></div>
+			<div id="mat_d2" class="mat_array"></div>
+			<div id="mat_d3" class="mat_array"></div>
+			<div id="mat_rd1" class="mat_array"></div>
+			<div id="mat_rd2" class="mat_array"></div>
+			<div id="mat_rd3" class="mat_array"></div>
+			<div id="mat_sa1" class="mat_array"></div>
+			<div id="mat_sa2" class="mat_array"></div>
+			<div id="mat_sa3" class="mat_array"></div>
 		</div>
 	</div>
+	<div class="grid_array att" id="grid_a1"></div>
+	<div class="grid_array att" id="grid_a2"></div>
+	<div class="grid_array att" id="grid_a3"></div>
 	<div class="grid_array def" id="grid_d1"></div>
 	<div class="grid_array def" id="grid_d2"></div>
 	<div class="grid_array def" id="grid_d3"></div>
diff --git a/play.js b/play.js
index 276ae05..e9c0b17 100644
--- a/play.js
+++ b/play.js
@@ -491,6 +491,7 @@ const ui = {
 	battle_garrison: document.getElementById("mat_garrison"),
 	battle_panel: document.getElementById("battle_panel"),
 	battle_header: document.getElementById("battle_header"),
+	pursuit: document.getElementById("mat_pursuit"),
 	battle_mat: document.getElementById("battle_mat"),
 	battle_mat_array: [
 		document.getElementById("mat_a1"),
@@ -1303,6 +1304,21 @@ function update_cards() {
 function update_battle() {
 	let array = view.battle.array
 
+	// Pursuit marker points "up" towards the conceding side
+	if (view.battle.conceded === "Russians") {
+		if (view.battle.attacker === "Russians")
+			ui.pursuit.className = "marker rectangle pursuit teutonic"
+		else
+			ui.pursuit.className = "marker rectangle pursuit teutonic rotate"
+	} else if (view.battle.conceded === "Teutons") {
+		if (view.battle.attacker === "Teutons")
+			ui.pursuit.className = "marker rectangle pursuit russian"
+		else
+			ui.pursuit.className = "marker rectangle pursuit russian rotate"
+	} else {
+		ui.pursuit.className = "hide"
+	}
+
 	ui.battle_attacker_reserves.replaceChildren()
 	ui.battle_defender_reserves.replaceChildren()
 	for (let lord of view.battle.reserves) {