1 files changed, 27 insertions, 20 deletions
diff --git a/public/app.js b/public/app.js
index 21b3e49..f9db638 100644
--- a/public/app.js
+++ b/public/app.js
@@ -398,31 +398,37 @@ function renderTileZones(id) {
   clearTileZones(id)
   if (!cur || id !== cur.id) return
   if (!tiles.has(id) || !exitsCache.has(id)) return
-  const els = []
+  const cx = (window.innerWidth / 2 - panX) / scale
+  const cy = (window.innerHeight / 2 - panY) / scale
+  let bestDir = null
+  let best = null
+  let bestD = Infinity
   for (const dir of ["N", "E", "S", "W"]) {
     if (adjacentTile(id, dir)) continue
     const p = choosePlacement(id, dir)
     if (!p) continue
-    const z = document.createElement("div")
-    z.className = "dropzone"
-    z.style.left = p.rect.x + "px"
-    z.style.top = p.rect.y + "px"
-    z.style.width = p.rect.w + "px"
-    z.style.height = p.rect.h + "px"
-    const prev = document.createElement("div")
-    prev.className = "preview"
-    const img = document.createElement("img")
-    img.src = p.info.thumb
-    img.alt = ""
-    img.loading = "lazy"
-    prev.appendChild(img)
-    z.appendChild(prev)
-    z.addEventListener("pointerdown", (e) => e.stopPropagation())
-    z.addEventListener("click", () => traverseFrom(id, dir))
-    world.appendChild(z)
-    els.push(z)
+    const d = Math.hypot(p.rect.x + p.rect.w / 2 - cx, p.rect.y + p.rect.h / 2 - cy)
+    if (d < bestD) { bestD = d; bestDir = dir; best = p }
   }
-  if (els.length) zones.set(id, els)
+  if (!best) return
+  const z = document.createElement("div")
+  z.className = "dropzone"
+  z.style.left = best.rect.x + "px"
+  z.style.top = best.rect.y + "px"
+  z.style.width = best.rect.w + "px"
+  z.style.height = best.rect.h + "px"
+  const prev = document.createElement("div")
+  prev.className = "preview"
+  const img = document.createElement("img")
+  img.src = best.info.thumb
+  img.alt = ""
+  img.loading = "lazy"
+  prev.appendChild(img)
+  z.appendChild(prev)
+  z.addEventListener("pointerdown", (e) => e.stopPropagation())
+  z.addEventListener("click", () => traverseFrom(id, bestDir))
+  world.appendChild(z)
+  zones.set(id, [z])
 }
 
 function refreshPreviews() {
@@ -460,6 +466,7 @@ function maybeFollow() {
   if (now - lastFollow < 200) return
   lastFollow = now
   followCurrent()
+  refreshPreviews()
 }
 
 stage.addEventListener("pointerover", (e) => {