@mblinkov/whats-missing 0.0.8 → 20.0.1

package/dist/whats-missing.umd.js

@@ -1 +1,57 @@
-(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,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",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"})}));
+(function(v,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],l):(v=typeof globalThis<"u"?globalThis:v||self,l(v.WhatsMissing={},v.React))})(this,(function(v,l){"use strict";var J={exports:{}},N={};/**
+ * @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 de(){if(ae)return N;ae=1;var a=Symbol.for("react.transitional.element"),p=Symbol.for("react.fragment");function m(s,i,h){var x=null;if(h!==void 0&&(x=""+h),i.key!==void 0&&(x=""+i.key),"key"in i){h={};for(var R in i)R!=="key"&&(h[R]=i[R])}else h=i;return i=h.ref,{$$typeof:a,type:s,key:x,ref:i!==void 0?i:null,props:h}}return N.Fragment=p,N.jsx=m,N.jsxs=m,N}var L={};/**
+ * @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 le;function ue(){return le||(le=1,process.env.NODE_ENV!=="production"&&(function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===G?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case H:return"Profiler";case F:return"StrictMode";case O:return"Suspense";case B:return"SuspenseList";case k: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 Q:return"Portal";case oe:return e.displayName||"Context";case K:return(e._context.displayName||"Context")+".Consumer";case Y:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case P:return n=e.displayName||null,n!==null?n:a(e.type)||"Memo";case I:n=e._payload,e=e._init;try{return a(e(n))}catch{}}return null}function p(e){return""+e}function m(e){try{p(e);var n=!1}catch{n=!0}if(n){n=console;var c=n.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),p(e)}}function s(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===I)return"<...>";try{var n=a(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function i(){var e=_.A;return e===null?null:e.getOwner()}function h(){return Error("react-stack-top-frame")}function x(e){if(D.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function R(e,n){function c(){$||($=!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)",n))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function A(){var e=a(this.type);return z[e]||(z[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 X(e,n,c,u,M,V){var f=c.ref;return e={$$typeof:W,type:e,key:n,props:c,_owner:u},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:A}):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:M}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:V}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function y(e,n,c,u,M,V){var f=n.children;if(f!==void 0)if(u)if(q(f)){for(u=0;u<f.length;u++)Z(f[u]);Object.freeze&&Object.freeze(f)}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 Z(f);if(D.call(n,"key")){f=a(e);var S=Object.keys(n).filter(function(d){return d!=="key"});u=0<S.length?"{key: someKey, "+S.join(": ..., ")+": ...}":"{key: someKey}",C[f+u]||(S=0<S.length?"{"+S.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,f,S,f),C[f+u]=!0)}if(f=null,c!==void 0&&(m(c),f=""+c),x(n)&&(m(n.key),f=""+n.key),"key"in n){c={};for(var r in n)r!=="key"&&(c[r]=n[r])}else c=n;return f&&R(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),X(e,f,c,i(),M,V)}function Z(e){g(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===I&&(e._payload.status==="fulfilled"?g(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function g(e){return typeof e=="object"&&e!==null&&e.$$typeof===W}var T=l,W=Symbol.for("react.transitional.element"),Q=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),F=Symbol.for("react.strict_mode"),H=Symbol.for("react.profiler"),K=Symbol.for("react.consumer"),oe=Symbol.for("react.context"),Y=Symbol.for("react.forward_ref"),O=Symbol.for("react.suspense"),B=Symbol.for("react.suspense_list"),P=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),k=Symbol.for("react.activity"),G=Symbol.for("react.client.reference"),_=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,q=Array.isArray,j=console.createTask?console.createTask:function(){return null};T={react_stack_bottom_frame:function(e){return e()}};var $,z={},ee=T.react_stack_bottom_frame.bind(T,h)(),U=j(s(h)),C={};L.Fragment=E,L.jsx=function(e,n,c){var u=1e4>_.recentlyCreatedOwnerStacks++;return y(e,n,c,!1,u?Error("react-stack-top-frame"):ee,u?j(s(e)):U)},L.jsxs=function(e,n,c){var u=1e4>_.recentlyCreatedOwnerStacks++;return y(e,n,c,!0,u?Error("react-stack-top-frame"):ee,u?j(s(e)):U)}})()),L}var ie;function me(){return ie||(ie=1,process.env.NODE_ENV==="production"?J.exports=de():J.exports=ue()),J.exports}var t=me();const fe=window.origin+"/cloud/speakid/games/whatsmissing/",re=(a,p)=>a.map(([m,s])=>({src:`${fe}${p}/${s.replace(/\s/g,"%20")}.png`,name:s})),pe=[["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"]],ge=[["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"]],he=[["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"]],ne={food:re(pe,"food"),animals:re(ge,"animals"),toys:re(he,"toys")},xe=`
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const a=document.createElement("style");a.id="spin-keyframes",a.innerHTML=xe,document.head.appendChild(a)}const o={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100vh",width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",color:"#1f2937",padding:"24px 16px",boxSizing:"border-box",transform:"translateY(20px)"},gmHeadline1:{fontWeight:700,fontSize:"clamp(28px, 4vw, 40px)",lineHeight:"110%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},gmBodyM:{fontWeight:400,fontSize:"16px",lineHeight:"140%"},gmBodyS:{fontWeight:400,fontSize:"14px",lineHeight:"140%",color:"#6b7280"},gmButton:{fontFamily:'"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',fontWeight:600,fontSize:"16px",padding:"10px 16px",borderRadius:"12px",border:"1px solid #e5e7eb",background:"#ec4c44",color:"#ffffff",cursor:"pointer",boxShadow:"0 6px 18px rgba(236, 76, 68, .18)",transition:"transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"600px",minHeight:"100vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"calc(210px * 3 + 20px * 2)",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"sticky",top:"16px",left:"20px",zIndex:9999,background:"white",padding:"4px 8px",borderRadius:"8px"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto"},gmHourglass:{fontSize:"42px",...{animation:"spin 1.4s linear infinite"}}},be=window.origin+"/cloud/speakid/games/whatsmissing/logo.png",ye=()=>{const a=document.createElement("style");a.textContent=`
+    html, body, #root {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+    }
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
+    body {
+      font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+      background-color: #fff;
+      color: #1f2937;
+    }
+    button, input {
+      font-family: inherit;
+      outline: none;
+      border: none;
+      background: none;
+    }
+    img {
+      max-width: 100%;
+      height: auto;
+      display: block;
+      user-select: none;
+    }
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+  `,document.head.appendChild(a)},we=(a,p)=>{const m=Array.from({length:a.length+1},()=>Array(p.length+1).fill(0));for(let s=0;s<=a.length;s++)m[s][0]=s;for(let s=0;s<=p.length;s++)m[0][s]=s;for(let s=1;s<=a.length;s++)for(let i=1;i<=p.length;i++)m[s][i]=a[s-1]===p[i-1]?m[s-1][i-1]:Math.min(m[s-1][i-1],m[s][i-1],m[s-1][i])+1;return m[a.length][p.length]};function Te(){l.useEffect(()=>{ye()},[]);const[a,p]=l.useState(null),[m,s]=l.useState([]),[i,h]=l.useState(4),[x,R]=l.useState(!1),[A,X]=l.useState(1),[y,Z]=l.useState(null),[g,T]=l.useState("ready"),[W,Q]=l.useState(3),[E,F]=l.useState(7),[H,K]=l.useState(20),[oe,Y]=l.useState(0),[O,B]=l.useState(!1),[P,I]=l.useState(""),[k,G]=l.useState(!1),[_,D]=l.useState(!1),[q,j]=l.useState(null),[$,z]=l.useState([]),[ee,U]=l.useState([]),[C,e]=l.useState(!1);l.useEffect(()=>{const r=()=>e(window.innerWidth<768);return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[]);const n=r=>[...r].sort(()=>Math.random()-.5).slice(0,6),c=()=>{if(!a)return;const r=n(ne[a]);s(r),R(!0),B(!1),X(1),Y(0),z([]),U([]),u(r,[],!0)},u=(r=m,d=ee,w=!1)=>{const b=n(r.length?r:ne[a]);let te=Math.floor(Math.random()*b.length),se=b[te].name,ce=0;for(;d.includes(se)&&ce<20;)te=Math.floor(Math.random()*b.length),se=b[te].name,ce++;s(b),Z(te),U([...d,se]),G(!1),I(""),K(20),j(null),w?(T("ready"),Q(3),F(7)):(T("memorize"),F(7))};l.useEffect(()=>{if(!(!x||O||k)){if(g==="ready")if(W<=0)T("memorize");else{const r=setTimeout(()=>Q(d=>d-1),1e3);return()=>clearTimeout(r)}if(g==="memorize")if(E<=0)T("guess");else{const r=setTimeout(()=>F(d=>d-1),1e3);return()=>clearTimeout(r)}if(g==="guess"){if(H<=0){G(!0),j("wrong");const d=m[y].name;z(w=>[...w,{round:A,answer:P,correct:d,result:"wrong"}]);return}const r=setTimeout(()=>K(d=>d-1),1e3);return()=>clearTimeout(r)}}},[g,W,E,H,x,O,k,m,y,A,P]);const M=()=>{if(y===null||_)return;const r=m[y].name,d=P.toLowerCase().trim();let w="wrong";d===r?(Y(b=>b+1),j("correct"),w="correct"):we(d,r)===1?(Y(b=>b+.5),j("almost"),w="almost"):(j("wrong"),w="wrong"),z(b=>[...b,{round:A,answer:d,correct:r,result:w}]),D(!0),setTimeout(()=>{D(!1),G(!0)},600)},V=()=>A<i?(X(r=>r+1),u()):B(!0),f=()=>{R(!1),B(!1),p(null)},S=()=>t.jsx("div",{style:o.gmLogoFixed,children:t.jsx("img",{src:be,alt:"SPEAKID Logo",style:o.gmLogoImg})});return t.jsxs(t.Fragment,{children:[!C&&t.jsx(S,{}),!a&&!x&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"WHAT'S MISSING?"}),t.jsx("p",{style:o.gmBodyM,children:"Select a theme:"}),t.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(r=>t.jsx("button",{style:o.gmButton,onClick:()=>p(r),children:r==="animals"?"🐶 Animals":r==="food"?"🍎 Food":"🧸 Toys"},r))}),t.jsxs("div",{style:{marginTop:24},children:[t.jsx("p",{style:o.gmBodyS,children:"Choose number of rounds:"}),t.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(r=>t.jsx("button",{style:{...o.gmButton,...i===r?o.gmButtonActive:{}},onClick:()=>h(r),children:r},r))})]})]}),a&&!x&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsxs("h1",{style:o.gmHeadline1,children:["Theme selected: ",a]}),t.jsxs("p",{style:o.gmBodyM,children:["Rounds: ",i]}),t.jsx("button",{style:o.gmButton,onClick:c,children:"▶ Start game"})]}),O&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"Results"}),t.jsxs("h2",{style:o.gmHeadline3,children:["Your score: ",oe," / ",i]}),t.jsxs("table",{style:o.gmTable,children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Round"}),t.jsx("th",{children:"Your Answer"}),t.jsx("th",{children:"Correct"}),t.jsx("th",{children:"Result"})]})}),t.jsx("tbody",{children:$.map((r,d)=>t.jsxs("tr",{children:[t.jsx("td",{style:o.gmTableCell,children:r.round}),t.jsx("td",{style:o.gmTableCell,children:r.answer||"—"}),t.jsx("td",{style:o.gmTableCell,children:r.correct}),t.jsx("td",{style:o.gmTableCell,children:r.result==="correct"?"✔ Correct":r.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},d))})]}),t.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[t.jsx("button",{style:o.gmButton,onClick:c,children:"🔁 Play again"}),t.jsx("button",{style:o.gmButton,onClick:f,children:"⬅️ Choose theme"})]})]}),x&&!O&&t.jsxs("div",{style:o.gmGameLayout,children:[t.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[g==="ready"&&t.jsxs(t.Fragment,{children:[t.jsx("h1",{style:{...o.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),t.jsx("div",{style:o.gmHourglass,children:"⏳"})]}),g==="memorize"&&t.jsxs("p",{style:{...o.gmBodyM,color:"#10b981"},children:["MEMORIZE (",E,")"]}),g==="guess"&&!k&&t.jsxs("p",{style:o.gmBodyM,children:["⏳ Time left: ",H,"s"]})]}),g!=="ready"&&t.jsx("div",{style:{...o.gmGrid,gridTemplateColumns:C?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:C?"150px":"210px",gap:C?"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"}:{}},children:m.map((r,d)=>{const w=y===d&&g==="guess"&&!k;return t.jsx("div",{style:{...o.gmCard,...q==="correct"&&y===d?o.gmCorrect:{},...q==="wrong"&&y===d?o.gmWrong:{}},children:!w&&t.jsx("img",{src:r.src,alt:r.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},d)})}),t.jsxs("div",{style:{marginTop:16,height:80},children:[g==="guess"&&!k&&t.jsxs("div",{children:[t.jsx("input",{type:"text",placeholder:"Type the missing word",value:P,onChange:r=>I(r.target.value),style:o.gmInput}),t.jsx("button",{style:{...o.gmButton,marginLeft:8},onClick:M,disabled:_,children:_?"...":"Check"})]}),k&&t.jsx("button",{style:o.gmButton,onClick:V,children:"Next round"})]})]})]})}v.Game=Te,v.themes=ne,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,58 +1,16 @@
 {
-  "name": "@mblinkov/whats-missing",
-  "version": "0.0.8",
-  "type": "module",
+ "name": "@mblinkov/whats-missing",
+  "version": "20.0.1",
   "main": "dist/whats-missing.umd.js",
   "module": "dist/whats-missing.es.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "src/Game.module.css",
-    "src/assets",
-    "src/themes.ts"
-  ],
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
   "scripts": {
     "dev": "vite",
-    "build": "npm run build:types && vite build",
-    "build:types": "tsc -p tsconfig.build.json",
-    "lint": "eslint .",
+    "build": "vite build",
     "preview": "vite preview"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react/jsx-runtime": {
-      "optional": true
-    }
-  },
-  "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",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@mblinkov/whats-missing": "*"
   }
 }

package/src/Game.styles.ts

@@ -0,0 +1,205 @@
+import { CSSProperties } from "react";
+
+// ===== Добавляем анимацию вращения в <head> =====
+const spinKeyframes = `
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+`;
+
+if (typeof document !== "undefined" && !document.getElementById("spin-keyframes")) {
+  const styleTag = document.createElement("style");
+  styleTag.id = "spin-keyframes";
+  styleTag.innerHTML = spinKeyframes;
+  document.head.appendChild(styleTag);
+}
+
+// ===== Анимация вращения песочных часов =====
+const spin = {
+  animation: "spin 1.4s linear infinite",
+};
+
+// ===== Основные стили =====
+export const styles: Record<string, CSSProperties> = {
+  gmCenterScreen: {
+    position: "relative",
+    zIndex: 1,
+    minHeight: "100vh",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    color: "#1f2937",
+    padding: "24px 16px",
+    boxSizing: "border-box",
+    transform: "translateY(20px)", // чуть вниз, чтобы компенсировать логотип
+  },
+
+  gmHeadline1: {
+    fontWeight: 700,
+    fontSize: "clamp(28px, 4vw, 40px)",
+    lineHeight: "110%",
+  },
+
+  gmHeadline2: {
+    fontWeight: 600,
+    fontSize: "24px",
+    lineHeight: "120%",
+  },
+
+  gmHeadline3: {
+    fontWeight: 600,
+    fontSize: "18px",
+    lineHeight: "130%",
+  },
+
+  gmBodyL: {
+    fontWeight: 400,
+    fontSize: "18px",
+    lineHeight: "140%",
+  },
+
+  gmBodyM: {
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "140%",
+  },
+
+  gmBodyS: {
+    fontWeight: 400,
+    fontSize: "14px",
+    lineHeight: "140%",
+    color: "#6b7280",
+  },
+
+  gmButton: {
+    fontFamily:
+      '"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',
+    fontWeight: 600,
+    fontSize: "16px",
+    padding: "10px 16px",
+    borderRadius: "12px",
+    border: "1px solid #e5e7eb",
+    background: "#ec4c44",
+    color: "#ffffff",
+    cursor: "pointer",
+    boxShadow: "0 6px 18px rgba(236, 76, 68, .18)",
+    transition:
+      "transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease",
+  },
+
+  gmButtonActive: {
+    background: "#333",
+    color: "#fff",
+  },
+
+  gmGameLayout: {
+    position: "relative",
+    width: "100%",
+    maxWidth: "600px", // ограничение ширины для мобильных
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    color: "#1f2937",
+    padding: "16px 8px",
+    margin: "0 auto",
+  },
+
+  gmGrid: {
+    width: "100%",
+    maxWidth: "calc(210px * 3 + 20px * 2)",
+    margin: "0 auto",
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 210px)",
+    gridAutoRows: "210px",
+    gap: "20px",
+    justifyContent: "center",
+  },
+
+  gmCard: {
+    border: "1px solid #e5e7eb",
+    borderRadius: "16px",
+    background: "#f9f9f9",
+    aspectRatio: "1 / 1",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    transition:
+      "transform .2s ease, box-shadow .2s ease, border-color .2s ease",
+  },
+
+  gmCorrect: {
+    border: "2px solid #10b981",
+    boxShadow: "0 0 18px rgba(16,185,129,.45)",
+    background: "#ecfdf5",
+  },
+
+  gmWrong: {
+    border: "2px solid #ec4c44",
+    boxShadow: "0 0 18px rgba(236,76,68,.35)",
+    background: "#fef2f2",
+  },
+
+  gmInput: {
+    padding: "6px 10px",
+    borderRadius: "6px",
+    border: "1px solid #ccc",
+    fontSize: "16px",
+    fontFamily: '"Geist", system-ui',
+    width: "160px",
+  },
+
+  gmTable: {
+    marginTop: "20px",
+    marginBottom: "32px",
+    borderCollapse: "collapse",
+    width: "100%",
+    maxWidth: "520px",
+    tableLayout: "fixed",
+    textAlign: "center",
+  },
+
+  gmTableCell: {
+    padding: "8px 12px",
+    borderBottom: "1px solid #e5e7eb",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+
+  gmLogoFixed: {
+    position: "sticky",
+    top: "16px",
+    left: "20px",
+    zIndex: 9999,
+    background: "white",
+    padding: "4px 8px",
+    borderRadius: "8px",
+  },
+
+  gmLogoImg: {
+    height: "clamp(28px, 5vw, 40px)",
+    width: "auto",
+  },
+
+  gmReadyWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "60vh",
+    gap: "16px",
+  },
+
+  gmHourglass: {
+    fontSize: "42px",
+    ...spin,
+  },
+};