diff options
| -rw-r--r-- | public/app.css | 24 | ||||
| -rw-r--r-- | public/app.js | 20 | ||||
| -rw-r--r-- | public/index.html | 4 |
3 files changed, 30 insertions, 18 deletions
diff --git a/public/app.css b/public/app.css index 24ea492..3a8f684 100644 --- a/public/app.css +++ b/public/app.css @@ -70,26 +70,26 @@ html, body { position: absolute; pointer-events: auto; } -.nav-zone-N { top: 0; left: 0; width: 100%; height: 30%; } -.nav-zone-S { bottom: 0; left: 0; width: 100%; height: 30%; } -.nav-zone-E { top: 30%; right: 0; width: 30%; height: 40%; } -.nav-zone-W { top: 30%; left: 0; width: 30%; height: 40%; } +.nav-zone-N { top: -44px; left: 0; width: 100%; height: calc(30% + 44px); } +.nav-zone-S { bottom: -44px; left: 0; width: 100%; height: calc(30% + 44px); } +.nav-zone-E { top: 30%; right: -44px; width: calc(30% + 44px); height: 40%; } +.nav-zone-W { top: 30%; left: -44px; width: calc(30% + 44px); height: 40%; } .nav-chev { position: absolute; - width: 56px; - height: 56px; - color: rgba(255, 255, 255, .9); - opacity: .42; + width: 44px; + height: 44px; + color: rgba(255, 255, 255, .85); + opacity: .3; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65)); pointer-events: none; transition: opacity .15s, filter .15s, color .15s; } .nav-chev svg { width: 100%; height: 100%; display: block; } -.nav-zone-N .nav-chev { top: 0; left: 50%; translate: -50% -50%; } -.nav-zone-E .nav-chev { top: 50%; right: 0; translate: 50% -50%; } -.nav-zone-S .nav-chev { bottom: 0; left: 50%; translate: -50% 50%; } -.nav-zone-W .nav-chev { top: 50%; left: 0; translate: -50% -50%; } +.nav-zone-N .nav-chev { top: 0; left: 50%; translate: -50% -100%; } +.nav-zone-E .nav-chev { top: 50%; right: 0; translate: 100% -50%; } +.nav-zone-S .nav-chev { bottom: 0; left: 50%; translate: -50% 100%; } +.nav-zone-W .nav-chev { top: 50%; left: 0; translate: -100% -50%; } .nav-zone:hover .nav-chev { opacity: 1; color: #fff; diff --git a/public/app.js b/public/app.js index 978cdf7..35d9898 100644 --- a/public/app.js +++ b/public/app.js @@ -194,6 +194,7 @@ function setCurrent(id, rect) { if (!userZoomed) scale = worldScale() center() getExits(id) + refreshAllNav() } function renderNav(id) { @@ -202,6 +203,7 @@ function renderNav(id) { t.el.querySelectorAll(".nav").forEach((n) => n.remove()) const exits = exitsCache.get(id) if (!exits) return + const isCurrent = cur && cur.id === id const nav = document.createElement("div") nav.className = "nav" for (const ex of exits) { @@ -210,15 +212,16 @@ function renderNav(id) { zone.addEventListener("pointermove", () => { if (adjacentTile(id, ex.dir)) return zone.classList.add("preview") + cancelHideGhost() showGhost(choosePlacement(id, ex.dir)) }) zone.addEventListener("pointerleave", () => { zone.classList.remove("preview") - hideGhost() + scheduleHideGhost() }) zone.addEventListener("pointerdown", (e) => e.stopPropagation()) zone.addEventListener("click", (e) => { e.stopPropagation(); traverseFrom(id, ex.dir) }) - if (!adjacentTile(id, ex.dir)) { + if (!adjacentTile(id, ex.dir) && isCurrent) { const chev = document.createElement("div") chev.className = "nav-chev" chev.innerHTML = ARROW_SVG[ex.dir] @@ -366,6 +369,15 @@ function hideGhost() { ghostKey = "" } +let hideGhostTimer = 0 +function scheduleHideGhost() { + clearTimeout(hideGhostTimer) + hideGhostTimer = setTimeout(hideGhost, 80) +} +function cancelHideGhost() { + clearTimeout(hideGhostTimer) +} + const zones = new Map() function clearTileZones(id) { const zs = zones.get(id) @@ -393,8 +405,8 @@ function renderTileZones(id) { z.style.top = p.rect.y + "px" z.style.width = p.rect.w + "px" z.style.height = p.rect.h + "px" - z.addEventListener("pointermove", () => showGhost(p)) - z.addEventListener("pointerleave", () => hideGhost()) + z.addEventListener("pointermove", () => { cancelHideGhost(); showGhost(p) }) + z.addEventListener("pointerleave", () => scheduleHideGhost()) z.addEventListener("pointerdown", (e) => e.stopPropagation()) z.addEventListener("click", () => traverseFrom(id, dir)) world.appendChild(z) diff --git a/public/index.html b/public/index.html index 2263402..9c685fd 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="color-scheme" content="dark"> <title>pathways</title> - <link rel="stylesheet" href="/app.css?v=16"> + <link rel="stylesheet" href="/app.css?v=17"> </head> <body> <main id="stage"> @@ -16,6 +16,6 @@ <p>four paths, one per direction. walk them.</p> <button id="start">start</button> </div> - <script src="/app.js?v=16"></script> + <script src="/app.js?v=17"></script> </body> </html> |