@mblinkov/whats-missing 20.0.14 → 20.0.16

package/dist/whats-missing.es.js

@@ -1,9 +1,9 @@
-import { jsx as n, jsxs as i, Fragment as se } from "react/jsx-runtime";
-import { useRef as le, useEffect as j, useState as s, useMemo as ae } from "react";
-const de = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l.map(([d, o]) => ({
-  src: `${de}${a}/${o.replace(/\s/g, "%20")}.png`,
+import { jsx as t, jsxs as r, Fragment as ae } from "react/jsx-runtime";
+import { useRef as de, useEffect as j, useState as s, useMemo as ce } from "react";
+const me = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l.map(([d, o]) => ({
+  src: `${me}${a}/${o.replace(/\s/g, "%20")}.png`,
   name: o
-})), ce = [
+})), ge = [
   ["apple", "apple"],
   ["banana", "banana"],
   ["bread", "bread"],
@@ -29,7 +29,7 @@ const de = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l
   ["strawberry", "strawberry"],
   ["tomato", "tomato"],
   ["watermelon", "watermelon"]
-], me = [
+], he = [
   ["bear", "bear"],
   ["cat", "cat"],
   ["crocodile", "crocodile"],
@@ -49,7 +49,7 @@ const de = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l
   ["tortoise", "tortoise"],
   ["wolf", "wolf"],
   ["zebra", "zebra"]
-], ge = [
+], pe = [
   ["ball", "ball"],
   ["balloon", "balloon"],
   ["blocks", "blocks"],
@@ -69,11 +69,11 @@ const de = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l
   ["teddy_bear", "teddy bear"],
   ["yo-yo", "yo-yo"],
   ["crayons", "crayons"]
-], O = {
-  food: W(ce, "food"),
-  animals: W(me, "animals"),
-  toys: W(ge, "toys")
-}, he = `
+], Z = {
+  food: W(ge, "food"),
+  animals: W(he, "animals"),
+  toys: W(pe, "toys")
+}, ue = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -81,11 +81,11 @@ const de = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l
 `;
 if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
   const l = document.createElement("style");
-  l.id = "spin-keyframes", l.innerHTML = he, document.head.appendChild(l);
+  l.id = "spin-keyframes", l.innerHTML = ue, document.head.appendChild(l);
 }
-const pe = {
+const fe = {
   animation: "spin 1.4s linear infinite"
-}, t = {
+}, n = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
@@ -233,382 +233,300 @@ const pe = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...pe
+    ...fe
   }
-}, ue = () => {
+}, ye = () => {
   const l = document.createElement("style");
   l.textContent = `
-    html, body {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      background: radial-gradient(circle at center, #fff8f8 0%, #fdfdfd 80%, #ffffff 100%);
-      background-repeat: no-repeat;
-      background-size: cover;
-      transform-origin: center;
-    }
-
     #whats-missing-root, #whats-missing-root * {
       box-sizing: border-box;
       font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
-      transform: none !important;
     }
-
     #whats-missing-root img {
       max-width: 100%;
       height: auto;
       display: block;
       user-select: none;
     }
+    html, body { margin: 0; padding: 0; }
   `, document.head.appendChild(l);
-}, fe = (l, a) => {
-  const d = Array.from(
-    { length: l.length + 1 },
-    () => Array(a.length + 1).fill(0)
-  );
+}, be = (l, a) => {
+  const d = Array.from({ length: l.length + 1 }, () => Array(a.length + 1).fill(0));
   for (let o = 0; o <= l.length; o++) d[o][0] = o;
   for (let o = 0; o <= a.length; o++) d[0][o] = o;
   for (let o = 1; o <= l.length; o++)
-    for (let c = 1; c <= a.length; c++)
-      d[o][c] = l[o - 1] === a[c - 1] ? d[o - 1][c - 1] : Math.min(d[o - 1][c - 1], d[o][c - 1], d[o - 1][c]) + 1;
+    for (let m = 1; m <= a.length; m++)
+      d[o][m] = l[o - 1] === a[m - 1] ? d[o - 1][m - 1] : Math.min(d[o - 1][m - 1], d[o][m - 1], d[o - 1][m]) + 1;
   return d[l.length][a.length];
 };
-function be() {
-  const l = le(null);
-  j(() => (ue(), () => {
+function ke() {
+  const l = de(null);
+  j(() => (ye(), () => {
     document.body.style.overflow = "";
   }), []);
-  const [a, d] = s(null), [o, c] = s([]), [x, Z] = s(4), [f, G] = s(!1), [b, E] = s(1), [p, J] = s(null), [g, w] = s("ready"), [F, D] = s(3), [S, z] = s(10), [R, Y] = s(20), [Q, I] = s(0), [k, H] = s(!1), [v, U] = s(""), [u, M] = s(!1), [A, N] = s(!1), [P, y] = s(
-    null
-  ), [X, B] = s([]), [ee, V] = s([]), [C, te] = s(!1);
+  const [a, d] = s(null), [o, m] = s([]), [w, J] = s(4), [b, E] = s(!1), [k, G] = s(1), [u, Q] = s(null), [h, v] = s("ready"), [F, Y] = s(3), [S, z] = s(10), [R, D] = s(20), [X, I] = s(0), [C, H] = s(!1), [T, U] = s(""), [f, M] = s(!1), [A, $] = s(!1), [N, x] = s(null), [ee, B] = s([]), [te, O] = s([]), [p, ne] = s(!1), [oe, P] = s(1);
   j(() => {
-    const e = () => te(window.innerWidth < 768);
+    const e = () => {
+      const i = window.innerWidth < 768;
+      if (ne(i), i)
+        P(1);
+      else {
+        const y = Math.min(window.innerWidth / 1440, window.innerHeight / 768);
+        P(y);
+      }
+    };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  const _ = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), $ = () => {
+  const V = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), _ = () => {
     if (!a) return;
-    const e = _(O[a]);
-    c(e), G(!0), H(!1), E(1), I(0), B([]), V([]), q(e, [], !0);
-  }, q = (e = o, r = ee, h = !1) => {
-    const m = _(e.length ? e : O[a]);
-    let T = Math.floor(Math.random() * m.length), L = m[T].name, K = 0;
-    for (; r.includes(L) && K < 20; )
-      T = Math.floor(Math.random() * m.length), L = m[T].name, K++;
-    c(m), J(T), V([...r, L]), M(!1), U(""), Y(20), y(null), h ? (w("ready"), D(3), z(10)) : (w("memorize"), z(10));
+    const e = V(Z[a]);
+    m(e), E(!0), H(!1), G(1), I(0), B([]), O([]), q(e, [], !0);
+  }, q = (e = o, i = te, g = !1) => {
+    const c = V(e.length ? e : Z[a]);
+    let y = Math.floor(Math.random() * c.length), L = c[y].name, K = 0;
+    for (; i.includes(L) && K < 20; )
+      y = Math.floor(Math.random() * c.length), L = c[y].name, K++;
+    m(c), Q(y), O([...i, L]), M(!1), U(""), D(20), x(null), g ? (v("ready"), Y(3), z(10)) : (v("memorize"), z(10));
   };
   j(() => {
-    if (!(!f || k || u)) {
-      if (g === "ready")
-        if (F <= 0) w("memorize");
+    if (!(!b || C || f)) {
+      if (h === "ready")
+        if (F <= 0) v("memorize");
         else {
-          const e = setTimeout(() => D((r) => r - 1), 1e3);
+          const e = setTimeout(() => Y((i) => i - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (g === "memorize")
-        if (S <= 0) w("guess");
+      if (h === "memorize")
+        if (S <= 0) v("guess");
         else {
-          const e = setTimeout(() => z((r) => r - 1), 1e3);
+          const e = setTimeout(() => z((i) => i - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (g === "guess") {
+      if (h === "guess") {
         if (R <= 0) {
-          M(!0), y("wrong");
-          const r = o[p].name;
-          B((h) => [
-            ...h,
-            {
-              round: b,
-              answer: v,
-              correct: r,
-              result: "wrong"
-            }
+          M(!0), x("wrong");
+          const i = o[u].name;
+          B((g) => [
+            ...g,
+            { round: k, answer: T, correct: i, result: "wrong" }
           ]);
           return;
         }
-        const e = setTimeout(() => Y((r) => r - 1), 1e3);
+        const e = setTimeout(() => D((i) => i - 1), 1e3);
         return () => clearTimeout(e);
       }
     }
-  }, [
-    g,
-    F,
-    S,
-    R,
-    f,
-    k,
-    u,
-    o,
-    p,
-    b,
-    v
-  ]);
-  const ne = () => {
-    if (p === null || A) return;
-    const e = o[p].name, r = v.toLowerCase().trim();
-    let h = "wrong";
-    r === e ? (I((m) => m + 1), y("correct"), h = "correct") : fe(r, e) === 1 ? (I((m) => m + 0.5), y("almost"), h = "almost") : (y("wrong"), h = "wrong"), B((m) => [
-      ...m,
-      { round: b, answer: r, correct: e, result: h }
-    ]), N(!0), setTimeout(() => {
-      N(!1), M(!0);
+  }, [h, F, S, R, b, C, f, o, u, k, T]);
+  const ie = () => {
+    if (u === null || A) return;
+    const e = o[u].name, i = T.toLowerCase().trim();
+    let g = "wrong";
+    i === e ? (I((c) => c + 1), x("correct"), g = "correct") : be(i, e) === 1 ? (I((c) => c + 0.5), x("almost"), g = "almost") : (x("wrong"), g = "wrong"), B((c) => [...c, { round: k, answer: i, correct: e, result: g }]), $(!0), setTimeout(() => {
+      $(!1), M(!0);
     }, 600);
-  }, oe = () => b < x ? (E((e) => e + 1), q()) : H(!0), re = () => {
-    G(!1), H(!1), d(null);
-  }, ie = ae(
-    () => /* @__PURE__ */ n("div", { style: t.gmLogoFixed, children: /* @__PURE__ */ i("picture", { children: [
-      /* @__PURE__ */ n(
-        "source",
-        {
-          srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg",
-          type: "image/svg+xml"
-        }
-      ),
-      /* @__PURE__ */ n(
-        "img",
-        {
-          src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png",
-          alt: "SPEAKID Logo",
-          style: t.gmLogoImg,
-          loading: "lazy"
-        }
-      )
+  }, re = () => k < w ? (G((e) => e + 1), q()) : H(!0), se = () => {
+    E(!1), H(!1), d(null);
+  }, le = ce(
+    () => /* @__PURE__ */ t("div", { style: n.gmLogoFixed, children: /* @__PURE__ */ r("picture", { children: [
+      /* @__PURE__ */ t("source", { srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg", type: "image/svg+xml" }),
+      /* @__PURE__ */ t("img", { src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png", alt: "SPEAKID Logo", style: n.gmLogoImg, loading: "lazy" })
     ] }) }),
     []
   );
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(
     "div",
     {
       ref: l,
       style: {
+        width: "100%",
+        height: "100vh",
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        width: "100%",
-        height: "100%"
+        background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+        transition: "background 0.3s ease"
       },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ t(
         "div",
         {
           style: {
-            width: window.innerWidth > window.innerHeight ? "90vh" : "90vw",
-            height: window.innerWidth > window.innerHeight ? "90vh" : "90vw",
+            width: p ? "100%" : 1440,
+            height: p ? "100%" : 768,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
-            flexDirection: "column",
             overflow: "hidden",
-            borderRadius: "20px",
-            background: "radial-gradient(circle at center, #fff8f8 0%, #fdfdfd 80%, #ffffff 100%)",
-            boxShadow: "0 0 40px rgba(0,0,0,0.08)"
+            borderRadius: p ? 0 : "20px",
+            background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+            boxShadow: p ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: p ? "0 auto" : "unset"
           },
-          children: /* @__PURE__ */ i("div", { id: "whats-missing-root", children: [
-            !C && ie,
-            !a && !f && /* @__PURE__ */ i("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: () => d(e),
-                  children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys"
-                },
-                e
-              )) }),
-              /* @__PURE__ */ i("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: {
-                      ...t.gmButton,
-                      ...x === e ? t.gmButtonActive : {}
-                    },
-                    onClick: () => Z(e),
-                    children: e
-                  },
-                  e
-                )) })
-              ] })
-            ] }),
-            a && !f && /* @__PURE__ */ i("div", { style: t.gmCenterScreen, children: [
-              /* @__PURE__ */ i("h1", { style: t.gmHeadline1, children: [
-                "Theme selected: ",
-                a
-              ] }),
-              /* @__PURE__ */ i("p", { style: t.gmBodyM, children: [
-                "Rounds: ",
-                x
-              ] }),
-              /* @__PURE__ */ n("button", { style: t.gmButton, onClick: $, children: "▶ Start game" })
-            ] }),
-            k && /* @__PURE__ */ i("div", { style: t.gmCenterScreen, children: [
-              /* @__PURE__ */ n("h1", { style: t.gmHeadline1, children: "Results" }),
-              /* @__PURE__ */ i("h2", { style: t.gmHeadline3, children: [
-                "Your score: ",
-                Q,
-                " / ",
-                x
-              ] }),
-              /* @__PURE__ */ n(
-                "p",
-                {
-                  style: {
-                    ...t.gmBodyM,
-                    color: "#10b981",
-                    marginTop: 12
-                  },
-                  children: "Great job! 🎉 You did it!"
-                }
-              ),
-              /* @__PURE__ */ i("table", { style: t.gmTable, children: [
-                /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ i("tr", { children: [
-                  /* @__PURE__ */ n("th", { children: "Round" }),
-                  /* @__PURE__ */ n("th", { children: "Your Answer" }),
-                  /* @__PURE__ */ n("th", { children: "Correct" }),
-                  /* @__PURE__ */ n("th", { children: "Result" })
-                ] }) }),
-                /* @__PURE__ */ n("tbody", { children: X.map((e, r) => /* @__PURE__ */ i("tr", { children: [
-                  /* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.round }),
-                  /* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.answer || "—" }),
-                  /* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.correct }),
-                  /* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
-                ] }, r)) })
-              ] }),
-              /* @__PURE__ */ i("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
-                /* @__PURE__ */ n("button", { style: t.gmButton, onClick: $, children: "🔁 Play again" }),
-                /* @__PURE__ */ n("button", { style: t.gmButton, onClick: re, children: "⬅️ Choose theme" })
-              ] })
-            ] }),
-            f && !k && /* @__PURE__ */ i("div", { style: t.gmGameLayout, children: [
-              /* @__PURE__ */ i(
-                "div",
-                {
-                  style: {
-                    minHeight: 160,
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center"
-                  },
-                  children: [
-                    g === "ready" && /* @__PURE__ */ i(se, { children: [
-                      /* @__PURE__ */ n(
-                        "h1",
-                        {
-                          style: {
-                            ...t.gmHeadline1,
-                            color: "#ec4c44"
-                          },
-                          children: "GET READY"
-                        }
-                      ),
-                      /* @__PURE__ */ n("div", { style: t.gmHourglass, children: "⏳" })
-                    ] }),
-                    g === "memorize" && /* @__PURE__ */ i(
-                      "p",
+          children: /* @__PURE__ */ t(
+            "div",
+            {
+              style: {
+                transform: p ? "none" : `scale(${oe})`,
+                transformOrigin: "center center",
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ r("div", { id: "whats-missing-root", children: [
+                !p && le,
+                !a && !b && /* @__PURE__ */ r("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: () => d(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
+                  /* @__PURE__ */ r("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: {
-                          ...t.gmBodyM,
-                          color: "#10b981"
+                          ...n.gmButton,
+                          ...w === e ? n.gmButtonActive : {}
                         },
-                        children: [
+                        onClick: () => J(e),
+                        children: e
+                      },
+                      e
+                    )) })
+                  ] })
+                ] }),
+                a && !b && /* @__PURE__ */ r("div", { style: n.gmCenterScreen, children: [
+                  /* @__PURE__ */ r("h1", { style: n.gmHeadline1, children: [
+                    "Theme selected: ",
+                    a
+                  ] }),
+                  /* @__PURE__ */ r("p", { style: n.gmBodyM, children: [
+                    "Rounds: ",
+                    w
+                  ] }),
+                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: _, children: "▶ Start game" })
+                ] }),
+                C && /* @__PURE__ */ r("div", { style: n.gmCenterScreen, children: [
+                  /* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "Results" }),
+                  /* @__PURE__ */ r("h2", { style: n.gmHeadline3, children: [
+                    "Your score: ",
+                    X,
+                    " / ",
+                    w
+                  ] }),
+                  /* @__PURE__ */ t("p", { style: { ...n.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
+                  /* @__PURE__ */ r("table", { style: n.gmTable, children: [
+                    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ r("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: ee.map((e, i) => /* @__PURE__ */ r("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)) })
+                  ] }),
+                  /* @__PURE__ */ r("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: _, children: "🔁 Play again" }),
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: se, children: "⬅️ Choose theme" })
+                  ] })
+                ] }),
+                b && !C && /* @__PURE__ */ r("div", { style: n.gmGameLayout, children: [
+                  /* @__PURE__ */ r(
+                    "div",
+                    {
+                      style: {
+                        minHeight: 160,
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "center",
+                        alignItems: "center"
+                      },
+                      children: [
+                        h === "ready" && /* @__PURE__ */ r(ae, { children: [
+                          /* @__PURE__ */ t("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
+                          /* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
+                        ] }),
+                        h === "memorize" && /* @__PURE__ */ r("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
                           "MEMORIZE (",
                           S,
                           ")"
-                        ]
-                      }
-                    ),
-                    g === "guess" && !u && /* @__PURE__ */ i("p", { style: t.gmBodyM, children: [
-                      "⏳ Time left: ",
-                      R,
-                      "s"
-                    ] })
-                  ]
-                }
-              ),
-              g !== "ready" && /* @__PURE__ */ n(
-                "div",
-                {
-                  style: {
-                    ...t.gmGrid,
-                    gridTemplateColumns: C ? "repeat(2, 1fr)" : "repeat(3, 210px)",
-                    gridAutoRows: C ? "150px" : "210px",
-                    gap: C ? "12px" : "20px",
-                    justifyItems: "center"
-                  },
-                  children: o.map((e, r) => {
-                    const h = p === r && g === "guess" && !u;
-                    return /* @__PURE__ */ n(
-                      "div",
-                      {
-                        style: {
-                          ...t.gmCard,
-                          ...P === "correct" && p === r ? t.gmCorrect : {},
-                          ...P === "wrong" && p === r ? t.gmWrong : {}
-                        },
-                        children: !h && /* @__PURE__ */ n(
-                          "img",
-                          {
-                            src: e.src,
-                            alt: e.name,
-                            style: {
-                              width: "100%",
-                              height: "100%",
-                              objectFit: "cover"
-                            }
-                          }
-                        )
-                      },
-                      r
-                    );
-                  })
-                }
-              ),
-              /* @__PURE__ */ i("div", { style: { marginTop: 16, height: 80 }, children: [
-                g === "guess" && !u && /* @__PURE__ */ i("div", { children: [
-                  /* @__PURE__ */ n(
-                    "input",
-                    {
-                      type: "text",
-                      placeholder: "Type the missing word",
-                      value: v,
-                      onChange: (e) => U(e.target.value),
-                      style: t.gmInput
+                        ] }),
+                        h === "guess" && !f && /* @__PURE__ */ r("p", { style: n.gmBodyM, children: [
+                          "⏳ Time left: ",
+                          R,
+                          "s"
+                        ] })
+                      ]
                     }
                   ),
-                  /* @__PURE__ */ n(
-                    "button",
+                  h !== "ready" && /* @__PURE__ */ t(
+                    "div",
                     {
                       style: {
-                        ...t.gmButton,
-                        marginLeft: 8
+                        ...n.gmGrid,
+                        gridTemplateColumns: p ? "repeat(2, 1fr)" : "repeat(3, 210px)",
+                        gridAutoRows: p ? "150px" : "210px",
+                        gap: p ? "12px" : "20px",
+                        justifyItems: "center"
                       },
-                      onClick: ne,
-                      disabled: A,
-                      children: A ? "..." : "Check"
+                      children: o.map((e, i) => {
+                        const g = u === i && h === "guess" && !f;
+                        return /* @__PURE__ */ t(
+                          "div",
+                          {
+                            style: {
+                              ...n.gmCard,
+                              ...N === "correct" && u === i ? n.gmCorrect : {},
+                              ...N === "wrong" && u === i ? n.gmWrong : {}
+                            },
+                            children: !g && /* @__PURE__ */ t(
+                              "img",
+                              {
+                                src: e.src,
+                                alt: e.name,
+                                style: {
+                                  width: "100%",
+                                  height: "100%",
+                                  objectFit: "cover"
+                                }
+                              }
+                            )
+                          },
+                          i
+                        );
+                      })
                     }
-                  )
-                ] }),
-                u && /* @__PURE__ */ n(
-                  "button",
-                  {
-                    style: t.gmButton,
-                    onClick: oe,
-                    children: "Next round"
-                  }
-                )
+                  ),
+                  /* @__PURE__ */ r("div", { style: { marginTop: 16, height: 80 }, children: [
+                    h === "guess" && !f && /* @__PURE__ */ r("div", { children: [
+                      /* @__PURE__ */ t(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "Type the missing word",
+                          value: T,
+                          onChange: (e) => U(e.target.value),
+                          style: n.gmInput
+                        }
+                      ),
+                      /* @__PURE__ */ t("button", { style: { ...n.gmButton, marginLeft: 8 }, onClick: ie, disabled: A, children: A ? "..." : "Check" })
+                    ] }),
+                    f && /* @__PURE__ */ t("button", { style: n.gmButton, onClick: re, children: "Next round" })
+                  ] })
+                ] })
               ] })
-            ] })
-          ] })
+            }
+          )
         }
       )
     }
   );
 }
 export {
-  be as Game,
-  O as themes
+  ke as Game,
+  Z as themes
 };