@ywkrlerche/richardwho 0.0.0-stage → 1.0.23

package/app.js

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

package/config.js

@@ -0,0 +1,20 @@
+// ===== Richards Unblocked Games: settings =====
+// The only file you normally need to edit.
+window.RUG_CONFIG = {
+  // Your GitHub username (the account that owns the rug-games-N repos)
+  githubUser: "Kingston5390",
+
+  // 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",
+
+  // Where the panic button sends you
+  panicUrl: "https://classroom.google.com/",
+
+  // Keys that trigger panic (KeyboardEvent.key values)
+  panicKeys: ["`", "]"],
+
+  // 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,
+};