@mblinkov/whats-missing 20.0.19 → 20.0.21

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 ue } from "react/jsx-runtime";
+import { useRef as te, useEffect as P, useState as d, useMemo as he, useLayoutEffect as fe } from "react";
+const pe = window.origin + "/cloud/speakid/games/whatsmissing/", V = (l, g) => l.map(([m, o]) => ({
+  src: `${pe}${g}/${o.replace(/\s/g, "%20")}.png`,
   name: o
-})), xe = [
+})), ye = [
   ["apple", "apple"],
   ["banana", "banana"],
   ["bread", "bread"],
@@ -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: V(ye, "food"),
+  animals: V(be, "animals"),
+  toys: V(we, "toys")
+}, xe = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -81,15 +81,17 @@ 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 = xe, document.head.appendChild(l);
 }
-const ke = {
+const ve = {
   animation: "spin 1.4s linear infinite"
 }, n = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
-    minHeight: "100vh",
+    // use percent so the component fits inside the centered square container
+    // (100vh caused overflow on tablets because it measured the viewport, not the container)
+    minHeight: "100%",
     width: "100%",
     display: "flex",
     flexDirection: "column",
@@ -144,7 +146,8 @@ const ke = {
     position: "relative",
     width: "100%",
     maxWidth: "600px",
-    minHeight: "100vh",
+    // should fill the parent square, not the full viewport
+    minHeight: "100%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -233,125 +236,159 @@ const ke = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...ke
+    ...ve
   }
-}, Ce = () => {
+}, ke = () => {
   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));
+}, ze = (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 Ce(l, g = { minDesktopWidth: 1200, forceResize: !1 }) {
+  const m = te(null), o = g.minDesktopWidth ?? 1200, u = !!g.forceResize;
+  fe(() => {
+    if (typeof window > "u" || !l || !l.current) return;
+    const s = l.current, F = () => {
       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 i = document.body, a = getComputedStyle(i), y = parseFloat(i.style && i.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 z = T[1].split(",").map((E) => parseFloat(E))[0];
+            if (z && !isNaN(z)) return z;
           }
         }
       } catch {
       }
-      G(1);
+      return 1;
+    }, x = () => {
+      if (o && window.innerWidth < o) {
+        C();
+        return;
+      }
+      const i = F();
+      if (!i || i === 1) {
+        C();
+        return;
+      }
+      m.current || (m.current = {
+        transform: s.style.transform || null,
+        transformOrigin: s.style.transformOrigin || null,
+        width: s.style.width || null,
+        height: s.style.height || null,
+        willChange: s.style.willChange || null
+      });
+      const a = 1 / i;
+      u && (s.style.width = `${i * 100}%`, s.style.height = `${i * 100}%`), s.style.transform = `scale(${a})`, s.style.transformOrigin = "top left", s.style.willChange = "transform", typeof process < "u" && process.env && process.env.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] applied scale:", { scale: i, inv: a, forceResize: u });
+    }, C = () => {
+      if (!m.current) return;
+      const i = m.current;
+      i.transform === null ? s.style.removeProperty("transform") : s.style.transform = i.transform, i.transformOrigin === null ? s.style.removeProperty("transform-origin") : s.style.transformOrigin = i.transformOrigin, i.width === null ? s.style.removeProperty("width") : s.style.width = i.width, i.height === null ? s.style.removeProperty("height") : s.style.height = i.height, i.willChange === null ? s.style.removeProperty("will-change") : s.style.willChange = i.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 w = 0;
+    const v = () => {
+      cancelAnimationFrame(w), w = requestAnimationFrame(x);
+    }, p = new MutationObserver((i) => {
+      for (const a of i)
+        if (a.type === "attributes" && (a.attributeName === "style" || a.attributeName === "class")) {
+          v();
+          break;
+        }
+    });
+    return p.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", v), v(), () => {
+      cancelAnimationFrame(w), p.disconnect(), window.removeEventListener("resize", v), C();
+    };
+  }, [l, o, u]);
+}
+function Me() {
+  const l = te(null);
+  Ce(l, { minDesktopWidth: 1200, forceResize: !1 }), P(() => (ke(), () => {
+    document.body.style.overflow = "";
+  }), []);
+  const [g, m] = d(null), [o, u] = d([]), [s, F] = d(4), [x, C] = d(!1), [w, v] = d(1), [p, i] = d(null), [a, y] = d("ready"), [k, S] = d(3), [T, B] = d(10), [z, E] = d(20), [ne, W] = d(0), [A, N] = d(!1), [H, Y] = d(""), [R, j] = d(!1), [D, $] = d(!1), [q, L] = d(null), [oe, G] = d([]), [re, Z] = d([]), [b, ie] = d(!1), [Se, _] = d(1), [U, K] = d(null);
+  P(() => {
+    const e = () => {
+      const h = window.visualViewport, f = h ? Math.round(h.width) : window.innerWidth, I = h ? Math.round(h.height) : window.innerHeight, M = f < 768;
+      if (ie(M), M)
+        K(null), _(1);
+      else {
+        const ce = Math.min(f, I), me = Math.max(360, Math.round(ce * 0.97)), ge = Math.min(me, 1e3);
+        K(ge), _(1);
+      }
+    };
+    e(), window.addEventListener("resize", e);
+    const r = window.visualViewport;
+    return r && typeof r.addEventListener == "function" && (r.addEventListener("resize", e), r.addEventListener("scroll", e)), () => {
+      window.removeEventListener("resize", e), r && typeof r.removeEventListener == "function" && (r.removeEventListener("resize", e), r.removeEventListener("scroll", 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), C(!0), N(!1), v(1), W(0), G([]), Z([]), Q(e, [], !0);
+  }, Q = (e = o, r = re, h = !1) => {
+    const f = X(e.length ? e : ee[g]);
+    let I = Math.floor(Math.random() * f.length), M = f[I].name, O = 0;
+    for (; r.includes(M) && O < 20; )
+      I = Math.floor(Math.random() * f.length), M = f[I].name, O++;
+    u(f), i(I), Z([...r, M]), j(!1), Y(""), E(20), L(null), h ? (y("ready"), S(3), B(10)) : (y("memorize"), B(10));
   };
-  N(() => {
-    if (!(!v || T || w)) {
-      if (u === "ready")
-        if (O <= 0) z("memorize");
+  P(() => {
+    if (!(!x || A || R)) {
+      if (a === "ready")
+        if (k <= 0) y("memorize");
         else {
-          const e = setTimeout(() => U((i) => i - 1), 1e3);
+          const e = setTimeout(() => S((r) => r - 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(() => B((r) => r - 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 (z <= 0) {
+          j(!0), L("wrong");
+          const r = o[p].name;
+          G((h) => [
+            ...h,
+            { round: w, answer: H, correct: r, result: "wrong" }
+          ]);
           return;
         }
-        const e = setTimeout(() => V((i) => i - 1), 1e3);
+        const e = setTimeout(() => E((r) => r - 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, z, x, A, R, o, p, w, H]);
+  const se = () => {
+    if (p === null || D) return;
+    const e = o[p].name, r = H.toLowerCase().trim();
+    let h = "wrong";
+    r === e ? (W((f) => f + 1), L("correct"), h = "correct") : ze(r, e) === 1 ? (W((f) => f + 0.5), L("almost"), h = "almost") : (L("wrong"), h = "wrong"), G((f) => [...f, { round: w, answer: r, correct: e, result: h }]), $(!0), setTimeout(() => {
+      $(!1), j(!0);
     }, 600);
-  }, ce = () => S < C ? (P((e) => e + 1), ee()) : j(!0), me = () => {
-    D(!1), j(!1), m(null);
-  }, ge = fe(
+  }, le = () => w < s ? (v((e) => e + 1), Q()) : N(!0), ae = () => {
+    C(!1), N(!1), m(null);
+  }, de = he(
     () => (
       // 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 +413,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 && !x && /* @__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,
+                          ...s === e ? n.gmButtonActive : {}
+                        },
+                        onClick: () => F(e),
                         children: e
                       },
                       e
                     )) })
                   ] })
                 ] }),
-                d && !v && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
-                  /* @__PURE__ */ s("h1", { style: n.gmHeadline1, children: [
+                g && !x && /* @__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
+                    s
                   ] }),
-                  /* @__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: [
+                A && /* @__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
+                    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__ */ 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, r) => /* @__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)) })
+                    ] }, r)) })
                   ] }),
-                  /* @__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" })
+                x && !A && /* @__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(ue, { 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: ",
+                          z,
+                          "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, r) => {
+                        const h = p === r && a === "guess" && !R;
+                        return /* @__PURE__ */ t(
+                          "div",
+                          {
+                            style: {
+                              ...n.gmCard,
+                              ...q === "correct" && p === r ? n.gmCorrect : {},
+                              ...q === "wrong" && p === r ? n.gmWrong : {}
+                            },
+                            children: !h && /* @__PURE__ */ t(
+                              "img",
+                              {
+                                src: e.src,
+                                alt: e.name,
+                                style: {
+                                  width: "100%",
+                                  height: "100%",
+                                  objectFit: "cover"
+                                }
+                              }
+                            )
+                          },
+                          r
+                        );
+                      })
+                    }
+                  ),
+                  /* @__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: H,
+                          onChange: (e) => Y(e.target.value),
+                          style: n.gmInput
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        "button",
+                        {
+                          style: { ...n.gmButton, marginLeft: 8 },
+                          onClick: se,
+                          disabled: D,
+                          children: D ? "..." : "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" })
                   ] })
                 ] })
               ] })
@@ -497,5 +600,5 @@ function Me() {
 }
 export {
   Me as Game,
-  ne as themes
+  ee as themes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@mblinkov/whats-missing",
- "version": "20.0.19",
+ "version": "20.0.21",
  "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",

package/src/Game.styles.ts

@@ -25,7 +25,9 @@ export const styles: Record<string, CSSProperties> = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
-    minHeight: "100vh",
+    // use percent so the component fits inside the centered square container
+    // (100vh caused overflow on tablets because it measured the viewport, not the container)
+    minHeight: "100%",
     width: "100%",
     display: "flex",
     flexDirection: "column",
@@ -100,7 +102,8 @@ export const styles: Record<string, CSSProperties> = {
     position: "relative",
     width: "100%",
     maxWidth: "600px",
-    minHeight: "100vh",
+    // should fill the parent square, not the full viewport
+    minHeight: "100%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -203,7 +206,8 @@ export const styles: Record<string, CSSProperties> = {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    height: "60vh",
+    // use percent so the wrapper scales with the container square
+    height: "60%",
     gap: "16px",
   },