diff options
| -rw-r--r-- | play.css | 29 | ||||
| -rw-r--r-- | play.html | 16 | ||||
| -rw-r--r-- | play.js | 74 |
3 files changed, 85 insertions, 34 deletions
@@ -107,10 +107,6 @@ header.your_turn { background-color: orange; } position: absolute; } -#map svg image { - pointer-events: none; -} - #map svg path.area { fill: green; stroke: green; @@ -147,6 +143,14 @@ header.your_turn { background-color: orange; } fill: none; } +#map svg path.area.battle { + fill-opacity: 0.6; + stroke-opacity: 0.8; + fill: #600; + stroke-width: 60; + stroke: #700; +} + #map.hide_blocks #blocks { visibility: hidden; } @@ -159,11 +163,11 @@ body.shift .block.known:hover { z-index: 100; } -#battle div.block { +#battle > div.block { position: relative; } -#map div.block { +#blocks > div.block { position: absolute; } @@ -196,6 +200,11 @@ div.block.selected { box-shadow: 0 0 3px 1px yellow; } div.block.moved { filter: grayscale(50%) brightness(85%); } div.block.highlight.moved { filter: grayscale(60%) brightness(95%); } +/* +div.block.battle { filter: grayscale(80%) brightness(50%) !important } +*/ +div.block.battle { opacity: 0; pointer-events: none; } + div.block:hover { z-index: 1; } div.block.r1 { transform: rotate(-90deg); } @@ -203,15 +212,13 @@ div.block.r2 { transform: rotate(-180deg); } div.block.r3 { transform: rotate(-270deg); } div.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 */ -#battle { top: 295px; left: 195px; } - #battle { background-color: silver; } #battle_message { background-color: lightsteelblue; } #battle_header { background-color: steelblue; color: white; } @@ -21,10 +21,10 @@ <details> <summary><img src="/images/cog.svg"></summary> <menu> - <a href="info/notes.html" target="_blank">Notes</a> - <a href="info/rules.html" target="_blank">Rules</a> - <a href="info/cards.html" target="_blank">Cards</a> - <a href="info/blocks.html" target="_blank">Blocks</a> + <li><a href="info/notes.html" target="_blank">Notes</a> + <li><a href="info/rules.html" target="_blank">Rules</a> + <li><a href="info/cards.html" target="_blank">Cards</a> + <li><a href="info/blocks.html" target="_blank">Blocks</a> <li class="resign separator"> <li class="resign" onclick="confirm_resign()">Resign </menu> @@ -59,17 +59,17 @@ <main data-min-zoom="1" data-max-zoom="2"> <div id="mapwrap"> +<div id="map"> -<div id="battle"> -<div id="battle_header"></div> +<details id="battle"> +<summary id="battle_header"></summary> <div id="ER"></div> <div id="EF"></div> <div id="FF"></div> <div id="FR"></div> <div id="battle_message"></div> -</div> +</details> -<div id="map"> <svg id="svgmap" viewBox="0 0 1688 1950"> <g transform="translate(0,1950) scale(0.1,-0.1)"> <path id="area_Scotland" class="area" @@ -1,11 +1,5 @@ "use strict" -function scroll_into_view_if_mobile(e) { - // if ("ontouchstart" in window) - if (window.innerWidth <= 800) - e.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" }) -} - const LANCASTER = "Lancaster" const YORK = "York" const ENEMY = { York: "Lancaster", Lancaster: "York" } @@ -148,7 +142,7 @@ function on_blur_space_tip(x) { } function on_click_space_tip(x) { - ui.areas[x].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" }) + scroll_into_view(ui.areas[x]) } function sub_space_name(match, p1, offset, string) { @@ -578,6 +572,16 @@ function is_perma_dead(who) { return false } +function is_in_battle(b) { + if (view.battle) { + if (view.battle.LR.includes(b)) return true + if (view.battle.YR.includes(b)) return true + if (view.battle.LF.includes(b)) return true + if (view.battle.YF.includes(b)) return true + } + return false +} + function update_map() { let overflow = { Lancaster: [], York: [], Rebel: [] } let layout = {} @@ -590,6 +594,8 @@ function update_map() { for (let area = 0; area < AREAS.length; ++area) layout[area] = { Lancaster: [], York: [] } + 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] @@ -621,6 +627,11 @@ function update_map() { } else { hide_block(element) } + + if (is_battle_open && is_in_battle(b)) + element.classList.add("battle") + else + element.classList.remove("battle") } for (let area = 1; area < AREAS.length; ++area) { @@ -639,6 +650,7 @@ function update_map() { if (ui.areas[area]) { ui.areas[area].classList.remove('highlight') ui.areas[area].classList.remove('where') + ui.areas[area].classList.remove('battle') } } if (view.actions && view.actions.area) @@ -646,6 +658,8 @@ function update_map() { ui.areas[area].classList.add('highlight') if (view.where !== NOWHERE) ui.areas[view.where].classList.add('where') + if (view.battle) + ui.areas[view.where].classList.add('battle') for (let b = 0; b < BLOCKS.length; ++b) { ui.blocks[b].classList.remove('highlight') @@ -717,6 +731,38 @@ function sort_battle_row(root) { } while (swapped) } +function show_battle() { + let box = document.getElementById("battle") + let space = AREAS[view.where].layout + let sh = ui.areas[view.where].getBoundingClientRect().height >> 1 + + // reset position + box.classList.add("show") + box.style.top = null + box.style.left = null + box.setAttribute("open", true) + + // calculate size + let w = box.clientWidth + let h = box.clientHeight + + // center where possible + let x = space.x - w / 2 + if (x < 60) + x = 60 + if (x > 1688 - w - 60) + x = 1688 - w - 60 + + let y = space.y - sh - h - 60 + if (y < 60) + y = space.y + sh + 60 + + box.style.top = y + "px" + box.style.left = x + "px" + + scroll_into_view_if_needed(box) +} + function update_battle() { function fill_cell(name, list, reserve) { let cell = window[name] @@ -816,25 +862,23 @@ function on_update() { remember_position(ui.cards[c]) update_cards() - update_map() if (view.battle) { document.getElementById("battle_header").textContent = view.battle.title document.getElementById("battle_message").textContent = view.battle.flash - if (!document.getElementById("battle").classList.contains("show")) { - document.getElementById("battle").classList.add("show") - scroll_into_view_if_mobile(document.getElementById("battle")) - } update_battle() + if (!document.getElementById("battle").classList.contains("show")) + show_battle() } else { document.getElementById("battle").classList.remove("show") } + update_map() + for (let c = 1; c <= 25; ++c) animate_position(ui.cards[c]) } -build_map() +document.getElementById("battle").addEventListener("toggle", on_update) -drag_element_with_mouse("#battle", "#battle_header") -scroll_with_middle_mouse("main", 2) +build_map() |