@mblinkov/whats-missing 20.0.27 → 20.0.29

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, g) => i.map(([a, o]) => ({
-  src: `${fe}${g}/${o.replace(/\s/g, "%20")}.png`,
+import { jsx as n, jsxs as l, Fragment as ke } from "react/jsx-runtime";
+import { useRef as J, useState as a, useEffect as _, useLayoutEffect as me, useMemo as ze } from "react";
+const Me = window.origin + "/cloud/speakid/games/whatsmissing/", K = (r, u) => r.map(([s, o]) => ({
+  src: `${Me}${u}/${o.replace(/\s/g, "%20")}.png`,
   name: o
-})), ye = [
+})), Se = [
   ["apple", "apple"],
   ["banana", "banana"],
   ["bread", "bread"],
@@ -29,7 +29,7 @@ const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i, g) => i
   ["strawberry", "strawberry"],
   ["tomato", "tomato"],
   ["watermelon", "watermelon"]
-], be = [
+], Te = [
   ["bear", "bear"],
   ["cat", "cat"],
   ["crocodile", "crocodile"],
@@ -49,7 +49,7 @@ const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i, g) => i
   ["tortoise", "tortoise"],
   ["wolf", "wolf"],
   ["zebra", "zebra"]
-], xe = [
+], Re = [
   ["ball", "ball"],
   ["balloon", "balloon"],
   ["blocks", "blocks"],
@@ -69,23 +69,23 @@ const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i, g) => i
   ["teddy_bear", "teddy bear"],
   ["yo-yo", "yo-yo"],
   ["crayons", "crayons"]
-], ie = {
-  food: P(ye, "food"),
-  animals: P(be, "animals"),
-  toys: P(xe, "toys")
-}, we = `
+], ce = {
+  food: K(Se, "food"),
+  animals: K(Te, "animals"),
+  toys: K(Re, "toys")
+}, Ie = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
 `;
 if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
-  const i = document.createElement("style");
-  i.id = "spin-keyframes", i.innerHTML = we, document.head.appendChild(i);
+  const r = document.createElement("style");
+  r.id = "spin-keyframes", r.innerHTML = Ie, document.head.appendChild(r);
 }
-const ve = {
+const He = {
   animation: "spin 1.4s linear infinite"
-}, n = {
+}, t = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
@@ -145,7 +145,8 @@ const ve = {
   gmGameLayout: {
     position: "relative",
     width: "100%",
-    maxWidth: "600px",
+    // allow the layout to expand within the square container for tablets/laptops
+    maxWidth: "none",
     // should fill the parent square, not the full viewport
     minHeight: "100%",
     display: "flex",
@@ -159,9 +160,11 @@ const ve = {
   },
   gmGrid: {
     width: "100%",
-    maxWidth: "calc(210px * 3 + 20px * 2)",
+    // let the grid use all available space; sizing is controlled in Game.tsx
+    maxWidth: "none",
     margin: "0 auto",
     display: "grid",
+    // defaults; overridden responsively in Game.tsx
     gridTemplateColumns: "repeat(3, 210px)",
     gridAutoRows: "210px",
     gap: "20px",
@@ -236,176 +239,191 @@ const ve = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...ve
+    ...He
   }
-}, ke = () => {
-  const i = document.createElement("style");
-  i.textContent = `
+}, Be = () => {
+  const r = document.createElement("style");
+  r.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, g) => {
-  const a = Array.from({ length: i.length + 1 }, () => Array(g.length + 1).fill(0));
-  for (let o = 0; o <= i.length; o++) a[o][0] = o;
-  for (let o = 0; o <= g.length; o++) a[0][o] = o;
-  for (let o = 1; o <= i.length; o++)
-    for (let u = 1; u <= g.length; u++)
-      a[o][u] = i[o - 1] === g[u - 1] ? a[o - 1][u - 1] : Math.min(a[o - 1][u - 1], a[o][u - 1], a[o - 1][u]) + 1;
-  return a[i.length][g.length];
+  `, document.head.appendChild(r);
+}, Ae = (r, u) => {
+  const s = Array.from({ length: r.length + 1 }, () => Array(u.length + 1).fill(0));
+  for (let o = 0; o <= r.length; o++) s[o][0] = o;
+  for (let o = 0; o <= u.length; o++) s[0][o] = o;
+  for (let o = 1; o <= r.length; o++)
+    for (let c = 1; c <= u.length; c++)
+      s[o][c] = r[o - 1] === u[c - 1] ? s[o - 1][c - 1] : Math.min(s[o - 1][c - 1], s[o][c - 1], s[o - 1][c]) + 1;
+  return s[r.length][u.length];
 };
-function ze(i, g = { minDesktopWidth: 1200, forceResize: !1 }) {
-  const a = U(null), o = g.minDesktopWidth ?? 1200, u = !!g.forceResize;
-  re(() => {
-    if (typeof window > "u" || !i || !i.current) return;
-    const c = i.current, A = () => {
+function Le(r, u = { minDesktopWidth: 1200, forceResize: !1 }) {
+  const s = J(null), o = u.minDesktopWidth ?? 1200, c = !!u.forceResize;
+  me(() => {
+    if (typeof window > "u" || !r || !r.current) return;
+    const m = r.current, H = () => {
       try {
-        const d = document.body, h = getComputedStyle(d), T = parseFloat(d.style && d.style.zoom || "");
-        if (T && !isNaN(T) && T > 0) return T;
+        const d = document.body, h = getComputedStyle(d), M = parseFloat(d.style && d.style.zoom || "");
+        if (M && !isNaN(M) && M > 0) return M;
         const v = parseFloat(h.zoom || "");
         if (v && !isNaN(v) && v > 0) return v;
-        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", p.style.pointerEvents = "none", document.documentElement.appendChild(p);
-        const b = p.getBoundingClientRect();
-        if (document.documentElement.removeChild(p), b && b.width > 0) {
-          const H = b.width / 100;
-          if (!isNaN(H) && H > 0) return H;
+        const f = document.createElement("div");
+        f.style.position = "absolute", f.style.left = "0", f.style.top = "0", f.style.width = "100px", f.style.height = "1px", f.style.visibility = "hidden", document.documentElement.appendChild(f);
+        const y = f.getBoundingClientRect();
+        if (document.documentElement.removeChild(f), y && y.width > 0) {
+          const B = y.width / 100;
+          if (!isNaN(B) && B > 0) return B;
         }
       } catch {
       }
       return 1;
     }, C = () => {
       if (o && window.innerWidth < o) {
-        M();
+        T();
         return;
       }
-      const d = A();
+      const d = H();
       if (!d || d === 1) {
-        M();
+        T();
         return;
       }
-      a.current || (a.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: m.style.transform || null,
+        transformOrigin: m.style.transformOrigin || null,
+        width: m.style.width || null,
+        height: m.style.height || null,
+        willChange: m.style.willChange || null
       });
       const h = 1 / d;
-      u && (c.style.width = `${d * 100}%`, c.style.height = `${d * 100}%`), c.style.transformOrigin = "50% 50%", c.style.transform = `scale(${h})`, c.style.willChange = "transform";
-    }, M = () => {
-      if (!a.current) return;
-      const d = a.current;
-      c.style.transform = d.transform ?? "", c.style.transformOrigin = d.transformOrigin ?? "", c.style.width = d.width ?? "", c.style.height = d.height ?? "", c.style.willChange = d.willChange ?? "", a.current = null;
+      c && (m.style.width = `${d * 100}%`, m.style.height = `${d * 100}%`), m.style.transformOrigin = "50% 50%", m.style.transform = `scale(${h})`, m.style.willChange = "transform";
+    }, T = () => {
+      if (!s.current) return;
+      const d = s.current;
+      m.style.transform = d.transform ?? "", m.style.transformOrigin = d.transformOrigin ?? "", m.style.width = d.width ?? "", m.style.height = d.height ?? "", m.style.willChange = d.willChange ?? "", s.current = null;
     };
-    let w = 0;
-    const z = () => {
-      cancelAnimationFrame(w), w = requestAnimationFrame(C);
-    }, S = new MutationObserver((d) => {
+    let x = 0;
+    const k = () => {
+      cancelAnimationFrame(x), x = requestAnimationFrame(C);
+    }, z = new MutationObserver((d) => {
       for (const h of d)
         if (h.type === "attributes" && (h.attributeName === "style" || h.attributeName === "class")) {
-          z();
+          k();
           break;
         }
     });
-    return S.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", z), z(), () => {
-      cancelAnimationFrame(w), S.disconnect(), window.removeEventListener("resize", z), M();
+    return z.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", k), k(), () => {
+      cancelAnimationFrame(x), z.disconnect(), window.removeEventListener("resize", k), T();
     };
-  }, [i, o, u]);
+  }, [r, o, c]);
 }
-function Me({
-  gameCubeSize: i,
-  screenHeight: g,
-  screenWidth: a
+function Ge({
+  gameCubeSize: r,
+  screenHeight: u,
+  screenWidth: s
 }) {
-  const o = U(null), u = U(null), [c, A] = l(null);
-  ze(o, { minDesktopWidth: 1200, forceResize: !1 }), oe(() => (ke(), () => {
+  const o = J(null), c = J(null), [m, H] = a(null);
+  Le(o, { minDesktopWidth: 1200, forceResize: !1 }), _(() => (Be(), () => {
     document.body.style.overflow = "";
   }), []);
-  const [C, M] = l(null), [w, z] = l([]), [S, d] = l(4), [h, T] = l(!1), [v, p] = l(1), [b, H] = l(null), [x, W] = 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, L] = l(null), [le, Y] = l([]), [ae, X] = l([]), [k, Se] = l(!1);
-  re(() => {
-    const e = u.current;
+  const [C, T] = a(null), [x, k] = a([]), [z, d] = a(4), [h, M] = a(!1), [v, f] = a(1), [y, B] = a(null), [b, E] = a("ready"), [Q, X] = a(3), [G, N] = a(10), [D, ee] = a(20), [ue, O] = a(0), [j, q] = a(!1), [F, te] = a(""), [R, Y] = a(!1), [P, ne] = a(!1), [oe, A] = a(null), [ge, U] = a([]), [he, ie] = a([]), [S, fe] = a(!1);
+  _(() => {
+    if (typeof window > "u") return;
+    const e = () => {
+      const i = s ?? window.innerWidth;
+      fe(i <= 768);
+    };
+    return e(), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
+    };
+  }, [s]), me(() => {
+    const e = c.current;
     if (!e || typeof window > "u") return;
-    let r = null;
+    let i = null;
     try {
-      r = new ResizeObserver((f) => {
-        for (const m of f) {
-          const y = m.contentRect;
-          A(Math.round(Math.min(y.width, y.height)));
+      i = new ResizeObserver((p) => {
+        for (const g of p) {
+          const w = g.contentRect;
+          H(Math.round(Math.min(w.width, w.height)));
         }
-      }), r.observe(e), A(Math.round(Math.min(e.clientWidth, e.clientHeight)));
+      }), i.observe(e), H(Math.round(Math.min(e.clientWidth, e.clientHeight)));
     } catch {
-      A(Math.round(Math.min(e.clientWidth, e.clientHeight)));
+      H(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 = () => {
+    return () => i?.disconnect();
+  }, [S]);
+  const re = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), se = () => {
     if (!C) return;
-    const e = ee(ie[C]);
-    z(e), T(!0), O(!1), p(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), B = m[y].name, R = 0;
-    for (; r.includes(B) && R < 20; )
-      y = Math.floor(Math.random() * m.length), B = m[y].name, R++;
-    z(m), H(y), X([...r, B]), D(!1), K(""), _(20), L(null), f ? (W("ready"), Z(3), $(10)) : (W("memorize"), $(10));
+    const e = re(ce[C]);
+    k(e), M(!0), q(!1), f(1), O(0), U([]), ie([]), le(e, [], !0);
+  }, le = (e = x, i = he, p = !1) => {
+    const g = re(e.length ? e : ce[C]);
+    let w = Math.floor(Math.random() * g.length), I = g[w].name, L = 0;
+    for (; i.includes(I) && L < 20; )
+      w = Math.floor(Math.random() * g.length), I = g[w].name, L++;
+    k(g), B(w), ie([...i, I]), Y(!1), te(""), ee(20), A(null), p ? (E("ready"), X(3), N(10)) : (E("memorize"), N(10));
   };
-  oe(() => {
-    if (!(!h || j || I)) {
-      if (x === "ready")
-        if (V <= 0) W("memorize");
+  _(() => {
+    if (!(!h || j || R)) {
+      if (b === "ready")
+        if (Q <= 0) E("memorize");
         else {
-          const e = setTimeout(() => Z((r) => r - 1), 1e3);
+          const e = setTimeout(() => X((i) => i - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (x === "memorize")
-        if (F <= 0) W("guess");
+      if (b === "memorize")
+        if (G <= 0) E("guess");
         else {
-          const e = setTimeout(() => $((r) => r - 1), 1e3);
+          const e = setTimeout(() => N((i) => i - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (x === "guess") {
-        if (G <= 0) {
-          D(!0), L("wrong");
-          const r = w[b].name;
-          Y((f) => [...f, { round: v, answer: E, correct: r, result: "wrong" }]);
+      if (b === "guess") {
+        if (D <= 0) {
+          Y(!0), A("wrong");
+          const i = x[y].name;
+          U((p) => [
+            ...p,
+            { round: v, answer: F, correct: i, result: "wrong" }
+          ]);
           return;
         }
-        const e = setTimeout(() => _((r) => r - 1), 1e3);
+        const e = setTimeout(() => ee((i) => i - 1), 1e3);
         return () => clearTimeout(e);
       }
     }
-  }, [x, V, F, G, h, j, I, w, b, v, E]);
-  const de = () => {
-    if (b === null || q) return;
-    const e = w[b].name, r = E.toLowerCase().trim();
-    let f = "wrong";
-    r === e ? (N((m) => m + 1), L("correct"), f = "correct") : Ce(r, e) === 1 ? (N((m) => m + 0.5), L("almost"), f = "almost") : (L("wrong"), f = "wrong"), Y((m) => [...m, { round: v, answer: r, correct: e, result: f }]), J(!0), setTimeout(() => {
-      J(!1), D(!0);
+  }, [b, Q, G, D, h, j, R, x, y, v, F]);
+  const pe = () => {
+    if (y === null || P) return;
+    const e = x[y].name, i = F.toLowerCase().trim();
+    let p = "wrong";
+    i === e ? (O((g) => g + 1), A("correct"), p = "correct") : Ae(i, e) === 1 ? (O((g) => g + 0.5), A("almost"), p = "almost") : (A("wrong"), p = "wrong"), U((g) => [...g, { round: v, answer: i, correct: e, result: p }]), ne(!0), setTimeout(() => {
+      ne(!1), Y(!0);
     }, 600);
-  }, ce = () => v < S ? (p((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(
+  }, ye = () => v < z ? (f((e) => e + 1), le()) : q(!0), be = () => {
+    M(!1), q(!1), T(null);
+  }, we = ze(
+    () => /* @__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__ */ t(
+      /* @__PURE__ */ n(
         "img",
         {
           src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png",
           alt: "SPEAKID Logo",
-          style: n.gmLogoImg,
+          style: t.gmLogoImg,
           loading: "lazy"
         }
       )
     ] }) }),
     []
-  );
-  return /* @__PURE__ */ t(
+  ), V = typeof window < "u" ? Math.min(
+    (s ?? window.innerWidth) / 1440,
+    (u ?? window.innerHeight) / 900
+  ) : 1;
+  return /* @__PURE__ */ n(
     "div",
     {
       ref: o,
@@ -416,63 +434,53 @@ 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: u,
+          ref: c,
           style: {
-            width: k ? "100%" : `${Math.min(i ?? 1e3, a ?? 1e3, g ?? 1e3)}px`,
-            height: k ? "100%" : `${Math.min(i ?? 1e3, a ?? 1e3, g ?? 1e3)}px`,
-            maxWidth: "calc(100vw - 24px)",
-            maxHeight: "calc(100vh - 20px)",
+            width: S ? "100%" : `${Math.min(r ?? 1e3, s ?? 1e3, u ?? 1e3)}px`,
+            height: S ? "100%" : `${Math.min(r ?? 1e3, s ?? 1e3, u ?? 1e3)}px`,
+            borderRadius: S ? 0 : "20px",
+            background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+            position: "relative",
+            overflow: "hidden",
+            boxShadow: S ? "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(${V})`,
+                transformOrigin: "center center",
+                width: `${100 / V}%`,
+                height: `${100 / V}%`,
                 display: "flex",
+                flexDirection: "column",
                 justifyContent: "center",
                 alignItems: "center"
               },
-              children: /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
-                !k && ge,
-                !C && !h && /* @__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: [
+                !S && we,
+                !C && !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: () => T(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,
+                          ...z === e ? t.gmButtonActive : {}
                         },
                         onClick: () => d(e),
                         children: e
@@ -481,47 +489,47 @@ function Me({
                     )) })
                   ] })
                 ] }),
-                C && !h && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
-                  /* @__PURE__ */ s("h1", { style: n.gmHeadline1, children: [
+                C && !h && /* @__PURE__ */ l("div", { style: t.gmCenterScreen, children: [
+                  /* @__PURE__ */ l("h1", { style: t.gmHeadline1, children: [
                     "Theme selected: ",
                     C
                   ] }),
-                  /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
+                  /* @__PURE__ */ l("p", { style: t.gmBodyM, children: [
                     "Rounds: ",
-                    S
+                    z
                   ] }),
-                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: te, children: "▶ Start game" })
+                  /* @__PURE__ */ n("button", { style: t.gmButton, onClick: se, 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,
+                    ue,
                     " / ",
-                    S
+                    z
                   ] }),
-                  /* @__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" })
-                    ] }, r)) })
+                    /* @__PURE__ */ n("tbody", { children: ge.map((e, i) => /* @__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" })
+                    ] }, i)) })
                   ] }),
-                  /* @__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: se, children: "🔁 Play again" }),
+                    /* @__PURE__ */ n("button", { style: t.gmButton, onClick: be, children: "⬅️ Choose theme" })
                   ] })
                 ] }),
-                h && !j && /* @__PURE__ */ s("div", { style: n.gmGameLayout, children: [
-                  /* @__PURE__ */ s(
+                h && !j && /* @__PURE__ */ l("div", { style: t.gmGameLayout, children: [
+                  /* @__PURE__ */ l(
                     "div",
                     {
                       style: {
@@ -532,73 +540,63 @@ function Me({
                         alignItems: "center"
                       },
                       children: [
-                        x === "ready" && /* @__PURE__ */ s(he, { children: [
-                          /* @__PURE__ */ t(
-                            "h1",
-                            {
-                              style: { ...n.gmHeadline1, color: "#ec4c44" },
-                              children: "GET READY"
-                            }
-                          ),
-                          /* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
+                        b === "ready" && /* @__PURE__ */ l(ke, { children: [
+                          /* @__PURE__ */ n("h1", { style: { ...t.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
+                          /* @__PURE__ */ n("div", { style: t.gmHourglass, children: "⏳" })
                         ] }),
-                        x === "memorize" && /* @__PURE__ */ s("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
+                        b === "memorize" && /* @__PURE__ */ l("p", { style: { ...t.gmBodyM, color: "#10b981" }, children: [
                           "MEMORIZE (",
-                          F,
+                          G,
                           ")"
                         ] }),
-                        x === "guess" && !I && /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
+                        b === "guess" && !R && /* @__PURE__ */ l("p", { style: t.gmBodyM, children: [
                           "⏳ Time left: ",
-                          G,
+                          D,
                           "s"
                         ] })
                       ]
                     }
                   ),
-                  x !== "ready" && (() => {
-                    const e = k ? 12 : 20, r = 32, f = Math.min(
-                      i ?? 1e3,
-                      c ?? 1e3,
-                      g ?? 1e3,
-                      a ?? 1e3
-                    ), m = k ? 2 : 3, y = Math.max(
-                      90,
-                      Math.floor(
-                        (f - r - e * (m - 1)) / m
+                  b !== "ready" && (() => {
+                    const e = S ? 12 : 20, i = 32, p = c.current?.clientWidth ?? Math.min(r ?? 1e3, s ?? 1e3), g = c.current?.clientHeight ?? Math.min(r ?? 1e3, u ?? 1e3), w = Math.min(p, g), I = typeof window < "u" ? window.innerWidth : s ?? 1e3, L = I < 600 ? 110 : I < 1024 ? 140 : 180, xe = 4, ae = 2, Z = Math.max(
+                      ae,
+                      Math.min(
+                        xe,
+                        Math.floor((w - i + e) / (L + e)) || ae
                       )
-                    );
-                    return /* @__PURE__ */ t(
+                    ), ve = Math.floor((w - i - e * (Z - 1)) / Z), W = Math.max(L, ve);
+                    return /* @__PURE__ */ n(
                       "div",
                       {
                         style: {
-                          ...n.gmGrid,
-                          gridTemplateColumns: `repeat(${m}, ${y}px)`,
-                          gridAutoRows: `${y}px`,
+                          ...t.gmGrid,
+                          gridTemplateColumns: `repeat(${Z}, ${W}px)`,
+                          gridAutoRows: `${W}px`,
                           gap: `${e}px`,
                           justifyContent: "center",
                           justifyItems: "center",
                           padding: 8,
                           boxSizing: "border-box"
                         },
-                        children: w.map((B, R) => {
-                          const ue = b === R && x === "guess" && !I;
-                          return /* @__PURE__ */ t(
+                        children: x.map((de, $) => {
+                          const Ce = y === $ && b === "guess" && !R;
+                          return /* @__PURE__ */ n(
                             "div",
                             {
                               style: {
-                                ...n.gmCard,
-                                width: `${y}px`,
-                                height: `${y}px`,
-                                padding: k ? 8 : 10,
+                                ...t.gmCard,
+                                width: `${W}px`,
+                                height: `${W}px`,
+                                padding: W >= 160 ? 10 : 8,
                                 boxSizing: "border-box",
-                                ...Q === "correct" && b === R ? n.gmCorrect : {},
-                                ...Q === "wrong" && b === R ? n.gmWrong : {}
+                                ...oe === "correct" && y === $ ? t.gmCorrect : {},
+                                ...oe === "wrong" && y === $ ? t.gmWrong : {}
                               },
-                              children: !ue && /* @__PURE__ */ t(
+                              children: !Ce && /* @__PURE__ */ n(
                                 "img",
                                 {
-                                  src: B.src,
-                                  alt: B.name,
+                                  src: de.src,
+                                  alt: de.name,
                                   style: {
                                     width: "100%",
                                     height: "100%",
@@ -608,46 +606,38 @@ function Me({
                                 }
                               )
                             },
-                            R
+                            $
                           );
                         })
                       }
                     );
                   })(),
-                  /* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
-                    x === "guess" && !I && /* @__PURE__ */ s("div", { children: [
-                      /* @__PURE__ */ t(
+                  /* @__PURE__ */ l("div", { style: { marginTop: 16, height: 80 }, children: [
+                    b === "guess" && !R && /* @__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) => te(e.target.value),
+                          style: t.gmInput
                         }
                       ),
-                      /* @__PURE__ */ t(
+                      /* @__PURE__ */ n(
                         "button",
                         {
-                          style: { ...n.gmButton, marginLeft: 8 },
-                          onClick: de,
-                          disabled: q,
-                          children: q ? "..." : "Check"
+                          style: { ...t.gmButton, marginLeft: 8 },
+                          onClick: pe,
+                          disabled: P,
+                          children: P ? "..." : "Check"
                         }
                       )
                     ] }),
-                    I && /* @__PURE__ */ t(
-                      "button",
-                      {
-                        type: "button",
-                        style: n.gmButton,
-                        onClick: ce,
-                        children: "Next round"
-                      }
-                    )
+                    R && /* @__PURE__ */ n("button", { type: "button", style: t.gmButton, onClick: ye, children: "Next round" })
                   ] })
                 ] })
-              ] })
+              ]
             }
           )
         }
@@ -656,6 +646,6 @@ function Me({
   );
 }
 export {
-  Me as Game,
-  ie as themes
+  Ge as Game,
+  ce as themes
 };