@mblinkov/whats-missing 20.0.19 → 20.0.20

package/dist/whats-missing.es.js

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as s, Fragment as pe } from "react/jsx-runtime";
-import { useRef as he, useEffect as N, useState as r, useMemo as fe } from "react";
-const ye = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, d) => l.map(([m, o]) => ({
-  src: `${ye}${d}/${o.replace(/\s/g, "%20")}.png`,
+import { jsx as t, jsxs as c, Fragment as ce } from "react/jsx-runtime";
+import { useRef as te, useEffect as P, useState as d, useMemo as me, useLayoutEffect as ge } from "react";
+const ue = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, g) => l.map(([m, o]) => ({
+  src: `${ue}${g}/${o.replace(/\s/g, "%20")}.png`,
   name: o
-})), xe = [
+})), he = [
   ["apple", "apple"],
   ["banana", "banana"],
   ["bread", "bread"],
@@ -29,7 +29,7 @@ const ye = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, d) => l
   ["strawberry", "strawberry"],
   ["tomato", "tomato"],
   ["watermelon", "watermelon"]
-], be = [
+], pe = [
   ["bear", "bear"],
   ["cat", "cat"],
   ["crocodile", "crocodile"],
@@ -49,7 +49,7 @@ const ye = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, d) => l
   ["tortoise", "tortoise"],
   ["wolf", "wolf"],
   ["zebra", "zebra"]
-], we = [
+], fe = [
   ["ball", "ball"],
   ["balloon", "balloon"],
   ["blocks", "blocks"],
@@ -69,11 +69,11 @@ const ye = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, d) => l
   ["teddy_bear", "teddy bear"],
   ["yo-yo", "yo-yo"],
   ["crayons", "crayons"]
-], ne = {
-  food: Y(xe, "food"),
-  animals: Y(be, "animals"),
-  toys: Y(we, "toys")
-}, ve = `
+], ee = {
+  food: Y(he, "food"),
+  animals: Y(pe, "animals"),
+  toys: Y(fe, "toys")
+}, ye = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -81,9 +81,9 @@ const ye = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, d) => l
 `;
 if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
   const l = document.createElement("style");
-  l.id = "spin-keyframes", l.innerHTML = ve, document.head.appendChild(l);
+  l.id = "spin-keyframes", l.innerHTML = ye, document.head.appendChild(l);
 }
-const ke = {
+const be = {
   animation: "spin 1.4s linear infinite"
 }, n = {
   gmCenterScreen: {
@@ -233,125 +233,155 @@ const ke = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...ke
+    ...be
   }
-}, Ce = () => {
+}, xe = () => {
   const l = document.createElement("style");
   l.textContent = `
-    #whats-missing-root, #whats-missing-root * {
-      box-sizing: border-box;
-      font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
-    }
-    #whats-missing-root img {
-      max-width: 100%;
-      height: auto;
-      display: block;
-      user-select: none;
-    }
-    html, body { margin: 0; padding: 0; }
+    /* scope only inside game root */
+    #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);
-}, Se = (l, d) => {
-  const m = Array.from({ length: l.length + 1 }, () => Array(d.length + 1).fill(0));
+}, we = (l, g) => {
+  const m = Array.from({ length: l.length + 1 }, () => Array(g.length + 1).fill(0));
   for (let o = 0; o <= l.length; o++) m[o][0] = o;
-  for (let o = 0; o <= d.length; o++) m[0][o] = o;
+  for (let o = 0; o <= g.length; o++) m[0][o] = o;
   for (let o = 1; o <= l.length; o++)
-    for (let g = 1; g <= d.length; g++)
-      m[o][g] = l[o - 1] === d[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[l.length][d.length];
+    for (let u = 1; u <= g.length; u++)
+      m[o][u] = l[o - 1] === g[u - 1] ? m[o - 1][u - 1] : Math.min(m[o - 1][u - 1], m[o][u - 1], m[o - 1][u]) + 1;
+  return m[l.length][g.length];
 };
-function Me() {
-  const l = he(null);
-  N(() => (Ce(), () => {
-    document.body.style.overflow = "";
-  }), []);
-  const [d, m] = r(null), [o, g] = r([]), [C, oe] = r(4), [v, D] = r(!1), [S, P] = r(1), [x, ie] = r(null), [u, z] = r("ready"), [O, U] = r(3), [H, B] = r(10), [A, V] = r(20), [re, L] = r(0), [T, j] = r(!1), [M, q] = r(""), [w, F] = r(!1), [W, _] = r(!1), [K, k] = r(null), [se, E] = r([]), [ae, Z] = r([]), [h, le] = r(!1), [R, X] = r(null), [b, G] = r(1);
-  N(() => {
-    const e = () => {
-      const a = window.innerWidth < 768;
-      if (le(a), a) {
-        X(null);
-        return;
-      }
-      const f = 0.97, p = 1e3, y = Math.min(window.innerWidth, window.innerHeight), I = Math.max(360, Math.round(y * f)), te = Math.min(I, p);
-      X(te);
-    }, i = () => {
+function ve(l, g = { minDesktopWidth: 1200, forceResize: !1 }) {
+  const m = te(null), o = g.minDesktopWidth ?? 1200, u = !!g.forceResize;
+  ge(() => {
+    if (typeof window > "u" || !l || !l.current) return;
+    const i = l.current, E = () => {
       try {
-        const a = document.body, f = getComputedStyle(a), p = parseFloat(f.zoom || "");
-        if (p && !isNaN(p) && p > 0) {
-          G(p);
-          return;
-        }
-        const y = f.transform;
-        if (y && y !== "none") {
-          const I = y.match(/matrix\(([^)]+)\)/);
-          if (I) {
-            const $ = I[1].split(",").map((ue) => parseFloat(ue))[0];
-            if ($ && !isNaN($)) {
-              G($);
-              return;
-            }
+        const r = document.body, a = getComputedStyle(r), y = parseFloat(r.style && r.style.zoom || "");
+        if (y && !isNaN(y) && y > 0) return y;
+        const k = parseFloat(a.zoom || "");
+        if (k && !isNaN(k) && k > 0) return k;
+        const S = a.transform || a.webkitTransform || a.mozTransform;
+        if (S && S !== "none") {
+          const T = S.match(/matrix\(([^)]+)\)/);
+          if (T) {
+            const C = T[1].split(",").map((H) => parseFloat(H))[0];
+            if (C && !isNaN(C)) return C;
           }
         }
       } catch {
       }
-      G(1);
+      return 1;
+    }, w = () => {
+      if (o && window.innerWidth < o) {
+        z();
+        return;
+      }
+      const r = E();
+      if (!r || r === 1) {
+        z();
+        return;
+      }
+      m.current || (m.current = {
+        transform: i.style.transform || null,
+        transformOrigin: i.style.transformOrigin || null,
+        width: i.style.width || null,
+        height: i.style.height || null,
+        willChange: i.style.willChange || null
+      });
+      const a = 1 / r;
+      u && (i.style.width = `${r * 100}%`, i.style.height = `${r * 100}%`), i.style.transform = `scale(${a})`, i.style.transformOrigin = "top left", i.style.willChange = "transform", typeof process < "u" && process.env && process.env.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] applied scale:", { scale: r, inv: a, forceResize: u });
+    }, z = () => {
+      if (!m.current) return;
+      const r = m.current;
+      r.transform === null ? i.style.removeProperty("transform") : i.style.transform = r.transform, r.transformOrigin === null ? i.style.removeProperty("transform-origin") : i.style.transformOrigin = r.transformOrigin, r.width === null ? i.style.removeProperty("width") : i.style.width = r.width, r.height === null ? i.style.removeProperty("height") : i.style.height = r.height, r.willChange === null ? i.style.removeProperty("will-change") : i.style.willChange = r.willChange, m.current = null, process.env.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] restored original styles");
     };
-    e(), i(), window.addEventListener("resize", e), window.addEventListener("resize", i);
-    const c = new MutationObserver(i);
-    return c.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), () => {
-      window.removeEventListener("resize", e), window.removeEventListener("resize", i), c.disconnect();
+    let x = 0;
+    const v = () => {
+      cancelAnimationFrame(x), x = requestAnimationFrame(w);
+    }, f = new MutationObserver((r) => {
+      for (const a of r)
+        if (a.type === "attributes" && (a.attributeName === "style" || a.attributeName === "class")) {
+          v();
+          break;
+        }
+    });
+    return f.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", v), v(), () => {
+      cancelAnimationFrame(x), f.disconnect(), window.removeEventListener("resize", v), z();
     };
+  }, [l, o, u]);
+}
+function Se() {
+  const l = te(null);
+  ve(l, { minDesktopWidth: 1200, forceResize: !1 }), P(() => (xe(), () => {
+    document.body.style.overflow = "";
+  }), []);
+  const [g, m] = d(null), [o, u] = d([]), [i, E] = d(4), [w, z] = d(!1), [x, v] = d(1), [f, r] = d(null), [a, y] = d("ready"), [k, S] = d(3), [T, A] = d(10), [C, H] = d(20), [ne, N] = d(0), [L, j] = d(!1), [F, $] = d(""), [R, D] = d(!1), [G, q] = d(!1), [V, M] = d(null), [oe, O] = d([]), [re, Z] = d([]), [b, ie] = d(!1), [ke, _] = d(1), [U, K] = d(null);
+  P(() => {
+    const e = () => {
+      const s = window.innerWidth < 768;
+      if (ie(s), s)
+        K(null), _(1);
+      else {
+        const I = Math.min(window.innerWidth, window.innerHeight), B = Math.max(360, Math.round(I * 0.97)), W = Math.min(B, 1e3);
+        K(W), _(1);
+      }
+    };
+    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  const J = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), Q = () => {
-    if (!d) return;
-    const e = J(ne[d]);
-    g(e), D(!0), j(!1), P(1), L(0), E([]), Z([]), ee(e, [], !0);
-  }, ee = (e = o, i = ae, c = !1) => {
-    const a = J(e.length ? e : ne[d]);
-    let f = Math.floor(Math.random() * a.length), p = a[f].name, y = 0;
-    for (; i.includes(p) && y < 20; )
-      f = Math.floor(Math.random() * a.length), p = a[f].name, y++;
-    g(a), ie(f), Z([...i, p]), F(!1), q(""), V(20), k(null), c ? (z("ready"), U(3), B(10)) : (z("memorize"), B(10));
+  const X = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), J = () => {
+    if (!g) return;
+    const e = X(ee[g]);
+    u(e), z(!0), j(!1), v(1), N(0), O([]), Z([]), Q(e, [], !0);
+  }, Q = (e = o, s = re, p = !1) => {
+    const h = X(e.length ? e : ee[g]);
+    let I = Math.floor(Math.random() * h.length), B = h[I].name, W = 0;
+    for (; s.includes(B) && W < 20; )
+      I = Math.floor(Math.random() * h.length), B = h[I].name, W++;
+    u(h), r(I), Z([...s, B]), D(!1), $(""), H(20), M(null), p ? (y("ready"), S(3), A(10)) : (y("memorize"), A(10));
   };
-  N(() => {
-    if (!(!v || T || w)) {
-      if (u === "ready")
-        if (O <= 0) z("memorize");
+  P(() => {
+    if (!(!w || L || R)) {
+      if (a === "ready")
+        if (k <= 0) y("memorize");
         else {
-          const e = setTimeout(() => U((i) => i - 1), 1e3);
+          const e = setTimeout(() => S((s) => s - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (u === "memorize")
-        if (H <= 0) z("guess");
+      if (a === "memorize")
+        if (T <= 0) y("guess");
         else {
-          const e = setTimeout(() => B((i) => i - 1), 1e3);
+          const e = setTimeout(() => A((s) => s - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (u === "guess") {
-        if (A <= 0) {
-          F(!0), k("wrong");
-          const i = o[x].name;
-          E((c) => [...c, { round: S, answer: M, correct: i, result: "wrong" }]);
+      if (a === "guess") {
+        if (C <= 0) {
+          D(!0), M("wrong");
+          const s = o[f].name;
+          O((p) => [
+            ...p,
+            { round: x, answer: F, correct: s, result: "wrong" }
+          ]);
           return;
         }
-        const e = setTimeout(() => V((i) => i - 1), 1e3);
+        const e = setTimeout(() => H((s) => s - 1), 1e3);
         return () => clearTimeout(e);
       }
     }
-  }, [u, O, H, A, v, T, w, o, x, S, M]);
-  const de = () => {
-    if (x === null || W) return;
-    const e = o[x].name, i = M.toLowerCase().trim();
-    let c = "wrong";
-    i === e ? (L((a) => a + 1), k("correct"), c = "correct") : Se(i, e) === 1 ? (L((a) => a + 0.5), k("almost"), c = "almost") : (k("wrong"), c = "wrong"), E((a) => [...a, { round: S, answer: i, correct: e, result: c }]), _(!0), setTimeout(() => {
-      _(!1), F(!0);
+  }, [a, k, T, C, w, L, R, o, f, x, F]);
+  const se = () => {
+    if (f === null || G) return;
+    const e = o[f].name, s = F.toLowerCase().trim();
+    let p = "wrong";
+    s === e ? (N((h) => h + 1), M("correct"), p = "correct") : we(s, e) === 1 ? (N((h) => h + 0.5), M("almost"), p = "almost") : (M("wrong"), p = "wrong"), O((h) => [...h, { round: x, answer: s, correct: e, result: p }]), q(!0), setTimeout(() => {
+      q(!1), D(!0);
     }, 600);
-  }, ce = () => S < C ? (P((e) => e + 1), ee()) : j(!0), me = () => {
-    D(!1), j(!1), m(null);
-  }, ge = fe(
+  }, le = () => x < i ? (v((e) => e + 1), Q()) : j(!0), ae = () => {
+    z(!1), j(!1), m(null);
+  }, de = me(
     () => (
       // ensure logo is positioned inside the square container
-      /* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ s("picture", { children: [
+      /* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ c("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" })
       ] }) })
@@ -376,115 +406,181 @@ function Me() {
         "div",
         {
           style: {
-            width: h ? "100%" : R ? `${Math.round(R * b)}px` : `${Math.round(1e3 * b)}px`,
-            height: h ? "100%" : R ? `${Math.round(R * b)}px` : `${Math.round(1e3 * b)}px`,
+            width: b ? "100%" : U || 1e3,
+            height: b ? "100%" : U || 1e3,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             overflow: "hidden",
-            borderRadius: h ? 0 : "20px",
+            borderRadius: b ? 0 : "20px",
             background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-            boxShadow: h ? "none" : "0 0 40px rgba(0,0,0,0.1)",
-            margin: h ? "0 auto" : "unset",
+            boxShadow: b ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: b ? "0 auto" : "unset",
             position: "relative"
+            // needed so absolute logo is inside the square
           },
           children: /* @__PURE__ */ t(
             "div",
             {
               style: {
-                transform: b && b !== 1 ? `scale(${1 / b})` : "none",
-                transformOrigin: "top left",
+                transform: "none",
                 width: "100%",
                 height: "100%",
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center"
               },
-              children: /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
-                !h && ge,
-                !d && !v && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
+              children: /* @__PURE__ */ c("div", { id: "whats-missing-root", children: [
+                !b && de,
+                !g && !w && /* @__PURE__ */ c("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__ */ c("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, ...C === e ? n.gmButtonActive : {} },
-                        onClick: () => oe(e),
+                        style: {
+                          ...n.gmButton,
+                          ...i === e ? n.gmButtonActive : {}
+                        },
+                        onClick: () => E(e),
                         children: e
                       },
                       e
                     )) })
                   ] })
                 ] }),
-                d && !v && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
-                  /* @__PURE__ */ s("h1", { style: n.gmHeadline1, children: [
+                g && !w && /* @__PURE__ */ c("div", { style: n.gmCenterScreen, children: [
+                  /* @__PURE__ */ c("h1", { style: n.gmHeadline1, children: [
                     "Theme selected: ",
-                    d
+                    g
                   ] }),
-                  /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
+                  /* @__PURE__ */ c("p", { style: n.gmBodyM, children: [
                     "Rounds: ",
-                    C
+                    i
                   ] }),
-                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: Q, children: "▶ Start game" })
+                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: J, children: "▶ Start game" })
                 ] }),
-                T && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
+                L && /* @__PURE__ */ c("div", { style: n.gmCenterScreen, children: [
                   /* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "Results" }),
-                  /* @__PURE__ */ s("h2", { style: n.gmHeadline3, children: [
+                  /* @__PURE__ */ c("h2", { style: n.gmHeadline3, children: [
                     "Your score: ",
-                    re,
+                    ne,
                     " / ",
-                    C
+                    i
                   ] }),
                   /* @__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__ */ c("table", { style: n.gmTable, children: [
+                    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ c("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: se.map((e, i) => /* @__PURE__ */ s("tr", { children: [
+                    /* @__PURE__ */ t("tbody", { children: oe.map((e, s) => /* @__PURE__ */ c("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" })
-                    ] }, i)) })
+                    ] }, s)) })
                   ] }),
-                  /* @__PURE__ */ s("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
-                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: Q, children: "🔁 Play again" }),
-                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: me, children: "⬅️ Choose theme" })
+                  /* @__PURE__ */ c("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: J, children: "🔁 Play again" }),
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ae, children: "⬅️ Choose theme" })
                   ] })
                 ] }),
-                v && !T && /* @__PURE__ */ s("div", { style: n.gmGameLayout, children: [
-                  /* @__PURE__ */ s("div", { style: { minHeight: 160, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }, children: [
-                    u === "ready" && /* @__PURE__ */ s(pe, { children: [
-                      /* @__PURE__ */ t("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
-                      /* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
-                    ] }),
-                    u === "memorize" && /* @__PURE__ */ s("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
-                      "MEMORIZE (",
-                      H,
-                      ")"
-                    ] }),
-                    u === "guess" && !w && /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
-                      "⏳ Time left: ",
-                      A,
-                      "s"
-                    ] })
-                  ] }),
-                  u !== "ready" && /* @__PURE__ */ t("div", { style: { ...n.gmGrid, gridTemplateColumns: h ? "repeat(2, 1fr)" : "repeat(3, 210px)", gridAutoRows: h ? "150px" : "210px", gap: h ? "12px" : "20px", justifyItems: "center" }, children: o.map((e, i) => {
-                    const c = x === i && u === "guess" && !w;
-                    return /* @__PURE__ */ t("div", { style: { ...n.gmCard, ...K === "correct" && x === i ? n.gmCorrect : {}, ...K === "wrong" && x === i ? n.gmWrong : {} }, children: !c && /* @__PURE__ */ t("img", { src: e.src, alt: e.name, style: { width: "100%", height: "100%", objectFit: "cover" } }) }, i);
-                  }) }),
-                  /* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
-                    u === "guess" && !w && /* @__PURE__ */ s("div", { children: [
-                      /* @__PURE__ */ t("input", { type: "text", placeholder: "Type the missing word", value: M, onChange: (e) => q(e.target.value), style: n.gmInput }),
-                      /* @__PURE__ */ t("button", { style: { ...n.gmButton, marginLeft: 8 }, onClick: de, disabled: W, children: W ? "..." : "Check" })
+                w && !L && /* @__PURE__ */ c("div", { style: n.gmGameLayout, children: [
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      style: {
+                        minHeight: 160,
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "center",
+                        alignItems: "center"
+                      },
+                      children: [
+                        a === "ready" && /* @__PURE__ */ c(ce, { children: [
+                          /* @__PURE__ */ t("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
+                          /* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
+                        ] }),
+                        a === "memorize" && /* @__PURE__ */ c("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
+                          "MEMORIZE (",
+                          T,
+                          ")"
+                        ] }),
+                        a === "guess" && !R && /* @__PURE__ */ c("p", { style: n.gmBodyM, children: [
+                          "⏳ Time left: ",
+                          C,
+                          "s"
+                        ] })
+                      ]
+                    }
+                  ),
+                  a !== "ready" && /* @__PURE__ */ t(
+                    "div",
+                    {
+                      style: {
+                        ...n.gmGrid,
+                        gridTemplateColumns: b ? "repeat(2, 1fr)" : "repeat(3, 210px)",
+                        gridAutoRows: b ? "150px" : "210px",
+                        gap: b ? "12px" : "20px",
+                        justifyItems: "center"
+                      },
+                      children: o.map((e, s) => {
+                        const p = f === s && a === "guess" && !R;
+                        return /* @__PURE__ */ t(
+                          "div",
+                          {
+                            style: {
+                              ...n.gmCard,
+                              ...V === "correct" && f === s ? n.gmCorrect : {},
+                              ...V === "wrong" && f === s ? n.gmWrong : {}
+                            },
+                            children: !p && /* @__PURE__ */ t(
+                              "img",
+                              {
+                                src: e.src,
+                                alt: e.name,
+                                style: {
+                                  width: "100%",
+                                  height: "100%",
+                                  objectFit: "cover"
+                                }
+                              }
+                            )
+                          },
+                          s
+                        );
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ c("div", { style: { marginTop: 16, height: 80 }, children: [
+                    a === "guess" && !R && /* @__PURE__ */ c("div", { children: [
+                      /* @__PURE__ */ t(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "Type the missing word",
+                          value: F,
+                          onChange: (e) => $(e.target.value),
+                          style: n.gmInput
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        "button",
+                        {
+                          style: { ...n.gmButton, marginLeft: 8 },
+                          onClick: se,
+                          disabled: G,
+                          children: G ? "..." : "Check"
+                        }
+                      )
                     ] }),
-                    w && /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ce, children: "Next round" })
+                    R && /* @__PURE__ */ t("button", { type: "button", style: n.gmButton, onClick: le, children: "Next round" })
                   ] })
                 ] })
               ] })
@@ -496,6 +592,6 @@ function Me() {
   );
 }
 export {
-  Me as Game,
-  ne as themes
+  Se as Game,
+  ee as themes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@mblinkov/whats-missing",
- "version": "20.0.19",
+ "version": "20.0.20",
  "main": "dist/whats-missing.umd.js",
  "module": "dist/whats-missing.es.js",
  "types": "dist/index.d.ts",
@@ -14,6 +14,7 @@
   "preview": "vite preview"
  },
  "devDependencies": {
+  "@types/node": "^24.7.2",
   "@types/react": "^19.2.2",
   "@types/react-dom": "^19.2.1",
   "@vitejs/plugin-react": "^5.0.4",