From 2ed3e870b70ab1991e5cda8a89d4c6a583d6f4e3 Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Tue, 4 Aug 2026 08:11:30 +0000
Subject: pathways: space-aware photo pick - use walk next when fit is close,
 substitute better-fitting walked photo on bad fit (FIT_TOLERANCE)

---
 public/app.js     | 53 ++++++++++++++++++++++++++++++++++-------------------
 public/index.html |  4 ++--
 2 files changed, 36 insertions(+), 21 deletions(-)

(limited to 'public')

diff --git a/public/app.js b/public/app.js
index 4325292..6c69f92 100644
--- a/public/app.js
+++ b/public/app.js
@@ -7,6 +7,7 @@ const splash = $("#splash")
 const startBtn = $("#start")
 
 const GAP = 10
+const FIT_TOLERANCE = 350
 const ARROW_SVG = {
   N: '<svg viewBox="0 0 24 24"><path d="M5 15l7-8 7 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
   E: '<svg viewBox="0 0 24 24"><path d="M9 5l8 7-8 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
@@ -104,9 +105,9 @@ function packGap(rect, w, h) {
   return sum
 }
 
-function placeRect(w, h, from, dir) {
+function bestPlacement(w, h, from, dir) {
   const base = baseRect(w, h, from, dir)
-  if (!collides(base)) return base
+  if (!collides(base)) return { rect: base, cost: 0 }
 
   const xs = new Set([base.x])
   const ys = new Set([base.y])
@@ -134,7 +135,12 @@ function placeRect(w, h, from, dir) {
       }
     }
   }
-  return best
+  return best ? { rect: best, cost: bestCost } : null
+}
+
+function placeRect(w, h, from, dir) {
+  const p = bestPlacement(w, h, from, dir)
+  return p ? p.rect : null
 }
 
 function addTile(info, rect) {
@@ -218,24 +224,33 @@ async function moveFrom(id, dir) {
   const ex = exits && exits.find((e) => e.dir === dir)
   if (!ex) return
   const from = tiles.get(id).rect
-  let targetId = null
-  if (!rectOf.has(ex.next.id)) {
-    targetId = ex.next.id
-  } else {
-    for (const wid of ex.walk) {
-      if (!rectOf.has(wid)) {
-        targetId = wid
-        break
-      }
+  const seen = new Set()
+  const candIds = []
+  const addCand = (cid) => {
+    if (cid && !seen.has(cid) && !rectOf.has(cid)) {
+      seen.add(cid)
+      candIds.push(cid)
     }
   }
-  if (targetId == null) return
-  const info = photoInfo.get(targetId) || (tiles.get(targetId) && tiles.get(targetId).info)
-  if (!info) return
-  const rect = placeRect(tileW(info), tileH(info), from, dir)
-  if (!rect) return
-  addTile(info, rect)
-  setCurrent(targetId, rect)
+  addCand(ex.next && ex.next.id)
+  for (const wid of ex.walk) {
+    if (candIds.length >= 4) break
+    addCand(wid)
+  }
+  const scored = []
+  for (const cid of candIds) {
+    const info = photoInfo.get(cid) || (tiles.get(cid) && tiles.get(cid).info)
+    if (!info) continue
+    const p = bestPlacement(tileW(info), tileH(info), from, dir)
+    if (p) scored.push({ id: cid, info, rect: p.rect, cost: p.cost })
+  }
+  if (!scored.length) return
+  scored.sort((a, b) => a.cost - b.cost)
+  const best = scored[0]
+  const next = ex.next && !rectOf.has(ex.next.id) ? scored.find((s) => s.id === ex.next.id) : null
+  const chosen = next && next.cost - best.cost <= FIT_TOLERANCE ? next : best
+  addTile(chosen.info, chosen.rect)
+  setCurrent(chosen.id, chosen.rect)
 }
 
 stage.addEventListener("pointerover", (e) => {
diff --git a/public/index.html b/public/index.html
index 9e937f4..1a4f67d 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=4">
+  <link rel="stylesheet" href="/app.css?v=5">
 </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=4"></script>
+  <script src="/app.js?v=5"></script>
 </body>
 </html>
-- 
cgit v1.3.1