diff options
| -rw-r--r-- | public/app.js | 47 | ||||
| -rw-r--r-- | public/index.html | 4 |
2 files changed, 29 insertions, 22 deletions
diff --git a/public/app.js b/public/app.js index 21b3e49..f9db638 100644 --- a/public/app.js +++ b/public/app.js @@ -398,31 +398,37 @@ function renderTileZones(id) { clearTileZones(id) if (!cur || id !== cur.id) return if (!tiles.has(id) || !exitsCache.has(id)) return - const els = [] + const cx = (window.innerWidth / 2 - panX) / scale + const cy = (window.innerHeight / 2 - panY) / scale + let bestDir = null + let best = null + let bestD = Infinity for (const dir of ["N", "E", "S", "W"]) { if (adjacentTile(id, dir)) continue const p = choosePlacement(id, dir) if (!p) continue - const z = document.createElement("div") - z.className = "dropzone" - z.style.left = p.rect.x + "px" - z.style.top = p.rect.y + "px" - z.style.width = p.rect.w + "px" - z.style.height = p.rect.h + "px" - const prev = document.createElement("div") - prev.className = "preview" - const img = document.createElement("img") - img.src = p.info.thumb - img.alt = "" - img.loading = "lazy" - prev.appendChild(img) - z.appendChild(prev) - z.addEventListener("pointerdown", (e) => e.stopPropagation()) - z.addEventListener("click", () => traverseFrom(id, dir)) - world.appendChild(z) - els.push(z) + const d = Math.hypot(p.rect.x + p.rect.w / 2 - cx, p.rect.y + p.rect.h / 2 - cy) + if (d < bestD) { bestD = d; bestDir = dir; best = p } } - if (els.length) zones.set(id, els) + if (!best) return + const z = document.createElement("div") + z.className = "dropzone" + z.style.left = best.rect.x + "px" + z.style.top = best.rect.y + "px" + z.style.width = best.rect.w + "px" + z.style.height = best.rect.h + "px" + const prev = document.createElement("div") + prev.className = "preview" + const img = document.createElement("img") + img.src = best.info.thumb + img.alt = "" + img.loading = "lazy" + prev.appendChild(img) + z.appendChild(prev) + z.addEventListener("pointerdown", (e) => e.stopPropagation()) + z.addEventListener("click", () => traverseFrom(id, bestDir)) + world.appendChild(z) + zones.set(id, [z]) } function refreshPreviews() { @@ -460,6 +466,7 @@ function maybeFollow() { if (now - lastFollow < 200) return lastFollow = now followCurrent() + refreshPreviews() } stage.addEventListener("pointerover", (e) => { diff --git a/public/index.html b/public/index.html index 1a30ce1..080719c 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=22"> + <link rel="stylesheet" href="/app.css?v=23"> </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=22"></script> + <script src="/app.js?v=23"></script> </body> </html> |