@mblinkov/whats-missing 20.0.26 → 20.0.28

package/dist/whats-missing.es.js

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