pathways: reliable hover previews - ghost triggers on the whole direction band (not just the 40px button), ghost image loads eagerly, and repeated pointermoves no longer destroy/recreate the ghost (preview stays visible while the thumbnail loads)

2 files changed, 12 insertions, 8 deletions

diff --git a/public/app.js b/public/app.js
index 57827fa..7d842b2 100644
--- a/public/app.js
+++ b/public/app.js
@@ -207,16 +207,16 @@ function renderNav(id) {
   for (const ex of exits) {
     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))
+    })
+    zone.addEventListener("pointerleave", () => hideGhost())
     const b = document.createElement("button")
     b.className = "nav-btn"
     b.dataset.dir = ex.dir
     b.innerHTML = ARROW_SVG[ex.dir]
     b.addEventListener("pointerdown", (e) => e.stopPropagation())
     b.addEventListener("click", (e) => { e.stopPropagation(); traverseFrom(id, ex.dir) })
-    b.addEventListener("pointermove", () => {
-      if (!adjacentTile(id, ex.dir)) showGhost(choosePlacement(id, ex.dir))
-    })
-    b.addEventListener("pointerleave", () => hideGhost())
     zone.appendChild(b)
     nav.appendChild(zone)
   }
@@ -326,9 +326,13 @@ function traverseFrom(id, dir) {
 }
 
 let ghost = null
+let ghostKey = ""
 function showGhost(p) {
-  hideGhost()
   if (!p) return
+  const key = p.id + "|" + p.rect.x + "," + p.rect.y
+  if (ghost && ghostKey === key) return
+  hideGhost()
+  ghostKey = key
   const el = document.createElement("div")
   el.className = "tile ghost"
   el.style.left = p.rect.x + "px"
@@ -338,7 +342,6 @@ function showGhost(p) {
   const img = document.createElement("img")
   img.src = p.info.thumb
   img.alt = ""
-  img.loading = "lazy"
   el.appendChild(img)
   world.appendChild(el)
   ghost = el
@@ -349,6 +352,7 @@ function hideGhost() {
     world.removeChild(ghost)
     ghost = null
   }
+  ghostKey = ""
 }
 
 const zones = new Map()
diff --git a/public/index.html b/public/index.html
index d38008c..dab2f8a 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=13">
+  <link rel="stylesheet" href="/app.css?v=14">
 </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=13"></script>
+  <script src="/app.js?v=14"></script>
 </body>
 </html>