@mblinkov/whats-missing 0.0.9 → 20.0.2

package/src/index.ts

@@ -0,0 +1,4 @@
+// src/index.ts
+export { default as Game } from "./Game";
+export { themes } from "./themes";
+export type { Theme } from "./themes";

package/src/themes.ts

@@ -1,77 +1,96 @@
 // src/themes.ts
 
 export type Theme = "animals" | "food" | "toys";
+export type ImageItem = { src: string; name: string };
 
-export const themes: Record<Theme, string[]> = {
-  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",
-  ],
+// ✅ базовый путь строится от текущего домена (чтобы работало и на prod.speakid.ru, и на test.speakid.ru)
+const baseURL = window.origin + "/cloud/speakid/games/whatsmissing/";
+
+// helper
+const makeList = (items: [string, string][], folder: string): ImageItem[] =>
+  items.map(([file, name]) => ({
+    src: `${baseURL}${folder}/${name.replace(/\s/g, "%20")}.png`,
+    name,
+  }));
+
+// === FOOD ===
+const foodItems: [string, string][] = [
+  ["apple", "apple"],
+  ["banana", "banana"],
+  ["bread", "bread"],
+  ["burger", "burger"],
+  ["cake", "cake"],
+  ["carrot", "carrot"],
+  ["cheese", "cheese"],
+  ["chicken", "chicken"],
+  ["chocolate", "chocolate"],
+  ["corn", "corn"],
+  ["donut", "donut"],
+  ["fish", "fish"],
+  ["fries", "fries"],
+  ["grapes", "grapes"],
+  ["ice_cream", "ice cream"],
+  ["milk", "milk"],
+  ["orange", "orange"],
+  ["pear", "pear"],
+  ["pizza", "pizza"],
+  ["rice", "rice"],
+  ["sandwich", "sandwich"],
+  ["soup", "soup"],
+  ["strawberry", "strawberry"],
+  ["tomato", "tomato"],
+  ["watermelon", "watermelon"],
+];
+
+// === ANIMALS ===
+const animalItems: [string, string][] = [
+  ["bear", "bear"],
+  ["cat", "cat"],
+  ["crocodile", "crocodile"],
+  ["dolphin", "dolphin"],
+  ["elephant", "elephant"],
+  ["fox", "fox"],
+  ["giraffe", "giraffe"],
+  ["horse", "horse"],
+  ["kangaroo", "kangaroo"],
+  ["lion", "lion"],
+  ["monkey", "monkey"],
+  ["owl", "owl"],
+  ["panda", "panda"],
+  ["penguin", "penguin"],
+  ["squirrel", "squirrel"],
+  ["tiger", "tiger"],
+  ["tortoise", "tortoise"],
+  ["wolf", "wolf"],
+  ["zebra", "zebra"],
+];
+
+// === TOYS ===
+const toyItems: [string, string][] = [
+  ["ball", "ball"],
+  ["balloon", "balloon"],
+  ["blocks", "blocks"],
+  ["car", "car"],
+  ["doll", "doll"],
+  ["drum", "drum"],
+  ["guitar", "guitar"],
+  ["jump_rope", "jump rope"],
+  ["kite", "kite"],
+  ["paints", "paints"],
+  ["plane", "plane"],
+  ["puzzle", "puzzle"],
+  ["rocket", "rocket"],
+  ["scooter", "scooter"],
+  ["skateboard", "skateboard"],
+  ["slide", "slide"],
+  ["teddy_bear", "teddy bear"],
+  ["yo-yo", "yo-yo"],
+  ["crayons", "crayons"],
+];
+
+// === EXPORT ===
+export const themes: Record<Theme, ImageItem[]> = {
+  food: makeList(foodItems, "food"),
+  animals: makeList(animalItems, "animals"),
+  toys: makeList(toyItems, "toys"),
 };

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "public", "src/main.tsx", "src/App.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    // ✅ Прокси только для локальных тестов
+    proxy: {
+      "/cloud": {
+        target: "https://speakid.ru",
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      name: "WhatsMissing",
+      formats: ["es", "cjs"], // ✅ добавлено — теперь Webpack поймет
+      fileName: (format) => `whats-missing.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+});

package/dist/vite.svg

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-{--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}._gmCenterScreen_skj5s_19,._gmGameLayout_skj5s_19{position:relative;z-index:1;height:100vh;padding:16px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--text);font-family:var(--font-sans)}._gmHeadline1_skj5s_34{font-weight:700;font-size:clamp(28px,4.2vw,40px);line-height:110%}._gmHeadline2_skj5s_35{font-weight:600;font-size:24px;line-height:110%}._gmHeadline3_skj5s_36{font-weight:600;font-size:18px;line-height:120%}._gmBodyL_skj5s_38{font-weight:400;font-size:18px;line-height:140%}._gmBodyM_skj5s_39{font-weight:400;font-size:16px;line-height:140%}._gmBodyS_skj5s_40{font-weight:400;font-size:14px;line-height:140%;color:var(--muted)}._gmButton_skj5s_43{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}._gmButton_skj5s_43:hover{transform:translateY(-1px);box-shadow:0 10px 24px #ec4c4438}._gmButton_skj5s_43:active{transform:translateY(0);box-shadow:0 4px 12px #ec4c442e}._gmButton_skj5s_43:disabled{opacity:.7;cursor:default}._gmActive_skj5s_58{background:#333!important;color:#fff!important}._gmLogoFixed_skj5s_64{position:fixed;top:16px;left:20px;z-index:1000}._gmLogoFixed_skj5s_64 img{height:clamp(28px,5vw,40px);width:auto}._gmProgressContainer_skj5s_76{width:min(80%,900px);height:10px;background:#eee;border-radius:999px;overflow:hidden;margin-bottom:16px}._gmProgressBar_skj5s_84{height:100%;background:var(--progress);transition:width .3s ease}._gmGrid_skj5s_91{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)}._gmCard_skj5s_102{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}._gmCard_skj5s_102 img{width:100%;height:100%;object-fit:cover}@keyframes _gmHop_skj5s_121{0%{transform:translateY(0)}30%{transform:translateY(-18px)}60%{transform:translateY(-6px)}to{transform:translateY(0)}}._gmHop_skj5s_121{animation:_gmHop_skj5s_121 .6s ease}._gmCorrect_skj5s_123{border:2px solid var(--success);box-shadow:0 0 18px #10b98173;background:#ecfdf5}._gmWrong_skj5s_128{border:2px solid var(--error);box-shadow:0 0 18px #ec4c4459;background:#fef2f2}@keyframes _gmFadeIn_skj5s_1{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}._gmFade_skj5s_139{animation:_gmFadeIn_skj5s_1 .6s ease}@keyframes _gmPulse_skj5s_145{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}._gmPulse_skj5s_145{animation:_gmPulse_skj5s_145 1s ease-in-out infinite}._gmTable_skj5s_148{margin-top:20px;border-collapse:collapse;width:100%;max-width:480px}._gmTable_skj5s_148 th,._gmTable_skj5s_148 td{padding:6px 12px;text-align:left}._gmCorrect_skj5s_123 td{color:green}._gmAlmost_skj5s_159 td{color:orange}._gmWrong_skj5s_128 td{color:red}._gmInput_skj5s_163{padding:6px 12px;border-radius:6px;border:1px solid #ccc;font-size:16px}@media (max-width: 900px){{--card-size: 180px;--gap: 16px}}@media (max-width: 640px){._gmGrid_skj5s_91{max-width:314px;grid-template-columns:repeat(2,150px);grid-auto-rows:150px;gap:14px}._gmButton_skj5s_43{font-size:14px;padding:9px 14px;border-radius:10px}._gmLogoFixed_skj5s_64{display:none!important}}

package/dist/whats-missing.umd.js

@@ -1 +0,0 @@
-(function(m,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],s):(m=typeof globalThis<"u"?globalThis:m||self,s(m.WhatsMissing={},m.jsxRuntime,m.React))})(this,(function(m,s,r){"use strict";const t={gmCenterScreen:"_gmCenterScreen_skj5s_19",gmGameLayout:"_gmGameLayout_skj5s_19",gmHeadline1:"_gmHeadline1_skj5s_34",gmHeadline2:"_gmHeadline2_skj5s_35",gmHeadline3:"_gmHeadline3_skj5s_36",gmBodyL:"_gmBodyL_skj5s_38",gmBodyM:"_gmBodyM_skj5s_39",gmBodyS:"_gmBodyS_skj5s_40",gmButton:"_gmButton_skj5s_43",gmActive:"_gmActive_skj5s_58",gmLogoFixed:"_gmLogoFixed_skj5s_64",gmProgressContainer:"_gmProgressContainer_skj5s_76",gmProgressBar:"_gmProgressBar_skj5s_84",gmGrid:"_gmGrid_skj5s_91",gmCard:"_gmCard_skj5s_102",gmHop:"_gmHop_skj5s_121",gmCorrect:"_gmCorrect_skj5s_123",gmWrong:"_gmWrong_skj5s_128",gmFade:"_gmFade_skj5s_139",gmFadeIn:"_gmFadeIn_skj5s_1",gmPulse:"_gmPulse_skj5s_145",gmTable:"_gmTable_skj5s_148",gmAlmost:"_gmAlmost_skj5s_159",gmInput:"_gmInput_skj5s_163"},K="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZEAAABFCAYAAACL+dvaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAA75SURBVHgB7Z39eRO5FsZf+9n/b6gAbQUbKkBpgORWsEMFFypgqGChAkwFBBpAVABUgLYCQgOZq2ON8GRix9aR5vv8nkckhJBk4hm951sr5Oe8XmduPa7fqgOfa936161v9fvfIAiCIEyGFdLRbl3irnhwuYEXkvduGXhh6YMfOCx0XUHXarG7ZhJTg/6EtHTrFabLa/hr6JMrtz6AzwX8azwU2q3PiKevn7tw6x14WPif0x76hJvLywqRVKvV80fX1xtE8vPqqlxVVd/Pl4XfT27c9/52u15vDXT38xt0yB/goeGFo0CaaLQ5q7+2rv++gd8sLOYHXet5/b5ufJxuAuPWR7eu678L4+BvpEEiZCDsQyHNqJnrPhGDCu848dNOSLbvO/GkN8Z97It7e+1EJauhukYcGt6SofUCeQVkHwW8l0DWicIyoN8pbTZ0zT+xrGsfMwr+dUmBRKjrZ2aqkIAo8NjUSzgMicort746UfnhPKXCLYUMnCoiCjvx0OifAl5Mphx+4VJgeUI6RjTSaXqfwo6iXhwsvBcinI5yYvLOrR+/Li/fpYrJKSKi3fqKYcSjTQkfk16iNVfAvw4vIAxBLgNmiYbQMSSMNRAu4FWQd/Lr2TP2a3BMROgLk/cxpk2bQgpj+5n6gq75n3oJ/aGRzwvUkJBWEwljDc+Zy5eUdZhLIZKHRIRe3BLjhEICSxUSgrwRbhWLEE9qQr2NeJMeBf4eYyFhrNyobYgr0is5JCJk7ZcYNyQkS7bIC4hH0gcK/Hj9If4HgeCUGwckjNUR5JU4ITl5b9knIgrT2ZwKLNuqewGxartGIz+hlH3JFJAw1mhxQvKCku6nfO4+EUmJUQ7B1H7e3ND1S4y9O7ryGpbsjSjwk+kWEsbqBUq6nyIkbRFRyO+6dw1toEuueAnJdiE/YQpDF2gsV/xTDD8JY/XIVkiO5EjaIpJzMw7jPDZuvYV/8V/X718j73iPAsu2xgtID0kXdOkt0P1aYHkU4F/3BhLG6h3Kkfy8ujrYaNsee6KRBgkHiYTBaeMdQnf23xm+N+UGSvSHcesLeDyG3/RTZ401KdDP9Y8llGDQPRrdQvMo3mA5pEQNLBYQxnIbNusanTfwuPJ7yhmqKrv3TM2JTkhoDpdt/1tTRBTSrFm6eHogYmY90edu6qXgqzUUeJAQleiPL5m+n4YXgNQyUrKaS3RPiWVQoHvvTtfLYBnQParAYxFhLLdJl0jEbfahcOPKbf5kqOQwVM9ISOCHXN6hGc5KUa/n8JtLjIC0sW79CT/Bl4PCNEM6Bn7DomtPCfFJxU9eOKLOef2usAwU+AbIBhLGOhknRDdu0aDFwnk2f9IkYuQRYO0ESrc/mENEyPvYIB8F+JbZlB9I69YT8EWU6CoJvDQU4gWZDKgLxLOUoYzcnhALqcZiUwvKxgnJhVspe8uWfePtmyLCvZHfIj+knByv5i9MH8rtWPCYw/WPAU7cnopFwhj/GJbgQUoYa2Aol1F7Ji+Rxj1vJFVEwsFKubHgWeRzsMTpd/ocPDSEHGjEE+7Xj4hnzj0jCvyGWBLmDYRsOCF5U4e32LS9kdjzRNqk5ECOYRDPXMICBrzrVxBSoZCoQhwWu9drg/jnQmO+IS1uTwj9DlOtZmEPdXgr5XdL3shvg517smGgyxvfYNlWyHfwLGIFcf9T4CTUm95H6I/SiKPvEvU+KMDvCZEwVoeQR3JzdfUUVcXLI9/e0v/bFpLkEBGNbkoUU8I6c8BABvX1jQKvOONN6++0AWrE0VeJdl+k9IQYLKt/ZhAqt7+umF7warX63VLRDGdZ8JBDdrqBW+67hEqfrtCIx+D+s0Mfiw1pzS3Bzk2mL9147A2q3HJhLW5hlApnj+QQEQ0522JMiIjw4RhE7yM//hBz8TwV+F6VhLH6JbZBvMnWa2+KSEqjWwF/DriCIEwTDd79aw58/Bq8n2EORgC3J8RAwli9Qt6Ii00ZMFjXLQVtEUmptlLwQkI3EC9ZIzRREPqEm1C3B/7NgBfSKjBtJIw1MSpmr19VVZretkt8kzsa4a2pD/CC8g7Su8CFa5FaCLEo8DbvY94G5+G8xHRR4PeESBhrOLgOBOVFztoiwnHBD34D+AeTPJMgKAXEwj4VDR4WQiwa8VgcL0E/9u/70Jiu4cXtCTGQMNZg1CEtbjpDtUt8Tb008qJwt2Y81NJ/qd8adNu4OEU4Fmkfv8MS/UP3SE4Dpw0noW5O+BwL3vN0hXFN9j2lAZPi4wXikTDWCHAhre8rZl/avj4RekG/otsEXyhn1I2PBTF5j7wHVk0RDZ5F18fvbYiS7g26E5Fz8H7Xp4Z+KW+iEUeowR+LYdVl1RiF/CyEoWG3FOwbe2IxzLgBepgpnkoCFsJfS03Qc0umv0OIhbNBWpzuKWwQTzisbe5YLOd8mrHDDmcdmp21wbDjlxW8a0wJ+p9YVoI+5fzpLkM+c4S7WcckzDmTfYnUQ8qmAGd0vtANPK/39vbsoQGMJcYxxz+UPYYEfYH5QgJSgofFck7IywUJCCdsGyvWnKpHjXk3jko11rhgich6vf7PsSm+pVv/xXhebAXvlcxNTDS8SJbgYyDEwrH2DeKfh3DWSCzcctkpsIEwGrYVWkxOGQVPDwC5nTl6SHKh4MWE1lSttaaHRUsjjTF4jVNCIe3ckBjoAZVzRu7yD4RZcOoUXwu/4ZX1Gku8toDfCEjkLPrlKeI9h8fw4sGtCDrEBhIaiCVlwiyHDeKfmy6nZA8NhRI1xIOePLGj4C3uigltpArDouAt+b6FRGM8yX7xQuLRiGcD/j1m4D2SWM/5Fea70VIk4QmkR2xwqPMcVQUO3JMNLbyY/IldqMtiOBR8JdcSkQRlPAV4xg8nJNVEEux3UZCjJMYC6x67vb39xRWRJgZ3BYV6TCz6h0JEJZaFgdTZc+CEYy3SS6i5/3/OCXa6tnMIQ6PAYb2+ySEiTQz8DJwgKFRPz21i4UCJyDmXRTaxkHERHBT4h0+lYsB7Hp5i3kiSfXi4Qm5Tj8d9CIPdg6fgf0gNP2OH3u9is6evSZZNiXljMUwxATFE/iWnIVKAB/cEuDYUEot9YDXmnYTW8M/tGwhDocCjUxG5841wPxxwjp2w5EzQ/z77d6bQhjpk706JacMNZeUSMtooOXkAqmYyGIaLE793CX6Og/4f7Q8WQu+s6gOmGGQPZ8VAD+UG9xP0qSjMd9w8WcNDeSBzQIN3b+T0vlLGoIw9VEsCacGDrk2O2R6AujJLg8Gj6+tvQ4pIG4OdoKSKica8sPDeB7n8Ug7Jh9vfZJAXTpVXaE4dM6lj3TXkELsh4MyPI7be+ZhEJGDhH5YU609hHtBDSb8HqqVPrQxaOgr8TZjG7FQZFzeRPIVTDw3S7tUpT6GYJKuqYt1Xq/ogqzGKSKAE3wJ8jGlj4D0P8spKiPeRA43pozGNcljyRrj3rIL0jvSGC2UpMD2RW3+o4KhFhFhCJ3Y45ZHyHSQcj+DzHtyhfcJ+5rIxcUMPfRI8aC4UttUQOmddVSnPhaE/qDqLOr1jrRu6SS7Q/SbXZ49JLAa1EkdyUy/bWEK3aMwnxEm9UCXGDyXZKUyiwWPO415GAXkhVVUV4PHNJdUtvUMi8gu8B0yj+zj9mC1xEpASwhQYy8DQHExpKCN5Ixo8NKR3pFNcLuQzmFSr1e++KQpnca39OY+pFubDHI+anUpoziCtSTPllE/hAX49e0bFHQp8THhnDb5Fo9H9TB9uEvFfCIKHe3rhmNGYzjWVkN6RUUEC4jwJ9t69Wq02IZRFBE+EGzYiS6HLahGutzPmXIrQL3MKZTXp2oDLBe0tL8FHQ5LsWaCmwpvLyw8pAkLctvr4QnUWt7mPLAWKqxXIz3nC17UQBP6wxSkwhZ6RAOVODfhI70giTkC0y4F8RXpo1zgvxDQ/EEQkJUEeXE5aCnmgC+UmfULJrCDMud8gzJ2bCtI70jPkebh15byPz3USXSER58Xcm0gQBjCaemnwKeq1gfdsDOLR8DeLBp+uK8aE6aAxb4YcyhiLhU+yc8WAQjA0LsZA2EvdOEjr3InG03oeVjYPrqqqt48+frTtjzen+KaU4zUp6hU8gi/Y5V3CCpA1peAnSGrk8WRST58THuYHxgFtSA+VfxaYf2VPmFg95lL4JiX8z6zAgyqKnmDGOK+B83ydbRfzeNsTsVivy33/0BQRg3RvpEmoZ9foDwvxRLpGYRwcs7C4CXVKAg9xD3HCDWEo4xtMBwqHcEPVZHTOvXdEYYS4MNaFy4XsNVba54nQA/QV02UJY1KE4yjwjZehzrSgEDAn1EMJ9iltqgbei+RWXsq5Iz3jBORls6S3TXt2FoWdUsrxhsTA52MEgVvCaDDc5sQVAo3pnVFegh+Ck96RHnF5kNdOQB68N/cNYKT/kHqeR99YyHnjwg5u+euQ9z33sCoitWyzb1IHNGrMbwrB6NgKyKdP5bHPOzTFt8C0hIS8JwtB8JuLQjy0sQ2dT+MWhUxxBBEZqwZ8KMkuvSMdsQ1hnSAgxEOj4Aukzb3pC/JAJJkuBLgJ9TGM3t+A9zOEIpapkRI6V5DekS6wdRL95PDqsfNEKLY81mR1GEe/gSB4FPhhjjF43imNslPcUMM5Olzk3JGMUB+IE5An7Y70Y5xyKFUJf8KexXgw8PXiBoKwQ4OHxXjuJa7RpjHN8E6JtL2Fe9SwEFitzNb7+PTpxaEy3oc49WRDCy8krzGsmIRhbheQHIhwH641bjAeDPhhNW5V2pDQtaYUxVBlWgkhnlo8zq6vL2K9jyaxx+OW8Bs4vegW/RGqOUjI5txoJPDR4DdqjS33xw2tTXVisUGakFNhgYJwHC8cr916lCoegT8Qj4XPQ9DS8An4p8j/IpJw0MOUOgFUWAbcDfQbxjewk+55TsWVwnROPWxDhik1OnNCcqF35AJCkxsnGrbajZ665oSrjsERkSYGuxv2vLH+qt+eekOEM8fpQr/XX7PPB5ss0dib12DaGEwb0/o7HUTGyScYjA8DH7bNneOw4P2OLLrHwgtJSuMk/b4ObpJkgSMe7j5EFj96xtZvt7MKH+oyz0kfV6lw2EuxuD+UURAEQZgI/wdUm/EYqXPURAAAAABJRU5ErkJggg==",E={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"]},v=n=>(n.split("/").pop()||"").replace(/\.(jpg|png|jpeg|webp)$/i,"").toLowerCase(),_=(n,l)=>{const g=Array.from({length:n.length+1},()=>Array(l.length+1).fill(0));for(let a=0;a<=n.length;a++)g[a][0]=a;for(let a=0;a<=l.length;a++)g[0][a]=a;for(let a=1;a<=n.length;a++)for(let c=1;c<=l.length;c++)g[a][c]=n[a-1]===l[c-1]?g[a-1][c-1]:Math.min(g[a-1][c-1],g[a][c-1],g[a-1][c])+1;return g[n.length][l.length]};function R(){const[n,l]=r.useState(null),[g,a]=r.useState([]),[c,q]=r.useState(4),[u,x]=r.useState(!1),[p,I]=r.useState(1),[h,Z]=r.useState(null),[j,k]=r.useState("ready"),[H,N]=r.useState(3),[P,f]=r.useState(7),[D,T]=r.useState(0),[w,B]=r.useState(!1),[Q,G]=r.useState(20),[C,J]=r.useState(""),[A,F]=r.useState(!1),[L,Y]=r.useState(!1),[M,y]=r.useState(null),[$,b]=r.useState([]),[ss,O]=r.useState([]),[es,ts]=r.useState(!1);r.useEffect(()=>{const e=()=>ts(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const z=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),X=()=>{if(!n)return;const e=z(E[n]);a(e),x(!0),B(!1),I(1),T(0),b([]),O([]),V(e,[],!0)},V=(e=g,o=ss,i=!1)=>{const d=z(e.length?e:E[n]);let S=Math.floor(Math.random()*d.length),U=d[S],W=0;for(;o.includes(U)&&W<20;)S=Math.floor(Math.random()*d.length),U=d[S],W++;a(d),Z(S),O([...o,U]),F(!1),J(""),G(20),y(null),i?(k("ready"),N(3),f(7)):(k("memorize"),f(7))};r.useEffect(()=>{if(!(!u||w||A)){if(j==="ready")if(H<=0)k("memorize"),f(7);else{const e=setTimeout(()=>N(o=>o-1),1e3);return()=>clearTimeout(e)}if(j==="memorize")if(P<=0)k("guess");else{const e=setTimeout(()=>f(o=>o-1),1e3);return()=>clearTimeout(e)}if(j==="guess"){if(Q<=0){F(!0),y("wrong");const o=v(g[h]);b(i=>[...i,{round:p,answer:C,correct:o,result:"wrong"}]);return}const e=setTimeout(()=>G(o=>o-1),1e3);return()=>clearTimeout(e)}}},[j,H,P,Q,u,w,A,g,h,p,C]);const os=()=>{if(h===null||L)return;const e=v(g[h]),o=C.toLowerCase().trim();let i="wrong";o===e?(T(d=>d+1),y("correct"),i="correct"):_(o,e)===1?(T(d=>d+.5),y("almost"),i="almost"):(y("wrong"),i="wrong"),b(d=>[...d,{round:p,answer:o,correct:e,result:i}]),Y(!0),setTimeout(()=>{Y(!1),F(!0)},600)},rs=()=>{p<c?(I(e=>e+1),V()):B(!0)},as=()=>{x(!1),B(!1),l(null)},ns=()=>s.jsx("div",{className:t.gmLogoFixed,children:s.jsx("img",{src:K,alt:"SPEAKID Logo"})});return s.jsxs(s.Fragment,{children:[!es&&s.jsx(ns,{}),!n&&!u&&s.jsxs("div",{className:t.gmCenterScreen,children:[s.jsx("h1",{className:t.gmHeadline1,children:"WHAT'S MISSING?"}),s.jsx("p",{className:t.gmBodyM,children:"Select a theme:"}),s.jsxs("div",{style:{display:"flex",gap:16},children:[s.jsx("button",{className:t.gmButton,onClick:()=>l("animals"),children:"🐶 Animals"}),s.jsx("button",{className:t.gmButton,onClick:()=>l("food"),children:"🍎 Food"}),s.jsx("button",{className:t.gmButton,onClick:()=>l("toys"),children:"🧸 Toys"})]}),s.jsxs("div",{style:{marginTop:24},children:[s.jsx("p",{className:t.gmBodyS,children:"Choose number of rounds:"}),s.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(e=>s.jsx("button",{className:`${t.gmButton} ${c===e?t.gmActive:""}`,onClick:()=>q(e),children:e},e))})]})]}),n&&!u&&s.jsxs("div",{className:t.gmCenterScreen,children:[s.jsxs("h1",{className:t.gmHeadline1,children:["Theme selected: ",n]}),s.jsx("button",{className:t.gmButton,onClick:X,children:"▶ Start game"})]}),w&&s.jsxs("div",{className:t.gmCenterScreen,children:[s.jsx("h1",{className:t.gmHeadline1,children:"Results"}),s.jsxs("h2",{className:t.gmHeadline3,children:["Your score: ",D," / ",c]}),s.jsxs("table",{className:t.gmTable,children:[s.jsx("thead",{children:s.jsxs("tr",{children:[s.jsx("th",{children:"Round"}),s.jsx("th",{children:"Your Answer"}),s.jsx("th",{children:"Correct"}),s.jsx("th",{children:"Result"})]})}),s.jsx("tbody",{children:$.map((e,o)=>s.jsxs("tr",{children:[s.jsx("td",{children:e.round}),s.jsx("td",{children:e.answer||"—"}),s.jsx("td",{children:e.correct}),s.jsx("td",{className:t[`gm${e.result.charAt(0).toUpperCase()+e.result.slice(1)}`],children:e.result})]},o))})]}),s.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[s.jsx("button",{className:t.gmButton,onClick:X,children:"🔁 Play again"}),s.jsx("button",{className:t.gmButton,onClick:as,children:"⬅️ Choose theme"})]})]}),u&&!w&&s.jsxs("div",{className:t.gmGameLayout,children:[s.jsx("div",{className:t.gmProgressContainer,children:s.jsx("div",{className:t.gmProgressBar,style:{width:`${p/c*100}%`}})}),s.jsxs("h2",{className:t.gmHeadline3,children:["Round ",p," of ",c," — Score: ",D]}),s.jsx("div",{className:t.gmGrid,children:g.map((e,o)=>{const i=h===o&&j==="guess"&&!A;return s.jsx("div",{className:`${t.gmCard} ${M==="correct"&&h===o?t.gmCorrect:""} ${M==="wrong"&&h===o?t.gmWrong:""}`,children:!i&&s.jsx("img",{src:e,alt:`img-${o}`})},o)})}),s.jsxs("div",{style:{marginTop:16,height:80},children:[j==="guess"&&!A&&s.jsxs("div",{children:[s.jsx("input",{type:"text",placeholder:"Type the missing word",value:C,onChange:e=>J(e.target.value),className:t.gmInput}),s.jsx("button",{className:t.gmButton,onClick:os,disabled:L,style:{marginLeft:8},children:L?"...":"Check"})]}),A&&s.jsx("button",{className:t.gmButton,onClick:rs,children:"Next round"})]})]})]})}m.Game=R,m.themes=E,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/src/Game.module.css

@@ -1,183 +0,0 @@
-/* ====== Tokens (локальные переменные) ====== */
-:local {
-  --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;
-}
-
-/* ====== База ====== */
-.gmCenterScreen, .gmGameLayout {
-  position: relative;
-  z-index: 1;
-  height: 100vh;
-  padding: 16px 12px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  color: var(--text);
-  font-family: var(--font-sans);
-}
-
-/* ====== Типографика ====== */
-.gmHeadline1 { font-weight:700; font-size:clamp(28px, 4.2vw, 40px); line-height:110%; }
-.gmHeadline2 { font-weight:600; font-size:24px; line-height:110%; }
-.gmHeadline3 { font-weight:600; font-size:18px; line-height:120%; }
-
-.gmBodyL { font-weight:400; font-size:18px; line-height:140%; }
-.gmBodyM { font-weight:400; font-size:16px; line-height:140%; }
-.gmBodyS { font-weight:400; font-size:14px; line-height:140%; color: var(--muted); }
-
-/* ====== Кнопки ====== */
-.gmButton {
-  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 rgba(236, 76, 68, .18);
-  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
-}
-.gmButton:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(236,76,68,.22); }
-.gmButton:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(236,76,68,.18); }
-.gmButton:disabled { opacity: .7; cursor: default; }
-
-.gmActive {
-  background: #333 !important;
-  color: #fff !important;
-}
-
-/* ====== Логотип ====== */
-.gmLogoFixed {
-  position: fixed;
-  top: 16px;
-  left: 20px;
-  z-index: 1000;
-}
-.gmLogoFixed img {
-  height: clamp(28px, 5vw, 40px);
-  width: auto;
-}
-
-/* ====== Прогресс ====== */
-.gmProgressContainer {
-  width: min(80%, 900px);
-  height: 10px;
-  background: #eee;
-  border-radius: 999px;
-  overflow: hidden;
-  margin-bottom: 16px;
-}
-.gmProgressBar {
-  height: 100%;
-  background: var(--progress);
-  transition: width .3s ease;
-}
-
-/* ====== Сетка ====== */
-.gmGrid {
-  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);
-}
-
-/* ====== Карточка ====== */
-.gmCard {
-  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;
-}
-.gmCard img { width: 100%; height: 100%; object-fit: cover; }
-
-@keyframes gmHop {
-  0%{ transform: translateY(0); }
-  30%{ transform: translateY(-18px); }
-  60%{ transform: translateY(-6px); }
-  100%{ transform: translateY(0); }
-}
-.gmHop { animation: gmHop .6s ease; }
-
-.gmCorrect {
-  border: 2px solid var(--success);
-  box-shadow: 0 0 18px rgba(16,185,129,.45);
-  background: #ecfdf5;
-}
-.gmWrong {
-  border: 2px solid var(--error);
-  box-shadow: 0 0 18px rgba(236,76,68,.35);
-  background: #fef2f2;
-}
-
-/* ====== Анимации ====== */
-@keyframes gmFadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-.gmFade { animation: gmFadeIn 0.6s ease; }
-
-@keyframes gmPulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.2); opacity: 0.7; }
-}
-.gmPulse { animation: gmPulse 1s ease-in-out infinite; }
-
-/* ====== Таблица ====== */
-.gmTable {
-  margin-top: 20px;
-  border-collapse: collapse;
-  width: 100%;
-  max-width: 480px;
-}
-.gmTable th, .gmTable td {
-  padding: 6px 12px;
-  text-align: left;
-}
-.gmCorrect td { color: green; }
-.gmAlmost td { color: orange; }
-.gmWrong td { color: red; }
-
-/* ====== Input ====== */
-.gmInput {
-  padding: 6px 12px;
-  border-radius: 6px;
-  border: 1px solid #ccc;
-  font-size: 16px;
-}
-
-/* ====== Mobile ====== */
-@media (max-width: 900px){
-  :local { --card-size: 180px; --gap: 16px; }
-}
-@media (max-width: 640px){
-  .gmGrid {
-    max-width: calc(2 * 150px + 14px);
-    grid-template-columns: repeat(2, 150px);
-    grid-auto-rows: 150px;
-    gap: 14px;
-  }
-  .gmButton { font-size:14px; padding: 9px 14px; border-radius: 10px; }
-  .gmLogoFixed { display: none !important; }
-}