From 0dc949ab3eece9f04d7ecd9519486db33034de96 Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Tue, 4 Aug 2026 06:31:44 +0000
Subject: pathways: spatial movement, bigger tiles, cleaner exits

- movement lands on the photo already occupying the cell ahead instead
  of skipping over it to place a new one; new photos only fill genuinely
  empty cells, and already-placed path targets still jump to their tile
- tiles 360px desktop / 200px mobile
- fix hover exits being clipped half-off by the tile's overflow:hidden
  (clip now lives on the img only); restyle as white circle buttons with
  SVG chevrons and pill path labels
---
 public/app.js | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

(limited to 'public/app.js')

diff --git a/public/app.js b/public/app.js
index faacc84..8b7c475 100644
--- a/public/app.js
+++ b/public/app.js
@@ -7,9 +7,14 @@ const splash = $("#splash")
 const flash = $("#flash")
 const startBtn = $("#start")
 
-const GAP = 8
-let TILE = window.matchMedia("(max-width: 700px)").matches ? 150 : 240
-const ARROW = { N: "↑", E: "→", S: "↓", W: "←" }
+const GAP = 10
+let TILE = window.matchMedia("(max-width: 700px)").matches ? 200 : 360
+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>',
+  S: '<svg viewBox="0 0 24 24"><path d="M5 9l7 8 7-8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  W: '<svg viewBox="0 0 24 24"><path d="M15 5l-8 7 8 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+}
 const DELTA = { N: [0, -1], E: [1, 0], S: [0, 1], W: [-1, 0] }
 
 const tiles = new Map()
@@ -87,7 +92,7 @@ function renderNav() {
     const b = document.createElement("button")
     b.className = "nav-btn"
     b.dataset.dir = ex.dir
-    b.textContent = ARROW[ex.dir]
+    b.innerHTML = ARROW_SVG[ex.dir]
     const lab = document.createElement("span")
     lab.className = "nav-label"
     lab.textContent = ex.path.name
@@ -116,18 +121,19 @@ async function move(dir) {
   if (!ex) return
   flashText(ex.path.name)
   const [dx, dy] = DELTA[dir]
+  const nx = cur.x + dx
+  const ny = cur.y + dy
+  const occupant = tiles.get(key(nx, ny))
+  if (occupant) {
+    setCurrent(occupant.info.id, nx, ny)
+    return
+  }
   const at = coordOf.get(ex.next.id)
   if (at) {
     setCurrent(ex.next.id, at.x, at.y)
   } else {
-    let px = cur.x + dx
-    let py = cur.y + dy
-    while (tiles.has(key(px, py))) {
-      px += dx
-      py += dy
-    }
-    addTile(ex.next, px, py)
-    setCurrent(ex.next.id, px, py)
+    addTile(ex.next, nx, ny)
+    setCurrent(ex.next.id, nx, ny)
   }
 }
 
-- 
cgit v1.3.1