@ywkrlerche/richardwho 1.0.27 → 1.0.28

package/app.js

@@ -222,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.
@@ -257,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);
@@ -276,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.
@@ -339,7 +385,10 @@
       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();
@@ -347,11 +396,14 @@
     document.body.classList.remove("playing");
     document.title = tabTitle();
     const h = location.hash;
-    const view = h === "#games" || h === "#recent" ? "games" : h === "#settings" ? "settings" : "home";
+    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";
-    if (view === "settings") renderSettings();
+    $("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();
@@ -621,18 +673,51 @@
     $("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() {
-    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 app = await getFirebase();
+      if (!app) return;
       const db = app.database();
       const me = db.ref("online").push();
       db.ref(".info/connected").on("value", (snap) => {
@@ -650,6 +735,216 @@
     }
   }
 
+  // ---------- 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;
@@ -901,6 +1196,9 @@
     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));
@@ -933,7 +1231,7 @@
     renderGrid();
     startMarquee();
     route();
-    finishBoot("Done! (that was not 3 hours)");
+    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,9 +14,21 @@ 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
+  // 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: null,
+  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",

package/index.html

@@ -46,6 +46,9 @@
       <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>
@@ -129,6 +132,24 @@
       </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>
@@ -174,6 +195,17 @@
         <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>

package/package.json

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

package/style.css

@@ -221,6 +221,31 @@ body:has(#view-games:not([hidden])) .aurora { opacity: .7; }
 .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); }