pathways: bigger tiles, less chrome, no covered photos

- tiles 240px desktop / 150px mobile
- remove hint bar; trim splash to a single line; drop counts from
  hover labels and the move flash
- collision-safe placement: when a step lands on a cell already held
  by a different photo, keep stepping in that direction to the first
  free cell instead of overwriting, so returning photos are never
  covered or orphaned

1 files changed, 11 insertions, 7 deletions

diff --git a/public/app.js b/public/app.js
index 7a9f015..faacc84 100644
--- a/public/app.js
+++ b/public/app.js
@@ -8,7 +8,7 @@ const flash = $("#flash")
 const startBtn = $("#start")
 
 const GAP = 8
-let TILE = window.matchMedia("(max-width: 700px)").matches ? 100 : 160
+let TILE = window.matchMedia("(max-width: 700px)").matches ? 150 : 240
 const ARROW = { N: "↑", E: "→", S: "↓", W: "←" }
 const DELTA = { N: [0, -1], E: [1, 0], S: [0, 1], W: [-1, 0] }
 
@@ -90,7 +90,7 @@ function renderNav() {
     b.textContent = ARROW[ex.dir]
     const lab = document.createElement("span")
     lab.className = "nav-label"
-    lab.textContent = `${ex.path.name} · ${ex.path.count}`
+    lab.textContent = ex.path.name
     b.appendChild(lab)
     b.addEventListener("pointerdown", (e) => e.stopPropagation())
     b.addEventListener("click", (e) => { e.stopPropagation(); move(ex.dir) })
@@ -114,16 +114,20 @@ async function fetchExits(id) {
 async function move(dir) {
   const ex = curExits.find((e) => e.dir === dir)
   if (!ex) return
-  flashText(`${ex.path.name} · ${ex.path.count}`)
+  flashText(ex.path.name)
   const [dx, dy] = DELTA[dir]
-  const nx = cur.x + dx
-  const ny = cur.y + dy
   const at = coordOf.get(ex.next.id)
   if (at) {
     setCurrent(ex.next.id, at.x, at.y)
   } else {
-    addTile(ex.next, nx, ny)
-    setCurrent(ex.next.id, nx, ny)
+    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)
   }
 }