pathways: drop splash hint text; auto-fade splash once the user is active (pointer/key/wheel/touch) and has had time to read

1 files changed, 44 insertions, 17 deletions

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)