@ywkrlerche/richardwho 1.0.26 → 1.0.28

package/app.js

@@ -4,8 +4,7 @@
   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 TAB_TITLE = CFG.tabTitle || null;
-  const tabTitle = (gameName) => TAB_TITLE || (gameName ? `${gameName} · ${SITE_NAME}` : SITE_NAME);
+  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";
@@ -223,6 +222,14 @@
     };
 
     try {
+      // Played before? Start straight from the browser's saved copy, no download
+      const cached = await gameCache.get(urls[0]);
+      if (cached && currentLoad?.id === game.id) {
+        els.barFill.style.width = "100%";
+        els.loaderStatus.textContent = "Starting (saved copy)…";
+        startGameHtml(game, await cached.text());
+        return;
+      }
       const pieces = await Promise.all(urls.map(async (url, i) => {
         // Try the main link, then backups. jsDelivr sometimes fails the first fetch of a file it
         // hasn't cached yet, and a download can drop mid-way, so a retry usually succeeds.
@@ -258,17 +265,9 @@
       }));
       if (currentLoad?.id !== game.id) return;
       els.loaderStatus.textContent = "Starting…";
-      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);
-      doc.close();
-      els.loader.hidden = true;
-      hookFrameKeys();
-      try { els.frame.contentWindow.focus(); } catch {}
+      const blob = new Blob(pieces.flat());
+      gameCache.put(urls[0], blob); // in the background; a full disk just means no saved copy
+      startGameHtml(game, await blob.text());
     } catch (err) {
       if (err.name === "AbortError") return;
       console.error(err);
@@ -277,6 +276,52 @@
     }
   }
 
+  function startGameHtml(game, html) {
+    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);
+    doc.close();
+    els.loader.hidden = true;
+    hookFrameKeys();
+    try { els.frame.contentWindow.focus(); } catch {}
+  }
+
+  // Saved copies of recently played games (browser Cache Storage), so replays start instantly.
+  // Keyed by the game's first file URL, which includes the version tag, so new versions don't reuse old copies.
+  const gameCache = {
+    NAME: "rug-games-v1",
+    KEEP: 12,
+    async get(key) {
+      try {
+        if (!window.caches) return null;
+        const hit = await (await caches.open(this.NAME)).match(key);
+        if (hit) this.touch(key);
+        return hit || null;
+      } catch { return null; }
+    },
+    async put(key, blob) {
+      try {
+        if (!window.caches) return;
+        await (await caches.open(this.NAME)).put(key, new Response(blob, { headers: { "Content-Type": "text/html" } }));
+        await this.touch(key);
+      } catch { /* out of space or not allowed: just skip saving */ }
+    },
+    async touch(key) {
+      // most-recent-first list; drop anything past KEEP
+      const list = store.get("rug-cache-list", []).filter((k) => k !== key);
+      list.unshift(key);
+      const drop = list.splice(this.KEEP);
+      store.set("rug-cache-list", list);
+      if (drop.length) {
+        const c = await caches.open(this.NAME);
+        await Promise.all(drop.map((k) => c.delete(k)));
+      }
+    },
+  };
+
   // Backup sources for a jsDelivr GitHub link, in the order to try them:
   // the same link again, jsDelivr's second network, then GitHub's own file server.
   // The extra collection's files are also published as gn-math/html at the same commit.
@@ -304,11 +349,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() {
@@ -339,16 +385,25 @@
       els.player.hidden = false;
       document.body.classList.add("playing");
       addRecent(game.id);
-      if (currentLoad?.id !== game.id) loadGame(game);
+      if (currentLoad?.id !== game.id) {
+        loadGame(game);
+        track(`Play: ${game.name}`, { name: "play_game", params: { game_name: game.name, game_category: game.tag } });
+      }
       return;
     }
     stopGame();
     els.player.hidden = true;
     document.body.classList.remove("playing");
     document.title = tabTitle();
-    const view = location.hash === "#games" || location.hash === "#recent" ? "games" : "home";
+    const h = location.hash;
+    const view = h === "#games" || h === "#recent" ? "games" : h === "#settings" ? "settings" : h === "#chat" ? "chat" : "home";
     els.homeView.hidden = view !== "home";
     els.gamesView.hidden = view !== "games";
+    $("view-settings").hidden = view !== "settings";
+    $("view-chat").hidden = view !== "chat";
+    if (view === "settings") { renderSettings(); renderAdmin(); }
+    if (view === "chat") openChat();
+    track(view[0].toUpperCase() + view.slice(1));
     document.querySelectorAll(".rail-btn[data-nav]").forEach((b) =>
       b.classList.toggle("active", b.dataset.nav === (location.hash === "#recent" ? "recent" : view)));
     if (view === "games") renderRecent();
@@ -373,40 +428,523 @@
     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";
+    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();
     };
-    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 {}
+    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(); });
+  }
+
+  // ---------- Google Analytics (only when a measurement ID is set in config.js) ----------
+  // The tab title is disguised, so pages and games are reported by their real names instead.
+  function track(page, extra) {
+    if (!window.gtag) return;
+    window.gtag("event", "page_view", { page_title: page, page_location: location.href.split("#")[0] + (location.hash || "#home") });
+    if (extra) window.gtag("event", extra.name, extra.params);
+  }
+  function startAnalytics() {
+    const id = CFG.googleAnalytics;
+    if (!id || !/^G-[A-Z0-9]+$/i.test(id)) return;
+    window.dataLayer = window.dataLayer || [];
+    window.gtag = function () { window.dataLayer.push(arguments); };
+    window.gtag("js", new Date());
+    // We send page views ourselves (see track); no ad features
+    window.gtag("config", id, { send_page_view: false, allow_google_signals: false, allow_ad_personalization_signals: false });
+    loadScript(`https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(id)}`).catch(() => {});
+  }
+
+  // ---------- 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); });
+  }
+  // One shared Firebase connection for the online count and the chat (null when not configured)
+  let firebaseApp = null;
+  function getFirebase() {
+    if (!CFG.firebase || !CFG.firebase.databaseURL) return Promise.resolve(null);
+    if (!firebaseApp) {
+      firebaseApp = (async () => {
+        const v = "10.12.2";
+        await loadScript(`https://www.gstatic.com/firebasejs/${v}/firebase-app-compat.js`);
+        await Promise.all([
+          loadScript(`https://www.gstatic.com/firebasejs/${v}/firebase-database-compat.js`),
+          loadScript(`https://www.gstatic.com/firebasejs/${v}/firebase-auth-compat.js`),
+        ]);
+        return window.firebase.initializeApp(CFG.firebase, "rug");
+      })().catch((err) => { console.warn("Firebase unavailable:", err); return null; });
+    }
+    return firebaseApp;
+  }
+
+  async function startPresence() {
+    try {
+      const app = await getFirebase();
+      if (!app) return;
+      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);
+    }
+  }
+
+  // ---------- Censored chat room ----------
+  // Two layers: this filter (stars out swears, refuses links/personal info) and the database's own
+  // rules (see SETUP.md), which reject the same things even if someone skips this page's code.
+  const BAD_ANYWHERE = ["fuck", "shit", "bitch", "cunt", "nigg", "faggot", "fagot", "whore", "slut", "pussy",
+    "penis", "vagina", "porn", "retard", "asshole", "bastard", "molest", "pedo", "dildo", "boob", "nazi", "hitler",
+    "kill yourself", "killyourself"];
+  const BAD_WHOLE_WORD = ["ass", "fag", "cum", "tit", "tits", "hoe", "kys", "sex", "nig", "dick", "cock", "rape",
+    "raped", "rapist", "raping", "damn", "piss", "crap", "wank", "twat", "prick"];
+  const LEET = { 0: "o", 1: "i", 3: "e", 4: "a", 5: "s", 7: "t", 8: "b", "@": "a", $: "s", "!": "i", "|": "i" };
+  // Real words that happen to contain a filtered one
+  const SAFE_WORDS = ["scunthorpe", "shiitake", "cockpit", "peacock", "hancock", "dickens", "assassin", "cocktail", "therapist"];
+  const plain = (s) => s.toLowerCase().replace(/[0134578@$!|]/g, (c) => LEET[c] || c).replace(/[^a-z ]/g, "");
+  const squash = (s) => plain(s).replace(/(.)\1+/g, "$1"); // "fuuuck" -> "fuck"
+  function isBadWord(word) {
+    const p = plain(word).replace(/ /g, ""), w = squash(word).replace(/ /g, "");
+    if (!w || SAFE_WORDS.includes(p)) return false;
+    // whole-word list: check before and after squashing, since squashing turns "ass" into "as"
+    return BAD_WHOLE_WORD.includes(p) || BAD_WHOLE_WORD.includes(w) ||
+      BAD_ANYWHERE.some((b) => w.includes(squash(b).replace(/ /g, "")));
+  }
+  // Returns { text } (with swears starred out) or { error } when the message can't be sent at all
+  function cleanMessage(raw) {
+    const text = raw.replace(/\s+/g, " ").trim();
+    if (!text) return { error: "Type a message first." };
+    if (/(https?:|www\.|discord\.gg|\b[a-z0-9-]+\.(com|net|org|io|gg|xyz|co|me|tv|ly|app|dev|link)\b)/i.test(text)) return { error: "Links aren't allowed in chat." };
+    if (/\S+@\S+\.\S+/.test(text)) return { error: "Don't share email addresses." };
+    if (/(\d[\s().-]*){7,}/.test(text)) return { error: "Don't share phone numbers." };
+    const masked = text.split(" ").map((w) => (isBadWord(w) ? "*".repeat(w.length) : w)).join(" ");
+    // spaced-out tricks like "f u c k" survive word-by-word checks; catch them on the whole line
+    const joined = squash(masked.split(" ").filter((w) => !SAFE_WORDS.includes(plain(w))).join(" ")).replace(/ /g, "");
+    if (BAD_ANYWHERE.some((b) => joined.includes(squash(b).replace(/ /g, "")))) return { error: "That message was blocked." };
+    return { text: masked };
+  }
+  function cleanName(raw) {
+    // Refuse (don't silently strip) other characters: a wrong or not-yet-saved admin code like "Code123!"
+    // must never be posted as a nickname
+    if (/[^\w .-]/.test(raw)) return { error: "Nicknames can only use letters, numbers, spaces, . _ and -." };
+    const name = raw.replace(/\s+/g, " ").trim().slice(0, 16);
+    if (name.length < 2) return { error: "Pick a nickname (2–16 letters)." };
+    if (name.split(/[ ._-]/).some(isBadWord) || isBadWord(name.replace(/[ ._-]/g, ""))) return { error: "Pick a different nickname." };
+    return { name };
+  }
+
+  const chat = { started: false, uid: null, lastSent: 0, admin: false, triedName: "" };
+  const ADMIN_NAME = "Richard"; // what the admin's messages show as (reserved: the database refuses it from non-admins)
+  function setAdminName() {
+    $("chat-name").value = ADMIN_NAME;
+    $("chat-name").readOnly = !!chat.admin;
+  }
+  function chatNote(text, err) { const n = $("chat-note"); n.textContent = text || ""; n.classList.toggle("err", !!err); }
+
+  // Who is this browser? Reuses a saved sign-in (Google for admins), otherwise signs in anonymously:
+  // no account, just a random per-browser id used for rate limits and bans.
+  async function ensureUser(app) {
+    const auth = app.auth();
+    const existing = await new Promise((ok) => { const off = auth.onAuthStateChanged((u) => { off(); ok(u); }); });
+    const user = existing || (await auth.signInAnonymously()).user;
+    chat.uid = user.uid;
+    // Admins are listed under chat/admins in the database (only editable from the Firebase console)
+    // The entry holds the admin code (the database only accepts the right one), so any entry means admin.
+    // If the code is changed later, old entries stop working on the database side.
+    try { chat.admin = (await app.database().ref(`chat/admins/${user.uid}`).once("value")).val() !== null; } catch { chat.admin = false; }
+    $("chat-log").classList.toggle("admin", chat.admin);
+    return user;
+  }
+
+  async function openChat() {
+    if (chat.started) return;
+    const app = await getFirebase();
+    if (!app) { $("chat-off").hidden = false; $("chat-log").hidden = true; $("chat-form").hidden = true; return; }
+    chat.started = true;
+    $("chat-form").hidden = false;
+    $("chat-name").value = store.get("rug-chat-name", "");
+    chatNote("Connecting…");
+    try {
+      await ensureUser(app);
+    } catch (err) {
+      chatNote("Chat couldn't connect. Try again later.", true);
+      return;
+    }
+    if (chat.admin) setAdminName();
+    chatNote(chat.admin ? "You're admin: 🗑 deletes a message, 🚫 bans its sender." : "");
+    const log = $("chat-log");
+    log.innerHTML = `<p class="chat-empty" id="chat-empty">No messages yet. Say hi!</p>`;
+    if (chat.ref) chat.ref.off(); // reconnecting (signed in/out): drop the old listener so messages don't double
+    const ref = chat.ref = app.database().ref("chat/messages").orderByChild("ts").limitToLast(60);
+    ref.on("child_added", (snap) => {
+      const m = snap.val();
+      if (!m || typeof m.text !== "string") return;
+      $("chat-empty")?.remove();
+      const nearBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 60;
+      const t = new Date(m.ts || Date.now());
+      const div = document.createElement("div");
+      div.className = "chat-msg" + (m.uid === chat.uid ? " me" : "");
+      div.dataset.key = snap.key;
+      div.dataset.uid = m.uid || "";
+      // filter again on display, in case anything slipped past older rules
+      const shown = cleanMessage(m.text).text || "[removed]";
+      div.innerHTML = `${m.admin ? `<span class="badge-admin">⭐ ADMIN</span>` : ""}<span class="who">${escapeHtml(m.name || "?")}</span>${escapeHtml(shown)}<span class="when">${t.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}</span>` +
+        `<button class="mod" type="button" data-mod="delete" title="Delete message">🗑</button><button class="mod" type="button" data-mod="ban" title="Ban this person">🚫</button>`;
+      log.appendChild(div);
+      while (log.children.length > 80) log.firstChild.remove();
+      if (nearBottom || m.uid === chat.uid) log.scrollTop = log.scrollHeight;
+    });
+    // Deleted by an admin: disappears for everyone
+    ref.on("child_removed", (snap) => {
+      log.querySelector(`[data-key="${CSS.escape(snap.key)}"]`)?.remove();
+      if (!log.querySelector(".chat-msg")) log.innerHTML = `<p class="chat-empty" id="chat-empty">No messages yet. Say hi!</p>`;
     });
   }
 
+  // ---------- Admin tools (chat) ----------
+  async function adminAction(e) {
+    const btn = e.target.closest("[data-mod]");
+    if (!btn || !chat.admin) return;
+    const row = btn.closest(".chat-msg");
+    const db = (await getFirebase()).database();
+    try {
+      if (btn.dataset.mod === "delete") {
+        await db.ref(`chat/messages/${row.dataset.key}`).remove();
+      } else if (btn.dataset.mod === "ban" && row.dataset.uid && row.dataset.uid !== chat.uid) {
+        if (!confirm("Ban this person from chat? They'll still be able to read.")) return;
+        await db.ref(`chat/banned/${row.dataset.uid}`).set(true);
+        chatNote("Banned. Their old messages stay until you delete them.");
+      }
+    } catch {
+      chatNote("That didn't work. Are you still signed in as an admin?", true);
+    }
+  }
+
+  async function renderAdmin() {
+    const app = await getFirebase();
+    $("admin-group").hidden = !app;
+    if (!app) return;
+    await ensureUser(app);
+    $("admin-status").textContent = chat.admin ? "Admin on this browser ✓" : "Not an admin on this browser";
+    $("admin-leave").hidden = !chat.admin;
+    $("admin-tools-row").hidden = !chat.admin;
+  }
+
+  // "#code" as a nickname: the database compares it with the secret code (which visitors can't read).
+  // Returns true if this browser is now admin.
+  async function claimAdmin(code) {
+    const app = await getFirebase();
+    try {
+      await app.database().ref(`chat/admins/${chat.uid}`).set(code);
+    } catch {
+      return false;
+    }
+    chat.admin = true;
+    $("chat-log").classList.add("admin");
+    return true;
+  }
+
+  function bindAdmin() {
+    $("chat-log").addEventListener("click", adminAction);
+    $("admin-leave").addEventListener("click", async () => {
+      try { await (await getFirebase()).database().ref(`chat/admins/${chat.uid}`).remove(); } catch {}
+      chat.admin = false;
+      chat.triedName = "";
+      $("chat-log").classList.remove("admin");
+      $("chat-name").readOnly = false;
+      $("chat-name").value = store.get("rug-chat-name", "");
+      await renderAdmin();
+    });
+    $("admin-clear").addEventListener("click", async () => {
+      if (!chat.admin || !confirm("Delete every chat message for everyone?")) return;
+      try { await (await getFirebase()).database().ref("chat/messages").remove(); }
+      catch { alert("Couldn't clear the chat."); }
+    });
+  }
+  async function sendChat(e) {
+    e.preventDefault();
+    const app = await getFirebase();
+    if (!app || !chat.uid) return;
+    // Typing the admin code as your nickname makes this browser admin (the database checks it;
+    // the code itself is never posted). Each new nickname is tried once.
+    const rawName = $("chat-name").value.trim();
+    if (!chat.admin && rawName && rawName !== chat.triedName) {
+      chat.triedName = rawName;
+      if (await claimAdmin(rawName)) {
+        setAdminName();
+        chatNote("You're admin now ✓ Your messages show as Richard, with 🗑 delete and 🚫 ban on every message.");
+        if (!$("chat-text").value.trim()) return;
+      }
+    }
+    const n = chat.admin ? { name: ADMIN_NAME } : cleanName(rawName);
+    if (n.error) { chatNote(n.error, true); $("chat-name").focus(); return; }
+    if (!chat.admin && n.name.toLowerCase() === ADMIN_NAME.toLowerCase()) { chatNote("That name is taken.", true); return; }
+    const m = cleanMessage($("chat-text").value);
+    if (m.error) { chatNote(m.error, true); return; }
+    const wait = 3000 - (Date.now() - chat.lastSent);
+    if (wait > 0) { chatNote(`Slow down. Wait ${Math.ceil(wait / 1000)}s.`, true); return; }
+    if (!chat.admin) store.set("rug-chat-name", n.name); // never save the admin code as a remembered name
+    const db = app.database();
+    const key = db.ref("chat/messages").push().key;
+    const TS = window.firebase.database.ServerValue.TIMESTAMP;
+    chat.lastSent = Date.now();
+    try {
+      await db.ref().update({
+        [`chat/messages/${key}`]: { name: n.name, text: m.text, ts: TS, uid: chat.uid, ...(chat.admin ? { admin: true } : {}) },
+        [`chat/last/${chat.uid}`]: TS,
+      });
+      $("chat-text").value = "";
+      chatNote("");
+    } catch {
+      chatNote("Message blocked (filtered word, or sending too fast).", true);
+    }
+  }
+
   // ---------- Arrow keys and controller move focus between tiles and buttons ----------
   function focusables() {
     const scope = els.player.hidden ? document : els.player;
@@ -435,8 +973,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;
@@ -532,12 +1076,133 @@
     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();
+    $("chat-form").addEventListener("submit", sendChat);
+    bindAdmin();
+    startAnalytics();
+    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();
@@ -546,9 +1211,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();
@@ -556,6 +1231,7 @@
     renderGrid();
     startMarquee();
     route();
+    finishBoot("Done");
   }
 
   init();

package/config.js

@@ -6,7 +6,7 @@ window.RUG_CONFIG = {
 
   // Branch the games live on. jsDelivr caches branches for up to 12h;
   // use a tag like "v1" here if you want instant, permanent URLs.
-  branch: "main",
+  branch: "v1", // a fixed tag on every rug-games repo: jsDelivr caches tags for a year (branches only 12h)
 
   // Where the panic button sends you
   panicUrl: "https://classroom.google.com/",
@@ -14,6 +14,25 @@ window.RUG_CONFIG = {
   // Keys that trigger panic (KeyboardEvent.key values)
   panicKeys: ["`", "]"],
 
+  // Google Analytics 4 measurement ID, e.g. "G-ABC123XYZ" (from analytics.google.com).
+  // Leave null to turn analytics off. Shows visitors, live users and top games in YOUR GA dashboard.
+  googleAnalytics: "G-6VWCQ493PZ", // property "richardsunblockedgames"
+
+  // Live "people online" count on the home page and the chat room. Paste your Firebase web config here
+  // (see SETUP.md). Leave null to hide the count.
+  firebase: {
+    apiKey: "AIzaSyBxVxBFMwlSLx5FGP-Wna3ozHGZEAGXSKs",
+    authDomain: "richardwho-e8f22.firebaseapp.com",
+    databaseURL: "https://richardwho-e8f22-default-rtdb.firebaseio.com",
+    projectId: "richardwho-e8f22",
+    storageBucket: "richardwho-e8f22.firebasestorage.app",
+    messagingSenderId: "991096262738",
+    appId: "1:991096262738:web:8b6460399396051ee6cf8b",
+  },
+
+  // 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",

package/index.html

@@ -11,9 +11,24 @@
   <script>
     // Apply saved theme before paint so there's no flash
     try { document.documentElement.dataset.theme = localStorage.getItem("rug-theme") || "dark"; } catch (e) {}
+    // Apply the saved tab disguise before anything else shows in the tab
+    try {
+      var s = JSON.parse(localStorage.getItem("rug-settings") || "{}");
+      if (s.tabTitle) document.title = s.tabTitle;
+      if (s.tabIcon) document.getElementById("tab-icon").href = s.tabIcon;
+    } catch (e) {}
   </script>
 </head>
 <body>
+  <!-- Boot screen: shows instantly while the site checks for a newer version and loads the game list -->
+  <div class="boot" id="boot" aria-live="polite">
+    <div class="boot-inner">
+      <div class="boot-word">richardwho</div>
+      <div class="boot-bar"><div class="boot-fill" id="boot-fill"></div></div>
+      <p class="boot-msg" id="boot-msg">Loading… about 3 hours left</p>
+      <p class="boot-ver" id="boot-ver"></p>
+    </div>
+  </div>
   <!-- Soft blue/orange glow behind everything -->
   <div class="aurora" aria-hidden="true"><span class="a1"></span><span class="a2"></span><span class="a3"></span></div>
 
@@ -31,11 +46,17 @@
       <button class="rail-btn" type="button" id="random-btn" title="Random game" aria-label="Random game">
         <svg viewBox="0 0 24 24"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm2.5 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM12 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM7.5 15a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"/></svg>
       </button>
+      <button class="rail-btn" type="button" data-nav="chat" title="Chat" aria-label="Chat">
+        <svg viewBox="0 0 24 24"><path d="M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"/></svg>
+      </button>
       <button class="rail-btn" type="button" data-nav="recent" title="Recently played" aria-label="Recently played">
         <svg viewBox="0 0 24 24"><path d="M13 3a9 9 0 1 1-8.95 10h2.02A7 7 0 1 0 13 5a6.98 6.98 0 0 0-4.94 2.06L10 9H4V3l2.64 2.64A8.97 8.97 0 0 1 13 3Zm-1 5h2v4.6l3.2 1.9-1 1.7L12 13.7V8Z"/></svg>
       </button>
     </div>
     <div class="rail-group bottom">
+      <button class="rail-btn" type="button" data-nav="settings" title="Settings" aria-label="Settings">
+        <svg viewBox="0 0 24 24"><path d="M19.4 13a7.6 7.6 0 0 0 0-2l2.1-1.6-2-3.5-2.5 1a7.4 7.4 0 0 0-1.7-1L15 3.3h-4l-.4 2.6a7.4 7.4 0 0 0-1.7 1l-2.5-1-2 3.5L6.6 11a7.6 7.6 0 0 0 0 2l-2.1 1.6 2 3.5 2.5-1a7.4 7.4 0 0 0 1.7 1l.4 2.6h4l.4-2.6a7.4 7.4 0 0 0 1.7-1l2.5 1 2-3.5L19.4 13ZM13 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"/></svg>
+      </button>
       <button class="rail-btn" type="button" id="theme-btn" title="Toggle theme" aria-label="Toggle theme">
         <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8A9.4 9.4 0 0 0 12 3Z"/></svg>
       </button>
@@ -59,6 +80,7 @@
         <span class="sweep" aria-hidden="true"></span>
       </form>
       <p class="home-sub" id="home-sub"></p>
+      <p class="online" id="online" hidden><span class="online-dot"></span><span id="online-count"></span></p>
     </section>
 
     <!-- GAMES -->
@@ -109,8 +131,110 @@
         <p class="empty" id="empty" hidden>No games match that search.</p>
       </section>
     </section>
+
+    <!-- CHAT -->
+    <section id="view-chat" class="view chat" hidden>
+      <header class="games-head"><div><h1>Chat</h1><p class="lede">Be nice. Messages are filtered, and links and personal info are blocked.</p></div></header>
+      <div class="chat-box">
+        <div class="chat-off" id="chat-off" hidden>
+          <p><strong>Chat isn't switched on yet.</strong></p>
+          <p>It needs the site's free Firebase database (see SETUP.md).</p>
+        </div>
+        <div class="chat-log" id="chat-log" aria-live="polite"></div>
+        <form class="chat-form" id="chat-form" autocomplete="off" hidden>
+          <input id="chat-name" class="chat-name" maxlength="16" placeholder="Nickname" spellcheck="false" aria-label="Nickname">
+          <input id="chat-text" class="chat-text" maxlength="200" placeholder="Say something…" aria-label="Message">
+          <button class="pill-btn" type="submit" id="chat-send">Send</button>
+        </form>
+        <p class="chat-note" id="chat-note"></p>
+      </div>
+    </section>
+
+    <!-- SETTINGS -->
+    <section id="view-settings" class="view settings" hidden>
+      <header class="games-head"><div><h1>Settings</h1><p class="lede">Saved on this device only.</p></div></header>
+
+      <div class="set-group">
+        <h2>Tab disguise</h2>
+        <p class="set-help">What the browser tab and your history show instead of the site's name.</p>
+        <div class="disguises" id="disguises"></div>
+      </div>
+
+      <div class="set-group">
+        <h2>Panic button</h2>
+        <label class="set-row"><span>Goes to</span>
+          <select id="set-panic-url">
+            <option value="https://classroom.google.com/">Google Classroom</option>
+            <option value="https://docs.google.com/">Google Docs</option>
+            <option value="https://drive.google.com/">Google Drive</option>
+            <option value="https://www.google.com/">Google</option>
+            <option value="custom">Custom website…</option>
+          </select>
+        </label>
+        <label class="set-row" id="set-panic-custom-row" hidden><span>Custom website</span>
+          <input id="set-panic-custom" type="url" placeholder="https://…" spellcheck="false">
+        </label>
+        <div class="set-row"><span>Panic key</span>
+          <button class="pill-btn key-btn" type="button" id="set-panic-key">`</button>
+          <small class="set-hint" id="set-panic-key-hint">Click, then press any key</small>
+        </div>
+      </div>
+
+      <div class="set-group">
+        <h2>Look &amp; feel</h2>
+        <label class="set-row"><span>Theme</span>
+          <select id="set-theme"><option value="dark">Dark</option><option value="light">Light</option></select>
+        </label>
+        <label class="set-row"><span>Clock</span>
+          <select id="set-clock"><option value="12">12-hour</option><option value="24">24-hour</option></select>
+        </label>
+        <label class="set-row"><span>Games per row</span>
+          <select id="set-per-row"><option>5</option><option>6</option><option>7</option><option>8</option></select>
+        </label>
+        <label class="set-row"><span>Typing search box</span><input type="checkbox" id="set-typing"></label>
+        <label class="set-row"><span>Funny loading screen</span><input type="checkbox" id="set-boot"></label>
+      </div>
+
+      <div class="set-group" id="admin-group" hidden>
+        <h2>Chat admin</h2>
+        <p class="set-help">Admins can delete chat messages and ban people. To become admin, type the admin code as your chat nickname and press Send. Your messages then show as Richard.</p>
+        <div class="set-row"><span id="admin-status">Not an admin on this browser</span>
+          <button class="pill-btn" type="button" id="admin-leave" hidden>Stop being admin here</button>
+        </div>
+        <div class="set-row" id="admin-tools-row" hidden><span>Chat</span>
+          <button class="pill-btn danger" type="button" id="admin-clear">Clear all chat</button>
+        </div>
+      </div>
+
+      <div class="set-group">
+        <h2>Your data</h2>
+        <div class="set-row"><span>Recently played</span><button class="pill-btn" type="button" id="set-clear-recent">Clear</button></div>
+        <div class="set-row"><span>All settings</span><button class="pill-btn danger" type="button" id="set-reset">Reset to default</button></div>
+      </div>
+    </section>
   </main>
 
+  <!-- RANDOM GAME WHEEL -->
+  <div class="wheel-wrap" id="wheel-wrap" hidden role="dialog" aria-label="Random game wheel">
+    <div class="wheel-card">
+      <button class="wheel-x" type="button" id="wheel-close" aria-label="Close">✕</button>
+      <h2>Spin for a game</h2>
+      <div class="wheel-stage">
+        <div class="wheel-pointer" aria-hidden="true"></div>
+        <canvas id="wheel" width="720" height="720"></canvas>
+      </div>
+      <div class="wheel-result" id="wheel-result" hidden>
+        <div class="wheel-result-art" id="wheel-result-art"></div>
+        <div><p class="wheel-result-label">You got</p><p class="wheel-result-name" id="wheel-result-name"></p></div>
+      </div>
+      <div class="wheel-actions">
+        <button class="pill-btn" type="button" id="wheel-skip">Skip ⏭</button>
+        <button class="pill-btn" type="button" id="wheel-again" hidden>Spin again</button>
+        <button class="pill-btn play" type="button" id="wheel-play" hidden>▶ Play</button>
+      </div>
+    </div>
+  </div>
+
   <!-- PLAYER -->
   <section class="player" id="player" hidden aria-label="Game player">
     <div class="player-bar">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ywkrlerche/richardwho",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "Richards Unblocked Games",
   "license": "UNLICENSED",
   "files": [

package/style.css

@@ -45,6 +45,20 @@ button { cursor: pointer; }
 kbd { font: 600 11px ui-monospace, Consolas, monospace; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--soft); }
 :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
 
+/* ---------- Boot screen ---------- */
+.boot {
+  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
+  background: radial-gradient(60vw 30vh at 50% 30%, var(--glow-blue), transparent 70%), var(--bg);
+  transition: opacity .35s ease, visibility .35s;
+}
+.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
+.boot-inner { width: min(420px, 86vw); text-align: center; }
+.boot-word { font-size: clamp(44px, 8vw, 72px); font-weight: 800; letter-spacing: -.055em; margin-bottom: 26px; }
+.boot-bar { height: 3px; background: var(--soft-2); overflow: hidden; border-radius: 3px; }
+.boot-fill { height: 100%; width: 0; background: var(--text); transition: width .25s ease; }
+.boot-msg { margin: 14px 0 0; color: var(--muted); font-size: 13px; min-height: 1.4em; font-variant-numeric: tabular-nums; }
+.boot-ver { margin: 6px 0 0; color: var(--muted); font-size: 11px; opacity: .6; min-height: 1.2em; }
+
 /* ---------- Aurora glow ---------- */
 .aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
 .aurora span { position: absolute; border-radius: 50%; filter: blur(90px); }
@@ -179,6 +193,80 @@ body:has(#view-games:not([hidden])) .aurora { opacity: .7; }
 .marquee .tile { width: clamp(300px, 28vw, 440px); aspect-ratio: 16 / 9; flex: none; }
 .marquee .tile-label { font-size: 17px; bottom: 14px; left: 16px; }
 
+/* ---------- Online count (home) ---------- */
+.online { margin: 10px 0 0; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
+.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 2s infinite; }
+@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
+
+/* ---------- Settings ---------- */
+.settings { padding-top: 26px; padding-bottom: 60px; max-width: 760px; }
+.set-group { border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--panel) 85%, transparent); padding: 18px 20px; margin-bottom: 16px; }
+.set-group h2 { margin: 0 0 4px; font-size: 16px; }
+.set-help { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
+.set-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
+.set-group h2 + .set-row { margin-top: 10px; }
+.set-row > span { flex: 1; font-size: 14px; }
+.set-row select, .set-row input[type="url"] { height: 36px; min-width: 200px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel); color: var(--text); }
+.set-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--text); }
+.set-hint { color: var(--muted); font-size: 12px; }
+.settings .pill-btn { color: var(--text); border-color: var(--line-2); background: var(--soft); }
+.key-btn { min-width: 64px; font-family: ui-monospace, Consolas, monospace; }
+.key-btn.listening { border-color: var(--text); }
+.disguises { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
+.disguise {
+  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; text-align: left;
+  border: 1px solid var(--line-2); background: var(--soft); color: var(--text); font-size: 13px; font-weight: 600;
+}
+.disguise img { width: 18px; height: 18px; flex: none; }
+.disguise .none-icon { width: 18px; height: 18px; flex: none; display: grid; place-items: center; font-size: 13px; }
+.disguise[aria-pressed="true"] { border-color: var(--text); background: var(--soft-2); box-shadow: inset 0 0 0 1px var(--text); }
+
+/* ---------- Chat ---------- */
+.chat { padding-top: 26px; padding-bottom: 40px; max-width: 820px; }
+.chat-box { border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--panel) 88%, transparent); display: flex; flex-direction: column; height: min(68vh, 640px); }
+.chat-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
+.chat-msg { font-size: 14px; line-height: 1.4; word-wrap: break-word; }
+.chat-msg .who { font-weight: 700; margin-right: 6px; }
+.chat-msg .when { color: var(--muted); font-size: 11px; margin-left: 6px; }
+.chat-msg.me .who { text-decoration: underline; text-underline-offset: 3px; }
+.chat-empty { color: var(--muted); font-size: 13px; text-align: center; margin: auto; }
+.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
+.chat-form input { height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); color: var(--text); }
+.chat-name { width: 130px; flex: none; }
+.chat-text { flex: 1; min-width: 0; }
+.chat .pill-btn { color: var(--bg); background: var(--text); border-color: var(--text); height: 40px; padding: 0 18px; }
+.chat-note { margin: 0; padding: 0 12px 10px; min-height: 1.3em; color: var(--muted); font-size: 12px; }
+.chat-note.err { color: var(--danger); }
+.chat-off { margin: auto; text-align: center; color: var(--muted); padding: 30px; }
+.chat-off p { margin: 4px 0; }
+.chat-msg .mod { display: none; margin-left: 8px; border: 1px solid var(--line-2); background: var(--soft); color: var(--text); border-radius: 3px; font-size: 11px; padding: 1px 6px; }
+.chat-msg .mod:hover { background: color-mix(in srgb, var(--danger) 30%, transparent); }
+.chat-log.admin .chat-msg .mod { display: inline-block; }
+.chat-msg .badge-admin { color: #facc15; font-size: 11px; font-weight: 700; margin-right: 6px; }
+.admin-id { font: 12px ui-monospace, Consolas, monospace; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 4px; user-select: all; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
+@media (max-width: 720px) { .chat-name { width: 90px; } }
+
+/* ---------- Random game wheel ---------- */
+.wheel-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); }
+.wheel-card { position: relative; width: min(440px, 100%); text-align: center; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; padding: 20px 20px 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
+.wheel-card h2 { margin: 0 0 12px; font-size: 18px; }
+.wheel-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 16px; }
+.wheel-x:hover { color: var(--text); background: var(--soft); }
+.wheel-stage { position: relative; width: min(360px, 78vw); aspect-ratio: 1; margin: 0 auto; }
+.wheel-stage canvas { width: 100%; height: 100%; display: block; }
+.wheel-pointer {
+  position: absolute; left: 50%; top: -6px; z-index: 1; width: 0; height: 0; transform: translateX(-50%);
+  border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid var(--text);
+  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
+}
+.wheel-result { display: flex; align-items: center; gap: 12px; margin: 16px auto 0; padding: 10px; border: 1px solid var(--line-2); border-radius: 6px; text-align: left; max-width: 340px; }
+.wheel-result-art { width: 64px; aspect-ratio: 4/3; border-radius: 4px; flex: none; background: #222 center / cover no-repeat; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
+.wheel-result-label { margin: 0; color: var(--muted); font-size: 12px; }
+.wheel-result-name { margin: 2px 0 0; font-size: 16px; font-weight: 800; }
+.wheel-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
+.wheel-card .pill-btn { color: var(--text); border-color: var(--line-2); background: var(--soft); height: 38px; padding: 0 18px; }
+.wheel-card .pill-btn.play { background: var(--text); color: var(--bg); border-color: var(--text); }
+
 /* ---------- Player ---------- */
 .player { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #000; }
 .player-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #0a0a0c; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }