@mblinkov/whats-missing 20.0.24 → 20.0.25

package/dist/whats-missing.es.js

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as m, Fragment as ze } from "react/jsx-runtime";
-import { useRef as _, useState as c, useEffect as V, useLayoutEffect as se, useMemo as Ce } from "react";
-const ke = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, f) => l.map(([h, i]) => ({
-  src: `${ke}${f}/${i.replace(/\s/g, "%20")}.png`,
-  name: i
-})), Se = [
+import { jsx as t, jsxs as s, Fragment as he } from "react/jsx-runtime";
+import { useRef as U, useState as l, useEffect as oe, useLayoutEffect as re, useMemo as pe } from "react";
+const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i, y) => i.map(([m, o]) => ({
+  src: `${fe}${y}/${o.replace(/\s/g, "%20")}.png`,
+  name: o
+})), ye = [
   ["apple", "apple"],
   ["banana", "banana"],
   ["bread", "bread"],
@@ -29,7 +29,7 @@ const ke = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, f) => l
   ["strawberry", "strawberry"],
   ["tomato", "tomato"],
   ["watermelon", "watermelon"]
-], Te = [
+], xe = [
   ["bear", "bear"],
   ["cat", "cat"],
   ["crocodile", "crocodile"],
@@ -49,7 +49,7 @@ const ke = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, f) => l
   ["tortoise", "tortoise"],
   ["wolf", "wolf"],
   ["zebra", "zebra"]
-], Me = [
+], be = [
   ["ball", "ball"],
   ["balloon", "balloon"],
   ["blocks", "blocks"],
@@ -69,21 +69,21 @@ const ke = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, f) => l
   ["teddy_bear", "teddy bear"],
   ["yo-yo", "yo-yo"],
   ["crayons", "crayons"]
-], re = {
-  food: Y(Se, "food"),
-  animals: Y(Te, "animals"),
-  toys: Y(Me, "toys")
-}, Re = `
+], ie = {
+  food: P(ye, "food"),
+  animals: P(xe, "animals"),
+  toys: P(be, "toys")
+}, we = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
 `;
 if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
-  const l = document.createElement("style");
-  l.id = "spin-keyframes", l.innerHTML = Re, document.head.appendChild(l);
+  const i = document.createElement("style");
+  i.id = "spin-keyframes", i.innerHTML = we, document.head.appendChild(i);
 }
-const Ee = {
+const ve = {
   animation: "spin 1.4s linear infinite"
 }, n = {
   gmCenterScreen: {
@@ -236,188 +236,167 @@ const Ee = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...Ee
+    ...ve
   }
-}, Ie = () => {
-  const l = document.createElement("style");
-  l.textContent = `
-    /* scope only inside game root */
+}, ke = () => {
+  const i = document.createElement("style");
+  i.textContent = `
     #whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
     #whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
-  `, document.head.appendChild(l);
-}, Be = (l, f) => {
-  const h = Array.from({ length: l.length + 1 }, () => Array(f.length + 1).fill(0));
-  for (let i = 0; i <= l.length; i++) h[i][0] = i;
-  for (let i = 0; i <= f.length; i++) h[0][i] = i;
-  for (let i = 1; i <= l.length; i++)
-    for (let u = 1; u <= f.length; u++)
-      h[i][u] = l[i - 1] === f[u - 1] ? h[i - 1][u - 1] : Math.min(h[i - 1][u - 1], h[i][u - 1], h[i - 1][u]) + 1;
-  return h[l.length][f.length];
+  `, document.head.appendChild(i);
+}, Ce = (i, y) => {
+  const m = Array.from({ length: i.length + 1 }, () => Array(y.length + 1).fill(0));
+  for (let o = 0; o <= i.length; o++) m[o][0] = o;
+  for (let o = 0; o <= y.length; o++) m[0][o] = o;
+  for (let o = 1; o <= i.length; o++)
+    for (let g = 1; g <= y.length; g++)
+      m[o][g] = i[o - 1] === y[g - 1] ? m[o - 1][g - 1] : Math.min(m[o - 1][g - 1], m[o][g - 1], m[o - 1][g]) + 1;
+  return m[i.length][y.length];
 };
-function Le(l, f = { minDesktopWidth: 1200, forceResize: !1 }) {
-  const h = _(null), i = f.minDesktopWidth ?? 1200, u = !!f.forceResize;
-  se(() => {
-    if (typeof window > "u" || !l || !l.current) return;
-    const s = l.current, S = () => {
+function ze(i, y = { minDesktopWidth: 1200, forceResize: !1 }) {
+  const m = U(null), o = y.minDesktopWidth ?? 1200, g = !!y.forceResize;
+  re(() => {
+    if (typeof window > "u" || !i || !i.current) return;
+    const d = i.current, B = () => {
       try {
-        const r = document.body, b = getComputedStyle(r), y = parseFloat(r.style && r.style.zoom || "");
-        if (y && !isNaN(y) && y > 0) return y;
-        const T = parseFloat(b.zoom || "");
+        const a = document.body, u = getComputedStyle(a), T = parseFloat(a.style && a.style.zoom || "");
         if (T && !isNaN(T) && T > 0) return T;
-        const a = document.createElement("div");
-        a.style.position = "absolute", a.style.left = "0", a.style.top = "0", a.style.width = "100px", a.style.height = "1px", a.style.visibility = "hidden", a.style.pointerEvents = "none", document.documentElement.appendChild(a);
-        const C = a.getBoundingClientRect();
-        if (document.documentElement.removeChild(a), C && C.width > 0) {
-          const M = C.width / 100;
-          if (!isNaN(M) && M > 0) return M;
+        const k = parseFloat(u.zoom || "");
+        if (k && !isNaN(k) && k > 0) return k;
+        const h = document.createElement("div");
+        h.style.position = "absolute", h.style.left = "0", h.style.top = "0", h.style.width = "100px", h.style.height = "1px", h.style.visibility = "hidden", h.style.pointerEvents = "none", document.documentElement.appendChild(h);
+        const x = h.getBoundingClientRect();
+        if (document.documentElement.removeChild(h), x && x.width > 0) {
+          const A = x.width / 100;
+          if (!isNaN(A) && A > 0) return A;
         }
       } catch {
       }
       return 1;
-    }, H = () => {
-      if (i && window.innerWidth < i) {
-        z();
+    }, C = () => {
+      if (o && window.innerWidth < o) {
+        I();
         return;
       }
-      const r = S();
-      if (!r || r === 1) {
-        z();
+      const a = B();
+      if (!a || a === 1) {
+        I();
         return;
       }
-      h.current || (h.current = {
-        transform: s.style.transform || null,
-        transformOrigin: s.style.transformOrigin || null,
-        width: s.style.width || null,
-        height: s.style.height || null,
-        willChange: s.style.willChange || null
+      m.current || (m.current = {
+        transform: d.style.transform || null,
+        transformOrigin: d.style.transformOrigin || null,
+        width: d.style.width || null,
+        height: d.style.height || null,
+        willChange: d.style.willChange || null
       });
-      const b = 1 / r;
-      u && (s.style.width = `${r * 100}%`, s.style.height = `${r * 100}%`), s.style.transformOrigin = "50% 50%", s.style.transform = `scale(${b})`, s.style.willChange = "transform", typeof process < "u" && process.env?.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] applied scale:", { scale: r, inv: b, forceResize: u });
-    }, z = () => {
-      if (!h.current) return;
-      const r = h.current;
-      r.transform === null ? s.style.removeProperty("transform") : s.style.transform = r.transform, r.transformOrigin === null ? s.style.removeProperty("transform-origin") : s.style.transformOrigin = r.transformOrigin, r.width === null ? s.style.removeProperty("width") : s.style.width = r.width, r.height === null ? s.style.removeProperty("height") : s.style.height = r.height, r.willChange === null ? s.style.removeProperty("will-change") : s.style.willChange = r.willChange, h.current = null, typeof process < "u" && process.env?.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] restored original styles");
+      const u = 1 / a;
+      g && (d.style.width = `${a * 100}%`, d.style.height = `${a * 100}%`), d.style.transformOrigin = "50% 50%", d.style.transform = `scale(${u})`, d.style.willChange = "transform";
+    }, I = () => {
+      if (!m.current) return;
+      const a = m.current;
+      d.style.transform = a.transform ?? "", d.style.transformOrigin = a.transformOrigin ?? "", d.style.width = a.width ?? "", d.style.height = a.height ?? "", d.style.willChange = a.willChange ?? "", m.current = null;
     };
-    let E = 0;
-    const x = () => {
-      cancelAnimationFrame(E), E = requestAnimationFrame(H);
-    }, I = new MutationObserver((r) => {
-      for (const b of r)
-        if (b.type === "attributes" && (b.attributeName === "style" || b.attributeName === "class")) {
-          x();
+    let v = 0;
+    const z = () => {
+      cancelAnimationFrame(v), v = requestAnimationFrame(C);
+    }, S = new MutationObserver((a) => {
+      for (const u of a)
+        if (u.type === "attributes" && (u.attributeName === "style" || u.attributeName === "class")) {
+          z();
           break;
         }
     });
-    return I.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", x), x(), () => {
-      cancelAnimationFrame(E), I.disconnect(), window.removeEventListener("resize", x), z();
+    return S.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", z), z(), () => {
+      cancelAnimationFrame(v), S.disconnect(), window.removeEventListener("resize", z), I();
     };
-  }, [l, i, u]);
+  }, [i, o, g]);
 }
-function We() {
-  const l = _(null), f = _(null), [h, i] = c(null);
-  Le(l, { minDesktopWidth: 1200, forceResize: !1 }), V(() => (Ie(), () => {
+function Ie({
+  gameCubeSize: i,
+  screenHeight: y,
+  screenWidth: m
+}) {
+  const o = U(null), g = U(null), [d, B] = l(null);
+  ze(o, { minDesktopWidth: 1200, forceResize: !1 }), oe(() => (ke(), () => {
     document.body.style.overflow = "";
   }), []);
-  const [u, s] = c(null), [S, H] = c([]), [z, E] = c(4), [x, I] = c(!1), [r, b] = c(1), [y, T] = c(null), [a, C] = c("ready"), [M, Z] = c(3), [j, F] = c(10), [O, K] = c(20), [le, $] = c(0), [A, D] = c(!1), [W, U] = c(""), [R, G] = c(!1), [P, J] = c(!1), [Q, B] = c(null), [ae, q] = c([]), [de, X] = c([]), [w, ce] = c(!1), [L, ee] = c(null);
-  se(() => {
-    const e = f.current;
+  const [C, I] = l(null), [v, z] = l([]), [S, a] = l(4), [u, T] = l(!1), [k, h] = l(1), [x, A] = l(null), [b, L] = l("ready"), [V, Z] = l(3), [F, $] = l(10), [G, _] = l(20), [se, N] = l(0), [j, O] = l(!1), [E, K] = l(""), [M, D] = l(!1), [q, J] = l(!1), [Q, W] = l(null), [le, Y] = l([]), [ae, X] = l([]), [w, Se] = l(!1);
+  re(() => {
+    const e = g.current;
     if (!e || typeof window > "u") return;
-    let o = null;
+    let r = null;
     try {
-      o = new ResizeObserver((g) => {
-        for (const d of g) {
-          const p = d.contentRect;
-          i(Math.round(Math.min(p.width, p.height)));
+      r = new ResizeObserver((p) => {
+        for (const c of p) {
+          const f = c.contentRect;
+          B(Math.round(Math.min(f.width, f.height)));
         }
-      }), o.observe(e), i(Math.round(Math.min(e.clientWidth, e.clientHeight)));
+      }), r.observe(e), B(Math.round(Math.min(e.clientWidth, e.clientHeight)));
     } catch {
-      i(Math.round(Math.min(e.clientWidth, e.clientHeight)));
+      B(Math.round(Math.min(e.clientWidth, e.clientHeight)));
     }
-    return () => {
-      o && o.disconnect();
-    };
-  }, [w]), V(() => {
-    const e = () => {
-      const g = window.visualViewport, d = g ? Math.round(g.width) : window.innerWidth, p = g ? Math.round(g.height) : window.innerHeight, k = 820, v = typeof navigator < "u" && (navigator.maxTouchPoints > 0 || "ontouchstart" in window), N = d <= k || v && p > d;
-      if (ce(N), N) {
-        ee(null);
-        return;
-      }
-      const pe = 0.92, fe = 1e3, ie = 40, ye = Math.max(360, d - ie), be = Math.max(360, p - ie), xe = Math.min(ye, be), we = Math.max(360, Math.round(xe * pe)), ve = Math.min(we, fe);
-      ee(ve);
-    };
-    e(), window.addEventListener("resize", e);
-    const o = window.visualViewport;
-    return o && typeof o.addEventListener == "function" && (o.addEventListener("resize", e), o.addEventListener("scroll", e)), () => {
-      window.removeEventListener("resize", e), o && typeof o.removeEventListener == "function" && (o.removeEventListener("resize", e), o.removeEventListener("scroll", e));
-    };
-  }, []);
-  const te = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), ne = () => {
-    if (!u) return;
-    const e = te(re[u]);
-    H(e), I(!0), D(!1), b(1), $(0), q([]), X([]), oe(e, [], !0);
-  }, oe = (e = S, o = de, g = !1) => {
-    const d = te(e.length ? e : re[u]);
-    let p = Math.floor(Math.random() * d.length), k = d[p].name, v = 0;
-    for (; o.includes(k) && v < 20; )
-      p = Math.floor(Math.random() * d.length), k = d[p].name, v++;
-    H(d), T(p), X([...o, k]), G(!1), U(""), K(20), B(null), g ? (C("ready"), Z(3), F(10)) : (C("memorize"), F(10));
+    return () => r?.disconnect();
+  }, [w]);
+  const ee = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), te = () => {
+    if (!C) return;
+    const e = ee(ie[C]);
+    z(e), T(!0), O(!1), h(1), N(0), Y([]), X([]), ne(e, [], !0);
+  }, ne = (e = v, r = ae, p = !1) => {
+    const c = ee(e.length ? e : ie[C]);
+    let f = Math.floor(Math.random() * c.length), H = c[f].name, R = 0;
+    for (; r.includes(H) && R < 20; )
+      f = Math.floor(Math.random() * c.length), H = c[f].name, R++;
+    z(c), A(f), X([...r, H]), D(!1), K(""), _(20), W(null), p ? (L("ready"), Z(3), $(10)) : (L("memorize"), $(10));
   };
-  V(() => {
-    if (!(!x || A || R)) {
-      if (a === "ready")
-        if (M <= 0) C("memorize");
+  oe(() => {
+    if (!(!u || j || M)) {
+      if (b === "ready")
+        if (V <= 0) L("memorize");
         else {
-          const e = setTimeout(() => Z((o) => o - 1), 1e3);
+          const e = setTimeout(() => Z((r) => r - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (a === "memorize")
-        if (j <= 0) C("guess");
+      if (b === "memorize")
+        if (F <= 0) L("guess");
         else {
-          const e = setTimeout(() => F((o) => o - 1), 1e3);
+          const e = setTimeout(() => $((r) => r - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (a === "guess") {
-        if (O <= 0) {
-          G(!0), B("wrong");
-          const o = S[y].name;
-          q((g) => [
-            ...g,
-            { round: r, answer: W, correct: o, result: "wrong" }
-          ]);
+      if (b === "guess") {
+        if (G <= 0) {
+          D(!0), W("wrong");
+          const r = v[x].name;
+          Y((p) => [...p, { round: k, answer: E, correct: r, result: "wrong" }]);
           return;
         }
-        const e = setTimeout(() => K((o) => o - 1), 1e3);
+        const e = setTimeout(() => _((r) => r - 1), 1e3);
         return () => clearTimeout(e);
       }
     }
-  }, [a, M, j, O, x, A, R, S, y, r, W]);
-  const me = () => {
-    if (y === null || P) return;
-    const e = S[y].name, o = W.toLowerCase().trim();
-    let g = "wrong";
-    o === e ? ($((d) => d + 1), B("correct"), g = "correct") : Be(o, e) === 1 ? ($((d) => d + 0.5), B("almost"), g = "almost") : (B("wrong"), g = "wrong"), q((d) => [...d, { round: r, answer: o, correct: e, result: g }]), J(!0), setTimeout(() => {
-      J(!1), G(!0);
+  }, [b, V, F, G, u, j, M, v, x, k, E]);
+  const de = () => {
+    if (x === null || q) return;
+    const e = v[x].name, r = E.toLowerCase().trim();
+    let p = "wrong";
+    r === e ? (N((c) => c + 1), W("correct"), p = "correct") : Ce(r, e) === 1 ? (N((c) => c + 0.5), W("almost"), p = "almost") : (W("wrong"), p = "wrong"), Y((c) => [...c, { round: k, answer: r, correct: e, result: p }]), J(!0), setTimeout(() => {
+      J(!1), D(!0);
     }, 600);
-  }, ue = () => r < z ? (b((e) => e + 1), oe()) : D(!0), ge = () => {
-    I(!1), D(!1), s(null);
-  }, he = Ce(
-    () => (
-      // ensure logo is positioned inside the square container
-      /* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ m("picture", { children: [
-        /* @__PURE__ */ t("source", { srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg", type: "image/svg+xml" }),
-        /* @__PURE__ */ t("img", { src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png", alt: "SPEAKID Logo", style: n.gmLogoImg, loading: "lazy" })
-      ] }) })
-    ),
+  }, ce = () => k < S ? (h((e) => e + 1), ne()) : O(!0), me = () => {
+    T(!1), O(!1), I(null);
+  }, ge = pe(
+    () => /* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ s("picture", { children: [
+      /* @__PURE__ */ t("source", { srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg", type: "image/svg+xml" }),
+      /* @__PURE__ */ t("img", { src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png", alt: "SPEAKID Logo", style: n.gmLogoImg, loading: "lazy" })
+    ] }) }),
     []
   );
   return /* @__PURE__ */ t(
     "div",
     {
-      ref: l,
+      ref: o,
       style: {
-        // center relative to viewport so site layout doesn't push the game off-center
-        position: "absolute",
+        position: "fixed",
         inset: 0,
         display: "flex",
         justifyContent: "center",
@@ -425,16 +404,16 @@ function We() {
         background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
         transition: "background 0.3s ease",
         overflow: "hidden",
-        zIndex: 1,
+        zIndex: 9999,
         pointerEvents: "auto"
       },
       children: /* @__PURE__ */ t(
         "div",
         {
-          ref: f,
+          ref: g,
           style: {
-            width: w ? "100%" : L ? `${L}px` : "1000px",
-            height: w ? "100%" : L ? `${L}px` : "1000px",
+            width: i ? `${i}px` : w ? "100%" : "1000px",
+            height: i ? `${i}px` : w ? "100%" : "1000px",
             maxWidth: "calc(100vw - 24px)",
             maxHeight: "calc(100vh - 20px)",
             display: "flex",
@@ -458,69 +437,69 @@ function We() {
                 justifyContent: "center",
                 alignItems: "center"
               },
-              children: /* @__PURE__ */ m("div", { id: "whats-missing-root", children: [
-                !w && he,
-                !u && !x && /* @__PURE__ */ m("div", { style: n.gmCenterScreen, children: [
+              children: /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
+                !w && ge,
+                !C && !u && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
                   /* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "WHAT'S MISSING?" }),
                   /* @__PURE__ */ t("p", { style: n.gmBodyM, children: "Select a theme:" }),
-                  /* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t("button", { style: n.gmButton, onClick: () => s(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
-                  /* @__PURE__ */ m("div", { style: { marginTop: 24 }, children: [
+                  /* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t("button", { style: n.gmButton, onClick: () => I(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
+                  /* @__PURE__ */ s("div", { style: { marginTop: 24 }, children: [
                     /* @__PURE__ */ t("p", { style: n.gmBodyS, children: "Choose number of rounds:" }),
                     /* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ t(
                       "button",
                       {
                         style: {
                           ...n.gmButton,
-                          ...z === e ? n.gmButtonActive : {}
+                          ...S === e ? n.gmButtonActive : {}
                         },
-                        onClick: () => E(e),
+                        onClick: () => a(e),
                         children: e
                       },
                       e
                     )) })
                   ] })
                 ] }),
-                u && !x && /* @__PURE__ */ m("div", { style: n.gmCenterScreen, children: [
-                  /* @__PURE__ */ m("h1", { style: n.gmHeadline1, children: [
+                C && !u && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
+                  /* @__PURE__ */ s("h1", { style: n.gmHeadline1, children: [
                     "Theme selected: ",
-                    u
+                    C
                   ] }),
-                  /* @__PURE__ */ m("p", { style: n.gmBodyM, children: [
+                  /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
                     "Rounds: ",
-                    z
+                    S
                   ] }),
-                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ne, children: "▶ Start game" })
+                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: te, children: "▶ Start game" })
                 ] }),
-                A && /* @__PURE__ */ m("div", { style: n.gmCenterScreen, children: [
+                j && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
                   /* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "Results" }),
-                  /* @__PURE__ */ m("h2", { style: n.gmHeadline3, children: [
+                  /* @__PURE__ */ s("h2", { style: n.gmHeadline3, children: [
                     "Your score: ",
-                    le,
+                    se,
                     " / ",
-                    z
+                    S
                   ] }),
                   /* @__PURE__ */ t("p", { style: { ...n.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
-                  /* @__PURE__ */ m("table", { style: n.gmTable, children: [
-                    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ m("tr", { children: [
+                  /* @__PURE__ */ s("table", { style: n.gmTable, children: [
+                    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ s("tr", { children: [
                       /* @__PURE__ */ t("th", { children: "Round" }),
                       /* @__PURE__ */ t("th", { children: "Your Answer" }),
                       /* @__PURE__ */ t("th", { children: "Correct" }),
                       /* @__PURE__ */ t("th", { children: "Result" })
                     ] }) }),
-                    /* @__PURE__ */ t("tbody", { children: ae.map((e, o) => /* @__PURE__ */ m("tr", { children: [
+                    /* @__PURE__ */ t("tbody", { children: le.map((e, r) => /* @__PURE__ */ s("tr", { children: [
                       /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.round }),
                       /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.answer || "—" }),
                       /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.correct }),
                       /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
-                    ] }, o)) })
+                    ] }, r)) })
                   ] }),
-                  /* @__PURE__ */ m("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
-                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ne, children: "🔁 Play again" }),
-                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ge, children: "⬅️ Choose theme" })
+                  /* @__PURE__ */ s("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: te, children: "🔁 Play again" }),
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: me, children: "⬅️ Choose theme" })
                   ] })
                 ] }),
-                x && !A && /* @__PURE__ */ m("div", { style: n.gmGameLayout, children: [
-                  /* @__PURE__ */ m(
+                u && !j && /* @__PURE__ */ s("div", { style: n.gmGameLayout, children: [
+                  /* @__PURE__ */ s(
                     "div",
                     {
                       style: {
@@ -531,79 +510,79 @@ function We() {
                         alignItems: "center"
                       },
                       children: [
-                        a === "ready" && /* @__PURE__ */ m(ze, { children: [
+                        b === "ready" && /* @__PURE__ */ s(he, { children: [
                           /* @__PURE__ */ t("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
                           /* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
                         ] }),
-                        a === "memorize" && /* @__PURE__ */ m("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
+                        b === "memorize" && /* @__PURE__ */ s("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
                           "MEMORIZE (",
-                          j,
+                          F,
                           ")"
                         ] }),
-                        a === "guess" && !R && /* @__PURE__ */ m("p", { style: n.gmBodyM, children: [
+                        b === "guess" && !M && /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
                           "⏳ Time left: ",
-                          O,
+                          G,
                           "s"
                         ] })
                       ]
                     }
                   ),
-                  a !== "ready" && (() => {
-                    const e = w ? 12 : 20, o = 32, g = h ?? L ?? (w ? 360 : 1e3), d = w ? 2 : 3, p = Math.max(
+                  b !== "ready" && (() => {
+                    const e = w ? 12 : 20, r = 32, p = i ?? d ?? (w ? 360 : 1e3), c = w ? 2 : 3, f = Math.max(
                       90,
-                      Math.floor((g - o - e * (d - 1)) / d)
+                      Math.floor((p - r - e * (c - 1)) / c)
                     );
                     return /* @__PURE__ */ t(
                       "div",
                       {
                         style: {
                           ...n.gmGrid,
-                          gridTemplateColumns: `repeat(${d}, ${p}px)`,
-                          gridAutoRows: `${p}px`,
+                          gridTemplateColumns: `repeat(${c}, ${f}px)`,
+                          gridAutoRows: `${f}px`,
                           gap: `${e}px`,
                           justifyContent: "center",
                           justifyItems: "center",
                           padding: 8,
                           boxSizing: "border-box"
                         },
-                        children: S.map((k, v) => {
-                          const N = y === v && a === "guess" && !R;
+                        children: v.map((H, R) => {
+                          const ue = x === R && b === "guess" && !M;
                           return /* @__PURE__ */ t(
                             "div",
                             {
                               style: {
                                 ...n.gmCard,
-                                width: `${p}px`,
-                                height: `${p}px`,
+                                width: `${f}px`,
+                                height: `${f}px`,
                                 padding: w ? 8 : 10,
                                 boxSizing: "border-box",
-                                ...Q === "correct" && y === v ? n.gmCorrect : {},
-                                ...Q === "wrong" && y === v ? n.gmWrong : {}
+                                ...Q === "correct" && x === R ? n.gmCorrect : {},
+                                ...Q === "wrong" && x === R ? n.gmWrong : {}
                               },
-                              children: !N && /* @__PURE__ */ t(
+                              children: !ue && /* @__PURE__ */ t(
                                 "img",
                                 {
-                                  src: k.src,
-                                  alt: k.name,
+                                  src: H.src,
+                                  alt: H.name,
                                   style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
                                 }
                               )
                             },
-                            v
+                            R
                           );
                         })
                       }
                     );
                   })(),
-                  /* @__PURE__ */ m("div", { style: { marginTop: 16, height: 80 }, children: [
-                    a === "guess" && !R && /* @__PURE__ */ m("div", { children: [
+                  /* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
+                    b === "guess" && !M && /* @__PURE__ */ s("div", { children: [
                       /* @__PURE__ */ t(
                         "input",
                         {
                           type: "text",
                           placeholder: "Type the missing word",
-                          value: W,
-                          onChange: (e) => U(e.target.value),
+                          value: E,
+                          onChange: (e) => K(e.target.value),
                           style: n.gmInput
                         }
                       ),
@@ -611,13 +590,13 @@ function We() {
                         "button",
                         {
                           style: { ...n.gmButton, marginLeft: 8 },
-                          onClick: me,
-                          disabled: P,
-                          children: P ? "..." : "Check"
+                          onClick: de,
+                          disabled: q,
+                          children: q ? "..." : "Check"
                         }
                       )
                     ] }),
-                    R && /* @__PURE__ */ t("button", { type: "button", style: n.gmButton, onClick: ue, children: "Next round" })
+                    M && /* @__PURE__ */ t("button", { type: "button", style: n.gmButton, onClick: ce, children: "Next round" })
                   ] })
                 ] })
               ] })
@@ -629,6 +608,6 @@ function We() {
   );
 }
 export {
-  We as Game,
-  re as themes
+  Ie as Game,
+  ie as themes
 };