diff options
| -rw-r--r-- | public/app.css | 3 | ||||
| -rw-r--r-- | public/app.js | 24 | ||||
| -rw-r--r-- | public/index.html | 4 |
3 files changed, 23 insertions, 8 deletions
diff --git a/public/app.css b/public/app.css index ea00f29..24ea492 100644 --- a/public/app.css +++ b/public/app.css @@ -95,6 +95,9 @@ html, body { color: #fff; filter: drop-shadow(0 0 9px rgba(125, 211, 252, .6)); } +.nav-zone.preview .nav-chev { + opacity: 0; +} #splash { position: fixed; diff --git a/public/app.js b/public/app.js index 269ae51..978cdf7 100644 --- a/public/app.js +++ b/public/app.js @@ -208,20 +208,31 @@ function renderNav(id) { const zone = document.createElement("div") zone.className = `nav-zone nav-zone-${ex.dir}` zone.addEventListener("pointermove", () => { - if (!adjacentTile(id, ex.dir)) showGhost(choosePlacement(id, ex.dir)) + if (adjacentTile(id, ex.dir)) return + zone.classList.add("preview") + showGhost(choosePlacement(id, ex.dir)) + }) + zone.addEventListener("pointerleave", () => { + zone.classList.remove("preview") + hideGhost() }) - zone.addEventListener("pointerleave", () => hideGhost()) zone.addEventListener("pointerdown", (e) => e.stopPropagation()) zone.addEventListener("click", (e) => { e.stopPropagation(); traverseFrom(id, ex.dir) }) - const chev = document.createElement("div") - chev.className = "nav-chev" - chev.innerHTML = ARROW_SVG[ex.dir] - zone.appendChild(chev) + if (!adjacentTile(id, ex.dir)) { + const chev = document.createElement("div") + chev.className = "nav-chev" + chev.innerHTML = ARROW_SVG[ex.dir] + zone.appendChild(chev) + } nav.appendChild(zone) } t.el.appendChild(nav) } +function refreshAllNav() { + for (const id of tiles.keys()) if (exitsCache.has(id)) renderNav(id) +} + async function getExits(id) { if (exitsCache.has(id)) return exitsCache.get(id) if (exitPending.has(id)) return exitPending.get(id) @@ -321,6 +332,7 @@ function traverseFrom(id, dir) { hideGhost() addTile(chosen.info, chosen.rect) setCurrent(chosen.id, chosen.rect) + refreshAllNav() refreshAllZones() } diff --git a/public/index.html b/public/index.html index 706de70..2263402 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=15"> + <link rel="stylesheet" href="/app.css?v=16"> </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=15"></script> + <script src="/app.js?v=16"></script> </body> </html> |