summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--images/battle_array_action.svg3
-rw-r--r--mats.1x/mat_battle_attacker-fs8.pngbin15131 -> 0 bytes
-rw-r--r--mats.1x/mat_battle_attacker.pngbin26182 -> 0 bytes
-rw-r--r--mats.1x/mat_battle_defender-fs8.pngbin15086 -> 0 bytes
-rw-r--r--mats.1x/mat_battle_defender.pngbin26139 -> 0 bytes
-rw-r--r--mats.2x/mat_battle_attacker-fs8.pngbin40308 -> 0 bytes
-rw-r--r--mats.2x/mat_battle_attacker.pngbin72671 -> 0 bytes
-rw-r--r--mats.2x/mat_battle_defender-fs8.pngbin40053 -> 0 bytes
-rw-r--r--mats.2x/mat_battle_defender.pngbin72681 -> 0 bytes
-rw-r--r--play.html146
-rw-r--r--play.js40
11 files changed, 44 insertions, 145 deletions
diff --git a/images/battle_array_action.svg b/images/battle_array_action.svg
new file mode 100644
index 0000000..d250628
--- /dev/null
+++ b/images/battle_array_action.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
+<circle cx="200" cy="200" r="160" fill="#fff" fill-opacity="0.2" stroke="#fff" stroke-opacity="0.8" stroke-width="4"/>
+</svg>
diff --git a/mats.1x/mat_battle_attacker-fs8.png b/mats.1x/mat_battle_attacker-fs8.png
deleted file mode 100644
index d83061d..0000000
--- a/mats.1x/mat_battle_attacker-fs8.png
+++ /dev/null
Binary files differ
diff --git a/mats.1x/mat_battle_attacker.png b/mats.1x/mat_battle_attacker.png
deleted file mode 100644
index c134194..0000000
--- a/mats.1x/mat_battle_attacker.png
+++ /dev/null
Binary files differ
diff --git a/mats.1x/mat_battle_defender-fs8.png b/mats.1x/mat_battle_defender-fs8.png
deleted file mode 100644
index a2fca5f..0000000
--- a/mats.1x/mat_battle_defender-fs8.png
+++ /dev/null
Binary files differ
diff --git a/mats.1x/mat_battle_defender.png b/mats.1x/mat_battle_defender.png
deleted file mode 100644
index 5cf01e1..0000000
--- a/mats.1x/mat_battle_defender.png
+++ /dev/null
Binary files differ
diff --git a/mats.2x/mat_battle_attacker-fs8.png b/mats.2x/mat_battle_attacker-fs8.png
deleted file mode 100644
index 3584e90..0000000
--- a/mats.2x/mat_battle_attacker-fs8.png
+++ /dev/null
Binary files differ
diff --git a/mats.2x/mat_battle_attacker.png b/mats.2x/mat_battle_attacker.png
deleted file mode 100644
index 89fba57..0000000
--- a/mats.2x/mat_battle_attacker.png
+++ /dev/null
Binary files differ
diff --git a/mats.2x/mat_battle_defender-fs8.png b/mats.2x/mat_battle_defender-fs8.png
deleted file mode 100644
index e784924..0000000
--- a/mats.2x/mat_battle_defender-fs8.png
+++ /dev/null
Binary files differ
diff --git a/mats.2x/mat_battle_defender.png b/mats.2x/mat_battle_defender.png
deleted file mode 100644
index b7094a7..0000000
--- a/mats.2x/mat_battle_defender.png
+++ /dev/null
Binary files differ
diff --git a/play.html b/play.html
index 38f80d4..0053be3 100644
--- a/play.html
+++ b/play.html
@@ -129,12 +129,25 @@ body.Teutons #plan_actions .russian { display: none }
padding: 12px;
}
-#battle_grid #grid_bm {
+#battle_grid .grid_array.action {
+ background-image: url("images/battle_array_action.svg");
+ background-repeat: no-repeat;
+ background-position: top center;
+}
+
+#battle_grid #grid_ga {
width: 376px;
- height: 376px;
+ height: 48px;
}
-#grid_rd1:empty, #grid_rd2:empty, #grid_rd3:empty, #grid_sa1:empty, #grid_sa2:empty, #grid_sa3:empty { display: none; }
+#battle_grid #grid_ga > div {
+ margin: 0 auto;
+}
+
+#grid_rd1:empty:not(.action), #grid_rd2:empty:not(.action), #grid_rd3:empty:not(.action),
+#grid_sa1:empty:not(.action), #grid_sa2:empty:not(.action), #grid_sa3:empty:not(.action) {
+ display: none;
+}
#battle_header { grid-row: 1; grid-column: 1 / 4; }
@@ -160,7 +173,7 @@ body.Teutons #plan_actions .russian { display: none }
.defender #grid_a1 { grid-row: 1; grid-column: 1; }
.defender #grid_a2 { grid-row: 1; grid-column: 2; }
.defender #grid_a3 { grid-row: 1; grid-column: 3; }
-.defender #grid_bm { grid-row: 2; grid-column: 2; }
+.defender #grid_ga { grid-row: 2; grid-column: 2; }
.defender #grid_d1 { grid-row: 3; grid-column: 1; }
.defender #grid_d2 { grid-row: 3; grid-column: 2; }
.defender #grid_d3 { grid-row: 3; grid-column: 3; }
@@ -174,7 +187,7 @@ body.Teutons #plan_actions .russian { display: none }
.attacker #grid_a1 { grid-row: 5; grid-column: 3; }
.attacker #grid_a2 { grid-row: 5; grid-column: 2; }
.attacker #grid_a3 { grid-row: 5; grid-column: 1; }
-.attacker #grid_bm { grid-row: 4; grid-column: 2; }
+.attacker #grid_ga { grid-row: 4; grid-column: 2; }
.attacker #grid_d1 { grid-row: 3; grid-column: 3; }
.attacker #grid_d2 { grid-row: 3; grid-column: 2; }
.attacker #grid_d3 { grid-row: 3; grid-column: 1; }
@@ -185,109 +198,38 @@ body.Teutons #plan_actions .russian { display: none }
.attacker #grid_sa2 { grid-row: 1; grid-column: 2; }
.attacker #grid_sa3 { grid-row: 1; grid-column: 1; }
-/* BATTLE MAT WITH LORD CYLINDERS */
+.defender #pursuit.rotate,
+.attacker #pursuit:not(.rotate)
+{
+ transform: rotate(180deg);
+ border-color: #a68c61 #e7cb9e #e7cb9e #a68c61;
+ box-shadow: 0 0 0 1px #4e370a, -1px -2px 4px #0008;
+}
-#battle_mat {
- position: relative;
- width: 372px;
- height: 372px;
- background-size: 360px 360px;
- background-position: center;
- background-repeat: no-repeat;
+#garrison {
background-color: #d1c07e;
+ border-color: #f2e19d #b1a05f #b1a05f #f2e19d;
+ box-shadow: 0 0 0 1px #584800, 1px 2px 4px #0008;
border-radius: 12px;
border-width: 2px;
border-style: solid;
}
-.defender #battle_mat { background-image: url(mats.1x/mat_battle_defender-fs8.png); }
-.attacker #battle_mat { background-image: url(mats.1x/mat_battle_attacker-fs8.png); }
-@media (min-resolution: 97dpi) {
-.defender #battle_mat { background-image: url(mats.2x/mat_battle_defender-fs8.png); }
-.attacker #battle_mat { background-image: url(mats.2x/mat_battle_attacker-fs8.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; }
-.defender #mat_a1 { top: 96px; left: 32px; }
-.defender #mat_a2 { top: 96px; left: 162px; }
-.defender #mat_a3 { top: 96px; right: 32px; }
-.defender #mat_d1 { top: 220px; left: 32px; }
-.defender #mat_d2 { top: 220px; left: 162px; }
-.defender #mat_d3 { top: 220px; right: 32px; }
-.defender #mat_rd1 { bottom: 60px; left: 4px; }
-.defender #mat_rd2 { bottom: 60px; right: 200px; }
-.defender #mat_rd3 { bottom: 60px; right: 4px; }
-.defender #mat_sa1 { bottom: 48px; left: 64px; }
-.defender #mat_sa2 { bottom: 48px; left: 200px; }
-.defender #mat_sa3 { bottom: 48px; right: 64px; }
-
-.attacker #mat_garrison { bottom: 172px; left: 8px; }
-.attacker #mat_attacker_reserves { bottom: 4px; left: 8px; }
-.attacker #mat_defender_reserves { top: 4px; left: 8px; }
-.attacker #mat_a1 { bottom: 96px; right: 32px; }
-.attacker #mat_a2 { bottom: 96px; left: 162px; }
-.attacker #mat_a3 { bottom: 96px; left: 32px; }
-.attacker #mat_d1 { bottom: 220px; right: 32px; }
-.attacker #mat_d2 { bottom: 220px; left: 162px; }
-.attacker #mat_d3 { bottom: 220px; left: 32px; }
-.attacker #mat_rd1 { top: 60px; right: 4px; }
-.attacker #mat_rd2 { top: 60px; left: 200px; }
-.attacker #mat_rd3 { top: 60px; left: 4px; }
-.attacker #mat_sa1 { top: 48px; right: 64px; }
-.attacker #mat_sa2 { top: 48px; right: 200px; }
-.attacker #mat_sa3 { top: 48px; left: 64px; }
-
-/*
-.defender #mat_attacker_reserves { justify-content: end; }
-.defender #mat_defender_reserves { justify-content: start; }
-.attacker #mat_attacker_reserves { justify-content: start; }
-.attacker #mat_defender_reserves { justify-content: end; }
-*/
-
-#battle_mat .mat_array {
- position: absolute;
+#garrison {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
-}
-
-#battle_mat .mat_array {
- width: 48px;
- height: 48px;
-}
-
-#battle_mat .mat_array.reserves {
- width: 356px;
- height: 48px;
- gap: 8px;
-}
-
-#battle_mat .mat_array.garrison {
- width: 356px;
+ width: 376px;
height: 48px;
gap: 2px;
}
-#battle_mat .mat_array.action {
- border-radius: 50%;
- box-shadow: 0 0 0 3px white;
+#garrison:empty {
+ display: none
}
-#battle_mat .cylinder, #battle_mat .unit {
+#garrison .unit {
position: static
}
@@ -1338,25 +1280,9 @@ 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_bm">
- <div id="battle_mat">
- <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 class="grid_array" id="grid_ga">
+ <div id="pursuit" class="marker rectangle pursuit russian hide"></div>
+ <div id="garrison"></div>
</div>
<div class="grid_array att" id="grid_a1"></div>
<div class="grid_array att" id="grid_a2"></div>
diff --git a/play.js b/play.js
index 5240608..a30a8a7 100644
--- a/play.js
+++ b/play.js
@@ -520,27 +520,10 @@ const ui = {
court2_header: document.getElementById("court2_header"),
court1: document.getElementById("court1"),
court2: document.getElementById("court2"),
- battle_attacker_reserves: document.getElementById("mat_attacker_reserves"),
- battle_defender_reserves: document.getElementById("mat_defender_reserves"),
- garrison: document.getElementById("mat_garrison"),
+ garrison: document.getElementById("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"),
- document.getElementById("mat_a2"),
- document.getElementById("mat_a3"),
- document.getElementById("mat_d1"),
- document.getElementById("mat_d2"),
- document.getElementById("mat_d3"),
- document.getElementById("mat_sa1"),
- document.getElementById("mat_sa2"),
- document.getElementById("mat_sa3"),
- document.getElementById("mat_rd1"),
- document.getElementById("mat_rd2"),
- document.getElementById("mat_rd3"),
- ],
+ pursuit: document.getElementById("pursuit"),
battle_grid: document.getElementById("battle_grid"),
battle_grid_array: [
document.getElementById("grid_a1"),
@@ -1398,25 +1381,12 @@ function update_battle() {
ui.pursuit.className = "hide"
}
- ui.battle_attacker_reserves.replaceChildren()
- ui.battle_defender_reserves.replaceChildren()
- for (let lord of view.battle.reserves) {
- if (is_attacking_lord(lord))
- ui.battle_attacker_reserves.appendChild(ui.battle_cylinder[lord])
- else
- ui.battle_defender_reserves.appendChild(ui.battle_cylinder[lord])
- }
-
for (let i = 0; i < array.length; ++i) {
let lord = array[i]
- 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_grid_array[i].appendChild(ui.lord_mat[lord])
+ ui.battle_grid_array[i].classList.toggle("action", is_battle_array_action(i))
}
for (let lord = 0; lord < 12; ++lord) {
@@ -1890,8 +1860,8 @@ function build_map() {
build_plan()
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)
+ ui.battle_grid_array[i].my_id = i
+ ui.battle_grid_array[i].addEventListener("mousedown", on_click_array)
}
for (let c = 0; c < 21; ++c)