1 files changed, 10 insertions, 6 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()