From 763118f70215a0b736349431efcb4a8dab6947cb Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Thu, 26 Jan 2023 19:54:14 +0100
Subject: Tweak battle layout.
---
images/garrison.svg | 3 +++
images/garrison_attacker.svg | 5 -----
images/garrison_defender.svg | 3 ---
play.html | 38 +++++++++++++++-----------------------
play.js | 34 ++++++++++++++--------------------
5 files changed, 32 insertions(+), 51 deletions(-)
create mode 100644 images/garrison.svg
delete mode 100644 images/garrison_attacker.svg
delete mode 100644 images/garrison_defender.svg
diff --git a/images/garrison.svg b/images/garrison.svg
new file mode 100644
index 0000000..ec79240
--- /dev/null
+++ b/images/garrison.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="333" height="80" viewBox="0 0 249.75 60" version="1.2">
+<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"/>
+</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/images/garrison_defender.svg b/images/garrison_defender.svg
deleted file mode 100644
index ec79240..0000000
--- a/images/garrison_defender.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="333" height="80" viewBox="0 0 249.75 60" version="1.2">
-<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"/>
-</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"))
--
cgit v1.2.3