Tweak battle layout.

4 files changed, 29 insertions, 48 deletions

diff --git a/images/garrison_defender.svg b/images/garrison.svg
index ec79240..ec79240 100644
--- a/images/garrison_defender.svg
+++ b/images/garrison.svg
diff --git a/images/garrison_attacker.svg b/images/garrison_attacker.svg
deleted file mode 100644
index 36a4998..0000000
--- a/images/garrison_attacker.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="333" height="80" viewBox="0 0 249.75 60" version="1.2">
-<g transform="matrix(1 0 0 -1 0 60)">
-<path fill="white" fill-opacity="0.5" d="M11.342 1.5 4.3 10.622v36.487h14.09V10.62Zm227.058 0-7.049 9.122v36.487h14.098V10.62zM19.192 13.38v33.57h211.336V13.38Z"/>
-</g>
-</svg>
diff --git a/play.html b/play.html
index 9e459a3..fbfbaea 100644
--- a/play.html
+++ b/play.html
@@ -135,21 +135,11 @@ body.Teutons #plan_actions .russian { display: none }
 #battle_grid .grid_array {
 	width: 376px;
 	height: 506px;
-	padding: 12px;
+	padding: 36px 12px 12px 12px;
 }
 
-#battle_grid #grid_ga {
-	height: auto;
-	min-height: 80px;
-}
-
-#battle_grid #grid_sw {
-	height: auto;
-}
-
-#battle_grid #grid_sw:empty {
-	display: none;
-}
+#battle_grid #grid_ga { height: auto; }
+#battle_grid #grid_sw { height: auto; }
 
 .grid_array { background-repeat: no-repeat }
 
@@ -263,9 +253,13 @@ body.Teutons #plan_actions .russian { display: none }
 	flex-wrap: wrap;
 	justify-content: center;
 	gap: 4px;
+	margin: 12px;
 }
 
+.siegeworks:empty { display: none }
+
 #garrison {
+	background-image: url(images/garrison.svg);
 	background-repeat: no-repeat;
 	background-position: center;
 	display: flex;
@@ -275,16 +269,12 @@ body.Teutons #plan_actions .russian { display: none }
 	width: 376px;
 	height: 80px;
 	gap: 2px;
+	margin: 0 auto;
 }
 
 #garrison.hide { display: none }
 
-.attacker #garrison { background-image: url(images/garrison_attacker.svg); }
-.defender #garrison { background-image: url(images/garrison_defender.svg); }
-
-#garrison .unit {
-	position: static
-}
+#garrison .unit { position: static }
 
 /* MATS */
 
@@ -374,7 +364,7 @@ body.Teutons #plan_actions .russian { display: none }
 	z-index: 5;
 }
 
-.mat .feed_x2 { left: 8px; top: 178px; }
+.mat .feed_x2 { left: 8px; top: 164px; }
 .mat .moved_fought.one { right: 72px; top: 12px; }
 .mat .moved_fought.two { right: 66px; top: 6px; }
 
@@ -1370,11 +1360,13 @@ 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" id="grid_ga">
+	<div id="grid_ga">
 		<div id="pursuit" class="marker rectangle pursuit russian hide"></div>
 		<div id="battle_walls1" class="siegeworks"></div>
-		<div id="garrison"></div>
 		<div id="battle_walls2" class="siegeworks"></div>
+		<div id="garrison"></div>
+		<div id="battle_walls3" class="siegeworks"></div>
+		<div id="battle_walls4" class="siegeworks"></div>
 	</div>
 	<div class="grid_array att" id="grid_a1"></div>
 	<div class="grid_array att" id="grid_a2"></div>
@@ -1385,7 +1377,7 @@ body.shift .mustered_vassals {
 	<div class="grid_array att" id="grid_rg1"></div>
 	<div class="grid_array att" id="grid_rg2"></div>
 	<div class="grid_array att" id="grid_rg3"></div>
-	<div class="grid_array siegeworks" id="grid_sw"></div>
+	<div class="siegeworks" id="grid_sw"></div>
 	<div class="grid_array def" id="grid_sa1"></div>
 	<div class="grid_array def" id="grid_sa2"></div>
 	<div class="grid_array def" id="grid_sa3"></div>
diff --git a/play.js b/play.js
index 7c3608f..0f973f2 100644
--- a/play.js
+++ b/play.js
@@ -646,8 +646,12 @@ const ui = {
 	court1: document.getElementById("court1"),
 	court2: document.getElementById("court2"),
 	garrison: document.getElementById("garrison"),
-	battle_walls1: document.getElementById("battle_walls1"),
-	battle_walls2: document.getElementById("battle_walls2"),
+	battle_walls: [
+		document.getElementById("battle_walls1"),
+		document.getElementById("battle_walls2"),
+		document.getElementById("battle_walls3"),
+		document.getElementById("battle_walls4"),
+	],
 	battle_siegeworks: document.getElementById("grid_sw"),
 	battle_panel: document.getElementById("battle_panel"),
 	battle_header: document.getElementById("battle_header"),
@@ -1648,26 +1652,17 @@ function update_battle() {
 		sally_prot = count_siege_markers(view.battle.where)
 
 	let att_ui, def_ui
-
-	if (view.battle.attacker === "Teutons") {
-		if (player === "Russians") {
-			att_ui = ui.battle_walls1
-			def_ui = ui.battle_walls2
-		} else {
-			att_ui = ui.battle_walls2
-			def_ui = ui.battle_walls1
-		}
+	if (player === view.battle.attacker) {
+		att_ui = ui.battle_walls[3]
+		def_ui = ui.battle_walls[2]
 	} else {
-		if (player === "Russians") {
-			att_ui = ui.battle_walls2
-			def_ui = ui.battle_walls1
-		} else {
-			att_ui = ui.battle_walls1
-			def_ui = ui.battle_walls2
-		}
+		att_ui = ui.battle_walls[0]
+		def_ui = ui.battle_walls[1]
 	}
 
-	def_ui.replaceChildren()
+	for (let i = 0; i < 4; ++i)
+		ui.battle_walls[i].replaceChildren()
+
 	for (let i = 0; i < def_prot; ++i)
 		if (view.battle.attacker === "Teutons")
 			def_ui.appendChild(get_cached_element("marker square russian siege"))
@@ -1683,7 +1678,6 @@ function update_battle() {
 		else
 			ui.battle_siegeworks.appendChild(get_cached_element("marker square teutonic siege"))
 
-	att_ui.replaceChildren()
 	for (let i = 0; i < att_prot; ++i)
 		if (view.battle.attacker === "Teutons")
 			att_ui.appendChild(get_cached_element("marker square teutonic siege"))