From d3d96b58bed27dc11124bdb27310524a84e1583f Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Tue, 4 Aug 2026 09:48:55 +0000
Subject: 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
---
 public/app.css    |  3 +++
 public/app.js     | 24 ++++++++++++++++++------
 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>
-- 
cgit v1.3.1