diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/app.css | 16 | ||||
| -rw-r--r-- | public/app.js | 18 | ||||
| -rw-r--r-- | public/index.html | 3 |
3 files changed, 14 insertions, 23 deletions
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> |