diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/app.css | 1 | ||||
| -rw-r--r-- | public/app.js | 61 | ||||
| -rw-r--r-- | public/index.html | 6 |
3 files changed, 47 insertions, 21 deletions
diff --git a/public/app.css b/public/app.css index 30187b7..11b24a0 100644 --- a/public/app.css +++ b/public/app.css @@ -119,7 +119,6 @@ html, body { #splash h1 { margin: 0; font-size: 44px; font-weight: 300; letter-spacing: .18em; } #splash h1 .dot { color: var(--ring); } #splash p { max-width: 34ch; color: var(--muted); margin: 0; font-size: 15px; line-height: 1.6; } -#splash p .hint { font-size: 12px; letter-spacing: .02em; opacity: .75; } #start { margin-top: 10px; padding: 10px 34px; diff --git a/public/app.js b/public/app.js index c617e3a..1c98d84 100644 --- a/public/app.js +++ b/public/app.js @@ -467,21 +467,48 @@ addEventListener("keydown", (e) => { addEventListener("resize", center) -startBtn.addEventListener("click", async () => { +const MIN_READ = 1500 +const splashShownAt = Date.now() +let started = false +let splashTimer = 0 + +function start() { + if (started) return + started = true + clearTimeout(splashTimer) splash.classList.add("hide") - try { - const r = await fetch("/api/random") - const data = await r.json() - const photo = data.photo - photoInfo.set(photo.id, photo) - const a = aspect(photo) - const wf = a >= 1 ? a : 1 - const hf = a >= 1 ? 1 : 1 / a - const uW = (window.innerWidth * 0.92) / wf - const uH = (window.innerHeight * 0.92) / hf - U = Math.max(100, Math.min(640, Math.round(Math.min(uW, uH)))) - const rect = { x: 0, y: 0, w: tileW(photo), h: tileH(photo) } - addTile(photo, rect) - setCurrent(photo.id, rect) - } catch { /* ignore */ } -}) + ;(async () => { + try { + const r = await fetch("/api/random") + const data = await r.json() + const photo = data.photo + photoInfo.set(photo.id, photo) + const a = aspect(photo) + const wf = a >= 1 ? a : 1 + const hf = a >= 1 ? 1 : 1 / a + const uW = (window.innerWidth * 0.92) / wf + const uH = (window.innerHeight * 0.92) / hf + U = Math.max(100, Math.min(640, Math.round(Math.min(uW, uH)))) + const rect = { x: 0, y: 0, w: tileW(photo), h: tileH(photo) } + addTile(photo, rect) + setCurrent(photo.id, rect) + } catch { /* ignore */ } + })() +} + +function noteActivity() { + if (started) return + const left = MIN_READ - (Date.now() - splashShownAt) + if (left <= 0) start() + else { + clearTimeout(splashTimer) + splashTimer = setTimeout(start, left) + } +} + +startBtn.addEventListener("click", start) +addEventListener("pointermove", noteActivity) +addEventListener("pointerdown", noteActivity) +addEventListener("keydown", noteActivity) +addEventListener("wheel", noteActivity) +addEventListener("touchstart", noteActivity) diff --git a/public/index.html b/public/index.html index a2dd33a..2de35c3 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=11"> + <link rel="stylesheet" href="/app.css?v=12"> </head> <body> <main id="stage"> @@ -13,9 +13,9 @@ </main> <div id="splash"> <h1>pathways<span class="dot">.</span></h1> - <p>four paths, one per direction. walk them.<br><span class="hint">drag or scroll to pan · pinch to zoom · double-click empty space or press 0 to fit</span></p> + <p>four paths, one per direction. walk them.</p> <button id="start">start</button> </div> - <script src="/app.js?v=11"></script> + <script src="/app.js?v=12"></script> </body> </html> |