From ed0e937ab1e53afcd16a98f74e7a6be76fee2553 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Tue, 17 Jan 2023 18:40:34 +0100 Subject: Zap battle mat. --- images/battle_array_action.svg | 3 + mats.1x/mat_battle_attacker-fs8.png | Bin 15131 -> 0 bytes mats.1x/mat_battle_attacker.png | Bin 26182 -> 0 bytes mats.1x/mat_battle_defender-fs8.png | Bin 15086 -> 0 bytes mats.1x/mat_battle_defender.png | Bin 26139 -> 0 bytes mats.2x/mat_battle_attacker-fs8.png | Bin 40308 -> 0 bytes mats.2x/mat_battle_attacker.png | Bin 72671 -> 0 bytes mats.2x/mat_battle_defender-fs8.png | Bin 40053 -> 0 bytes mats.2x/mat_battle_defender.png | Bin 72681 -> 0 bytes play.html | 146 +++++++++--------------------------- play.js | 40 ++-------- 11 files changed, 44 insertions(+), 145 deletions(-) create mode 100644 images/battle_array_action.svg delete mode 100644 mats.1x/mat_battle_attacker-fs8.png delete mode 100644 mats.1x/mat_battle_attacker.png delete mode 100644 mats.1x/mat_battle_defender-fs8.png delete mode 100644 mats.1x/mat_battle_defender.png delete mode 100644 mats.2x/mat_battle_attacker-fs8.png delete mode 100644 mats.2x/mat_battle_attacker.png delete mode 100644 mats.2x/mat_battle_defender-fs8.png delete mode 100644 mats.2x/mat_battle_defender.png 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 @@ + + + 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 Binary files a/mats.1x/mat_battle_attacker-fs8.png and /dev/null differ diff --git a/mats.1x/mat_battle_attacker.png b/mats.1x/mat_battle_attacker.png deleted file mode 100644 index c134194..0000000 Binary files a/mats.1x/mat_battle_attacker.png and /dev/null 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 Binary files a/mats.1x/mat_battle_defender-fs8.png and /dev/null differ diff --git a/mats.1x/mat_battle_defender.png b/mats.1x/mat_battle_defender.png deleted file mode 100644 index 5cf01e1..0000000 Binary files a/mats.1x/mat_battle_defender.png and /dev/null 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 Binary files a/mats.2x/mat_battle_attacker-fs8.png and /dev/null differ diff --git a/mats.2x/mat_battle_attacker.png b/mats.2x/mat_battle_attacker.png deleted file mode 100644 index 89fba57..0000000 Binary files a/mats.2x/mat_battle_attacker.png and /dev/null 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 Binary files a/mats.2x/mat_battle_defender-fs8.png and /dev/null differ diff --git a/mats.2x/mat_battle_defender.png b/mats.2x/mat_battle_defender.png deleted file mode 100644 index b7094a7..0000000 Binary files a/mats.2x/mat_battle_defender.png and /dev/null 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 {
Battle
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
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) -- cgit v1.2.3