@mblinkov/whats-missing 0.0.1

package/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/whats-missing.css

@@ -0,0 +1 @@
+@import"https://cdn.jsdelivr.net/npm/@geist-ui/fonts@latest/index.css";:root{--font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";--text: #1f2937;--muted: #6b7280;--bg: #ffffff;--card: #f9f9f9;--border: #e5e7eb;--accent: #ec4c44;--accent-contrast: #ffffff;--progress: #10b981;--success: #10b981;--error: #ec4c44;--card-size: 210px;--gap: 20px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-sans);color:var(--text);background:radial-gradient(1200px 700px at 50% 8%,#fdf2f1,#fdf2f1d9 30%,#eff6ffa6 70%) fixed,#fff}.headline1{font-weight:700;font-size:clamp(28px,4.2vw,40px);line-height:110%}.headline2{font-weight:600;font-size:24px;line-height:110%}.headline3{font-weight:600;font-size:18px;line-height:120%}.bodyL{font-weight:400;font-size:18px;line-height:140%}.bodyM{font-weight:400;font-size:16px;line-height:140%}.bodyS{font-weight:400;font-size:14px;line-height:140%;color:var(--muted)}.captionSB{font-weight:600;font-size:12px;line-height:120%;color:var(--muted)}.button{font:600 16px/100% var(--font-sans);padding:10px 16px;border-radius:12px;border:1px solid var(--border);background:var(--accent);color:var(--accent-contrast);cursor:pointer;box-shadow:0 6px 18px #ec4c442e;transition:transform .06s ease,box-shadow .2s ease,background .2s ease,opacity .2s ease}.button:hover{transform:translateY(-1px);box-shadow:0 10px 24px #ec4c4438}.button:active{transform:translateY(0);box-shadow:0 4px 12px #ec4c442e}.button[disabled]{opacity:.7;cursor:default}.button--ghost{background:#f9f9f9;color:#111827;box-shadow:none}.logo-fixed{position:fixed;top:16px;left:20px;z-index:1000}.logo-fixed img{height:clamp(28px,5vw,40px);width:auto}.centerScreen,.gameLayout{position:relative;z-index:1;height:100vh;padding:16px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.progressContainer{width:min(80%,900px);height:10px;background:#eee;border-radius:999px;overflow:hidden;margin-bottom:16px}.progressBar{height:100%;background:var(--progress);transition:width .3s ease}.grid{width:100%;max-width:calc(var(--card-size)*3 + var(--gap)*2);margin:0 auto;display:grid;grid-template-columns:repeat(3,var(--card-size));grid-auto-rows:var(--card-size);gap:var(--gap)}.card{border:1px solid var(--border);border-radius:16px;background:var(--card);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.card img{width:100%;height:100%;object-fit:cover}@keyframes hop{0%{transform:translateY(0)}30%{transform:translateY(-18px)}60%{transform:translateY(-6px)}to{transform:translateY(0)}}.hop{animation:hop .6s ease}.card.correct{border:2px solid var(--success);box-shadow:0 0 18px #10b98173;background:#ecfdf5}.card.wrong{border:2px solid var(--error);box-shadow:0 0 18px #ec4c4459;background:#fef2f2}.phase-wrapper{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:calc(var(--card-size)*2 + var(--gap) + 120px)}.phase-title{font-size:42px;font-weight:700;margin-bottom:16px}.phase-title.red{color:var(--accent)}.phase-title.green{color:var(--success)}.phase-icon{font-size:64px;margin-bottom:12px;animation:spin 1.5s linear infinite}.phase-grid-placeholder{width:100%;max-width:calc(var(--card-size)*3 + var(--gap)*2);margin-top:24px;height:calc(var(--card-size)*2 + var(--gap))}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{display:inline-block;animation:spin 1.5s linear infinite}.fade{animation:fadeIn .6s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.pulse{animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}.bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.bubble{position:absolute;bottom:-120px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffffe6,#ffffff4d 60%,#fff0 70%);opacity:.18;filter:blur(.4px)}@keyframes floatUp{0%{transform:translateY(0) translate(0)}to{transform:translateY(-115vh) translate(30px)}}.bubble:nth-child(1){left:8%;width:120px;height:120px;animation:floatUp 16s linear infinite}.bubble:nth-child(2){left:24%;width:90px;height:90px;animation:floatUp 18s linear infinite .8s}.bubble:nth-child(3){left:52%;width:140px;height:140px;animation:floatUp 20s linear infinite .3s}.bubble:nth-child(4){left:74%;width:70px;height:70px;animation:floatUp 15s linear infinite 1.2s}.bubble:nth-child(5){left:88%;width:110px;height:110px;animation:floatUp 19s linear infinite .5s}@media (max-width: 900px){:root{--card-size: 180px;--gap: 16px}}@media (max-width: 640px){.grid{max-width:314px;grid-template-columns:repeat(2,150px);grid-auto-rows:150px;gap:14px}.button{font-size:14px;padding:9px 14px;border-radius:10px}.hide-logo-mobile{display:none!important}}

package/dist/whats-missing.es.js

@@ -0,0 +1,644 @@
+import ue, { useState as u, useEffect as oe } from "react";
+var re = { exports: {} }, z = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ae;
+function pe() {
+  if (ae) return z;
+  ae = 1;
+  var c = Symbol.for("react.transitional.element"), m = Symbol.for("react.fragment");
+  function i(o, n, f) {
+    var j = null;
+    if (f !== void 0 && (j = "" + f), n.key !== void 0 && (j = "" + n.key), "key" in n) {
+      f = {};
+      for (var R in n)
+        R !== "key" && (f[R] = n[R]);
+    } else f = n;
+    return n = f.ref, {
+      $$typeof: c,
+      type: o,
+      key: j,
+      ref: n !== void 0 ? n : null,
+      props: f
+    };
+  }
+  return z.Fragment = m, z.jsx = i, z.jsxs = i, z;
+}
+var H = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ce;
+function ge() {
+  return ce || (ce = 1, process.env.NODE_ENV !== "production" && (function() {
+    function c(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === y ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case P:
+          return "Fragment";
+        case O:
+          return "Profiler";
+        case U:
+          return "StrictMode";
+        case Y:
+          return "Suspense";
+        case J:
+          return "SuspenseList";
+        case _:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case W:
+            return "Portal";
+          case L:
+            return (e.displayName || "Context") + ".Provider";
+          case q:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case F:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case K:
+            return t = e.displayName || null, t !== null ? t : c(e.type) || "Memo";
+          case S:
+            t = e._payload, e = e._init;
+            try {
+              return c(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function m(e) {
+      return "" + e;
+    }
+    function i(e) {
+      try {
+        m(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var a = t.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return a.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          d
+        ), m(e);
+      }
+    }
+    function o(e) {
+      if (e === P) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === S)
+        return "<...>";
+      try {
+        var t = c(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function n() {
+      var e = C.A;
+      return e === null ? null : e.getOwner();
+    }
+    function f() {
+      return Error("react-stack-top-frame");
+    }
+    function j(e) {
+      if (N.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function R(e, t) {
+      function a() {
+        T || (T = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          t
+        ));
+      }
+      a.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: a,
+        configurable: !0
+      });
+    }
+    function w() {
+      var e = c(this.type);
+      return $[e] || ($[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function V(e, t, a, d, x, h, Q, B) {
+      return a = h.ref, e = {
+        $$typeof: k,
+        type: e,
+        key: t,
+        props: h,
+        _owner: x
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: w
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: Q
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: B
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function b(e, t, a, d, x, h, Q, B) {
+      var g = t.children;
+      if (g !== void 0)
+        if (d)
+          if (Z(g)) {
+            for (d = 0; d < g.length; d++)
+              X(g[d]);
+            Object.freeze && Object.freeze(g);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else X(g);
+      if (N.call(t, "key")) {
+        g = c(e);
+        var v = Object.keys(t).filter(function(r) {
+          return r !== "key";
+        });
+        d = 0 < v.length ? "{key: someKey, " + v.join(": ..., ") + ": ...}" : "{key: someKey}", M[g + d] || (v = 0 < v.length ? "{" + v.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          d,
+          g,
+          v,
+          g
+        ), M[g + d] = !0);
+      }
+      if (g = null, a !== void 0 && (i(a), g = "" + a), j(t) && (i(t.key), g = "" + t.key), "key" in t) {
+        a = {};
+        for (var G in t)
+          G !== "key" && (a[G] = t[G]);
+      } else a = t;
+      return g && R(
+        a,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), V(
+        e,
+        g,
+        h,
+        x,
+        n(),
+        a,
+        Q,
+        B
+      );
+    }
+    function X(e) {
+      typeof e == "object" && e !== null && e.$$typeof === k && e._store && (e._store.validated = 1);
+    }
+    var p = ue, k = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), P = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), O = Symbol.for("react.profiler"), q = Symbol.for("react.consumer"), L = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), Y = Symbol.for("react.suspense"), J = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), _ = Symbol.for("react.activity"), y = Symbol.for("react.client.reference"), C = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, Z = Array.isArray, D = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    p = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var T, $ = {}, I = p.react_stack_bottom_frame.bind(
+      p,
+      f
+    )(), ee = D(o(f)), M = {};
+    H.Fragment = P, H.jsx = function(e, t, a, d, x) {
+      var h = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return b(
+        e,
+        t,
+        a,
+        !1,
+        d,
+        x,
+        h ? Error("react-stack-top-frame") : I,
+        h ? D(o(e)) : ee
+      );
+    }, H.jsxs = function(e, t, a, d, x) {
+      var h = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return b(
+        e,
+        t,
+        a,
+        !0,
+        d,
+        x,
+        h ? Error("react-stack-top-frame") : I,
+        h ? D(o(e)) : ee
+      );
+    };
+  })()), H;
+}
+var le;
+function me() {
+  return le || (le = 1, process.env.NODE_ENV === "production" ? re.exports = pe() : re.exports = ge()), re.exports;
+}
+var s = me();
+const fe = "data:image/png;base64,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", ie = {
+  animals: [
+    "src/assets/Animals/bear.jpg",
+    "src/assets/Animals/cat.png",
+    "src/assets/Animals/crocodile.jpg",
+    "src/assets/Animals/dolphin.jpg",
+    "src/assets/Animals/elephant.jpg",
+    "src/assets/Animals/fox.jpg",
+    "src/assets/Animals/giraffe.jpg",
+    "src/assets/Animals/horse.jpg",
+    "src/assets/Animals/kangaroo.jpg",
+    "src/assets/Animals/lion.jpg",
+    "src/assets/Animals/monkey.jpg",
+    "src/assets/Animals/owl.jpg",
+    "src/assets/Animals/panda.jpg",
+    "src/assets/Animals/penguin.jpg",
+    "src/assets/Animals/rabbit.jpg",
+    "src/assets/Animals/squirrel.jpg",
+    "src/assets/Animals/tiger.png",
+    "src/assets/Animals/tortoise.jpg",
+    "src/assets/Animals/wolf.png",
+    "src/assets/Animals/zebra.jpg"
+  ],
+  food: [
+    "src/assets/Food/apple.jpg",
+    "src/assets/Food/banana.jpg",
+    "src/assets/Food/bread.jpg",
+    "src/assets/Food/carrot.jpg",
+    "src/assets/Food/cake.jpg",
+    "src/assets/Food/pizza.jpg",
+    "src/assets/Food/rice.jpg",
+    "src/assets/Food/burger.jpg",
+    "src/assets/Food/cheese.jpg",
+    "src/assets/Food/chocolate.jpg",
+    "src/assets/Food/strawberry.jpg",
+    "src/assets/Food/orange.jpg",
+    "src/assets/Food/pear.jpg",
+    "src/assets/Food/watermelon.jpg",
+    "src/assets/Food/ice cream.jpg",
+    "src/assets/Food/soup.jpg",
+    "src/assets/Food/chicken.jpg",
+    "src/assets/Food/fish.jpg",
+    "src/assets/Food/fries.jpg",
+    "src/assets/Food/tomato.jpg",
+    "src/assets/Food/milk.jpg",
+    "src/assets/Food/grapes.jpg",
+    "src/assets/Food/corn.jpg",
+    "src/assets/Food/donut.jpg",
+    "src/assets/Food/sandwich.jpg"
+  ],
+  toys: [
+    "src/assets/Toys/ball.jpg",
+    "src/assets/Toys/balloon.jpg",
+    "src/assets/Toys/blocks.jpg",
+    "src/assets/Toys/car.jpg",
+    "src/assets/Toys/doll.jpg",
+    "src/assets/Toys/drum.jpg",
+    "src/assets/Toys/guitar.jpg",
+    "src/assets/Toys/jump rope.jpg",
+    "src/assets/Toys/kite.jpg",
+    "src/assets/Toys/paints.jpg",
+    "src/assets/Toys/plane.jpg",
+    "src/assets/Toys/puzzle.jpg",
+    "src/assets/Toys/scooter.jpg",
+    "src/assets/Toys/rocket.jpg",
+    "src/assets/Toys/skateboard.jpg",
+    "src/assets/Toys/slide.jpg",
+    "src/assets/Toys/teddy bear.jpg",
+    "src/assets/Toys/train.jpg",
+    "src/assets/Toys/crayons.jpg",
+    "src/assets/Toys/yo-yo.jpg"
+  ]
+}, de = (c) => (c.split("/").pop() || "").replace(/\.(jpg|png|jpeg|webp)$/i, "").toLowerCase(), he = (c, m) => {
+  const i = Array.from(
+    { length: c.length + 1 },
+    () => Array(m.length + 1).fill(0)
+  );
+  for (let o = 0; o <= c.length; o++) i[o][0] = o;
+  for (let o = 0; o <= m.length; o++) i[0][o] = o;
+  for (let o = 1; o <= c.length; o++)
+    for (let n = 1; n <= m.length; n++)
+      i[o][n] = c[o - 1] === m[n - 1] ? i[o - 1][n - 1] : Math.min(i[o - 1][n - 1], i[o][n - 1], i[o - 1][n]) + 1;
+  return i[c.length][m.length];
+};
+function xe() {
+  const [c, m] = u(null), [i, o] = u([]), [n, f] = u(4), [j, R] = u(!1), [w, V] = u(1), [b, X] = u(null), [p, k] = u("ready"), [W, P] = u(3), [U, O] = u(7), [q, L] = u(0), [F, Y] = u(!1), [J, K] = u(20), [S, _] = u(""), [y, C] = u(!1), [N, Z] = u(!1), [D, T] = u(
+    null
+  ), [$, I] = u([]), [ee, M] = u([]), [e, t] = u(!1);
+  oe(() => {
+    const r = () => t(window.innerWidth < 768);
+    return r(), window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
+  }, []);
+  const a = (r) => [...r].sort(() => Math.random() - 0.5).slice(0, 6), d = () => {
+    if (!c) return;
+    const r = a(ie[c]);
+    o(r), R(!0), Y(!1), V(1), L(0), I([]), M([]), x(r, [], !0);
+  }, x = (r = i, l = ee, E = !1) => {
+    const A = a(r.length ? r : ie[c]);
+    let se = Math.floor(Math.random() * A.length), te = A[se], ne = 0;
+    for (; l.includes(te) && ne < 20; )
+      se = Math.floor(Math.random() * A.length), te = A[se], ne++;
+    o(A), X(se), M([...l, te]), C(!1), _(""), K(20), T(null), E ? (k("ready"), P(3), O(7)) : (k("memorize"), O(7));
+  };
+  oe(() => {
+    if (!(!j || F || y)) {
+      if (p === "ready")
+        if (W <= 0)
+          k("memorize"), O(7);
+        else {
+          const r = setTimeout(() => P((l) => l - 1), 1e3);
+          return () => clearTimeout(r);
+        }
+      if (p === "memorize")
+        if (U <= 0)
+          k("guess");
+        else {
+          const r = setTimeout(() => O((l) => l - 1), 1e3);
+          return () => clearTimeout(r);
+        }
+      if (p === "guess") {
+        if (J <= 0) {
+          C(!0), T("wrong");
+          const l = de(i[b]);
+          I((E) => [
+            ...E,
+            { round: w, answer: S, correct: l, result: "wrong" }
+          ]);
+          return;
+        }
+        const r = setTimeout(() => K((l) => l - 1), 1e3);
+        return () => clearTimeout(r);
+      }
+    }
+  }, [
+    p,
+    W,
+    U,
+    J,
+    j,
+    F,
+    y,
+    i,
+    b,
+    w,
+    S
+  ]);
+  const h = () => {
+    if (b === null || N) return;
+    const r = de(i[b]), l = S.toLowerCase().trim();
+    let E = "wrong";
+    l === r ? (L((A) => A + 1), T("correct"), E = "correct") : he(l, r) === 1 ? (L((A) => A + 0.5), T("almost"), E = "almost") : (T("wrong"), E = "wrong"), I((A) => [
+      ...A,
+      { round: w, answer: l, correct: r, result: E }
+    ]), Z(!0), setTimeout(() => {
+      Z(!1), C(!0);
+    }, 600);
+  }, Q = () => {
+    w < n ? (V((r) => r + 1), x()) : Y(!0);
+  }, B = () => {
+    R(!1), Y(!1), m(null);
+  }, g = 52, v = 28, G = () => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 16,
+        left: 20,
+        zIndex: 1e3
+      },
+      children: /* @__PURE__ */ s.jsx(
+        "img",
+        {
+          src: fe,
+          alt: "SPEAKID Logo",
+          style: { height: "clamp(28px, 5vw, 40px)", width: "auto" }
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+    !e && /* @__PURE__ */ s.jsx(G, {}),
+    !c && !j && /* @__PURE__ */ s.jsxs("div", { className: "centerScreen fade", children: [
+      /* @__PURE__ */ s.jsx("h1", { className: "headline1", children: "WHAT'S MISSING?" }),
+      /* @__PURE__ */ s.jsx("p", { className: "bodyM", children: "Select a theme:" }),
+      /* @__PURE__ */ s.jsxs("div", { style: { display: "flex", gap: 16 }, children: [
+        /* @__PURE__ */ s.jsx("button", { className: "button", onClick: () => m("animals"), children: "🐶 Animals" }),
+        /* @__PURE__ */ s.jsx("button", { className: "button", onClick: () => m("food"), children: "🍎 Food" }),
+        /* @__PURE__ */ s.jsx("button", { className: "button", onClick: () => m("toys"), children: "🧸 Toys" })
+      ] }),
+      /* @__PURE__ */ s.jsxs("div", { style: { marginTop: 24 }, children: [
+        /* @__PURE__ */ s.jsx("p", { className: "bodyS", children: "Choose number of rounds:" }),
+        /* @__PURE__ */ s.jsx("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((r) => /* @__PURE__ */ s.jsx(
+          "button",
+          {
+            className: "button button--ghost",
+            style: {
+              background: n === r ? "#333" : void 0,
+              color: n === r ? "#fff" : void 0
+            },
+            onClick: () => f(r),
+            children: r
+          },
+          r
+        )) })
+      ] })
+    ] }),
+    c && !j && /* @__PURE__ */ s.jsxs("div", { className: "centerScreen fade", children: [
+      /* @__PURE__ */ s.jsxs("h1", { className: "headline1", children: [
+        "Theme selected: ",
+        c
+      ] }),
+      /* @__PURE__ */ s.jsxs("p", { className: "bodyM", children: [
+        "Rounds: ",
+        n
+      ] }),
+      /* @__PURE__ */ s.jsx("button", { className: "button", onClick: d, children: "▶ Start game" })
+    ] }),
+    F && /* @__PURE__ */ s.jsxs("div", { className: "centerScreen fade", children: [
+      /* @__PURE__ */ s.jsx("h1", { className: "headline1", children: "Results" }),
+      /* @__PURE__ */ s.jsxs("h2", { className: "headline3", children: [
+        "Your score: ",
+        q,
+        " / ",
+        n
+      ] }),
+      /* @__PURE__ */ s.jsxs("table", { style: { marginTop: 20, borderCollapse: "collapse" }, children: [
+        /* @__PURE__ */ s.jsx("thead", { children: /* @__PURE__ */ s.jsxs("tr", { className: "bodyM", style: { textAlign: "left" }, children: [
+          /* @__PURE__ */ s.jsx("th", { style: { padding: "6px 12px" }, children: "Round" }),
+          /* @__PURE__ */ s.jsx("th", { style: { padding: "6px 12px" }, children: "Your Answer" }),
+          /* @__PURE__ */ s.jsx("th", { style: { padding: "6px 12px" }, children: "Correct" }),
+          /* @__PURE__ */ s.jsx("th", { style: { padding: "6px 12px" }, children: "Result" })
+        ] }) }),
+        /* @__PURE__ */ s.jsx("tbody", { children: $.map((r, l) => /* @__PURE__ */ s.jsxs("tr", { children: [
+          /* @__PURE__ */ s.jsx("td", { style: { padding: "6px 12px" }, children: r.round }),
+          /* @__PURE__ */ s.jsx("td", { style: { padding: "6px 12px" }, children: r.answer || "—" }),
+          /* @__PURE__ */ s.jsx("td", { style: { padding: "6px 12px" }, children: r.correct }),
+          /* @__PURE__ */ s.jsxs("td", { style: { padding: "6px 12px" }, children: [
+            r.result === "correct" && /* @__PURE__ */ s.jsx("span", { style: { color: "green" }, children: "✔ Correct" }),
+            r.result === "almost" && /* @__PURE__ */ s.jsx("span", { style: { color: "orange" }, children: "◐ Almost (0.5)" }),
+            r.result === "wrong" && /* @__PURE__ */ s.jsx("span", { style: { color: "red" }, children: "✘ Wrong" })
+          ] })
+        ] }, l)) })
+      ] }),
+      /* @__PURE__ */ s.jsxs("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
+        /* @__PURE__ */ s.jsx("button", { className: "button", onClick: d, children: "🔁 Play again" }),
+        /* @__PURE__ */ s.jsx("button", { className: "button", onClick: B, children: "⬅️ Choose theme" })
+      ] })
+    ] }),
+    j && !F && /* @__PURE__ */ s.jsxs("div", { className: "gameLayout fade", children: [
+      /* @__PURE__ */ s.jsxs(
+        "div",
+        {
+          style: {
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ s.jsx("div", { className: "progressContainer", children: /* @__PURE__ */ s.jsx(
+              "div",
+              {
+                className: "progressBar",
+                style: { width: `${w / n * 100}%` }
+              }
+            ) }),
+            /* @__PURE__ */ s.jsxs(
+              "div",
+              {
+                style: {
+                  minHeight: g,
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [
+                  p === "ready" && /* @__PURE__ */ s.jsx("h1", { className: "headline1", style: { color: "#ec4c44" }, children: "GET READY" }),
+                  (p === "memorize" || p === "guess") && /* @__PURE__ */ s.jsxs("h2", { className: "headline3", children: [
+                    "Round ",
+                    w,
+                    " of ",
+                    n,
+                    " — Score: ",
+                    q
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ s.jsxs(
+              "div",
+              {
+                style: {
+                  minHeight: v,
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [
+                  p === "ready" && /* @__PURE__ */ s.jsx("div", { className: "spin", style: { fontSize: 36 }, children: "⏳" }),
+                  p === "memorize" && /* @__PURE__ */ s.jsxs("p", { className: "bodyM", style: { color: "#10b981" }, children: [
+                    "MEMORIZE ",
+                    /* @__PURE__ */ s.jsxs("span", { className: "pulse", children: [
+                      "(",
+                      U,
+                      ")"
+                    ] })
+                  ] }),
+                  p === "guess" && !y && /* @__PURE__ */ s.jsxs("p", { className: "bodyM", children: [
+                    "⏳ Time left: ",
+                    J,
+                    "s"
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      p !== "ready" && /* @__PURE__ */ s.jsx("div", { className: "grid", children: i.map((r, l) => {
+        const E = b === l && p === "guess" && !y;
+        return /* @__PURE__ */ s.jsx(
+          "div",
+          {
+            className: `card ${E && N ? "hop" : ""} ${D === "correct" && b === l ? "correct" : ""} ${D === "wrong" && b === l ? "wrong" : ""}`,
+            children: (!E || y) && /* @__PURE__ */ s.jsx("img", { src: r, alt: `img-${l}` })
+          },
+          l
+        );
+      }) }),
+      /* @__PURE__ */ s.jsxs("div", { style: { marginTop: 16, height: 80 }, children: [
+        p === "guess" && !y && /* @__PURE__ */ s.jsxs("div", { children: [
+          /* @__PURE__ */ s.jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "Type the missing word",
+              value: S,
+              onChange: (r) => _(r.target.value),
+              className: "bodyM",
+              style: {
+                padding: "6px 12px",
+                borderRadius: 6,
+                border: "1px solid #ccc"
+              }
+            }
+          ),
+          /* @__PURE__ */ s.jsx(
+            "button",
+            {
+              className: "button",
+              onClick: h,
+              disabled: N,
+              style: { marginLeft: 8 },
+              children: N ? "..." : "Check"
+            }
+          )
+        ] }),
+        y && /* @__PURE__ */ s.jsx("div", { children: /* @__PURE__ */ s.jsx("button", { className: "button", onClick: Q, children: "Next round" }) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  xe as default
+};

package/dist/whats-missing.umd.js

@@ -0,0 +1,22 @@
+(function(a,R){typeof exports=="object"&&typeof module<"u"?module.exports=R(require("react")):typeof define=="function"&&define.amd?define(["react"],R):(a=typeof globalThis<"u"?globalThis:a||self,a.WhatsMissingGame=R(a.React))})(this,(function(a){"use strict";var R={exports:{}},L={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ne;function de(){if(ne)return L;ne=1;var l=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function d(o,n,f){var j=null;if(f!==void 0&&(j=""+f),n.key!==void 0&&(j=""+n.key),"key"in n){f={};for(var T in n)T!=="key"&&(f[T]=n[T])}else f=n;return n=f.ref,{$$typeof:l,type:o,key:j,ref:n!==void 0?n:null,props:f}}return L.Fragment=m,L.jsx=d,L.jsxs=d,L}var Y={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ae;function ue(){return ae||(ae=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===b?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case O:return"Fragment";case F:return"Profiler";case M:return"StrictMode";case Q:return"Suspense";case B:return"SuspenseList";case q:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case K:return"Portal";case J:return(e.displayName||"Context")+".Provider";case _:return(e._context.displayName||"Context")+".Consumer";case D:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Z:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case C:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function m(e){return""+e}function d(e){try{m(e);var r=!1}catch{r=!0}if(r){r=console;var c=r.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),m(e)}}function o(e){if(e===O)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function n(){var e=N.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function j(e){if(P.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function T(e,r){function c(){v||(v=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function w(){var e=l(this.type);return ee[e]||(ee[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function W(e,r,c,u,x,h,z,H){return c=h.ref,e={$$typeof:S,type:e,key:r,props:h,_owner:x},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:w}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:H}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function y(e,r,c,u,x,h,z,H){var g=r.children;if(g!==void 0)if(u)if($(g)){for(u=0;u<g.length;u++)X(g[u]);Object.freeze&&Object.freeze(g)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else X(g);if(P.call(r,"key")){g=l(e);var k=Object.keys(r).filter(function(t){return t!=="key"});u=0<k.length?"{key: someKey, "+k.join(": ..., ")+": ...}":"{key: someKey}",G[g+u]||(k=0<k.length?"{"+k.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,u,g,k,g),G[g+u]=!0)}if(g=null,c!==void 0&&(d(c),g=""+c),j(r)&&(d(r.key),g=""+r.key),"key"in r){c={};for(var V in r)V!=="key"&&(c[V]=r[V])}else c=r;return g&&T(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),W(e,g,h,x,n(),c,z,H)}function X(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var p=a,S=Symbol.for("react.transitional.element"),K=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),M=Symbol.for("react.strict_mode"),F=Symbol.for("react.profiler"),_=Symbol.for("react.consumer"),J=Symbol.for("react.context"),D=Symbol.for("react.forward_ref"),Q=Symbol.for("react.suspense"),B=Symbol.for("react.suspense_list"),Z=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),q=Symbol.for("react.activity"),b=Symbol.for("react.client.reference"),N=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,$=Array.isArray,I=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(e){return e()}};var v,ee={},U=p.react_stack_bottom_frame.bind(p,f)(),se=I(o(f)),G={};Y.Fragment=O,Y.jsx=function(e,r,c,u,x){var h=1e4>N.recentlyCreatedOwnerStacks++;return y(e,r,c,!1,u,x,h?Error("react-stack-top-frame"):U,h?I(o(e)):se)},Y.jsxs=function(e,r,c,u,x){var h=1e4>N.recentlyCreatedOwnerStacks++;return y(e,r,c,!0,u,x,h?Error("react-stack-top-frame"):U,h?I(o(e)):se)}})()),Y}var oe;function pe(){return oe||(oe=1,process.env.NODE_ENV==="production"?R.exports=de():R.exports=ue()),R.exports}var s=pe();const ge="data:image/png;base64,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",ce={animals:["src/assets/Animals/bear.jpg","src/assets/Animals/cat.png","src/assets/Animals/crocodile.jpg","src/assets/Animals/dolphin.jpg","src/assets/Animals/elephant.jpg","src/assets/Animals/fox.jpg","src/assets/Animals/giraffe.jpg","src/assets/Animals/horse.jpg","src/assets/Animals/kangaroo.jpg","src/assets/Animals/lion.jpg","src/assets/Animals/monkey.jpg","src/assets/Animals/owl.jpg","src/assets/Animals/panda.jpg","src/assets/Animals/penguin.jpg","src/assets/Animals/rabbit.jpg","src/assets/Animals/squirrel.jpg","src/assets/Animals/tiger.png","src/assets/Animals/tortoise.jpg","src/assets/Animals/wolf.png","src/assets/Animals/zebra.jpg"],food:["src/assets/Food/apple.jpg","src/assets/Food/banana.jpg","src/assets/Food/bread.jpg","src/assets/Food/carrot.jpg","src/assets/Food/cake.jpg","src/assets/Food/pizza.jpg","src/assets/Food/rice.jpg","src/assets/Food/burger.jpg","src/assets/Food/cheese.jpg","src/assets/Food/chocolate.jpg","src/assets/Food/strawberry.jpg","src/assets/Food/orange.jpg","src/assets/Food/pear.jpg","src/assets/Food/watermelon.jpg","src/assets/Food/ice cream.jpg","src/assets/Food/soup.jpg","src/assets/Food/chicken.jpg","src/assets/Food/fish.jpg","src/assets/Food/fries.jpg","src/assets/Food/tomato.jpg","src/assets/Food/milk.jpg","src/assets/Food/grapes.jpg","src/assets/Food/corn.jpg","src/assets/Food/donut.jpg","src/assets/Food/sandwich.jpg"],toys:["src/assets/Toys/ball.jpg","src/assets/Toys/balloon.jpg","src/assets/Toys/blocks.jpg","src/assets/Toys/car.jpg","src/assets/Toys/doll.jpg","src/assets/Toys/drum.jpg","src/assets/Toys/guitar.jpg","src/assets/Toys/jump rope.jpg","src/assets/Toys/kite.jpg","src/assets/Toys/paints.jpg","src/assets/Toys/plane.jpg","src/assets/Toys/puzzle.jpg","src/assets/Toys/scooter.jpg","src/assets/Toys/rocket.jpg","src/assets/Toys/skateboard.jpg","src/assets/Toys/slide.jpg","src/assets/Toys/teddy bear.jpg","src/assets/Toys/train.jpg","src/assets/Toys/crayons.jpg","src/assets/Toys/yo-yo.jpg"]},le=l=>(l.split("/").pop()||"").replace(/\.(jpg|png|jpeg|webp)$/i,"").toLowerCase(),me=(l,m)=>{const d=Array.from({length:l.length+1},()=>Array(m.length+1).fill(0));for(let o=0;o<=l.length;o++)d[o][0]=o;for(let o=0;o<=m.length;o++)d[0][o]=o;for(let o=1;o<=l.length;o++)for(let n=1;n<=m.length;n++)d[o][n]=l[o-1]===m[n-1]?d[o-1][n-1]:Math.min(d[o-1][n-1],d[o][n-1],d[o-1][n])+1;return d[l.length][m.length]};function fe(){const[l,m]=a.useState(null),[d,o]=a.useState([]),[n,f]=a.useState(4),[j,T]=a.useState(!1),[w,W]=a.useState(1),[y,X]=a.useState(null),[p,S]=a.useState("ready"),[K,O]=a.useState(3),[M,F]=a.useState(7),[_,J]=a.useState(0),[D,Q]=a.useState(!1),[B,Z]=a.useState(20),[C,q]=a.useState(""),[b,N]=a.useState(!1),[P,$]=a.useState(!1),[I,v]=a.useState(null),[ee,U]=a.useState([]),[se,G]=a.useState([]),[e,r]=a.useState(!1);a.useEffect(()=>{const t=()=>r(window.innerWidth<768);return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const c=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),u=()=>{if(!l)return;const t=c(ce[l]);o(t),T(!0),Q(!1),W(1),J(0),U([]),G([]),x(t,[],!0)},x=(t=d,i=se,E=!1)=>{const A=c(t.length?t:ce[l]);let te=Math.floor(Math.random()*A.length),re=A[te],ie=0;for(;i.includes(re)&&ie<20;)te=Math.floor(Math.random()*A.length),re=A[te],ie++;o(A),X(te),G([...i,re]),N(!1),q(""),Z(20),v(null),E?(S("ready"),O(3),F(7)):(S("memorize"),F(7))};a.useEffect(()=>{if(!(!j||D||b)){if(p==="ready")if(K<=0)S("memorize"),F(7);else{const t=setTimeout(()=>O(i=>i-1),1e3);return()=>clearTimeout(t)}if(p==="memorize")if(M<=0)S("guess");else{const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}if(p==="guess"){if(B<=0){N(!0),v("wrong");const i=le(d[y]);U(E=>[...E,{round:w,answer:C,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>Z(i=>i-1),1e3);return()=>clearTimeout(t)}}},[p,K,M,B,j,D,b,d,y,w,C]);const h=()=>{if(y===null||P)return;const t=le(d[y]),i=C.toLowerCase().trim();let E="wrong";i===t?(J(A=>A+1),v("correct"),E="correct"):me(i,t)===1?(J(A=>A+.5),v("almost"),E="almost"):(v("wrong"),E="wrong"),U(A=>[...A,{round:w,answer:i,correct:t,result:E}]),$(!0),setTimeout(()=>{$(!1),N(!0)},600)},z=()=>{w<n?(W(t=>t+1),x()):Q(!0)},H=()=>{T(!1),Q(!1),m(null)},g=52,k=28,V=()=>s.jsx("div",{style:{position:"fixed",top:16,left:20,zIndex:1e3},children:s.jsx("img",{src:ge,alt:"SPEAKID Logo",style:{height:"clamp(28px, 5vw, 40px)",width:"auto"}})});return s.jsxs(s.Fragment,{children:[!e&&s.jsx(V,{}),!l&&!j&&s.jsxs("div",{className:"centerScreen fade",children:[s.jsx("h1",{className:"headline1",children:"WHAT'S MISSING?"}),s.jsx("p",{className:"bodyM",children:"Select a theme:"}),s.jsxs("div",{style:{display:"flex",gap:16},children:[s.jsx("button",{className:"button",onClick:()=>m("animals"),children:"🐶 Animals"}),s.jsx("button",{className:"button",onClick:()=>m("food"),children:"🍎 Food"}),s.jsx("button",{className:"button",onClick:()=>m("toys"),children:"🧸 Toys"})]}),s.jsxs("div",{style:{marginTop:24},children:[s.jsx("p",{className:"bodyS",children:"Choose number of rounds:"}),s.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>s.jsx("button",{className:"button button--ghost",style:{background:n===t?"#333":void 0,color:n===t?"#fff":void 0},onClick:()=>f(t),children:t},t))})]})]}),l&&!j&&s.jsxs("div",{className:"centerScreen fade",children:[s.jsxs("h1",{className:"headline1",children:["Theme selected: ",l]}),s.jsxs("p",{className:"bodyM",children:["Rounds: ",n]}),s.jsx("button",{className:"button",onClick:u,children:"▶ Start game"})]}),D&&s.jsxs("div",{className:"centerScreen fade",children:[s.jsx("h1",{className:"headline1",children:"Results"}),s.jsxs("h2",{className:"headline3",children:["Your score: ",_," / ",n]}),s.jsxs("table",{style:{marginTop:20,borderCollapse:"collapse"},children:[s.jsx("thead",{children:s.jsxs("tr",{className:"bodyM",style:{textAlign:"left"},children:[s.jsx("th",{style:{padding:"6px 12px"},children:"Round"}),s.jsx("th",{style:{padding:"6px 12px"},children:"Your Answer"}),s.jsx("th",{style:{padding:"6px 12px"},children:"Correct"}),s.jsx("th",{style:{padding:"6px 12px"},children:"Result"})]})}),s.jsx("tbody",{children:ee.map((t,i)=>s.jsxs("tr",{children:[s.jsx("td",{style:{padding:"6px 12px"},children:t.round}),s.jsx("td",{style:{padding:"6px 12px"},children:t.answer||"—"}),s.jsx("td",{style:{padding:"6px 12px"},children:t.correct}),s.jsxs("td",{style:{padding:"6px 12px"},children:[t.result==="correct"&&s.jsx("span",{style:{color:"green"},children:"✔ Correct"}),t.result==="almost"&&s.jsx("span",{style:{color:"orange"},children:"◐ Almost (0.5)"}),t.result==="wrong"&&s.jsx("span",{style:{color:"red"},children:"✘ Wrong"})]})]},i))})]}),s.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[s.jsx("button",{className:"button",onClick:u,children:"🔁 Play again"}),s.jsx("button",{className:"button",onClick:H,children:"⬅️ Choose theme"})]})]}),j&&!D&&s.jsxs("div",{className:"gameLayout fade",children:[s.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",alignItems:"center"},children:[s.jsx("div",{className:"progressContainer",children:s.jsx("div",{className:"progressBar",style:{width:`${w/n*100}%`}})}),s.jsxs("div",{style:{minHeight:g,display:"flex",alignItems:"center"},children:[p==="ready"&&s.jsx("h1",{className:"headline1",style:{color:"#ec4c44"},children:"GET READY"}),(p==="memorize"||p==="guess")&&s.jsxs("h2",{className:"headline3",children:["Round ",w," of ",n," — Score: ",_]})]}),s.jsxs("div",{style:{minHeight:k,display:"flex",alignItems:"center"},children:[p==="ready"&&s.jsx("div",{className:"spin",style:{fontSize:36},children:"⏳"}),p==="memorize"&&s.jsxs("p",{className:"bodyM",style:{color:"#10b981"},children:["MEMORIZE ",s.jsxs("span",{className:"pulse",children:["(",M,")"]})]}),p==="guess"&&!b&&s.jsxs("p",{className:"bodyM",children:["⏳ Time left: ",B,"s"]})]})]}),p!=="ready"&&s.jsx("div",{className:"grid",children:d.map((t,i)=>{const E=y===i&&p==="guess"&&!b;return s.jsx("div",{className:`card ${E&&P?"hop":""} ${I==="correct"&&y===i?"correct":""} ${I==="wrong"&&y===i?"wrong":""}`,children:(!E||b)&&s.jsx("img",{src:t,alt:`img-${i}`})},i)})}),s.jsxs("div",{style:{marginTop:16,height:80},children:[p==="guess"&&!b&&s.jsxs("div",{children:[s.jsx("input",{type:"text",placeholder:"Type the missing word",value:C,onChange:t=>q(t.target.value),className:"bodyM",style:{padding:"6px 12px",borderRadius:6,border:"1px solid #ccc"}}),s.jsx("button",{className:"button",onClick:h,disabled:P,style:{marginLeft:8},children:P?"...":"Check"})]}),b&&s.jsx("div",{children:s.jsx("button",{className:"button",onClick:z,children:"Next round"})})]})]})]})}return fe}));

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@mblinkov/whats-missing",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/whats-missing.umd.js",
+  "module": "dist/whats-missing.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:types && vite build",
+    "build:types": "tsc -p tsconfig.build.json",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2"
+  },
+  "description": "A memory game What's Missing built with React",
+  "keywords": ["game", "react", "memory", "speakid"],
+  "author": "Mikhail Blinkov",
+  "license": "MIT"
+}