From 8ac3825ba5b8d67828fcf348068f91bea3bdb2da Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Tue, 4 Aug 2026 06:26:22 +0000
Subject: 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
---
 public/app.css    | 16 ++--------------
 public/app.js     | 18 +++++++++++-------
 public/index.html |  3 +--
 3 files changed, 14 insertions(+), 23 deletions(-)

(limited to 'public')

diff --git a/public/app.css b/public/app.css
index 308868f..ddd472d 100644
--- a/public/app.css
+++ b/public/app.css
@@ -67,8 +67,8 @@ html, body {
 .nav-btn {
   position: absolute;
   pointer-events: auto;
-  width: 34px;
-  height: 34px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .25);
   background: rgba(14, 15, 19, .85);
@@ -108,18 +108,6 @@ html, body {
 .nav-btn[data-dir="W"] .nav-label { top: 50%; right: calc(100% + 10px); translate: 0 -50%; }
 .nav-btn:hover .nav-label { opacity: 1; }
 
-#hint {
-  position: fixed;
-  bottom: 12px;
-  left: 50%;
-  translate: -50%;
-  margin: 0;
-  font-size: 12px;
-  color: var(--muted);
-  letter-spacing: .05em;
-  pointer-events: none;
-}
-
 #flash {
   position: fixed;
   top: 18px;
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)
   }
 }
 
diff --git a/public/index.html b/public/index.html
index 4059428..67ac3ff 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,11 +10,10 @@
 <body>
   <main id="stage">
     <div id="world"></div>
-    <p id="hint">hover the current photo for its four paths · arrow keys walk · drag to pan</p>
   </main>
   <div id="splash">
     <h1>pathways<span class="dot">.</span></h1>
-    <p>Every photo holds four paths — one for each direction. Walk them, and the pictures lock into a mosaic behind you.</p>
+    <p>four paths, one per direction. walk them.</p>
     <button id="start">start</button>
   </div>
   <div id="flash"></div>
-- 
cgit v1.3.1