diff options
| -rw-r--r-- | images/battle_background_dark.jpg | bin | 0 -> 82143 bytes | |||
| -rw-r--r-- | play.css | 50 | ||||
| -rw-r--r-- | play.html | 4 | ||||
| -rw-r--r-- | play.js | 41 |
4 files changed, 54 insertions, 41 deletions
diff --git a/images/battle_background_dark.jpg b/images/battle_background_dark.jpg Binary files differnew file mode 100644 index 0000000..0be124f --- /dev/null +++ b/images/battle_background_dark.jpg @@ -6,6 +6,10 @@ body.Lancaster header.your_turn { background-color: hsl(355, 83%, 72%); } #role_Lancaster { background-color: hsl(355, 63%, 82%); } #turn_info { background-color: gray; } +.panel_header { background-color: hsl(34, 10%, 30%); } +body.York #event_header, body.York #plan_header, .court_panel.york .panel_header { background-color: hsl(217, 15%, 33%); } +body.Lancaster #event_header, body.Lancaster #plan_header, .court_panel.lancaster .panel_header { background-color: hsl(355, 15%, 33%); } + /* LOG */ #log { @@ -96,7 +100,10 @@ body.Lancaster header.your_turn { background-color: hsl(355, 83%, 72%); } #mapwrap { width: 1275px; height: 1650px; + background-color: #999f85; + margin: 12px auto; box-shadow: 1px 2px 4px #0004; + border: 2px solid #333; } #map { @@ -117,17 +124,19 @@ body.Lancaster header.your_turn { background-color: hsl(355, 83%, 72%); } .panel { min-width: 1275px; max-width: 1275px; + background-color: hsl(34, 10%, 35%); background-color: #555; - box-shadow: 1px 2px 4px #0004; margin: 12px auto; + box-shadow: 1px 2px 4px #0004; + border: 2px solid #333; } .panel_header { - background-color: #444; color: white; user-select: none; font-weight: bold; text-align: center; + border-bottom: 2px solid #333; } .panel_body { @@ -145,7 +154,8 @@ body.Lancaster header.your_turn { background-color: hsl(355, 83%, 72%); } .court_body { gap: 24px; - min-height: 524px; + padding: 24px 12px 18px 12px; + min-height: 506px; } /* CURRENT CARD */ @@ -654,18 +664,30 @@ body.shift .mat .capabilities { /* BATTLE GRID WITH LORD MATS */ +/* 1275px x 3 mats @375px */ + #battle_grid { display: grid; - grid-template-columns: auto auto auto; + grid-template-columns: 380px 380px 380px; + grid-template-rows: 510px 510px; margin: 0 auto; - justify-content: center; - padding: 18px; + justify-content: space-evenly; + align-content: space-evenly; + padding: 20px 0; + gap: 80px 0px; + + width: 1275px; + + background-image: url(images/battle_background_dark.jpg); + background-size: 1275px; + background-position: center; + + //border-top: 2px solid #0008; } #battle_grid .grid_array { - width: 375px; - height: 506px; - padding: 36px 12px 12px 12px; + width: 380px; + height: 510px; } .grid_array { background-repeat: no-repeat } @@ -679,8 +701,6 @@ body.shift .mat .capabilities { background-repeat: no-repeat; } -#battle_header { grid-row: 1; grid-column: 1 / 4; } - .defender .att, .attacker .def, .defender .att .retinue_vassals, @@ -952,19 +972,19 @@ body.shift .mat .capabilities { /* ULTRA-WIDE SCREEN LAYOUTS */ @media (min-width: 2800px) { - main { display: grid; gap: 0 12px; } - main { grid-template-columns: 0 1275px auto 0; } + #pan_zoom_main { display: grid; gap: 0 12px; } + #pan_zoom_main { grid-template-columns: 0 1275px auto 0; } #sec_map { grid-row: 1; grid-column: 2 } #sec_battle { grid-row: 2; grid-column: 2 } #sec_lords { grid-row: 1 / 3; grid-column: 3 } } @media (min-width: 3200px) { - main { grid-template-columns: 36px 1275px auto 0; } + #pan_zoom_main { grid-template-columns: 36px 1275px auto 0; } } @media (min-width: 4100px) { - main { grid-template-columns: 0 1275px 1fr 1275px 0; } + #pan_zoom_main { grid-template-columns: 0 1275px 1fr 1275px 0; } #sec_map { grid-row: 1; grid-column: 2 } #sec_lords { grid-row: 1; grid-column: 3 } #sec_battle { grid-row: 1; grid-column: 4 } @@ -123,7 +123,7 @@ <section id="sec_lords"> -<div class="panel court_panel"> +<div id="court1_panel" class="panel court_panel"> <div id="court1_header" class="panel_header">Lords</div> <div id="court1" class="panel_body court_body"></div> </div> @@ -140,7 +140,7 @@ <div id="plan_actions" class="panel_body"></div> </div> -<div class="panel court_panel"> +<div id="court2_panel" class="panel court_panel"> <div id="court2_header" class="panel_header">Lords</div> <div id="court2" class="panel_body court_body"></div> </div> @@ -271,10 +271,6 @@ function is_lord_in_battle(lord) { for (let i = 0; i < 6; ++i) if (view.battle.array[i] === lord) return true - if (set_has(view.battle.reserves, lord)) - return true - if (set_has(view.battle.routed, lord)) - return true } return false } @@ -382,12 +378,6 @@ const ui = { arts_of_war_panel: document.getElementById("arts_of_war_panel"), arts_of_war: document.getElementById("arts_of_war"), - reserves_panel: document.getElementById("reserves_panel"), - reserves: document.getElementById("reserves"), - - routed_panel: document.getElementById("routed_panel"), - routed: document.getElementById("routed"), - events_panel: document.getElementById("events_panel"), events: document.getElementById("events"), @@ -407,6 +397,8 @@ const ui = { influence: document.getElementById("ip"), battle: document.getElementById("battle"), + court1_panel: document.getElementById("court1_panel"), + court2_panel: document.getElementById("court2_panel"), court1_header: document.getElementById("court1_header"), court2_header: document.getElementById("court2_header"), court1: document.getElementById("court1"), @@ -1213,7 +1205,6 @@ function update_cards() { function update_battle() { let array = view.battle.array - for (let i = 0; i < array.length; ++i) { let lord = array[i] ui.battle_grid_array[i].replaceChildren() @@ -1221,21 +1212,17 @@ function update_battle() { ui.battle_grid_array[i].appendChild(ui.mat[lord]) ui.battle_grid_array[i].classList.toggle("action", is_action("array", i)) } - - ui.reserves.replaceChildren() - for (let lord of view.battle.reserves) - ui.reserves.appendChild(ui.mat[lord]) - - ui.routed.replaceChildren() - for (let lord of view.battle.routed) - ui.routed.appendChild(ui.mat[lord]) } function update_court() { + let ycourt_panel = (player === "Lancaster") ? ui.court2_panel : ui.court1_panel + let lcourt_panel = (player === "Lancaster") ? ui.court1_panel : ui.court2_panel let ycourt_hdr = (player === "Lancaster") ? ui.court2_header : ui.court1_header let lcourt_hdr = (player === "Lancaster") ? ui.court1_header : ui.court2_header let ycourt = (player === "Lancaster") ? ui.court2 : ui.court1 let lcourt = (player === "Lancaster") ? ui.court1 : ui.court2 + ycourt_panel.className = "panel court_panel york" + lcourt_panel.className = "panel court_panel lancaster" ycourt_hdr.textContent = "York Lords" lcourt_hdr.textContent = "Lancaster Lords" ycourt.replaceChildren() @@ -1284,7 +1271,7 @@ function update_vassals() { } } -var track_offset = new Array(45).fill(0) +var track_offset = new Array(46).fill(0) function show_track_marker(elt, pos) { let n = track_offset[pos]++ @@ -1306,6 +1293,16 @@ function show_track_marker(elt, pos) { elt.style.top = y + "px" } +function list_has_friendly_lords(list) { + for (let lord of list) { + if (player === "York" && is_york_lord(lord)) + return true + if (player === "Lancaster" && is_lancaster_lord(lord)) + return true + } + return false +} + function on_update() { restart_cache() @@ -1409,8 +1406,6 @@ function on_update() { update_cards() if (view.battle) { - ui.reserves_panel.classList.toggle("hide", view.battle.reserves.length === 0) - ui.routed_panel.classList.toggle("hide", view.battle.routed.length === 0) ui.battle_panel.classList.remove("hide") ui.battle_header.textContent = "Battle at " + data.locales[view.battle.where].name if (view.battle.attacker === player) { @@ -1422,8 +1417,6 @@ function on_update() { update_battle() } else { ui.battle_panel.classList.add("hide") - ui.reserves_panel.classList.add("hide") - ui.routed_panel.classList.add("hide") } |
