pathways: chevrons only for free directions, fade while previewing, re-render nav on placement

- chevron is only drawn when the direction is not already occupied, so it
  never overlaps a neighboring photo
- hovering a free direction adds a .preview class to the zone so the chevron
  fades out while the ghost preview shows underneath it
- pointermove on an occupied direction early-returns (no ghost, no fade)
- refreshAllNav re-renders every tile's nav after a placement so stale chevrons
  disappear as soon as a direction becomes occupied

1 files changed, 18 insertions, 6 deletions

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()
 }