@ywkrlerche/richardwho 1.0.25 → 1.0.27

package/app.js

@@ -3,6 +3,8 @@
 
   const CFG = window.RUG_CONFIG || {};
   const SITE_NAME = "Richards Unblocked Games";
+  // The tab/history shows this instead of the real names (set in config.js)
+  const tabTitle = (gameName) => CFG.tabTitle || (gameName ? `${gameName} · ${SITE_NAME}` : SITE_NAME);
   const RECENT_KEY = "rug-recent";
   const CLOCK_KEY = "rug-clock24";
   const THEME_KEY = "rug-theme";
@@ -202,7 +204,7 @@
     els.retryBtn.hidden = true;
     els.barFill.style.width = "0%";
     els.loaderStatus.textContent = "Connecting…";
-    document.title = `${game.name} · ${SITE_NAME}`;
+    document.title = tabTitle(game.name);
 
     const urls = gameUrls(game);
     const loaded = new Array(urls.length).fill(0);
@@ -301,11 +303,12 @@
   // 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>";
+  // Insert only at the very top of the file (after an optional doctype and <html> tag). Searching for the
+  // first "<head>" anywhere is unsafe: many self-unpacking games keep their whole page inside a script string,
+  // and inserting there cuts that string in half.
   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;
+    const top = html.match(/^(?\s*(?:<!--[\s\S]*?-->\s*)*(?:<!doctype[^>]*>)?\s*(?:<html\b[^>]*>)?)/i)[1];
+    return top + HISTORY_GUARD + html.slice(top.length);
   }
 
   function stopGame() {
@@ -342,10 +345,13 @@
     stopGame();
     els.player.hidden = true;
     document.body.classList.remove("playing");
-    document.title = SITE_NAME;
-    const view = location.hash === "#games" || location.hash === "#recent" ? "games" : "home";
+    document.title = tabTitle();
+    const h = location.hash;
+    const view = h === "#games" || h === "#recent" ? "games" : h === "#settings" ? "settings" : "home";
     els.homeView.hidden = view !== "home";
     els.gamesView.hidden = view !== "games";
+    $("view-settings").hidden = view !== "settings";
+    if (view === "settings") renderSettings();
     document.querySelectorAll(".rail-btn[data-nav]").forEach((b) =>
       b.classList.toggle("active", b.dataset.nav === (location.hash === "#recent" ? "recent" : view)));
     if (view === "games") renderRecent();
@@ -370,40 +376,280 @@
     try { window.top.location.replace(url); } catch { location.replace(url); }
   }
 
+  // The dice button opens the wheel (filtered to the current category on the games page)
   function randomGame() {
     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);
+    if (pool.length) openWheel(pool);
   }
 
+  let clockIs24 = false, clockTick = () => {};
+  function setClock24(on) { clockIs24 = on; store.set(CLOCK_KEY, on); clockTick(); }
   function startClock() {
-    let is24 = store.get(CLOCK_KEY, false);
+    clockIs24 = store.get(CLOCK_KEY, false);
     const timeEl = $("clock-time"), metaEl = $("clock-meta");
-    const tick = () => {
+    clockTick = () => {
       const d = new Date();
       let h = d.getHours();
       const m = String(d.getMinutes()).padStart(2, "0");
-      if (is24) { timeEl.textContent = `${String(h).padStart(2, "0")}:${m}`; metaEl.textContent = "24H"; }
+      if (clockIs24) { 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();
-    setInterval(tick, 1000);
+    $("clock").addEventListener("click", () => setClock24(!clockIs24));
+    clockTick();
+    setInterval(clockTick, 1000);
   }
 
+  function applyTheme(t) {
+    document.documentElement.dataset.theme = t;
+    $("theme-btn").title = t === "dark" ? "Switch to light mode" : "Switch to dark mode";
+    try { localStorage.setItem(THEME_KEY, t); } catch {}
+  }
   function initTheme() {
-    const btn = $("theme-btn");
-    const apply = (t) => {
-      document.documentElement.dataset.theme = t;
-      btn.title = t === "dark" ? "Switch to light mode" : "Switch to dark mode";
-    };
-    apply(document.documentElement.dataset.theme === "light" ? "light" : "dark");
-    btn.addEventListener("click", () => {
-      const next = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
-      apply(next);
-      try { localStorage.setItem(THEME_KEY, next); } catch {}
+    applyTheme(document.documentElement.dataset.theme === "light" ? "light" : "dark");
+    $("theme-btn").addEventListener("click", () =>
+      applyTheme(document.documentElement.dataset.theme === "dark" ? "light" : "dark"));
+  }
+
+  // ---------- Settings (saved in this browser) ----------
+  const SETTINGS_KEY = "rug-settings";
+  const REAL_ICON = "data:image/svg+xml," + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='black'/><text x='50' y='70' font-size='62' text-anchor='middle' fill='white' font-family='Arial' font-weight='800'>r</text></svg>");
+  const DISGUISES = [
+    { id: "classroom", label: "Google Classroom", title: "Google Classroom", icon: "https://ssl.gstatic.com/classroom/favicon.png" },
+    { id: "docs", label: "Google Docs", title: "Untitled document - Google Docs", icon: "https://ssl.gstatic.com/docs/documents/images/kix-favicon7.ico" },
+    { id: "drive", label: "Google Drive", title: "My Drive - Google Drive", icon: "https://ssl.gstatic.com/images/branding/product/1x/drive_2020q4_32dp.png" },
+    { id: "gmail", label: "Gmail", title: "Inbox - Gmail", icon: "https://ssl.gstatic.com/images/branding/product/1x/gmail_2020q4_32dp.png" },
+    { id: "google", label: "Google", title: "Google", icon: "https://www.google.com/favicon.ico" },
+    { id: "canvas", label: "Canvas", title: "Dashboard", icon: "https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico" },
+    { id: "off", label: "Off (real name)", title: null, icon: REAL_ICON },
+  ];
+  const DEFAULT_PANIC_KEYS = CFG.panicKeys || ["`", "]"];
+  const DEFAULT_PANIC_URL = CFG.panicUrl || "https://classroom.google.com/";
+  let settings = {};
+  let listeningForKey = false;
+
+  function loadSettings() {
+    settings = { disguise: "classroom", typing: true, boot: true, ...store.get(SETTINGS_KEY, {}) };
+    applySettings();
+  }
+  function saveSettings() {
+    const d = DISGUISES.find((x) => x.id === settings.disguise) || DISGUISES[0];
+    // tabTitle/tabIcon are copied in so index.html can apply the disguise before the page finishes loading
+    store.set(SETTINGS_KEY, { ...settings, tabTitle: d.title, tabIcon: d.icon });
+    applySettings();
+  }
+  function applySettings() {
+    const d = DISGUISES.find((x) => x.id === settings.disguise) || DISGUISES[0];
+    CFG.tabTitle = d.title;
+    $("tab-icon").href = d.icon;
+    CFG.panicUrl = settings.panicUrl || DEFAULT_PANIC_URL;
+    CFG.panicKeys = settings.panicKey ? [settings.panicKey] : DEFAULT_PANIC_KEYS;
+    document.title = tabTitle(els.player.hidden ? "" : els.playerTitle.textContent);
+    const keys = CFG.panicKeys.map((k) => (k === " " ? "Space" : k)).join(" or ");
+    $("panic-btn").title = `Panic (${keys})`;
+    document.querySelector(".corner-links span").innerHTML = `${CFG.panicKeys.map((k) => `<kbd>${escapeHtml(k === " " ? "Space" : k)}</kbd>`).join(" or ")} panic`;
+  }
+
+  function renderSettings() {
+    $("disguises").innerHTML = DISGUISES.map((d) => `<button class="disguise" type="button" data-disguise="${d.id}" aria-pressed="${settings.disguise === d.id}">
+        ${d.id === "off" ? `<span class="none-icon">🚫</span>` : `<img src="${d.icon}" alt="">`}<span>${escapeHtml(d.label)}</span></button>`).join("");
+    const preset = [...$("set-panic-url").options].some((o) => o.value === CFG.panicUrl);
+    $("set-panic-url").value = preset ? CFG.panicUrl : "custom";
+    $("set-panic-custom-row").hidden = preset;
+    $("set-panic-custom").value = preset ? "" : CFG.panicUrl;
+    $("set-panic-key").textContent = CFG.panicKeys.map((k) => (k === " " ? "Space" : k)).join(" or ");
+    $("set-theme").value = document.documentElement.dataset.theme;
+    $("set-clock").value = clockIs24 ? "24" : "12";
+    $("set-per-row").value = String(store.get(PER_ROW_KEY, 6));
+    $("set-typing").checked = settings.typing !== false;
+    $("set-boot").checked = settings.boot !== false;
+  }
+
+  function bindSettings() {
+    $("disguises").addEventListener("click", (e) => {
+      const b = e.target.closest("[data-disguise]");
+      if (!b) return;
+      settings.disguise = b.dataset.disguise;
+      saveSettings();
+      renderSettings();
+    });
+    $("set-panic-url").addEventListener("change", (e) => {
+      const custom = e.target.value === "custom";
+      $("set-panic-custom-row").hidden = !custom;
+      if (!custom) { settings.panicUrl = e.target.value; saveSettings(); } else $("set-panic-custom").focus();
+    });
+    $("set-panic-custom").addEventListener("change", (e) => {
+      let url = e.target.value.trim();
+      if (url && !/^https?:\/\//i.test(url)) url = "https://" + url;
+      if (url) { settings.panicUrl = url; e.target.value = url; saveSettings(); }
+    });
+    const keyBtn = $("set-panic-key");
+    keyBtn.addEventListener("click", () => {
+      listeningForKey = true;
+      keyBtn.classList.add("listening");
+      keyBtn.textContent = "Press a key…";
+      $("set-panic-key-hint").textContent = "Esc to cancel";
+    });
+    document.addEventListener("keydown", (e) => {
+      if (!listeningForKey) return;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      listeningForKey = false;
+      keyBtn.classList.remove("listening");
+      $("set-panic-key-hint").textContent = "Click, then press any key";
+      if (e.key !== "Escape" && e.key.length === 1) { settings.panicKey = e.key; saveSettings(); }
+      renderSettings();
+    }, true);
+    $("set-theme").addEventListener("change", (e) => applyTheme(e.target.value));
+    $("set-clock").addEventListener("change", (e) => setClock24(e.target.value === "24"));
+    $("set-per-row").addEventListener("change", (e) => setPerRow(Number(e.target.value)));
+    $("set-typing").addEventListener("change", (e) => { settings.typing = e.target.checked; saveSettings(); startTypingPlaceholder(); });
+    $("set-boot").addEventListener("change", (e) => { settings.boot = e.target.checked; saveSettings(); });
+    $("set-clear-recent").addEventListener("click", () => {
+      store.set(RECENT_KEY, []);
+      renderRecent();
+      $("set-clear-recent").textContent = "Cleared ✓";
+      setTimeout(() => { $("set-clear-recent").textContent = "Clear"; }, 1500);
+    });
+    $("set-reset").addEventListener("click", () => {
+      settings = { disguise: "classroom", typing: true, boot: true };
+      saveSettings();
+      applyTheme("dark");
+      setClock24(false);
+      setPerRow(6);
+      startTypingPlaceholder();
+      renderSettings();
     });
   }
 
+  // ---------- Random game wheel ----------
+  const WHEEL_COLORS = ["#2563eb", "#7c3aed", "#db2777", "#ea580c", "#16a34a", "#0891b2"];
+  const wheel = { items: [], rot: 0, from: 0, target: 0, start: 0, dur: 5200, raf: 0, winner: null, spinning: false };
+  function drawWheel() {
+    const c = $("wheel"), ctx = c.getContext("2d");
+    const R = c.width / 2, n = wheel.items.length, a = (Math.PI * 2) / n;
+    ctx.clearRect(0, 0, c.width, c.height);
+    for (let i = 0; i < n; i++) {
+      const s = wheel.rot + i * a;
+      ctx.beginPath();
+      ctx.moveTo(R, R);
+      ctx.arc(R, R, R - 6, s, s + a);
+      ctx.closePath();
+      ctx.fillStyle = WHEEL_COLORS[i % WHEEL_COLORS.length];
+      ctx.fill();
+      ctx.strokeStyle = "rgba(0,0,0,.35)";
+      ctx.lineWidth = 3;
+      ctx.stroke();
+      ctx.save();
+      ctx.translate(R, R);
+      ctx.rotate(s + a / 2);
+      ctx.textAlign = "right";
+      ctx.textBaseline = "middle";
+      ctx.fillStyle = "#fff";
+      ctx.font = `700 ${n > 10 ? 22 : 26}px Inter, Segoe UI, Arial, sans-serif`;
+      let name = wheel.items[i].name;
+      if (name.length > 20) name = name.slice(0, 19) + "…";
+      ctx.fillText(name, R - 26, 0);
+      ctx.restore();
+    }
+    ctx.beginPath();
+    ctx.arc(R, R, 46, 0, Math.PI * 2);
+    ctx.fillStyle = "#0b0b0f";
+    ctx.fill();
+    ctx.lineWidth = 6;
+    ctx.strokeStyle = "#fff";
+    ctx.stroke();
+  }
+  function spinWheel(pool) {
+    const picks = [...pool].sort(() => Math.random() - 0.5).slice(0, Math.min(12, pool.length));
+    wheel.items = picks.length >= 2 ? picks : [...picks, ...picks];
+    const n = wheel.items.length, a = (Math.PI * 2) / n;
+    const win = Math.floor(Math.random() * n);
+    wheel.winner = wheel.items[win];
+    // Land the winner's slice center under the pointer (top = -90°), after 6+ full turns
+    const base = -Math.PI / 2 - (win + 0.5) * a + (Math.random() - 0.5) * a * 0.6;
+    wheel.from = wheel.rot;
+    wheel.target = base + Math.PI * 2 * Math.ceil((wheel.from + Math.PI * 12 - base) / (Math.PI * 2));
+    wheel.start = performance.now();
+    wheel.spinning = true;
+    $("wheel-result").hidden = true;
+    $("wheel-play").hidden = true;
+    $("wheel-again").hidden = true;
+    $("wheel-skip").hidden = false;
+    cancelAnimationFrame(wheel.raf);
+    const step = (t) => {
+      const p = Math.min(1, (t - wheel.start) / wheel.dur);
+      const ease = 1 - Math.pow(1 - p, 4); // fast start, long slow finish
+      wheel.rot = wheel.from + (wheel.target - wheel.from) * ease;
+      drawWheel();
+      if (p < 1) wheel.raf = requestAnimationFrame(step);
+      else finishWheel();
+    };
+    wheel.raf = requestAnimationFrame(step);
+  }
+  function finishWheel() {
+    cancelAnimationFrame(wheel.raf);
+    wheel.rot = wheel.target;
+    wheel.spinning = false;
+    drawWheel();
+    const g = wheel.winner, url = logoUrl(g);
+    $("wheel-result-name").textContent = g.name;
+    const art = $("wheel-result-art");
+    art.style.backgroundImage = url ? `url("${url}"), ${gradient(g)}` : gradient(g);
+    art.textContent = url ? "" : initials(g.name);
+    $("wheel-result").hidden = false;
+    $("wheel-skip").hidden = true;
+    $("wheel-again").hidden = false;
+    $("wheel-play").hidden = false;
+    $("wheel-play").focus();
+  }
+  let wheelPool = [];
+  function openWheel(pool) {
+    wheelPool = pool;
+    $("wheel-wrap").hidden = false;
+    spinWheel(pool);
+  }
+  function closeWheel() {
+    cancelAnimationFrame(wheel.raf);
+    wheel.spinning = false;
+    $("wheel-wrap").hidden = true;
+  }
+  function bindWheel() {
+    $("wheel-skip").addEventListener("click", finishWheel);
+    $("wheel-again").addEventListener("click", () => spinWheel(wheelPool));
+    $("wheel-play").addEventListener("click", () => { const g = wheel.winner; closeWheel(); play(g.id); });
+    $("wheel-close").addEventListener("click", closeWheel);
+    $("wheel-wrap").addEventListener("click", (e) => { if (e.target.id === "wheel-wrap") closeWheel(); });
+  }
+
+  // ---------- Live "people online" count ----------
+  // Needs a free Firebase Realtime Database (see SETUP.md). Without one, the count stays hidden.
+  function loadScript(src) {
+    return new Promise((ok, fail) => { const s = document.createElement("script"); s.src = src; s.onload = ok; s.onerror = fail; document.head.appendChild(s); });
+  }
+  async function startPresence() {
+    if (!CFG.firebase || !CFG.firebase.databaseURL) return;
+    try {
+      const v = "10.12.2";
+      await loadScript(`https://www.gstatic.com/firebasejs/${v}/firebase-app-compat.js`);
+      await loadScript(`https://www.gstatic.com/firebasejs/${v}/firebase-database-compat.js`);
+      const app = window.firebase.initializeApp(CFG.firebase, "presence");
+      const db = app.database();
+      const me = db.ref("online").push();
+      db.ref(".info/connected").on("value", (snap) => {
+        if (!snap.val()) return;
+        me.onDisconnect().remove();
+        me.set(window.firebase.database.ServerValue.TIMESTAMP);
+      });
+      db.ref("online").on("value", (snap) => {
+        const n = snap.numChildren();
+        $("online-count").textContent = n <= 1 ? "Just you here right now" : `${n.toLocaleString()} people on right now`;
+        $("online").hidden = false;
+      });
+    } catch (err) {
+      console.warn("Online count unavailable:", err);
+    }
+  }
+
   // ---------- Arrow keys and controller move focus between tiles and buttons ----------
   function focusables() {
     const scope = els.player.hidden ? document : els.player;
@@ -432,8 +678,14 @@
   }
 
   function onKey(e) {
+    if (listeningForKey) return; // the Settings page is capturing a new panic key
     const keys = CFG.panicKeys || ["`", "]"];
     if (keys.includes(e.key)) { e.preventDefault(); panic(); return; }
+    if (!$("wheel-wrap").hidden) {
+      if (e.key === "Escape") closeWheel();
+      else if (e.key === " " && wheel.spinning) { e.preventDefault(); finishWheel(); } // space skips
+      return;
+    }
     if (!els.player.hidden) {
       if (e.key === "Escape" && document.activeElement !== els.frame) goBack();
       return;
@@ -529,12 +781,130 @@
     window.addEventListener("popstate", route);
   }
 
+  // ---------- Home search: placeholder that types itself ----------
+  let timer = 0; // shared, so restarting (from Settings) replaces the running animation
+  function startTypingPlaceholder() {
+    clearTimeout(timer);
+    const input = els.homeInput;
+    const short = games.filter((g) => g.name.length <= 24); // long names get cut off in the box
+    const pick = () => short[Math.floor(Math.random() * short.length)].name;
+    const fixed = [
+      () => `Search ${games.length} games…`, () => `Try "${pick()}"`, () => "What are we playing today?",
+      () => `Try "${pick()}"`, () => "Type a game, any game…", () => `How about "${pick()}"?`,
+      () => "Racing, horror, rhythm…", () => `Try "${pick()}"`, () => "Press / to search from anywhere",
+    ];
+    if (!games.length) return;
+    if (settings.typing === false || matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      input.placeholder = fixed[0]();
+      return;
+    }
+    let line = 0, text = fixed[0](), shown = 0, deleting = false;
+    const busy = () => document.activeElement === input || input.value;
+    function tick() {
+      if (busy()) { input.placeholder = `Search ${games.length} games…`; timer = setTimeout(tick, 400); return; }
+      if (!deleting) {
+        shown++;
+        input.placeholder = text.slice(0, shown) + "▍";
+        if (shown >= text.length) { deleting = true; input.placeholder = text; timer = setTimeout(tick, 1800); return; }
+        timer = setTimeout(tick, 45 + Math.random() * 60); // uneven, like a real person typing
+      } else {
+        shown--;
+        input.placeholder = text.slice(0, shown) + "▍";
+        if (shown <= 0) {
+          deleting = false;
+          line = (line + 1) % fixed.length;
+          text = fixed[line]();
+          timer = setTimeout(tick, 350);
+          return;
+        }
+        timer = setTimeout(tick, 22);
+      }
+    }
+    tick();
+  }
+
+  // ---------- Boot screen + auto-update ----------
+  const BOOT_LINES = [
+    "Loading… about 3 hours left", "Downloading more RAM…", "Calculating time left: 7 years…",
+    "Loading 99%… still 99%…", "Estimated time: yes", "Skill issue detected, loading anyway…",
+    "Installing 47 browser toolbars…", "Running on 3 megabytes and a dream…", "Buffering… (it's not the wifi, it's you)",
+    "Spawning in…", "Respawning in 3… 2… 9…", "Rendering grass you'll never touch…",
+    "Loading the loading screen…", "Downloading lag…", "Speedrunning the loading bar…",
+    "Turning it off and on again…", "Searching for the any key…", "Patching bugs, adding new ones…",
+  ];
+  // Football jokes are mixed in, but never two in a row
+  const TEAM_LINES = [
+    "The Cowboys suck. Loading anyway…", "Loading… unlike the Cowboys in January",
+    "This bar has more wins than the Cowboys…", "Giants are good. Loading respectfully…",
+    "Loading at Giants speed (fast, obviously)…", "Buffering like a Browns offense…",
+    "Searching for a Browns quarterback… still searching…", "Eagles fans booing the loading bar…",
+    "Loading… quieter than Philly after a loss", "Steelers: 8-9 and somehow still loading…",
+    "Loading with a Steelers-level 'we'll get 'em next year'…", "Ravens up big… loading the 4th-quarter collapse…",
+    "Loading faster than a Ravens playoff exit…",
+  ];
+  const boot = { el: $("boot"), fill: $("boot-fill"), msg: $("boot-msg"), ver: $("boot-ver"), timer: 0, pct: 0 };
+  function startBoot() {
+    const used = new Set();
+    let lastWasTeam = false;
+    const next = () => {
+      // ~1 in 3 lines is a team joke, but never right after another one
+      const team = !lastWasTeam && Math.random() < 0.35;
+      const pool = (team ? TEAM_LINES : BOOT_LINES).filter((l) => !used.has(l));
+      const line = pool[Math.floor(Math.random() * pool.length)] || BOOT_LINES[0];
+      used.add(line);
+      lastWasTeam = team;
+      return line;
+    };
+    boot.msg.textContent = next();
+    boot.timer = setInterval(() => {
+      boot.msg.textContent = next();
+      boot.pct = Math.min(90, boot.pct + 8 + Math.random() * 14); // creeps up, saves the last bit for "done"
+      boot.fill.style.width = `${boot.pct}%`;
+    }, 420);
+  }
+  function finishBoot(text) {
+    clearInterval(boot.timer);
+    boot.fill.style.width = "100%";
+    if (text) boot.msg.textContent = text;
+    setTimeout(() => boot.el.classList.add("done"), 250);
+  }
+
+  // When opened from a versioned unpkg link (e.g. an old bookmark), jump to the newest version.
+  // Returns the URL to move to, or null to stay. Never waits longer than `ms`.
+  async function newerVersionUrl(ms) {
+    const pkg = CFG.npmPackage || "@ywkrlerche/richardwho";
+    const here = location.pathname.match(/@(\d+)\.(\d+)\.(\d+)\//);
+    if (location.hostname !== "unpkg.com" || !here) return null;
+    try {
+      const ctrl = new AbortController();
+      const t = setTimeout(() => ctrl.abort(), ms);
+      const res = await fetch(`https://unpkg.com/${pkg}/package.json?t=${Date.now()}`, { cache: "no-store", signal: ctrl.signal });
+      clearTimeout(t);
+      const latest = (await res.json()).version;
+      const a = here.slice(1).map(Number), b = latest.split(".").map(Number);
+      const newer = b[0] > a[0] || (b[0] === a[0] && (b[1] > a[1] || (b[1] === a[1] && b[2] > a[2])));
+      boot.ver.textContent = newer ? `v${a.join(".")} → v${latest}` : `v${latest}`;
+      return newer ? `https://unpkg.com/${pkg}@${latest}/index.html${location.hash}` : null;
+    } catch {
+      return null; // offline or slow: just open this version
+    }
+  }
+
   async function init() {
+    loadSettings();
+    if (settings.boot !== false) startBoot();
+    else boot.el.classList.add("done"); // loading screen turned off in Settings
     initTheme();
     startClock();
     startGamepad();
     setPerRow(store.get(PER_ROW_KEY, 6));
     bind();
+    bindSettings();
+    bindWheel();
+    startPresence();
+    // long enough to read a joke or two (skipped when the loading screen is off)
+    const minShow = new Promise((r) => setTimeout(r, settings.boot !== false ? 1500 : 0));
+    const update = newerVersionUrl(2500);
     try {
       const res = await fetch("games.json", { cache: "no-cache" });
       const data = await res.json();
@@ -543,9 +913,19 @@
     } catch (err) {
       console.error(err);
       els.homeSub.textContent = "Couldn't load the game list. Try refreshing.";
+      finishBoot("Couldn't load the game list. Try refreshing.");
+      return;
+    }
+    const target = await update;
+    if (target) {
+      clearInterval(boot.timer);
+      boot.msg.textContent = "Found a newer version, updating…";
+      boot.fill.style.width = "100%";
+      location.replace(target);
       return;
     }
-    els.homeInput.placeholder = `Search ${games.length} games…`;
+    await minShow;
+    startTypingPlaceholder();
     els.homeSub.innerHTML = `${games.length} games · press <kbd>/</kbd> to search`;
     els.footerCount.textContent = `${games.length} games`;
     renderChips();
@@ -553,6 +933,7 @@
     renderGrid();
     startMarquee();
     route();
+    finishBoot("Done! (that was not 3 hours)");
   }
 
   init();

package/config.js

@@ -14,6 +14,18 @@ window.RUG_CONFIG = {
   // Keys that trigger panic (KeyboardEvent.key values)
   panicKeys: ["`", "]"],
 
+  // Live "people online" count on the home page. Paste your Firebase web config here
+  // (see SETUP.md). Leave null to hide the count.
+  firebase: null,
+
+  // npm package the site is published as (used to find the newest version)
+  npmPackage: "@ywkrlerche/richardwho",
+
+  // What the browser tab and history show instead of the site/game name.
+  // Set tabTitle to null to show the real names again.
+  tabTitle: "Google Classroom",
+  tabIcon: "https://ssl.gstatic.com/classroom/favicon.png",
+
   // For local testing only: load games from a folder on a local server
   // instead of jsDelivr, e.g. "/repos". Leave null when published.
   localBase: null,