diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/app.css | 46 | ||||
| -rw-r--r-- | public/app.js | 23 |
2 files changed, 47 insertions, 22 deletions
diff --git a/public/app.css b/public/app.css index 44b7c7f..cdb2226 100644 --- a/public/app.css +++ b/public/app.css @@ -58,32 +58,44 @@ html, body { position: absolute; inset: 0; pointer-events: none; - opacity: 0; - transition: opacity .15s; } -.tile.current:hover .nav { opacity: 1; } -.nav-btn { +.nav-zone { position: absolute; pointer-events: auto; - width: 44px; - height: 44px; +} +.nav-zone-N { top: 0; left: 0; width: 100%; height: 26%; } +.nav-zone-S { bottom: 0; left: 0; width: 100%; height: 26%; } +.nav-zone-E { top: 26%; right: 0; width: 26%; height: 48%; } +.nav-zone-W { top: 26%; left: 0; width: 26%; height: 48%; } + +.nav-btn { + position: absolute; + width: 46px; + height: 46px; border-radius: 50%; - border: none; - background: rgba(255, 255, 255, .95); - color: #17181d; + border: 1px solid rgba(255, 255, 255, .28); + background: rgba(255, 255, 255, .1); + color: rgba(255, 255, 255, .85); cursor: pointer; display: grid; place-items: center; - box-shadow: 0 2px 14px rgba(0, 0, 0, .5); - transition: transform .12s, background .12s, box-shadow .12s; + box-shadow: 0 2px 12px rgba(0, 0, 0, .35); + opacity: .16; + transition: opacity .15s, background .15s, color .15s, box-shadow .15s; +} +.nav-btn svg { width: 20px; height: 20px; display: block; } +.nav-zone-N .nav-btn { top: 0; left: 50%; translate: -50% -50%; } +.nav-zone-E .nav-btn { top: 50%; right: 0; translate: 50% -50%; } +.nav-zone-S .nav-btn { bottom: 0; left: 50%; translate: -50% 50%; } +.nav-zone-W .nav-btn { top: 50%; left: 0; translate: -50% -50%; } +.nav-zone:hover .nav-btn { + opacity: 1; + background: rgba(255, 255, 255, .22); + color: #fff; + border-color: rgba(255, 255, 255, .5); + box-shadow: 0 4px 18px rgba(0, 0, 0, .45); } -.nav-btn svg { width: 22px; height: 22px; display: block; } -.nav-btn:hover { transform: scale(1.15); background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .55); } -.nav-btn[data-dir="N"] { top: 0; left: 50%; translate: -50% -50%; } -.nav-btn[data-dir="E"] { top: 50%; right: 0; translate: 50% -50%; } -.nav-btn[data-dir="S"] { bottom: 0; left: 50%; translate: -50% 50%; } -.nav-btn[data-dir="W"] { top: 50%; left: 0; translate: -50% -50%; } .nav-label { position: absolute; diff --git a/public/app.js b/public/app.js index 8b7c475..4a00387 100644 --- a/public/app.js +++ b/public/app.js @@ -8,7 +8,9 @@ const flash = $("#flash") const startBtn = $("#start") const GAP = 10 -let TILE = window.matchMedia("(max-width: 700px)").matches ? 200 : 360 +const MAX_TILE = 900 +let TILE = Math.round(Math.min(window.innerWidth, window.innerHeight) * 0.92) +if (TILE > MAX_TILE) TILE = MAX_TILE const ARROW_SVG = { N: '<svg viewBox="0 0 24 24"><path d="M5 15l7-8 7 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', E: '<svg viewBox="0 0 24 24"><path d="M9 5l8 7-8 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', @@ -24,20 +26,27 @@ let curExits = [] let fetchSeq = 0 let panX = 0 let panY = 0 +let scale = 1 let drag = null const key = (x, y) => `${x},${y}` +function worldScale() { + const n = tiles.size + if (n <= 1) return 1 + return Math.max(0.5, 1 - (n - 1) * 0.015) +} + function applyPan() { - world.style.transform = `translate(${panX}px, ${panY}px)` + world.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})` } function center() { if (!cur) return const cx = cur.x * (TILE + GAP) + TILE / 2 const cy = cur.y * (TILE + GAP) + TILE / 2 - panX = window.innerWidth / 2 - cx - panY = window.innerHeight / 2 - cy + panX = window.innerWidth / 2 - scale * cx + panY = window.innerHeight / 2 - scale * cy applyPan() } @@ -68,6 +77,7 @@ function setCurrent(id, x, y) { cur = { id, x, y } tiles.get(key(x, y)).el.classList.add("current") curExits = [] + scale = worldScale() renderNav() center() fetchExits(id) @@ -89,6 +99,8 @@ function renderNav() { const nav = document.createElement("div") nav.className = "nav" for (const ex of curExits) { + const zone = document.createElement("div") + zone.className = `nav-zone nav-zone-${ex.dir}` const b = document.createElement("button") b.className = "nav-btn" b.dataset.dir = ex.dir @@ -99,7 +111,8 @@ function renderNav() { b.appendChild(lab) b.addEventListener("pointerdown", (e) => e.stopPropagation()) b.addEventListener("click", (e) => { e.stopPropagation(); move(ex.dir) }) - nav.appendChild(b) + zone.appendChild(b) + nav.appendChild(zone) } tileEl.appendChild(nav) } |