diff options
| -rw-r--r-- | play.css | 17 | ||||
| -rw-r--r-- | play.html | 2 | ||||
| -rw-r--r-- | play.js | 36 |
3 files changed, 44 insertions, 11 deletions
@@ -181,6 +181,12 @@ body.Saracens header.your_turn { background-color: lightgreen; } box-shadow: 0 0 0px 4px white; } +.town.battle { + opacity: 1; + border-color: #700c; + background-color: #6008; +} + #sea { fill: skyblue; fill-opacity: 0.4; @@ -286,10 +292,15 @@ body.shift .block.known:hover { .block.r2.halfhit { transform: rotate(-195deg); } .block.r3.halfhit { transform: rotate(-285deg); } +/* +.block.battle { filter: grayscale(60%) brightness(60%) !important } +*/ +.block.battle { opacity: 0; pointer-events: none; } + .block { - transition-property: top, left, transform; - transition-duration: 700ms, 700ms, 200ms; - transition-timing-function: ease; + transition-property: top, left, transform, opacity; + transition-duration: 700ms, 700ms, 250ms, 250ms; + transition-timing-function: ease, ease, ease, linear; } /* BATTLE BOARD */ @@ -59,7 +59,7 @@ <div id="log"></div> </aside> -<main data-min-zoom="1" data-max-zoom="2" data-map-width="1323" data-map-height="1323"> +<main data-min-zoom="1" data-max-zoom="2" data-map-width="1323" data-map-height="2475"> <div id="padmap"> <div id="map"> @@ -603,6 +603,18 @@ function is_known_block(info, who, town) { return false } +function is_in_battle(b) { + if (view.battle) { + if (view.battle.FR.includes(b)) return true + if (view.battle.FC.includes(b)) return true + if (view.battle.FF.includes(b)) return true + if (view.battle.SR.includes(b)) return true + if (view.battle.SC.includes(b)) return true + if (view.battle.SF.includes(b)) return true + } + return false +} + function update_map() { let layout = {} @@ -622,11 +634,14 @@ function update_map() { for (let t = 0; t < TOWNS.length; ++t) layout[t] = { north: [], south: [] } + let is_battle_open = document.getElementById("battle").getAttribute("open") !== null + for (let b = 0; b < BLOCKS.length; ++b) { let info = BLOCKS[b] let element = ui.blocks[b] let town = view.location[b] let moved = (set_has(view.moved, b) && b !== view.who) ? " moved" : "" + let battle = (is_battle_open && is_in_battle(b)) ? " battle" : "" if (town === DEAD) { moved = " moved" } @@ -638,7 +653,7 @@ function update_map() { let image = " block_" + info.image let steps = " r" + (info.steps - view.steps[b]) let known = " known" - element.classList = info.owner + known + " block" + image + steps + moved + element.classList = info.owner + known + " block" + image + steps + moved + battle } else { let besieging = "" if (view.sieges[town] === info.owner) { @@ -650,7 +665,7 @@ function update_map() { let jihad = "" if (view.jihad === town && info.owner === view.p1) jihad = " jihad" - element.classList = info.owner + " block" + moved + besieging + jihad + element.classList = info.owner + " block" + moved + besieging + jihad + battle } if (town !== DEAD) { if (info.owner === FRANKS) @@ -693,6 +708,7 @@ function update_map() { ui.towns[t].classList.remove('highlight') ui.towns[t].classList.remove('muster') ui.towns[t].classList.remove('bad') + ui.towns[t].classList.remove('battle') } } if (view.actions && view.actions.town) { @@ -713,6 +729,8 @@ function update_map() { if (view.actions && view.actions.block) for (let b of view.actions.block) ui.blocks[b].classList.add('highlight') + } else { + ui.towns[view.battle.town].classList.add('battle') } if (view.who >= 0 && !view.battle) ui.blocks[view.who].classList.add('selected') @@ -807,7 +825,6 @@ function show_battle() { if (x > 2475 - w - 80) x = 2475 - w - 80 - //let y = space.x - h - 120 if (y < 80) y = space.x + 120 let y = space.x + h + 120 if (y > 1275) y = space.x - 120 @@ -822,7 +839,6 @@ function show_battle() { // place centered above town if possible, clamp to edges let x = space.x - w / 2 - console.log("XY", space.x, w, x) if (x < 80) x = 80 if (x > 1275 - w - 80) @@ -832,7 +848,7 @@ function show_battle() { box.style.left = x + "px" } - scroll_into_view_if_mobile(box) + scroll_into_view_if_needed(box) } function update_battle() { @@ -974,7 +990,8 @@ function on_update() { if (view.flash_next) start_flash() update_battle() - show_battle() + if (!document.getElementById("battle").classList.contains("show")) + show_battle() } else { document.getElementById("battle").classList.remove("show") } @@ -985,7 +1002,12 @@ function on_update() { window.addEventListener("resize", function (evt) { if (view && view.battle) - setTimeout(show_battle, 1) + setTimeout(function () { + document.getElementById("battle").classList.remove("show") + show_battle() + }, 1) }) +document.getElementById("battle").addEventListener("toggle", on_update) + build_map() |