From 441a57c3945c899e8fa61e24e7d90513e6f1d973 Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Tue, 4 Aug 2026 11:01:31 +0000
Subject: single most-centered preview as you scroll

---
 public/app.js     | 47 +++++++++++++++++++++++++++--------------------
 public/index.html |  4 ++--
 2 files changed, 29 insertions(+), 22 deletions(-)

(limited to 'public')

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) => {
diff --git a/public/index.html b/public/index.html
index 1a30ce1..080719c 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=22">
+  <link rel="stylesheet" href="/app.css?v=23">
 </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=22"></script>
+  <script src="/app.js?v=23"></script>
 </body>
 </html>
-- 
cgit v1.3.1