@ywkrlerche/richardwho 1.0.22 → 1.0.24

package/app.js

@@ -2,23 +2,33 @@
   "use strict";
 
   const CFG = window.RUG_CONFIG || {};
+  const SITE_NAME = "Richards Unblocked Games";
   const RECENT_KEY = "rug-recent";
   const CLOCK_KEY = "rug-clock24";
   const THEME_KEY = "rug-theme";
+  const PER_ROW_KEY = "rug-per-row";
   const MAX_RECENT = 6;
+  const MARQUEE_SPEED = 38; // pixels per second
 
   const TAG_EMOJI = {
     Minecraft: "⛏️", Racing: "🏎️", Sports: "⚽", Shooter: "🎯", Horror: "👻", Clicker: "👆",
     Cooking: "🍔", Puzzle: "🧩", Strategy: "🏰", IO: "🌐", Platformer: "🏃", Arcade: "👾",
+    Rhythm: "🎵", Adventure: "🗺️", Tools: "🧰",
   };
+  // Shown in the "Popular games" strip; any id missing from the catalog is skipped
+  const POPULAR = ["1v1.lol", "slope", "retro-bowl", "subway-surfers-san-francisco", "fnaf", "moto-x3m",
+    "papas-freezeria", "basket-random", "drift-boss", "monkey-mart", "temple-run-2", "happy-wheels",
+    "jetpack-joyride", "cut-the-rope", "friday-night-funkin", "plants-vs-zombies", "crossy-road", "run-3"];
 
   const $ = (id) => document.getElementById(id);
   const els = {
-    grid: $("grid"), recentGrid: $("recent-grid"), recentSection: $("recent-section"),
-    search: $("search"), chips: $("chips"), count: $("count"), empty: $("empty"),
+    homeView: $("view-home"), gamesView: $("view-games"), homeInput: $("home-input"), homeSub: $("home-sub"),
+    grid: $("grid"), search: $("search"), sort: $("sort"), chips: $("chips"), count: $("count"), empty: $("empty"),
     allTitle: $("all-title"), footerCount: $("footer-count"),
-    home: $("home"), player: $("player"), frame: $("game-frame"), playerTitle: $("player-title"),
-    loader: $("loader"), loaderName: $("loader-name"), loaderThumb: $("loader-thumb"),
+    recentBlock: $("recent-block"), recentRow: $("recent-row"),
+    popularBlock: $("popular-block"), marquee: $("marquee"), marqueeTrack: $("marquee-track"),
+    player: $("player"), frame: $("game-frame"), playerTitle: $("player-title"),
+    loader: $("loader"), loaderName: $("loader-name"), loaderDesc: $("loader-desc"), loaderArt: $("loader-art"),
     barFill: $("bar-fill"), loaderStatus: $("loader-status"), retryBtn: $("retry-btn"),
   };
 
@@ -39,21 +49,28 @@
     for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); }
     return h >>> 0;
   }
-  function thumbStyle(game) {
+  function gradient(game) {
     const h = hash(game.id);
     const a = h % 360, b = (a + 40 + (h >> 9) % 80) % 360;
-    return `background: linear-gradient(135deg, hsl(${a} 75% 52%), hsl(${b} 80% 38%))`;
+    return `linear-gradient(135deg, hsl(${a} 65% 42%), hsl(${b} 70% 24%))`;
   }
   function initials(name) {
     const words = name.replace(/\(.*?\)/g, "").split(/\s+/).filter(Boolean);
     if (words.length === 1) return words[0].slice(0, 3).toUpperCase();
     return words.slice(0, 3).map((w) => w[0]).join("").toUpperCase();
   }
+  // Our logos ship inside this package under logos/<id>.webp (relative, so it works on unpkg and locally);
+  // games from the extra collection carry their own pinned cover URL
+  function logoUrl(game) {
+    if (game.cover) return game.cover;
+    return game.logo ? `logos/${encodeURIComponent(game.id)}.webp` : null;
+  }
   function fmtMB(bytes) {
     const mb = bytes / 1048576;
     return mb < 1 ? `${Math.max(1, Math.round(bytes / 1024))} KB` : `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`;
   }
   function gameUrls(game) {
+    if (game.url) return [game.url]; // extra collection: one launch file at a pinned URL
     const base = CFG.localBase
       ? `${CFG.localBase}/${game.repo}`
       : `https://cdn.jsdelivr.net/gh/${CFG.githubUser}/${game.repo}@${CFG.branch || "main"}`;
@@ -62,54 +79,106 @@
     return Array.from({ length: game.parts }, (_, i) => `${url}.part${i}`);
   }
   function escapeHtml(s) {
-    return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+    return String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
   }
 
   // ---------- Rendering ----------
-  function cardHtml(game) {
-    return `<button class="card" type="button" data-id="${escapeHtml(game.id)}" title="${escapeHtml(game.name)}">
-      <div class="thumb" style="${thumbStyle(game)}">${escapeHtml(initials(game.name))}<span class="emoji">${TAG_EMOJI[game.tag] || "👾"}</span><span class="play">▶</span></div>
-      <div class="card-body">
-        <span class="card-name">${escapeHtml(game.name)}</span>
-        <span class="card-meta"><span>${escapeHtml(game.tag)}</span><span>${fmtMB(game.size)}</span></span>
-      </div>
+  function tileHtml(game, { popular = false, eager = false } = {}) {
+    const url = logoUrl(game);
+    return `<button class="tile" type="button" data-id="${escapeHtml(game.id)}" title="${escapeHtml(game.desc || game.name)}">
+      <span class="tile-art" style="background:${gradient(game)}">${escapeHtml(initials(game.name))}</span>
+      ${url ? `<span class="tile-art"><img src="${url}" alt="" loading="${eager ? "eager" : "lazy"}" decoding="async" onerror="this.parentNode.remove()"></span>` : ""}
+      ${popular ? `<span class="badge">Popular</span>` : ""}
+      <span class="tile-label">${escapeHtml(game.name)}</span>
     </button>`;
   }
 
-  function renderChips() {
-    const counts = { All: games.length };
+  function tagCounts() {
+    const counts = {};
     games.forEach((g) => { counts[g.tag] = (counts[g.tag] || 0) + 1; });
-    const tags = ["All", ...Object.keys(counts).filter((t) => t !== "All").sort((a, b) => counts[b] - counts[a])];
+    return counts;
+  }
+
+  function renderChips() {
+    const counts = tagCounts();
+    const tags = ["All", ...Object.keys(counts).sort((a, b) => counts[b] - counts[a])];
     els.chips.innerHTML = tags.map((t) =>
-      `<button class="chip" role="tab" type="button" data-tag="${escapeHtml(t)}" aria-selected="${t === activeTag}">${t === "All" ? "All" : (TAG_EMOJI[t] || "") + " " + escapeHtml(t)}<small>${counts[t]}</small></button>`
+      `<button class="tab" role="tab" type="button" data-tag="${escapeHtml(t)}" aria-selected="${t === activeTag}">${t === "All" ? "All games" : (TAG_EMOJI[t] || "") + " " + escapeHtml(t)}<small>${t === "All" ? games.length : counts[t]}</small></button>`
     ).join("");
   }
 
+  function sorted(list) {
+    const by = els.sort.value;
+    const out = list.slice();
+    if (by === "za") out.reverse();
+    else if (by === "small") out.sort((a, b) => a.size - b.size);
+    else if (by === "big") out.sort((a, b) => b.size - a.size);
+    return out;
+  }
+
   function renderGrid() {
-    const q = els.search.value.trim().toLowerCase();
-    const terms = q.split(/\s+/).filter(Boolean);
-    const list = games.filter((g) => {
+    const raw = els.search.value.trim();
+    const terms = raw.toLowerCase().split(/\s+/).filter(Boolean);
+    const list = sorted(games.filter((g) => {
       if (activeTag !== "All" && g.tag !== activeTag) return false;
-      const hay = (g.name + " " + g.id + " " + g.tag).toLowerCase();
+      const hay = `${g.name} ${g.id} ${g.tag} ${g.desc || ""}`.toLowerCase();
       return terms.every((t) => hay.includes(t));
-    });
-    els.grid.innerHTML = list.map(cardHtml).join("");
+    }));
+    els.grid.innerHTML = list.map((g) => tileHtml(g)).join("");
     els.empty.hidden = list.length > 0;
     els.count.textContent = `${list.length} game${list.length === 1 ? "" : "s"}`;
-    els.allTitle.textContent = q ? `Results for “${els.search.value.trim()}”` : activeTag === "All" ? "All Games" : `${activeTag} Games`;
+    els.allTitle.textContent = raw ? `Results for “${raw}”` : activeTag === "All" ? "All games" : `${activeTag} games`;
+    // Strips are for browsing; hide them while searching or filtering
+    const browsing = !raw && activeTag === "All";
+    els.popularBlock.hidden = !browsing;
+    els.recentBlock.hidden = !browsing || !els.recentRow.children.length;
   }
 
   function renderRecent() {
     const recent = store.get(RECENT_KEY, []).map((id) => byId.get(id)).filter(Boolean);
-    els.recentSection.hidden = recent.length === 0;
-    els.recentGrid.innerHTML = recent.map(cardHtml).join("");
+    els.recentRow.innerHTML = recent.map((g) => tileHtml(g, { eager: true })).join("");
+    els.recentBlock.hidden = recent.length === 0 || !!els.search.value.trim() || activeTag !== "All";
   }
 
   function addRecent(id) {
     const list = store.get(RECENT_KEY, []).filter((x) => x !== id);
     list.unshift(id);
     store.set(RECENT_KEY, list.slice(0, MAX_RECENT));
-    renderRecent();
+  }
+
+  function setTag(tag) {
+    activeTag = tag;
+    els.chips.querySelectorAll(".tab").forEach((c) => c.setAttribute("aria-selected", c.dataset.tag === tag));
+    renderGrid();
+  }
+
+  function setPerRow(n) {
+    document.documentElement.style.setProperty("--per-row", n);
+    document.querySelectorAll(".per-row button").forEach((b) => b.classList.toggle("on", Number(b.dataset.per) === n));
+    store.set(PER_ROW_KEY, n);
+  }
+
+  // ---------- Popular games: a smooth, endless sideways glide ----------
+  function startMarquee() {
+    const list = POPULAR.map((id) => byId.get(id)).filter(Boolean);
+    if (!list.length) { els.popularBlock.hidden = true; return; }
+    const set = list.map((g) => tileHtml(g, { popular: true, eager: true })).join("");
+    els.marqueeTrack.innerHTML = set + set; // two copies so the loop never shows a gap
+    const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
+    let offset = 0, last = 0;
+    function step(t) {
+      const dt = last ? Math.min(64, t - last) : 0;
+      last = t;
+      // Pause while pointed at or keyboard-focused (checked live, so it can never get stuck paused)
+      const paused = els.marquee.matches(":hover") || els.marquee.contains(document.activeElement);
+      const half = els.marqueeTrack.scrollWidth / 2; // width of one copy (gap included); 0 while hidden
+      if (!paused && !reduce && half > 0 && els.player.hidden) {
+        offset = (offset + (MARQUEE_SPEED * dt) / 1000) % half;
+        els.marqueeTrack.style.transform = `translate3d(${-offset}px,0,0)`;
+      }
+      requestAnimationFrame(step);
+    }
+    requestAnimationFrame(step);
   }
 
   // ---------- Game loading ----------
@@ -124,21 +193,29 @@
 
     els.playerTitle.textContent = game.name;
     els.loaderName.textContent = game.name;
-    els.loaderThumb.setAttribute("style", thumbStyle(game));
-    els.loaderThumb.textContent = initials(game.name);
+    els.loaderDesc.textContent = game.desc || "";
+    const url = logoUrl(game);
+    els.loaderArt.style.backgroundImage = url ? `url("${url}"), ${gradient(game)}` : gradient(game);
+    els.loaderArt.textContent = url ? "" : initials(game.name);
     els.loader.hidden = false;
     els.retryBtn.hidden = true;
     els.barFill.style.width = "0%";
     els.loaderStatus.textContent = "Connecting…";
-    document.title = `${game.name} · Richards Unblocked Games`;
+    document.title = `${game.name} · ${SITE_NAME}`;
 
     const urls = gameUrls(game);
     const loaded = new Array(urls.length).fill(0);
     const total = game.size || 1;
     const update = () => {
       const got = loaded.reduce((a, b) => a + b, 0);
-      els.barFill.style.width = `${Math.min(100, (got / total) * 100).toFixed(1)}%`;
-      els.loaderStatus.textContent = `${fmtMB(got)} / ${fmtMB(total)}${urls.length > 1 ? ` · ${urls.length} parts` : ""}`;
+      if (game.size) {
+        els.barFill.style.width = `${Math.min(100, (got / total) * 100).toFixed(1)}%`;
+        els.loaderStatus.textContent = `${fmtMB(got)} / ${fmtMB(total)}${urls.length > 1 ? ` · ${urls.length} parts` : ""}`;
+      } else {
+        // Size unknown (extra collection): show what has arrived so far
+        els.barFill.style.width = "35%";
+        els.loaderStatus.textContent = `${fmtMB(got)} loaded`;
+      }
     };
 
     try {
@@ -159,8 +236,10 @@
       }));
       if (currentLoad?.id !== game.id) return;
       els.loaderStatus.textContent = "Starting…";
-      const html = await new Blob(pieces.flat()).text();
+      let html = await new Blob(pieces.flat()).text();
       if (currentLoad?.id !== game.id) return;
+      if (game.src === "gn") html = stripTracking(html);
+      html = guardHistory(html);
       const doc = freshFrame().contentDocument;
       doc.open();
       doc.write(html);
@@ -176,6 +255,24 @@
     }
   }
 
+  // The extra collection's launch files embed Google Analytics; remove it so players aren't tracked
+  function stripTracking(html) {
+    return html
+      .replace(/<script\b[^>]*googletagmanager\.com[^>]*>\s*<\/script>/gi, "")
+      .replace(/<script\b[^>]*>(?:(?!<\/script>)[\s\S])*?\bgtag\s*\((?:(?!<\/script>)[\s\S])*?<\/script>/gi, "");
+  }
+
+  // A written-in game shares this page's address and session history, so a game calling history.back()
+  // or pushState() would move the whole tab (and kick the player out). Give games no-op versions first.
+  const HISTORY_GUARD = "<script>(function(){try{var h=window.history,n=function(){};" +
+    "h.back=h.forward=h.go=h.pushState=h.replaceState=n;}catch(e){}})();<\/script>";
+  function guardHistory(html) {
+    if (/<head[^>]*>/i.test(html)) return html.replace(/<head[^>]*>/i, (m) => m + HISTORY_GUARD);
+    if (/<html[^>]*>/i.test(html)) return html.replace(/<html[^>]*>/i, (m) => m + HISTORY_GUARD);
+    if (/^\s*<!doctype[^>]*>/i.test(html)) return html.replace(/^\s*<!doctype[^>]*>/i, (m) => m + HISTORY_GUARD);
+    return HISTORY_GUARD + html;
+  }
+
   function stopGame() {
     if (!currentLoad) return;
     currentLoad.controller.abort();
@@ -191,15 +288,12 @@
     return fresh;
   }
 
-  // The blob: page is same-origin, so we can listen for the panic keys inside the game too
+  // The game frame is same-origin, so we can listen for the panic keys inside the game too
   function hookFrameKeys() {
-    try {
-      const win = els.frame.contentWindow;
-      win.addEventListener("keydown", onKey, true);
-    } catch {}
+    try { els.frame.contentWindow.addEventListener("keydown", onKey, true); } catch {}
   }
 
-  // ---------- Routing (#play/<id>) so the back button works ----------
+  // ---------- Routing: "" home, #games, #recent, #play/<id> ----------
   function route() {
     const m = location.hash.match(/^#play\/(.+)$/);
     const game = m && byId.get(decodeURIComponent(m[1]));
@@ -208,36 +302,41 @@
       document.body.classList.add("playing");
       addRecent(game.id);
       if (currentLoad?.id !== game.id) loadGame(game);
-    } else {
-      stopGame();
-      els.player.hidden = true;
-      document.body.classList.remove("playing");
-      document.title = "Richards Unblocked Games";
+      return;
     }
+    stopGame();
+    els.player.hidden = true;
+    document.body.classList.remove("playing");
+    document.title = SITE_NAME;
+    const view = location.hash === "#games" || location.hash === "#recent" ? "games" : "home";
+    els.homeView.hidden = view !== "home";
+    els.gamesView.hidden = view !== "games";
+    document.querySelectorAll(".rail-btn[data-nav]").forEach((b) =>
+      b.classList.toggle("active", b.dataset.nav === (location.hash === "#recent" ? "recent" : view)));
+    if (view === "games") renderRecent();
+    if (location.hash === "#recent") requestAnimationFrame(() => els.recentBlock.scrollIntoView({ block: "start" }));
   }
   function play(id) { location.hash = `#play/${encodeURIComponent(id)}`; }
-  function goHome() {
-    if (location.hash.startsWith("#play/")) history.length > 1 ? history.back() : (location.hash = "");
+  function go(view) {
+    const target = view === "home" ? "" : `#${view}`;
+    if (location.hash !== target) history.pushState(null, "", target || location.pathname + location.search);
+    route();
+    if (view !== "recent") window.scrollTo(0, 0);
+  }
+  function goBack() {
+    if (location.hash.startsWith("#play/")) history.length > 1 ? history.back() : (location.hash = "#games");
+    else if (location.hash) go("home");
   }
 
   // ---------- Utilities ----------
-  // When opened through index.svg the site runs inside a frame, so redirect the whole tab
+  // If this page is ever shown inside a frame, redirect the whole tab
   function panic() {
     const url = CFG.panicUrl || "https://classroom.google.com/";
     try { window.top.location.replace(url); } catch { location.replace(url); }
   }
 
-  function onKey(e) {
-    const keys = CFG.panicKeys || ["`", "]"];
-    if (keys.includes(e.key)) { e.preventDefault(); panic(); return; }
-    if (e.key === "/" && document.activeElement !== els.search && els.player.hidden) {
-      e.preventDefault(); els.search.focus();
-    }
-    if (e.key === "Escape" && document.activeElement === els.search) { els.search.value = ""; renderGrid(); els.search.blur(); }
-  }
-
   function randomGame() {
-    const pool = activeTag === "All" ? games : games.filter((g) => g.tag === activeTag);
+    const pool = !els.gamesView.hidden && activeTag !== "All" ? games.filter((g) => g.tag === activeTag) : games;
     if (pool.length) play(pool[Math.floor(Math.random() * pool.length)].id);
   }
 
@@ -248,9 +347,8 @@
       const d = new Date();
       let h = d.getHours();
       const m = String(d.getMinutes()).padStart(2, "0");
-      const s = String(d.getSeconds()).padStart(2, "0");
-      if (is24) { timeEl.textContent = `${String(h).padStart(2, "0")}:${m}:${s}`; metaEl.textContent = "24H"; }
-      else { const ap = h >= 12 ? "PM" : "AM"; h = h % 12 || 12; timeEl.textContent = `${h}:${m}:${s}`; metaEl.textContent = ap; }
+      if (is24) { timeEl.textContent = `${String(h).padStart(2, "0")}:${m}`; metaEl.textContent = "24H"; }
+      else { const ap = h >= 12 ? "PM" : "AM"; h = h % 12 || 12; timeEl.textContent = `${h}:${m}`; metaEl.textContent = ap; }
     };
     $("clock").addEventListener("click", () => { is24 = !is24; store.set(CLOCK_KEY, is24); tick(); });
     tick();
@@ -261,7 +359,6 @@
     const btn = $("theme-btn");
     const apply = (t) => {
       document.documentElement.dataset.theme = t;
-      btn.textContent = t === "dark" ? "🌙" : "☀️";
       btn.title = t === "dark" ? "Switch to light mode" : "Switch to dark mode";
     };
     apply(document.documentElement.dataset.theme === "light" ? "light" : "dark");
@@ -272,32 +369,118 @@
     });
   }
 
+  // ---------- Arrow keys and controller move focus between tiles and buttons ----------
+  function focusables() {
+    const scope = els.player.hidden ? document : els.player;
+    return [...scope.querySelectorAll(".tile, .rail-btn, .tab, .per-row button, #search, #sort, #home-input, .text-btn, .pill-btn")]
+      .filter((el) => el.offsetParent !== null && !el.closest("[hidden]"));
+  }
+  function moveFocus(dir) {
+    const cur = document.activeElement;
+    const vw = innerWidth;
+    const list = focusables().filter((el) => { const r = el.getBoundingClientRect(); return r.right > 0 && r.left < vw; });
+    if (!list.includes(cur)) { (list.find((el) => el.classList.contains("tile")) || list[0])?.focus(); return; }
+    const a = cur.getBoundingClientRect();
+    const ax = a.left + a.width / 2, ay = a.top + a.height / 2;
+    let best = null, bestScore = Infinity;
+    for (const el of list) {
+      if (el === cur) continue;
+      const b = el.getBoundingClientRect();
+      const dx = b.left + b.width / 2 - ax, dy = b.top + b.height / 2 - ay;
+      const main = { left: -dx, right: dx, up: -dy, down: dy }[dir];
+      if (main <= 4) continue;
+      const cross = dir === "left" || dir === "right" ? Math.abs(dy) : Math.abs(dx);
+      const score = main + cross * 2.5;
+      if (score < bestScore) { bestScore = score; best = el; }
+    }
+    if (best) { best.focus({ preventScroll: true }); best.scrollIntoView({ block: "nearest", behavior: "smooth" }); }
+  }
+
+  function onKey(e) {
+    const keys = CFG.panicKeys || ["`", "]"];
+    if (keys.includes(e.key)) { e.preventDefault(); panic(); return; }
+    if (!els.player.hidden) {
+      if (e.key === "Escape" && document.activeElement !== els.frame) goBack();
+      return;
+    }
+    const typing = document.activeElement === els.search || document.activeElement === els.homeInput;
+    if (e.key === "/" && !typing) {
+      e.preventDefault();
+      (els.homeView.hidden ? els.search : els.homeInput).focus();
+      return;
+    }
+    if (e.key === "Escape") {
+      if (typing) { document.activeElement.value = ""; renderGrid(); document.activeElement.blur(); } else goBack();
+      return;
+    }
+    const dir = { ArrowLeft: "left", ArrowRight: "right", ArrowUp: "up", ArrowDown: "down" }[e.key];
+    if (dir && !(typing && (dir === "left" || dir === "right"))) { e.preventDefault(); moveFocus(dir); }
+  }
+
+  // Gamepad: d-pad/left stick move, A select, B back, Y random. In a game only View (⧉) leaves,
+  // since games use A/B themselves.
+  function startGamepad() {
+    const prev = {};
+    let lastMove = 0;
+    const press = (i) => {
+      if (!els.player.hidden) { if (i === 8) goBack(); return; }
+      if (i === 0) document.activeElement?.click?.();
+      else if (i === 1) goBack();
+      else if (i === 3) randomGame();
+      else if (i === 12) moveFocus("up");
+      else if (i === 13) moveFocus("down");
+      else if (i === 14) moveFocus("left");
+      else if (i === 15) moveFocus("right");
+    };
+    function poll(t) {
+      const pads = navigator.getGamepads ? [...navigator.getGamepads()].filter(Boolean) : [];
+      for (const pad of pads) {
+        pad.buttons.forEach((b, i) => {
+          const key = `${pad.index}:${i}`;
+          if (b.pressed && !prev[key]) press(i);
+          prev[key] = b.pressed;
+        });
+        const [x, y] = pad.axes;
+        if (els.player.hidden && t - lastMove > 180 && (Math.abs(x) > 0.6 || Math.abs(y) > 0.6)) {
+          moveFocus(Math.abs(x) > Math.abs(y) ? (x > 0 ? "right" : "left") : (y > 0 ? "down" : "up"));
+          lastMove = t;
+        }
+      }
+      if (pads.length) requestAnimationFrame(poll);
+    }
+    window.addEventListener("gamepadconnected", () => requestAnimationFrame(poll));
+  }
+
   // ---------- Wire up ----------
   function bind() {
     document.addEventListener("keydown", onKey, true);
-    const onCard = (e) => { const c = e.target.closest(".card"); if (c) play(c.dataset.id); };
-    els.grid.addEventListener("click", onCard);
-    els.recentGrid.addEventListener("click", onCard);
-    els.search.addEventListener("input", renderGrid);
-    els.chips.addEventListener("click", (e) => {
-      const chip = e.target.closest(".chip"); if (!chip) return;
-      activeTag = chip.dataset.tag;
-      els.chips.querySelectorAll(".chip").forEach((c) => c.setAttribute("aria-selected", c === chip));
-      renderGrid();
+    document.addEventListener("click", (e) => {
+      const tile = e.target.closest(".tile");
+      if (tile) { play(tile.dataset.id); return; }
+      const nav = e.target.closest("[data-nav]");
+      if (nav) { e.preventDefault(); go(nav.dataset.nav); }
     });
-    // index.svg adds a <base> pointing at jsDelivr, so a plain href="#" would leave the page
-    document.querySelector(".brand").addEventListener("click", (e) => {
-      e.preventDefault();
-      els.search.value = "";
+    // Typing on the home search jumps straight into the games list
+    const fromHome = () => {
+      els.search.value = els.homeInput.value;
+      els.homeInput.value = "";
+      setTag("All");
+      go("games");
+      els.search.focus();
       renderGrid();
-      goHome();
-      window.scrollTo(0, 0);
-    });
+    };
+    els.homeInput.addEventListener("input", () => { if (els.homeInput.value.trim()) fromHome(); });
+    $("home-search").addEventListener("submit", (e) => { e.preventDefault(); fromHome(); });
+
+    els.search.addEventListener("input", renderGrid);
+    els.sort.addEventListener("change", renderGrid);
+    els.chips.addEventListener("click", (e) => { const tab = e.target.closest(".tab"); if (tab) setTag(tab.dataset.tag); });
+    document.querySelectorAll(".per-row button").forEach((b) => b.addEventListener("click", () => setPerRow(Number(b.dataset.per))));
     $("clear-recent").addEventListener("click", () => { store.set(RECENT_KEY, []); renderRecent(); });
     $("random-btn").addEventListener("click", randomGame);
     $("panic-btn").addEventListener("click", panic);
     $("panic-btn-2").addEventListener("click", panic);
-    $("back-btn").addEventListener("click", goHome);
+    $("back-btn").addEventListener("click", goBack);
     $("reload-btn").addEventListener("click", () => {
       const g = currentLoad && byId.get(currentLoad.id);
       if (g) loadGame(g);
@@ -308,11 +491,14 @@
       (el.requestFullscreen || el.webkitRequestFullscreen)?.call(el);
     });
     window.addEventListener("hashchange", route);
+    window.addEventListener("popstate", route);
   }
 
   async function init() {
     initTheme();
     startClock();
+    startGamepad();
+    setPerRow(store.get(PER_ROW_KEY, 6));
     bind();
     try {
       const res = await fetch("games.json", { cache: "no-cache" });
@@ -321,14 +507,16 @@
       byId = new Map(games.map((g) => [g.id, g]));
     } catch (err) {
       console.error(err);
-      els.empty.hidden = false;
-      els.empty.textContent = "Couldn't load the game list (games.json).";
+      els.homeSub.textContent = "Couldn't load the game list. Try refreshing.";
       return;
     }
+    els.homeInput.placeholder = `Search ${games.length} games…`;
+    els.homeSub.innerHTML = `${games.length} games · press <kbd>/</kbd> to search`;
     els.footerCount.textContent = `${games.length} games`;
     renderChips();
-    renderGrid();
     renderRecent();
+    renderGrid();
+    startMarquee();
     route();
   }