Array lord mats around battle mat.

2 files changed, 220 insertions, 104 deletions

diff --git a/play.html b/play.html
index f427fd9..639c1ef 100644
--- a/play.html
+++ b/play.html
@@ -55,13 +55,13 @@ body.Russians #court2 { grid-row: 2; }
 /* PANELS */
 
 .panel {
-	user-select: none;
 	max-width: 1275px;
 	margin: 36px auto;
 	//box-shadow: 0px 0px 4px #0008;
 }
 
 .panel_header {
+	user-select: none;
 	font-weight: bold;
 	text-align: center;
 	padding: 3px 1em;
@@ -127,11 +127,62 @@ body.Teutons #plan_actions .russian { display: none }
 	background-size: 93px 130px;
 }
 
-/* BATTLE */
+/* BATTLE GRID WITH LORD MATS */
+
+#battle_panel {
+	background-color: #555;
+}
+
+#battle_header {
+	background-color: #444;
+	color: white;
+}
 
-#battle {
+#battle_grid {
+	display: grid;
+	width: 1200px;
+	gap: 36px;
+	grid-template-columns: 376px 376px 376px;
+	margin: 0 auto;
+	padding-bottom: 36px;
+}
+
+#grid_rd1:empty, #grid_rd2:empty, #grid_rd3:empty, #grid_sa1:empty, #grid_sa2:empty, #grid_sa3:empty { display: none; }
+
+#battle_header { grid-row: 1; grid-column: 1 / 4; }
+
+#battle_grid.defender #grid_a1 { grid-row: 2; grid-column: 1; }
+#battle_grid.defender #grid_a2 { grid-row: 2; grid-column: 2; }
+#battle_grid.defender #grid_a3 { grid-row: 2; grid-column: 3; }
+#battle_grid.defender #grid_bm { grid-row: 3; grid-column: 2; }
+#battle_grid.defender #grid_d1 { grid-row: 4; grid-column: 1; }
+#battle_grid.defender #grid_d2 { grid-row: 4; grid-column: 2; }
+#battle_grid.defender #grid_d3 { grid-row: 4; grid-column: 3; }
+#battle_grid.defender #grid_rd1 { grid-row: 5; grid-column: 1; }
+#battle_grid.defender #grid_rd2 { grid-row: 5; grid-column: 2; }
+#battle_grid.defender #grid_rd3 { grid-row: 5; grid-column: 3; }
+#battle_grid.defender #grid_sa1 { grid-row: 6; grid-column: 1; }
+#battle_grid.defender #grid_sa2 { grid-row: 6; grid-column: 2; }
+#battle_grid.defender #grid_sa3 { grid-row: 6; grid-column: 3; }
+
+#battle_grid.attacker #grid_a1 { grid-row: 6; grid-column: 3; }
+#battle_grid.attacker #grid_a2 { grid-row: 6; grid-column: 2; }
+#battle_grid.attacker #grid_a3 { grid-row: 6; grid-column: 1; }
+#battle_grid.attacker #grid_bm { grid-row: 5; grid-column: 2; }
+#battle_grid.attacker #grid_d1 { grid-row: 4; grid-column: 3; }
+#battle_grid.attacker #grid_d2 { grid-row: 4; grid-column: 2; }
+#battle_grid.attacker #grid_d3 { grid-row: 4; grid-column: 1; }
+#battle_grid.attacker #grid_rd1 { grid-row: 3; grid-column: 3; }
+#battle_grid.attacker #grid_rd2 { grid-row: 3; grid-column: 2; }
+#battle_grid.attacker #grid_rd3 { grid-row: 3; grid-column: 1; }
+#battle_grid.attacker #grid_sa1 { grid-row: 2; grid-column: 3; }
+#battle_grid.attacker #grid_sa2 { grid-row: 2; grid-column: 2; }
+#battle_grid.attacker #grid_sa3 { grid-row: 2; grid-column: 1; }
+
+/* BATTLE MAT WITH LORD CYLINDERS */
+
+#battle_mat {
 	position: relative;
-	margin: 24px auto;
 	width: 372px;
 	height: 372px;
 	background-size: 360px 360px;
@@ -143,42 +194,42 @@ body.Teutons #plan_actions .russian { display: none }
 	border-style: solid;
 }
 
-#battle.defender { background-image: url(images/mat_battle_defender.png); }
-#battle.attacker { background-image: url(images/mat_battle_attacker.png); }
-
-#battle.defender #array_garrison { top: 172px; left: 8px; }
-#battle.defender #array_attacker_reserves { top: 4px; left: 8px; }
-#battle.defender #array_defender_reserves { bottom: 4px; left: 8px; }
-#battle.defender #array_a1	{ top: 96px; left: 32px; }
-#battle.defender #array_a2	{ top: 96px; left: 162px; }
-#battle.defender #array_a3	{ top: 96px; right: 32px; }
-#battle.defender #array_d1	{ top: 220px; left: 32px; }
-#battle.defender #array_d2	{ top: 220px; left: 162px; }
-#battle.defender #array_d3	{ top: 220px; right: 32px; }
-#battle.defender #array_rd1	{ bottom: 60px; left: 4px; }
-#battle.defender #array_rd2	{ bottom: 60px; right: 200px; }
-#battle.defender #array_rd3	{ bottom: 60px; right: 4px; }
-#battle.defender #array_sa1		{ bottom: 48px; left: 64px; }
-#battle.defender #array_sa2		{ bottom: 48px; left: 200px; }
-#battle.defender #array_sa3		{ bottom: 48px; right: 64px; }
-
-#battle.attacker #array_garrison { bottom: 172px; left: 8px; }
-#battle.attacker #array_attacker_reserves { bottom: 4px; left: 8px; }
-#battle.attacker #array_defender_reserves { top: 4px; left: 8px; }
-#battle.attacker #array_a1	{ bottom: 96px; right: 32px; }
-#battle.attacker #array_a2	{ bottom: 96px; left: 162px; }
-#battle.attacker #array_a3	{ bottom: 96px; left: 32px; }
-#battle.attacker #array_d1	{ bottom: 220px; right: 32px; }
-#battle.attacker #array_d2	{ bottom: 220px; left: 162px; }
-#battle.attacker #array_d3	{ bottom: 220px; left: 32px; }
-#battle.attacker #array_rd1	{ top: 60px; right: 4px; }
-#battle.attacker #array_rd2	{ top: 60px; left: 200px; }
-#battle.attacker #array_rd3	{ top: 60px; left: 4px; }
-#battle.attacker #array_sa1		{ top: 48px; right: 64px; }
-#battle.attacker #array_sa2		{ top: 48px; right: 200px; }
-#battle.attacker #array_sa3		{ top: 48px; left: 64px; }
-
-#battle > div {
+#battle_mat.defender { background-image: url(images/mat_battle_defender.png); }
+#battle_mat.attacker { background-image: url(images/mat_battle_attacker.png); }
+
+#battle_mat.defender #mat_garrison { top: 172px; left: 8px; }
+#battle_mat.defender #mat_attacker_reserves { top: 4px; left: 8px; }
+#battle_mat.defender #mat_defender_reserves { bottom: 4px; left: 8px; }
+#battle_mat.defender #mat_a1	{ top: 96px; left: 32px; }
+#battle_mat.defender #mat_a2	{ top: 96px; left: 162px; }
+#battle_mat.defender #mat_a3	{ top: 96px; right: 32px; }
+#battle_mat.defender #mat_d1	{ top: 220px; left: 32px; }
+#battle_mat.defender #mat_d2	{ top: 220px; left: 162px; }
+#battle_mat.defender #mat_d3	{ top: 220px; right: 32px; }
+#battle_mat.defender #mat_rd1	{ bottom: 60px; left: 4px; }
+#battle_mat.defender #mat_rd2	{ bottom: 60px; right: 200px; }
+#battle_mat.defender #mat_rd3	{ bottom: 60px; right: 4px; }
+#battle_mat.defender #mat_sa1		{ bottom: 48px; left: 64px; }
+#battle_mat.defender #mat_sa2		{ bottom: 48px; left: 200px; }
+#battle_mat.defender #mat_sa3		{ bottom: 48px; right: 64px; }
+
+#battle_mat.attacker #mat_garrison { bottom: 172px; left: 8px; }
+#battle_mat.attacker #mat_attacker_reserves { bottom: 4px; left: 8px; }
+#battle_mat.attacker #mat_defender_reserves { top: 4px; left: 8px; }
+#battle_mat.attacker #mat_a1	{ bottom: 96px; right: 32px; }
+#battle_mat.attacker #mat_a2	{ bottom: 96px; left: 162px; }
+#battle_mat.attacker #mat_a3	{ bottom: 96px; left: 32px; }
+#battle_mat.attacker #mat_d1	{ bottom: 220px; right: 32px; }
+#battle_mat.attacker #mat_d2	{ bottom: 220px; left: 162px; }
+#battle_mat.attacker #mat_d3	{ bottom: 220px; left: 32px; }
+#battle_mat.attacker #mat_rd1	{ top: 60px; right: 4px; }
+#battle_mat.attacker #mat_rd2	{ top: 60px; left: 200px; }
+#battle_mat.attacker #mat_rd3	{ top: 60px; left: 4px; }
+#battle_mat.attacker #mat_sa1		{ top: 48px; right: 64px; }
+#battle_mat.attacker #mat_sa2		{ top: 48px; right: 200px; }
+#battle_mat.attacker #mat_sa3		{ top: 48px; left: 64px; }
+
+#battle_mat > div {
 	position: absolute;
 	display: flex;
 	flex-wrap: wrap;
@@ -186,34 +237,34 @@ body.Teutons #plan_actions .russian { display: none }
 	align-items: center;
 }
 
-#battle.defender #array_attacker_reserves { justify-content: end; }
-#battle.defender #array_defender_reserves { justify-content: start; }
-#battle.attacker #array_attacker_reserves { justify-content: start; }
-#battle.attacker #array_defender_reserves { justify-content: end; }
+#battle_mat.defender #mat_attacker_reserves { justify-content: end; }
+#battle_mat.defender #mat_defender_reserves { justify-content: start; }
+#battle_mat.attacker #mat_attacker_reserves { justify-content: start; }
+#battle_mat.attacker #mat_defender_reserves { justify-content: end; }
 
-#battle .reserves {
+#battle_mat .reserves {
 	width: 356px;
 	height: 48px;
 	gap: 8px;
 }
 
-#battle .garrison {
+#battle_mat .garrison {
 	width: 356px;
 	height: 48px;
 	gap: 2px;
 }
 
-#battle .array {
+#battle_mat .mat_array {
 	width: 48px;
 	height: 48px;
 }
 
-#battle .array.action {
+#battle_mat .mat_array.action {
 	border-radius: 50%;
 	box-shadow: 0 0 0 3px white;
 }
 
-#battle .cylinder, #battle .unit {
+#battle_mat .cylinder, #battle_mat .unit {
 	position: static
 }
 
@@ -964,7 +1015,7 @@ body.shift .mustered_vassals {
 /* BACKGROUND COLORS AND BORDERS */
 /* :r !node tools/colors.mjs */
 
-#battle { background-color: #d1c07e; border-color: #f2e19d #b1a05f #b1a05f #f2e19d; box-shadow: 0 0 0 1px #584800, 1px 2px 4px #0008; }
+#battle_mat { background-color: #d1c07e; border-color: #f2e19d #b1a05f #b1a05f #f2e19d; box-shadow: 0 0 0 1px #584800, 1px 2px 4px #0008; }
 .mat .background { background-color: #d1c07e; border-color: #f2e19d #b1a05f #b1a05f #f2e19d; box-shadow: 0 0 0 1px #584800, 1px 2px 4px #0008; }
 .card.teutonic { background-color: #e1e6e8; border-color: #fbffff #c1c5c7 #c1c5c7 #fbffff; box-shadow: 0 0 0 1px #666a6c, 1px 2px 4px #0008; }
 .card.russian { background-color: #e1d6c1; border-color: #fff7e1 #c1b6a1 #c1b6a1 #fff7e1; box-shadow: 0 0 0 1px #665c4a, 1px 2px 4px #0008; }
@@ -1234,28 +1285,47 @@ body.shift .mustered_vassals {
 <div id="plan_actions"></div>
 </div>
 
-<div id="hand" class="hand"></div>
-
-<div id="battle" class="defender hide">
-<div class="garrison" id="array_garrison"></div>
-<div class="reserves" id="array_attacker_reserves"></div>
-<div class="reserves" id="array_defender_reserves"></div>
-<div class="array" id="array_a1"></div>
-<div class="array" id="array_a2"></div>
-<div class="array" id="array_a3"></div>
-<div class="array" id="array_d1"></div>
-<div class="array" id="array_d2"></div>
-<div class="array" id="array_d3"></div>
-<div class="array" id="array_rd1"></div>
-<div class="array" id="array_rd2"></div>
-<div class="array" id="array_rd3"></div>
-<div class="array" id="array_sa1"></div>
-<div class="array" id="array_sa2"></div>
-<div class="array" id="array_sa3"></div>
+<div id="battle_panel" class="panel">
+<div id="battle_header" class="panel_header">Battle</div>
+<div id="battle_grid">
+	<div class="grid_array" id="grid_a1"></div>
+	<div class="grid_array" id="grid_a2"></div>
+	<div class="grid_array" id="grid_a3"></div>
+	<div class="grid_array" id="grid_bm">
+		<div id="battle_mat" class="defender hide">
+			<div class="garrison" id="mat_garrison"></div>
+			<div class="reserves" id="mat_attacker_reserves"></div>
+			<div class="reserves" id="mat_defender_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="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>
+	</div>
+	<div class="grid_array" id="grid_d1"></div>
+	<div class="grid_array" id="grid_d2"></div>
+	<div class="grid_array" id="grid_d3"></div>
+	<div class="grid_array" id="grid_rd1"></div>
+	<div class="grid_array" id="grid_rd2"></div>
+	<div class="grid_array" id="grid_rd3"></div>
+	<div class="grid_array" id="grid_sa1"></div>
+	<div class="grid_array" id="grid_sa2"></div>
+	<div class="grid_array" id="grid_sa3"></div>
 </div>
-
 </div>
 
+<div id="hand" class="hand"></div>
+
+</div> <!-- center -->
+
 <div id="court1" class="court"></div>
 <div id="court2" class="court"></div>
 
diff --git a/play.js b/play.js
index 4f68e80..4d93876 100644
--- a/play.js
+++ b/play.js
@@ -484,23 +484,42 @@ const ui = {
 	turn: document.getElementById("turn"),
 	vp1: document.getElementById("vp1"),
 	vp2: document.getElementById("vp2"),
-	battle_attacker_reserves: document.getElementById("array_attacker_reserves"),
-	battle_defender_reserves: document.getElementById("array_defender_reserves"),
-	battle_garrison: document.getElementById("array_garrison"),
-	battle: document.getElementById("battle"),
-	battle_array: [
-		document.getElementById("array_a1"),
-		document.getElementById("array_a2"),
-		document.getElementById("array_a3"),
-		document.getElementById("array_d1"),
-		document.getElementById("array_d2"),
-		document.getElementById("array_d3"),
-		document.getElementById("array_rd1"),
-		document.getElementById("array_rd2"),
-		document.getElementById("array_rd3"),
-		document.getElementById("array_sa1"),
-		document.getElementById("array_sa2"),
-		document.getElementById("array_sa3"),
+	court1: document.getElementById("court1"),
+	court2: document.getElementById("court2"),
+	battle_attacker_reserves: document.getElementById("mat_attacker_reserves"),
+	battle_defender_reserves: document.getElementById("mat_defender_reserves"),
+	battle_garrison: document.getElementById("mat_garrison"),
+	battle_panel: document.getElementById("battle_panel"),
+	battle_header: document.getElementById("battle_header"),
+	battle_mat: document.getElementById("battle_mat"),
+	battle_mat_array: [
+		document.getElementById("mat_a1"),
+		document.getElementById("mat_a2"),
+		document.getElementById("mat_a3"),
+		document.getElementById("mat_d1"),
+		document.getElementById("mat_d2"),
+		document.getElementById("mat_d3"),
+		document.getElementById("mat_rd1"),
+		document.getElementById("mat_rd2"),
+		document.getElementById("mat_rd3"),
+		document.getElementById("mat_sa1"),
+		document.getElementById("mat_sa2"),
+		document.getElementById("mat_sa3"),
+	],
+	battle_grid: document.getElementById("battle_grid"),
+	battle_grid_array: [
+		document.getElementById("grid_a1"),
+		document.getElementById("grid_a2"),
+		document.getElementById("grid_a3"),
+		document.getElementById("grid_d1"),
+		document.getElementById("grid_d2"),
+		document.getElementById("grid_d3"),
+		document.getElementById("grid_rd1"),
+		document.getElementById("grid_rd2"),
+		document.getElementById("grid_rd3"),
+		document.getElementById("grid_sa1"),
+		document.getElementById("grid_sa2"),
+		document.getElementById("grid_sa3"),
 	],
 }
 
@@ -1031,7 +1050,6 @@ function update_lord(ix) {
 	if (locale < 0) {
 		ui.lord_cylinder[ix].classList.add("hide")
 		ui.lord_service[ix].classList.add("hide")
-		ui.lord_mat[ix].classList.add("hide")
 		ui.lord_mat[ix].classList.remove("action")
 		return
 	}
@@ -1054,13 +1072,11 @@ function update_lord(ix) {
 
 		ui.lord_cylinder[ix].classList.remove("hide")
 		ui.lord_service[ix].classList.remove("hide")
-		ui.lord_mat[ix].classList.remove("hide")
 		update_lord_mat(ix)
 	} else {
 		calendar_layout_cylinder[locale - 100].push(ui.lord_cylinder[ix])
 		ui.lord_cylinder[ix].classList.remove("hide")
 		ui.lord_service[ix].classList.add("hide")
-		ui.lord_mat[ix].classList.add("hide")
 	}
 	ui.lord_buttons[ix].classList.toggle("action", is_lord_action(ix))
 	ui.lord_cylinder[ix].classList.toggle("action", is_lord_action(ix))
@@ -1298,10 +1314,14 @@ function update_battle() {
 
 	for (let i = 0; i < array.length; ++i) {
 		let lord = array[i]
-		ui.battle_array[i].replaceChildren()
+		ui.battle_mat_array[i].replaceChildren()
+		if (lord >= 0)
+			ui.battle_mat_array[i].appendChild(ui.battle_cylinder[lord])
+		ui.battle_mat_array[i].classList.toggle("action", is_battle_array_action(i))
+
+		ui.battle_grid_array[i].replaceChildren()
 		if (lord >= 0)
-			ui.battle_array[i].appendChild(ui.battle_cylinder[lord])
-		ui.battle_array[i].classList.toggle("action", is_battle_array_action(i))
+			ui.battle_grid_array[i].appendChild(ui.lord_mat[lord])
 	}
 
 	for (let lord = 0; lord < 12; ++lord) {
@@ -1310,6 +1330,26 @@ function update_battle() {
 	}
 }
 
+function is_lord_in_grid(lord) {
+	if (view.battle)
+		for (let i = 0; i < 12; ++i)
+			if (view.battle.array[i] === lord)
+				return true
+	return false
+}
+
+function update_court() {
+console.log("update court!")
+	ui.court1.replaceChildren()
+	ui.court2.replaceChildren()
+	for (let lord = 0; lord < 6; ++lord)
+		if (!is_lord_in_grid(lord) && is_lord_on_map(lord))
+			ui.court1.appendChild(ui.lord_mat[lord])
+	for (let lord = 6; lord < 12; ++lord)
+		if (!is_lord_in_grid(lord) && is_lord_on_map(lord))
+			ui.court2.appendChild(ui.lord_mat[lord])
+}
+
 function on_update() {
 	restart_cache()
 
@@ -1325,7 +1365,6 @@ function on_update() {
 		if (view.pieces.locale[ix] < 0) {
 			ui.lord_cylinder[ix].classList.add("hide")
 			ui.lord_service[ix].classList.add("hide")
-			ui.lord_mat[ix].classList.add("hide")
 		} else {
 			ui.lord_cylinder[ix].classList.remove("hide")
 			update_lord(ix)
@@ -1383,15 +1422,22 @@ function on_update() {
 	ui.veche.classList.toggle("action", is_veche_action())
 
 	if (view.battle) {
-		if (view.battle.attacker === player)
-			ui.battle.className = "attacker"
-		else
-			ui.battle.className = "defender"
+		ui.battle_panel.classList.remove("hide")
+		ui.battle_header.textContent = "~ Battle at " + data.locales[view.battle.where].name + " ~"
+		if (view.battle.attacker === player) {
+			ui.battle_mat.className = "attacker"
+			ui.battle_grid.className = "attacker"
+		} else {
+			ui.battle_mat.className = "defender"
+			ui.battle_grid.className = "defender"
+		}
 		update_battle()
 	} else {
-		ui.battle.className = "hide"
+		ui.battle_panel.classList.add("hide")
 	}
 
+	update_court()
+
 	// Misc
 	action_button("left", "Left")
 	action_button("right", "Right")
@@ -1472,13 +1518,13 @@ function build_div(parent, className, id, onclick) {
 		e.my_id = id
 		e.addEventListener("mousedown", onclick)
 	}
-	parent.appendChild(e)
+	if (parent)
+		parent.appendChild(e)
 	return e
 }
 
 function build_lord_mat(lord, ix, side, name) {
-	let parent = document.getElementById(side === 'teutonic' ? "court1" : "court2")
-	let mat = build_div(parent, `mat ${side} ${name} hide`)
+	let mat = build_div(null, `mat ${side} ${name}`)
 	let bg = build_div(mat, "background")
 	ui.forces[ix] = build_div(bg, "forces")
 	ui.routed[ix] = build_div(bg, "routed")
@@ -1696,9 +1742,9 @@ function build_map() {
 
 	build_plan()
 
-	for (let i = 0; i < ui.battle_array.length; ++i) {
-		ui.battle_array[i].my_id = i
-		ui.battle_array[i].addEventListener("mousedown", on_click_array)
+	for (let i = 0; i < 12; ++i) {
+		ui.battle_mat_array[i].my_id = i
+		ui.battle_mat_array[i].addEventListener("mousedown", on_click_array)
 	}
 
 	for (let c = 0; c < 21; ++c)