404game 0.1.0

package/dist/404game.js

@@ -0,0 +1,571 @@
+const j = /* @__PURE__ */ new Set([" ", "Spacebar", "Enter"]), J = /* @__PURE__ */ new Set(["ArrowUp", "w", "W"]), Q = /* @__PURE__ */ new Set(["ArrowDown", "s", "S"]), Z = /* @__PURE__ */ new Set(["ArrowLeft", "a", "A"]), ee = /* @__PURE__ */ new Set(["ArrowRight", "d", "D"]), F = 30;
+class te {
+  constructor(e) {
+    this.state = {
+      up: !1,
+      down: !1,
+      left: !1,
+      right: !1,
+      action: !1,
+      actionPressed: !1,
+      swipe: null,
+      tap: !1
+    }, this.actionWasPressed = !1, this.nextSwipe = null, this.nextTap = !1, this.touchStartX = 0, this.touchStartY = 0, this.touchStartTime = 0, this.boundHandlers = [], this.target = e, this.attach();
+  }
+  attach() {
+    const e = (f) => {
+      this.handleKey(f.key, !0) && f.preventDefault();
+    }, t = (f) => {
+      this.handleKey(f.key, !1);
+    }, n = (f) => {
+      const g = f.touches[0];
+      g && (this.touchStartX = g.clientX, this.touchStartY = g.clientY, this.touchStartTime = performance.now(), f.preventDefault());
+    }, o = (f) => {
+      const g = f.changedTouches[0];
+      if (!g) return;
+      const l = g.clientX - this.touchStartX, c = g.clientY - this.touchStartY, a = performance.now() - this.touchStartTime, i = Math.abs(l), d = Math.abs(c);
+      i < F && d < F && a < 400 ? (this.nextTap = !0, this.nextSwipe = null, this.actionWasPressed = !0) : i > d ? this.nextSwipe = l > 0 ? "right" : "left" : this.nextSwipe = c > 0 ? "down" : "up", f.preventDefault();
+    }, u = (f) => {
+      this.nextTap = !0, this.actionWasPressed = !0, f.preventDefault();
+    };
+    this.addListener(window, "keydown", e), this.addListener(window, "keyup", t), this.addListener(this.target, "touchstart", n, { passive: !1 }), this.addListener(this.target, "touchend", o, { passive: !1 }), this.addListener(this.target, "mousedown", u);
+  }
+  addListener(e, t, n, o) {
+    e.addEventListener(t, n, o), this.boundHandlers.push({ type: t, fn: n, target: e });
+  }
+  handleKey(e, t) {
+    let n = !1;
+    if (J.has(e))
+      this.state.up = t, n = !0, t && (this.nextSwipe = "up");
+    else if (Q.has(e))
+      this.state.down = t, n = !0, t && (this.nextSwipe = "down");
+    else if (Z.has(e))
+      this.state.left = t, n = !0, t && (this.nextSwipe = "left");
+    else if (ee.has(e))
+      this.state.right = t, n = !0, t && (this.nextSwipe = "right");
+    else if (j.has(e)) {
+      const o = this.state.action;
+      this.state.action = t, t && !o && (this.actionWasPressed = !0), n = !0;
+    }
+    return n;
+  }
+  /** Called by Engine once per frame BEFORE update. */
+  beginFrame() {
+    this.state.actionPressed = this.actionWasPressed, this.state.swipe = this.nextSwipe, this.state.tap = this.nextTap;
+  }
+  /** Called by Engine once per frame AFTER update. */
+  endFrame() {
+    this.actionWasPressed = !1, this.nextSwipe = null, this.nextTap = !1;
+  }
+  destroy() {
+    for (const { target: e, type: t, fn: n } of this.boundHandlers)
+      e.removeEventListener(t, n);
+    this.boundHandlers = [];
+  }
+}
+const p = {
+  clear(s, e, t, n) {
+    s.fillStyle = n.bg, s.fillRect(0, 0, e, t);
+  },
+  rect(s, e, t, n, o, u) {
+    s.fillStyle = u, s.fillRect(e, t, n, o);
+  },
+  circle(s, e, t, n, o) {
+    s.fillStyle = o, s.beginPath(), s.arc(e, t, n, 0, Math.PI * 2), s.fill();
+  },
+  text(s, e, t, n, o = {}) {
+    const u = o.size ?? 16, f = o.bold ? "bold " : "";
+    s.fillStyle = o.color ?? "#fff", s.font = `${f}${u}px ${o.font ?? "monospace"}`, s.textAlign = o.align ?? "left", s.textBaseline = o.baseline ?? "alphabetic", s.fillText(e, t, n);
+  },
+  glow(s, e, t, n) {
+    s.save(), s.shadowColor = e, s.shadowBlur = t, n(), s.restore();
+  }
+};
+class se {
+  constructor(e) {
+    this.rafId = null, this.state = "idle", this.lastTime = 0, this.startTime = 0, this.score = 0, this.loop = () => {
+      if (this.state !== "running") return;
+      const o = performance.now(), u = Math.min(0.05, (o - this.lastTime) / 1e3);
+      this.lastTime = o, this.gameCtx.dt = u, this.gameCtx.time = (o - this.startTime) / 1e3, this.input.beginFrame(), p.clear(this.ctx2d, this.opts.width, this.opts.height, this.opts.theme), this.opts.game.update(this.gameCtx), this.state === "running" && this.opts.game.draw(this.gameCtx), this.input.endFrame(), this.rafId = requestAnimationFrame(this.loop);
+    }, this.opts = e;
+    const t = e.canvas.getContext("2d");
+    if (!t) throw new Error("404game: 2D canvas context unavailable");
+    this.ctx2d = t;
+    const n = window.devicePixelRatio || 1;
+    e.canvas.width = e.width * n, e.canvas.height = e.height * n, e.canvas.style.width = `${e.width}px`, e.canvas.style.height = `${e.height}px`, this.ctx2d.setTransform(n, 0, 0, n, 0, 0), this.input = new te(e.canvas), this.gameCtx = {
+      ctx: this.ctx2d,
+      width: e.width,
+      height: e.height,
+      theme: e.theme,
+      input: this.input.state,
+      dt: 0,
+      time: 0,
+      setScore: (o) => {
+        this.score = o, this.opts.onScore(o);
+      },
+      gameOver: () => this.handleGameOver(),
+      win: () => this.handleWin()
+    };
+  }
+  start() {
+    this.state !== "running" && (this.score = 0, this.opts.onScore(0), this.startTime = performance.now(), this.lastTime = this.startTime, this.state = "running", this.opts.game.init(this.gameCtx), this.loop());
+  }
+  stop() {
+    this.rafId != null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.state = "idle";
+  }
+  isRunning() {
+    return this.state === "running";
+  }
+  handleGameOver() {
+    this.state === "running" && (this.state = "gameover", this.rafId != null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.opts.onGameOver(this.score));
+  }
+  handleWin() {
+    this.state === "running" && (this.state = "won", this.rafId != null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.opts.onWin(this.score));
+  }
+  getInputState() {
+    return this.input.state;
+  }
+  destroy() {
+    var e, t;
+    this.stop(), this.input.destroy(), (t = (e = this.opts.game).destroy) == null || t.call(e);
+  }
+}
+class ne {
+  constructor(e, t) {
+    this.opts = t, this.root = e, this.banner = document.createElement("div"), this.banner.className = "g404-banner", this.banner.innerHTML = `
+      <div class="g404-banner-title">${B(t.message)}</div>
+      <div class="g404-banner-sub">${B(t.subMessage)}</div>
+    `, this.hud = document.createElement("div"), this.hud.className = "g404-hud", this.scoreEl = document.createElement("span"), this.scoreEl.className = "g404-score", this.scoreEl.textContent = "Score: 0", this.highEl = document.createElement("span"), this.highEl.className = "g404-high", this.highEl.textContent = "Best: 0", this.hud.appendChild(this.scoreEl), t.showHighscore && this.hud.appendChild(this.highEl), this.startScreen = document.createElement("div"), this.startScreen.className = "g404-screen g404-start", this.startScreen.innerHTML = `
+      <div class="g404-screen-title">READY?</div>
+      <div class="g404-screen-sub">Press SPACE or TAP to start</div>
+      <button class="g404-btn" type="button">▶ START</button>
+    `, this.startScreen.querySelector("button").addEventListener("click", (n) => {
+      n.stopPropagation(), t.onStart();
+    }), this.gameOverScreen = document.createElement("div"), this.gameOverScreen.className = "g404-screen g404-gameover", this.gameOverScreen.style.display = "none", this.gameOverScreen.innerHTML = `
+      <div class="g404-screen-title">GAME OVER</div>
+      <div class="g404-final-score">Score: <span class="g404-final">0</span></div>
+      <button class="g404-btn" type="button">↻ PLAY AGAIN</button>
+    `, this.finalScoreEl = this.gameOverScreen.querySelector(".g404-final"), this.gameOverScreen.querySelector("button").addEventListener("click", (n) => {
+      n.stopPropagation(), t.onRestart();
+    }), this.injectStyles(t.theme), this.root.appendChild(this.banner), this.root.appendChild(this.hud), this.root.appendChild(this.startScreen), this.root.appendChild(this.gameOverScreen);
+  }
+  injectStyles(e) {
+    if (document.getElementById("g404-styles")) return;
+    const t = document.createElement("style");
+    t.id = "g404-styles", t.textContent = `
+      .g404-root { position: relative; display: inline-block; font-family: ${e.font}; }
+      .g404-banner { text-align: center; padding: 12px 8px 8px; color: ${e.fg}; font-family: ${e.font}; }
+      .g404-banner-title { font-size: 22px; font-weight: bold; letter-spacing: 2px; color: ${e.accent}; text-shadow: 0 0 12px ${e.accent}55; }
+      .g404-banner-sub { font-size: 13px; color: ${e.muted}; margin-top: 4px; }
+      .g404-hud { display: flex; justify-content: space-between; padding: 6px 12px; color: ${e.fg}; font-family: ${e.font}; font-size: 14px; }
+      .g404-score { color: ${e.fg}; }
+      .g404-high { color: ${e.muted}; }
+      .g404-canvas-wrap { position: relative; line-height: 0; }
+      .g404-canvas { display: block; border-radius: 6px; touch-action: none; cursor: pointer; }
+      .g404-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: ${e.bg}cc; backdrop-filter: blur(4px); color: ${e.fg}; font-family: ${e.font}; border-radius: 6px; }
+      .g404-screen-title { font-size: 32px; font-weight: bold; letter-spacing: 3px; color: ${e.accent}; text-shadow: 0 0 16px ${e.accent}88; }
+      .g404-screen-sub { font-size: 14px; color: ${e.muted}; }
+      .g404-final-score { font-size: 18px; color: ${e.fg}; }
+      .g404-final { color: ${e.accent}; font-weight: bold; }
+      .g404-btn { background: ${e.accent}; color: ${e.bg}; border: none; padding: 12px 28px; font-size: 16px; font-weight: bold; letter-spacing: 1px; border-radius: 6px; cursor: pointer; font-family: ${e.font}; transition: transform 0.1s, box-shadow 0.2s; }
+      .g404-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px ${e.accent}66; }
+      .g404-btn:active { transform: translateY(0); }
+    `, document.head.appendChild(t);
+  }
+  setScore(e) {
+    this.scoreEl.textContent = `Score: ${e}`;
+  }
+  setHighscore(e) {
+    this.highEl.textContent = `Best: ${e}`;
+  }
+  showStart() {
+    this.startScreen.style.display = "flex", this.gameOverScreen.style.display = "none";
+  }
+  hideStart() {
+    this.startScreen.style.display = "none";
+  }
+  showGameOver(e) {
+    this.finalScoreEl.textContent = String(e), this.gameOverScreen.style.display = "flex", this.startScreen.style.display = "none";
+  }
+  hideGameOver() {
+    this.gameOverScreen.style.display = "none";
+  }
+  destroy() {
+    this.banner.remove(), this.hud.remove(), this.startScreen.remove(), this.gameOverScreen.remove();
+  }
+}
+function B(s) {
+  const e = document.createElement("div");
+  return e.textContent = s, e.innerHTML;
+}
+const K = "404game.hs.", P = {
+  getHighscore(s) {
+    try {
+      const e = localStorage.getItem(K + s);
+      return e && parseInt(e, 10) || 0;
+    } catch {
+      return 0;
+    }
+  },
+  setHighscore(s, e) {
+    try {
+      const t = P.getHighscore(s);
+      if (e > t)
+        return localStorage.setItem(K + s, String(e)), !0;
+    } catch {
+    }
+    return !1;
+  }
+}, V = {
+  neon: {
+    bg: "#0a0a18",
+    fg: "#f0f0ff",
+    accent: "#00ffd5",
+    danger: "#ff3b6b",
+    muted: "#5a5a8a",
+    font: '"Courier New", monospace'
+  },
+  retro: {
+    bg: "#2b1d0e",
+    fg: "#ffe1a8",
+    accent: "#ffaa00",
+    danger: "#d62828",
+    muted: "#8a6b3b",
+    font: '"Courier New", monospace'
+  },
+  minimal: {
+    bg: "#fafafa",
+    fg: "#111111",
+    accent: "#0066ff",
+    danger: "#e63946",
+    muted: "#999999",
+    font: "system-ui, -apple-system, sans-serif"
+  },
+  dark: {
+    bg: "#1a1a1a",
+    fg: "#e8e8e8",
+    accent: "#7c5cff",
+    danger: "#ff5252",
+    muted: "#666666",
+    font: "system-ui, -apple-system, sans-serif"
+  }
+};
+function ie(s) {
+  return V[s ?? "neon"] ?? V.neon;
+}
+const y = 16, X = 0.12;
+function ae() {
+  let s = 0, e = 0, t = [], n = "right", o = "right", u = { x: 0, y: 0 }, f = 0, g = 0;
+  function l() {
+    for (; ; ) {
+      const a = { x: Math.floor(Math.random() * s), y: Math.floor(Math.random() * e) };
+      if (!t.some((i) => i.x === a.x && i.y === a.y)) {
+        u = a;
+        return;
+      }
+    }
+  }
+  function c(a) {
+    ({ up: "down", down: "up", left: "right", right: "left" })[a] !== n && (o = a);
+  }
+  return {
+    name: "snake",
+    init(a) {
+      s = Math.floor(a.width / y), e = Math.floor(a.height / y);
+      const i = Math.floor(s / 2), d = Math.floor(e / 2);
+      t = [{ x: i, y: d }, { x: i - 1, y: d }, { x: i - 2, y: d }], n = "right", o = "right", f = 0, g = 0, l(), a.setScore(0);
+    },
+    update(a) {
+      const { input: i } = a;
+      for (i.swipe === "up" || i.up ? c("up") : i.swipe === "down" || i.down ? c("down") : i.swipe === "left" || i.left ? c("left") : (i.swipe === "right" || i.right) && c("right"), f += a.dt; f >= X; ) {
+        f -= X, n = o;
+        const d = t[0], r = { x: d.x, y: d.y };
+        if (n === "up" ? r.y -= 1 : n === "down" ? r.y += 1 : n === "left" ? r.x -= 1 : n === "right" && (r.x += 1), r.x < 0 || r.x >= s || r.y < 0 || r.y >= e) {
+          a.gameOver();
+          return;
+        }
+        if (t.some((h) => h.x === r.x && h.y === r.y)) {
+          a.gameOver();
+          return;
+        }
+        t.unshift(r), r.x === u.x && r.y === u.y ? (g += 10, a.setScore(g), l()) : t.pop();
+      }
+    },
+    draw(a) {
+      const { ctx: i, theme: d } = a;
+      i.strokeStyle = d.muted + "22", i.lineWidth = 1;
+      for (let r = 0; r <= s; r++)
+        i.beginPath(), i.moveTo(r * y, 0), i.lineTo(r * y, e * y), i.stroke();
+      for (let r = 0; r <= e; r++)
+        i.beginPath(), i.moveTo(0, r * y), i.lineTo(s * y, r * y), i.stroke();
+      p.glow(i, d.danger, 12, () => {
+        p.circle(i, u.x * y + y / 2, u.y * y + y / 2, y / 2 - 2, d.danger);
+      }), p.glow(i, d.accent, 8, () => {
+        for (let r = 0; r < t.length; r++) {
+          const h = t[r];
+          p.rect(i, h.x * y + 1, h.y * y + 1, y - 2, y - 2, r === 0 ? d.accent : d.accent + "cc");
+        }
+      });
+    }
+  };
+}
+const re = 1400, oe = -380, O = 50, k = 130, L = 200, q = 160, E = 12;
+function ce() {
+  let s = 0, e = 0, t = 0, n = [], o = 0, u = 0;
+  return {
+    name: "flappy",
+    init(f) {
+      e = f.width * 0.25, s = f.height / 2, t = 0, n = [], o = 0, u = L, f.setScore(0);
+    },
+    update(f) {
+      const { input: g, dt: l, width: c, height: a } = f;
+      if ((g.actionPressed || g.tap || g.swipe === "up") && (t = oe), t += re * l, s += t * l, s > a - E || s < E) {
+        f.gameOver();
+        return;
+      }
+      if (u += q * l, u >= L) {
+        u -= L;
+        const i = 60 + Math.random() * (a - 120 - k);
+        n.push({ x: c + O, gapY: i, passed: !1 });
+      }
+      for (const i of n)
+        if (i.x -= q * l, !i.passed && i.x + O < e && (i.passed = !0, o += 1, f.setScore(o)), e + E > i.x && e - E < i.x + O && (s - E < i.gapY || s + E > i.gapY + k)) {
+          f.gameOver();
+          return;
+        }
+      n = n.filter((i) => i.x + O > -10);
+    },
+    draw(f) {
+      const { ctx: g, theme: l, height: c } = f;
+      p.glow(g, l.accent, 8, () => {
+        for (const a of n)
+          p.rect(g, a.x, 0, O, a.gapY, l.accent), p.rect(g, a.x, a.gapY + k, O, c - (a.gapY + k), l.accent);
+      }), p.glow(g, l.danger, 12, () => {
+        p.circle(g, e, s, E, l.danger);
+      }), p.circle(g, e + 4, s - 3, 2, l.bg);
+    }
+  };
+}
+const T = 80, M = 10, H = 30, z = 420, S = 6, C = 280, he = 5, Y = 8;
+function le() {
+  let s = 0, e = 0, t = 0, n = 0, o = 0, u = [], f = 0, g = !1;
+  return {
+    name: "breakout",
+    init(l) {
+      s = l.width / 2 - T / 2, e = l.width / 2, t = l.height - H - M - S - 1, n = 0, o = 0, g = !1, f = 0, l.setScore(0), u = [];
+      const c = 6, a = 40, i = (l.width - c * (Y + 1)) / Y, d = 16, r = [l.theme.danger, l.theme.accent, l.theme.fg, l.theme.accent, l.theme.danger];
+      for (let h = 0; h < he; h++)
+        for (let m = 0; m < Y; m++)
+          u.push({
+            x: c + m * (i + c),
+            y: a + h * (d + c),
+            w: i,
+            h: d,
+            alive: !0,
+            color: r[h] ?? l.theme.accent
+          });
+    },
+    update(l) {
+      const { input: c, dt: a, width: i, height: d } = l;
+      c.left && (s -= z * a), c.right && (s += z * a), c.swipe === "left" && (s -= 40), c.swipe === "right" && (s += 40), s = Math.max(0, Math.min(i - T, s));
+      const r = d - H - M;
+      if (!g) {
+        if (e = s + T / 2, t = r - S - 1, c.actionPressed || c.tap) {
+          g = !0;
+          const h = -Math.PI / 2 + (Math.random() - 0.5) * 0.6;
+          n = Math.cos(h) * C, o = Math.sin(h) * C;
+        }
+        return;
+      }
+      if (e += n * a, t += o * a, e < S && (e = S, n = -n), e > i - S && (e = i - S, n = -n), t < S && (t = S, o = -o), t + S >= r && t - S <= r + M && e >= s && e <= s + T && o > 0) {
+        o = -Math.abs(o), n = (e - (s + T / 2)) / (T / 2) * C * 0.9;
+        const m = Math.sqrt(n * n + o * o), b = C;
+        n = n / m * b, o = o / m * b;
+      }
+      for (const h of u)
+        if (h.alive && e + S > h.x && e - S < h.x + h.w && t + S > h.y && t - S < h.y + h.h) {
+          h.alive = !1, f += 10, l.setScore(f);
+          const m = Math.min(e + S - h.x, h.x + h.w - (e - S)), b = Math.min(t + S - h.y, h.y + h.h - (t - S));
+          m < b ? n = -n : o = -o;
+          break;
+        }
+      if (u.every((h) => !h.alive)) {
+        l.win();
+        return;
+      }
+      if (t > d + 20) {
+        l.gameOver();
+        return;
+      }
+    },
+    draw(l) {
+      const { ctx: c, theme: a, height: i } = l;
+      for (const r of u)
+        r.alive && p.glow(c, r.color, 6, () => {
+          p.rect(c, r.x, r.y, r.w, r.h, r.color);
+        });
+      const d = i - H - M;
+      p.glow(c, a.accent, 8, () => {
+        p.rect(c, s, d, T, M, a.accent);
+      }), p.glow(c, a.fg, 10, () => {
+        p.circle(c, e, t, S, a.fg);
+      }), g || p.text(c, "Press SPACE / TAP to launch", l.width / 2, l.height - 8, {
+        color: a.muted,
+        size: 11,
+        font: a.font,
+        align: "center"
+      });
+    }
+  };
+}
+const de = 2200, fe = -780, $ = 24, I = 28, ge = 30, R = 240;
+function ue() {
+  let s = 0, e = 0, t = 0, n = 0, o = [], u = 0, f = 0, g = 0, l = R;
+  return {
+    name: "dino",
+    init(c) {
+      s = 60, n = c.height - ge, e = n - I, t = 0, o = [], u = 0.8, f = 0, g = 0, l = R, c.setScore(0);
+    },
+    update(c) {
+      const { input: a, dt: i, width: d } = c, r = e >= n - I;
+      if ((a.actionPressed || a.tap || a.swipe === "up") && r && (t = fe), t += de * i, e += t * i, e > n - I && (e = n - I, t = 0), l += i * 8, g += i * 10, g >= 1) {
+        const h = Math.floor(g);
+        g -= h, f += h, c.setScore(f);
+      }
+      if (u -= i, u <= 0) {
+        const h = 22 + Math.random() * 28, m = 12 + Math.random() * 16;
+        o.push({ x: d + 20, w: m, h }), u = 0.7 + Math.random() * 0.9 - Math.min(0.4, (l - R) / 1e3), u < 0.4 && (u = 0.4);
+      }
+      for (const h of o) h.x -= l * i;
+      o = o.filter((h) => h.x + h.w > -10);
+      for (const h of o) {
+        const m = h.x, b = n - h.h;
+        if (s + $ > m && s < m + h.w && e + I > b && e < b + h.h) {
+          c.gameOver();
+          return;
+        }
+      }
+    },
+    draw(c) {
+      const { ctx: a, theme: i, width: d } = c;
+      a.strokeStyle = i.muted, a.lineWidth = 1, a.beginPath(), a.moveTo(0, n + 0.5), a.lineTo(d, n + 0.5), a.stroke();
+      for (let r = 0; r < 20; r++) {
+        const h = r * 40 - c.time * 80 % 40;
+        p.rect(a, h, n + 4, 16, 2, i.muted);
+      }
+      p.glow(a, i.danger, 6, () => {
+        for (const r of o)
+          p.rect(a, r.x, n - r.h, r.w, r.h, i.danger);
+      }), p.glow(a, i.accent, 10, () => {
+        p.rect(a, s, e, $, I, i.accent);
+      }), p.rect(a, s + $ - 7, e + 6, 3, 3, i.bg);
+    }
+  };
+}
+const me = "0.1.0", _ = {
+  snake: ae,
+  flappy: ce,
+  breakout: le,
+  dino: ue
+}, A = /* @__PURE__ */ new WeakMap();
+function U(s) {
+  const e = typeof s == "string" ? document.querySelector(s) : s;
+  if (!e) throw new Error(`404game: target not found: ${String(s)}`);
+  return e;
+}
+function G(s) {
+  if (!s || s === "random") {
+    const t = Object.keys(_), n = t[Math.floor(Math.random() * t.length)];
+    return { name: n, module: _[n]() };
+  }
+  const e = _[s];
+  if (!e) throw new Error(`404game: unknown game "${s}"`);
+  return { name: s, module: e() };
+}
+function pe(s, e = {}) {
+  const t = U(s), n = A.get(t);
+  n && n.destroy();
+  const o = ie(e.theme), u = e.width ?? (Math.min(t.clientWidth || 480, 720) || 480), f = e.height ?? 360;
+  t.classList.add("g404-root"), t.innerHTML = "";
+  const g = document.createElement("div");
+  g.className = "g404-canvas-wrap";
+  const l = document.createElement("canvas");
+  l.className = "g404-canvas", l.style.background = o.bg, g.appendChild(l), t.appendChild(g);
+  let c = "", a = 0, i = G(e.game);
+  c = i.name;
+  const d = new ne(t, {
+    message: e.message ?? "404 — Page Not Found",
+    subMessage: e.subMessage ?? "But hey, want to play instead?",
+    theme: o,
+    showHighscore: e.showHighscore !== !1,
+    onStart: () => {
+      var w;
+      d.hideStart(), d.hideGameOver(), m.start(), (w = e.onStart) == null || w.call(e);
+    },
+    onRestart: () => {
+      var w;
+      d.hideGameOver(), i = G(e.game), c = i.name, m.destroy(), b(), m.start(), (w = e.onStart) == null || w.call(e);
+    }
+  }), r = t.querySelector(".g404-start"), h = t.querySelector(".g404-gameover");
+  r && g.appendChild(r), h && g.appendChild(h), g.style.position = "relative", d.setHighscore(P.getHighscore(c));
+  let m;
+  function b() {
+    m = new se({
+      canvas: l,
+      theme: o,
+      width: u,
+      height: f,
+      game: i.module,
+      onScore: (w) => {
+        var v;
+        a = w, d.setScore(w), (v = e.onScore) == null || v.call(e, w);
+      },
+      onGameOver: (w) => {
+        var v;
+        P.setHighscore(c, w), d.setHighscore(P.getHighscore(c)), d.showGameOver(w), (v = e.onGameOver) == null || v.call(e, w);
+      },
+      onWin: (w) => {
+        var v;
+        P.setHighscore(c, w), d.setHighscore(P.getHighscore(c)), d.showGameOver(w), (v = e.onWin) == null || v.call(e, w);
+      }
+    });
+  }
+  if (b(), e.autoStart)
+    d.hideStart(), m.start();
+  else {
+    d.showStart();
+    const w = (v) => {
+      var x, D, N;
+      v.preventDefault(), !m.isRunning() && ((D = (x = t.querySelector(".g404-start")) == null ? void 0 : x.checkVisibility) == null ? void 0 : D.call(x)) !== !1 && (r == null ? void 0 : r.style.display) !== "none" && (d.hideStart(), m.start(), (N = e.onStart) == null || N.call(e));
+    };
+    l.addEventListener("click", w), window.addEventListener("keydown", (v) => {
+      var x;
+      (v.key === " " || v.key === "Enter") && !m.isRunning() && (r == null ? void 0 : r.style.display) !== "none" && (v.preventDefault(), d.hideStart(), m.start(), (x = e.onStart) == null || x.call(e));
+    });
+  }
+  const W = {
+    destroy() {
+      m.destroy(), d.destroy(), t.innerHTML = "", t.classList.remove("g404-root"), A.delete(t);
+    },
+    restart() {
+      m.destroy(), i = G(e.game), c = i.name, b(), d.setHighscore(P.getHighscore(c)), d.hideGameOver(), d.hideStart(), m.start();
+    },
+    getScore() {
+      return a;
+    }
+  };
+  return A.set(t, W), W;
+}
+function we(s) {
+  const e = U(s), t = A.get(e);
+  t && t.destroy();
+}
+const Se = ["snake", "flappy", "breakout", "dino"], ye = me, be = { mount: pe, unmount: we, games: Se, version: ye };
+export {
+  be as default,
+  Se as games,
+  pe as mount,
+  we as unmount,
+  ye as version
+};
+//# sourceMappingURL=404game.js.map