From 61b16996e634fa49cbb3ffd8924f3c0e4fc0f31c Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Thu, 22 Dec 2022 00:57:49 +0100 Subject: Battle mat mockup. --- images/mat_battle.png | Bin 35135 -> 0 bytes images/mat_battle_attacker.png | Bin 0 -> 35244 bytes images/mat_battle_defender.png | Bin 0 -> 35135 bytes play.html | 107 ++++++++++++++++++++++++++++++++++++++++- rules.js | 8 +-- 5 files changed, 111 insertions(+), 4 deletions(-) delete mode 100644 images/mat_battle.png create mode 100644 images/mat_battle_attacker.png create mode 100644 images/mat_battle_defender.png diff --git a/images/mat_battle.png b/images/mat_battle.png deleted file mode 100644 index 588a965..0000000 Binary files a/images/mat_battle.png and /dev/null differ diff --git a/images/mat_battle_attacker.png b/images/mat_battle_attacker.png new file mode 100644 index 0000000..059b2c9 Binary files /dev/null and b/images/mat_battle_attacker.png differ diff --git a/images/mat_battle_defender.png b/images/mat_battle_defender.png new file mode 100644 index 0000000..588a965 Binary files /dev/null and b/images/mat_battle_defender.png differ diff --git a/play.html b/play.html index 8cbed77..53538ae 100644 --- a/play.html +++ b/play.html @@ -127,6 +127,66 @@ body.Teutons #plan_actions .russian { display: none } background-size: 93px 130px; } +/* BATTLE */ + +#battle { + position: relative; + margin: 24px auto; + width: 372px; + height: 372px; + background-size: 360px 360px; + background-position: center; + background-repeat: no-repeat; + background-color: #d1c07e; + border-radius: 12px; + border-width: 2px; + 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 #battle_attacker_reserves { width: 356px !important; top: 4px; left: 8px; } +#battle.defender #battle_attacker_left { top: 96px; left: 32px; } +#battle.defender #battle_attacker_center { top: 96px; left: 162px; } +#battle.defender #battle_attacker_right { top: 96px; right: 32px; } +#battle.defender #battle_defender_garrison { width: 356px !important; top: 172px; left: 8px; } +#battle.defender #battle_defender_left { top: 220px; left: 32px; } +#battle.defender #battle_defender_center { top: 220px; left: 162px; } +#battle.defender #battle_defender_right { top: 220px; right: 32px; } +#battle.defender #battle_sally_left { bottom: 60px; left: 4px; } +#battle.defender #battle_sally_center { bottom: 60px; right: 200px; } +#battle.defender #battle_sally_right { bottom: 60px; right: 4px; } +#battle.defender #battle_defender_reserves { width: 356px !important; bottom: 4px; left: 8px; } + +#battle.attacker #battle_attacker_reserves { width: 356px !important; bottom: 4px; left: 8px; } +#battle.attacker #battle_attacker_left { bottom: 96px; right: 32px; } +#battle.attacker #battle_attacker_center { bottom: 96px; left: 162px; } +#battle.attacker #battle_attacker_right { bottom: 96px; left: 32px; } +#battle.attacker #battle_defender_garrison { width: 356px !important; bottom: 172px; left: 8px; } +#battle.attacker #battle_defender_left { bottom: 220px; right: 32px; } +#battle.attacker #battle_defender_center { bottom: 220px; left: 162px; } +#battle.attacker #battle_defender_right { bottom: 220px; left: 32px; } +#battle.attacker #battle_sally_left { top: 60px; right: 4px; } +#battle.attacker #battle_sally_center { top: 60px; left: 200px; } +#battle.attacker #battle_sally_right { top: 60px; left: 4px; } +#battle.attacker #battle_defender_reserves { width: 356px !important; top: 4px; left: 8px; } + +#battle > div { + position: absolute; + width: 48px; + height: 48px; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 2px; +} + +#battle .cylinder, #battle .unit { + position: static +} + /* MATS */ .court { @@ -876,6 +936,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; } .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; } @@ -1147,10 +1208,54 @@ body.shift .mustered_vassals {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
diff --git a/rules.js b/rules.js index b9a8997..4318fd1 100644 --- a/rules.js +++ b/rules.js @@ -4691,13 +4691,15 @@ function start_battle() { log_h3(`Battle at %${here}`) game.battle = { - attacker: game.active, where: here, + attacker: game.active, conceded: 0, array: [ - NOBODY, NOBODY, NOBODY, - NOBODY, NOBODY, NOBODY, + NOBODY, NOBODY, NOBODY, // attacker + NOBODY, NOBODY, NOBODY, // defender + NOBODY, NOBODY, NOBODY, // sally ], + garrison: 0, reserves: [], routed: [], loser: 0, -- cgit v1.2.3