@mblinkov/whats-missing 20.0.9 → 20.0.12

package/dist/whats-missing.es.js

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

package/package.json

@@ -1,16 +1,22 @@
 {
  "name": "@mblinkov/whats-missing",
- "version": "20.0.9",
+ "version": "20.0.12",
  "main": "dist/whats-missing.umd.js",
  "module": "dist/whats-missing.es.js",
  "types": "dist/index.d.ts",
  "peerDependencies": {
-  "react": "^18.0.0",
-  "react-dom": "^18.0.0"
+  "react": "^18.3.1",
+  "react-dom": "^18.3.1"
  },
  "scripts": {
   "dev": "vite",
   "build": "vite build",
   "preview": "vite preview"
+ },
+ "devDependencies": {
+  "@types/react": "^19.2.2",
+  "@types/react-dom": "^19.2.1",
+  "@vitejs/plugin-react": "^5.0.4",
+  "typescript": "^5.9.3"
  }
 }