@mblinkov/whats-missing 20.0.36 → 20.0.37

package/dist/whats-missing.cjs.js

@@ -6,4 +6,4 @@
 `;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const l=document.createElement("style");l.id="spin-keyframes",l.innerHTML=xe,document.head.appendChild(l)}const be={animation:"spin 1.4s linear infinite"},o={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100%",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:"none",minHeight:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"none",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:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...be}},we=()=>{const l=document.createElement("style");l.textContent=`
     #whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
     #whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
-  `,document.head.appendChild(l)},je=(l,m)=>{const r=Array.from({length:l.length+1},()=>Array(m.length+1).fill(0));for(let i=0;i<=l.length;i++)r[i][0]=i;for(let i=0;i<=m.length;i++)r[0][i]=i;for(let i=1;i<=l.length;i++)for(let g=1;g<=m.length;g++)r[i][g]=l[i-1]===m[g-1]?r[i-1][g-1]:Math.min(r[i-1][g-1],r[i][g-1],r[i-1][g])+1;return r[l.length][m.length]};function Se(l,m={minDesktopWidth:1200,forceResize:!1}){const r=s.useRef(null),i=m.minDesktopWidth??1200,g=!!m.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!l||!l.current)return;const c=l.current,T=()=>{try{const a=document.body,j=getComputedStyle(a),b=parseFloat(a.style&&a.style.zoom||"");if(b&&!isNaN(b)&&b>0)return b;const v=parseFloat(j.zoom||"");if(v&&!isNaN(v)&&v>0)return v;const h=document.createElement("div");h.style.position="absolute",h.style.left="0",h.style.top="0",h.style.width="100px",h.style.height="1px",h.style.visibility="hidden",document.documentElement.appendChild(h);const C=h.getBoundingClientRect();if(document.documentElement.removeChild(h),C&&C.width>0){const p=C.width/100;if(!isNaN(p)&&p>0)return p}}catch{}return 1},H=()=>{if(i&&window.innerWidth<i){y();return}const a=T();if(!a||a===1){y();return}r.current||(r.current={transform:c.style.transform||null,transformOrigin:c.style.transformOrigin||null,width:c.style.width||null,height:c.style.height||null,willChange:c.style.willChange||null});const j=1/a;g&&(c.style.width=`${a*100}%`,c.style.height=`${a*100}%`),c.style.transformOrigin="50% 50%",c.style.transform=`scale(${j})`,c.style.willChange="transform"},y=()=>{if(!r.current)return;const a=r.current;c.style.transform=a.transform??"",c.style.transformOrigin=a.transformOrigin??"",c.style.width=a.width??"",c.style.height=a.height??"",c.style.willChange=a.willChange??"",r.current=null};let z=0;const x=()=>{cancelAnimationFrame(z),z=requestAnimationFrame(H)},R=new MutationObserver(a=>{for(const j of a)if(j.type==="attributes"&&(j.attributeName==="style"||j.attributeName==="class")){x();break}});return R.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",x),x(),()=>{cancelAnimationFrame(z),R.disconnect(),window.removeEventListener("resize",x),y()}},[l,i,g])}function ve({gameCubeSize:l,screenHeight:m,screenWidth:r}){const i=s.useRef(null),g=s.useRef(null),[c,T]=s.useState(null);Se(i,{minDesktopWidth:1024,forceResize:!1}),s.useEffect(()=>{const e=document.body,n=document.documentElement,d=e.style.zoom,u=e.style.transform,S=n.style.zoom,I=n.style.transform;return e.style.zoom="1",e.style.transform="none",n.style.zoom="1",n.style.transform="none",()=>{e.style.zoom=d,e.style.transform=u,n.style.zoom=S,n.style.transform=I}},[]);const H=s.useMemo(()=>{const e=l??Math.min(r??1e3,m??1e3),n=r??(typeof window<"u"?window.innerWidth:1e3);return e<600&&n>768?600:n<=768?Math.min(e,n-20):e},[l,r,m]);s.useEffect(()=>(we(),()=>{document.body.style.overflow=""}),[]);const[y,z]=s.useState(null),[x,R]=s.useState([]),[a,j]=s.useState(4),[b,v]=s.useState(!1),[h,C]=s.useState(1),[p,ie]=s.useState(null),[w,B]=s.useState("ready"),[Z,U]=s.useState(3),[A,W]=s.useState(10),[F,V]=s.useState(20),[re,G]=s.useState(0),[E,$]=s.useState(!1),[L,_]=s.useState(""),[k,N]=s.useState(!1),[O,K]=s.useState(!1),[J,M]=s.useState(null),[le,D]=s.useState([]),[ae,Q]=s.useState([]),[f,de]=s.useState(!1);s.useEffect(()=>{if(typeof window>"u")return;const e=()=>{const n=r??window.innerWidth,d=window.matchMedia&&window.matchMedia("(pointer: coarse)").matches;de(n<=768||d)};return e(),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}},[r]),s.useLayoutEffect(()=>{const e=g.current;if(!e||typeof window>"u")return;let n=null;try{n=new ResizeObserver(d=>{for(const u of d){const S=u.contentRect;T(Math.round(Math.min(S.width,S.height)))}}),n.observe(e),T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}catch{T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}return()=>n?.disconnect()},[f]);const X=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!y)return;const e=X(P[y]);R(e),v(!0),$(!1),C(1),G(0),D([]),Q([]),te(e,[],!0)},te=(e=x,n=ae,d=!1)=>{const u=X(e.length?e:P[y]);let S=Math.floor(Math.random()*u.length),I=u[S].name,se=0;for(;n.includes(I)&&se<20;)S=Math.floor(Math.random()*u.length),I=u[S].name,se++;R(u),ie(S),Q([...n,I]),N(!1),_(""),V(20),M(null),d?(B("ready"),U(3),W(10)):(B("memorize"),W(10))};s.useEffect(()=>{if(!(!b||E||k)){if(w==="ready")if(Z<=0)B("memorize");else{const e=setTimeout(()=>U(n=>n-1),1e3);return()=>clearTimeout(e)}if(w==="memorize")if(A<=0)B("guess");else{const e=setTimeout(()=>W(n=>n-1),1e3);return()=>clearTimeout(e)}if(w==="guess"){if(F<=0){N(!0),M("wrong");const n=x[p].name;D(d=>[...d,{round:h,answer:L,correct:n,result:"wrong"}]);return}const e=setTimeout(()=>V(n=>n-1),1e3);return()=>clearTimeout(e)}}},[w,Z,A,F,b,E,k,x,p,h,L]);const ce=()=>{if(p===null||O)return;const e=x[p].name,n=L.toLowerCase().trim();let d="wrong";n===e?(G(u=>u+1),M("correct"),d="correct"):je(n,e)===1?(G(u=>u+.5),M("almost"),d="almost"):(M("wrong"),d="wrong"),D(u=>[...u,{round:h,answer:n,correct:e,result:d}]),K(!0),setTimeout(()=>{K(!1),N(!0)},600)},me=()=>h<a?(C(e=>e+1),te()):$(!0),ue=()=>{v(!1),$(!1),z(null)},ge=s.useMemo(()=>t.jsx("div",{style:{...o.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:t.jsxs("picture",{children:[t.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),t.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:o.gmLogoImg,loading:"lazy"})]})}),[]),ne=1200,oe=700,q=s.useMemo(()=>{const e=r??(typeof window<"u"?window.innerWidth:ne),n=m??(typeof window<"u"?window.innerHeight:oe),d=Math.min(e/ne,n/oe);return Math.min(1.35,Math.max(1,d))},[r,m,f]);return t.jsx("div",{ref:i,style:{position:"fixed",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",overflow:"hidden",zIndex:1,width:"100vw",height:"100vh",transform:"none",zoom:1,scale:"1 !important"},children:t.jsx("div",{ref:g,style:{width:f?"100%":`${H}px`,height:f?"100%":`${H}px`,borderRadius:f?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",position:"relative",overflow:"hidden",boxShadow:f?"none":"0 0 40px rgba(0,0,0,0.08)",display:"flex",justifyContent:"center",alignItems:"center"},children:t.jsxs("div",{id:"whats-missing-root",style:{transform:`scale(${q})`,transformOrigin:"center center",transition:"transform 0.2s ease-out",width:`${100/q}%`,height:`${100/q}%`,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!f&&ge,!y&&!b&&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(e=>t.jsx("button",{style:o.gmButton,onClick:()=>z(e),children:e==="animals"?"🐶 Animals":e==="food"?"🍎 Food":"🧸 Toys"},e))}),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(e=>t.jsx("button",{style:{...o.gmButton,...a===e?o.gmButtonActive:{}},onClick:()=>j(e),children:e},e))})]})]}),y&&!b&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsxs("h1",{style:o.gmHeadline1,children:["Theme selected: ",y]}),t.jsxs("p",{style:o.gmBodyM,children:["Rounds: ",a]}),t.jsx("button",{style:o.gmButton,onClick:ee,children:"▶ Start game"})]}),E&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"Results"}),t.jsxs("h2",{style:o.gmHeadline3,children:["Your score: ",re," / ",a]}),t.jsx("p",{style:{...o.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),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:le.map((e,n)=>t.jsxs("tr",{children:[t.jsx("td",{style:o.gmTableCell,children:e.round}),t.jsx("td",{style:o.gmTableCell,children:e.answer||"—"}),t.jsx("td",{style:o.gmTableCell,children:e.correct}),t.jsx("td",{style:o.gmTableCell,children:e.result==="correct"?"✔ Correct":e.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},n))})]}),t.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[t.jsx("button",{style:o.gmButton,onClick:ee,children:"🔁 Play again"}),t.jsx("button",{style:o.gmButton,onClick:ue,children:"⬅️ Choose theme"})]})]}),b&&!E&&t.jsxs("div",{style:o.gmGameLayout,children:[t.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[w==="ready"&&t.jsxs(t.Fragment,{children:[t.jsx("h1",{style:{...o.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),t.jsx("div",{style:o.gmHourglass,children:"⏳"})]}),w==="memorize"&&t.jsxs("p",{style:{...o.gmBodyM,color:"#10b981"},children:["MEMORIZE (",A,")"]}),w==="guess"&&!k&&t.jsxs("p",{style:o.gmBodyM,children:["⏳ Time left: ",F,"s"]})]}),w!=="ready"&&t.jsx("div",{style:{...o.gmGrid,display:"grid",gridTemplateColumns:`repeat(${f?2:3}, 1fr)`,gridTemplateRows:`repeat(${f?3:2}, 1fr)`,gap:f?12:20,justifyContent:"center",alignContent:"center",padding:f?8:16,width:"100%",height:"100%",maxWidth:f?"100%":600,maxHeight:f?"100%":400,boxSizing:"border-box"},children:x.map((e,n)=>{const d=p===n&&w==="guess"&&!k;return t.jsx("div",{style:{...o.gmCard,width:"100%",height:"100%",...J==="correct"&&p===n?o.gmCorrect:{},...J==="wrong"&&p===n?o.gmWrong:{}},children:!d&&t.jsx("img",{src:e.src,alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},n)})}),t.jsxs("div",{style:{marginTop:16,height:80},children:[w==="guess"&&!k&&t.jsxs("div",{children:[t.jsx("input",{type:"text",placeholder:"Type the missing word",value:L,onChange:e=>_(e.target.value),style:o.gmInput}),t.jsx("button",{style:{...o.gmButton,marginLeft:8},onClick:ce,disabled:O,children:O?"...":"Check"})]}),k&&t.jsx("button",{type:"button",style:o.gmButton,onClick:me,children:"Next round"})]})]})]})})})}exports.Game=ve;exports.themes=P;
+  `,document.head.appendChild(l)},je=(l,m)=>{const r=Array.from({length:l.length+1},()=>Array(m.length+1).fill(0));for(let i=0;i<=l.length;i++)r[i][0]=i;for(let i=0;i<=m.length;i++)r[0][i]=i;for(let i=1;i<=l.length;i++)for(let g=1;g<=m.length;g++)r[i][g]=l[i-1]===m[g-1]?r[i-1][g-1]:Math.min(r[i-1][g-1],r[i][g-1],r[i-1][g])+1;return r[l.length][m.length]};function ve(l,m={minDesktopWidth:1200,forceResize:!1}){const r=s.useRef(null),i=m.minDesktopWidth??1200,g=!!m.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!l||!l.current)return;const c=l.current,T=()=>{try{const a=document.body,j=getComputedStyle(a),b=parseFloat(a.style&&a.style.zoom||"");if(b&&!isNaN(b)&&b>0)return b;const S=parseFloat(j.zoom||"");if(S&&!isNaN(S)&&S>0)return S;const h=document.createElement("div");h.style.position="absolute",h.style.left="0",h.style.top="0",h.style.width="100px",h.style.height="1px",h.style.visibility="hidden",document.documentElement.appendChild(h);const C=h.getBoundingClientRect();if(document.documentElement.removeChild(h),C&&C.width>0){const p=C.width/100;if(!isNaN(p)&&p>0)return p}}catch{}return 1},H=()=>{if(i&&window.innerWidth<i){y();return}const a=T();if(!a||a===1){y();return}r.current||(r.current={transform:c.style.transform||null,transformOrigin:c.style.transformOrigin||null,width:c.style.width||null,height:c.style.height||null,willChange:c.style.willChange||null});const j=1/a;g&&(c.style.width=`${a*100}%`,c.style.height=`${a*100}%`),c.style.transformOrigin="50% 50%",c.style.transform=`scale(${j})`,c.style.willChange="transform"},y=()=>{if(!r.current)return;const a=r.current;c.style.transform=a.transform??"",c.style.transformOrigin=a.transformOrigin??"",c.style.width=a.width??"",c.style.height=a.height??"",c.style.willChange=a.willChange??"",r.current=null};let z=0;const x=()=>{cancelAnimationFrame(z),z=requestAnimationFrame(H)},R=new MutationObserver(a=>{for(const j of a)if(j.type==="attributes"&&(j.attributeName==="style"||j.attributeName==="class")){x();break}});return R.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",x),x(),()=>{cancelAnimationFrame(z),R.disconnect(),window.removeEventListener("resize",x),y()}},[l,i,g])}function Se({gameCubeSize:l,screenHeight:m,screenWidth:r}){const i=s.useRef(null),g=s.useRef(null),[c,T]=s.useState(null);ve(i,{minDesktopWidth:1024,forceResize:!1}),s.useLayoutEffect(()=>{const e=i.current;e&&(e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.width="100vw",e.style.height="100vh",e.style.zIndex="100",e.style.background="linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",e.style.overflow="hidden",e.style.transform="none",e.style.zoom="1",e.style.margin="0",e.style.padding="0")},[]),s.useEffect(()=>{const e=document.body,n=document.documentElement,d=e.style.zoom,u=e.style.transform,v=n.style.zoom,I=n.style.transform;return e.style.zoom="1",e.style.transform="none",n.style.zoom="1",n.style.transform="none",()=>{e.style.zoom=d,e.style.transform=u,n.style.zoom=v,n.style.transform=I}},[]);const H=s.useMemo(()=>{const e=l??Math.min(r??1e3,m??1e3),n=r??(typeof window<"u"?window.innerWidth:1e3);return e<600&&n>768?600:n<=768?Math.min(e,n-20):e},[l,r,m]);s.useEffect(()=>(we(),()=>{document.body.style.overflow=""}),[]);const[y,z]=s.useState(null),[x,R]=s.useState([]),[a,j]=s.useState(4),[b,S]=s.useState(!1),[h,C]=s.useState(1),[p,ie]=s.useState(null),[w,B]=s.useState("ready"),[Z,U]=s.useState(3),[A,W]=s.useState(10),[F,V]=s.useState(20),[re,G]=s.useState(0),[E,$]=s.useState(!1),[L,_]=s.useState(""),[k,N]=s.useState(!1),[O,K]=s.useState(!1),[J,M]=s.useState(null),[le,D]=s.useState([]),[ae,Q]=s.useState([]),[f,de]=s.useState(!1);s.useEffect(()=>{if(typeof window>"u")return;const e=()=>{const n=r??window.innerWidth,d=window.matchMedia&&window.matchMedia("(pointer: coarse)").matches;de(n<=768||d)};return e(),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}},[r]),s.useLayoutEffect(()=>{const e=g.current;if(!e||typeof window>"u")return;let n=null;try{n=new ResizeObserver(d=>{for(const u of d){const v=u.contentRect;T(Math.round(Math.min(v.width,v.height)))}}),n.observe(e),T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}catch{T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}return()=>n?.disconnect()},[f]);const X=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!y)return;const e=X(P[y]);R(e),S(!0),$(!1),C(1),G(0),D([]),Q([]),te(e,[],!0)},te=(e=x,n=ae,d=!1)=>{const u=X(e.length?e:P[y]);let v=Math.floor(Math.random()*u.length),I=u[v].name,se=0;for(;n.includes(I)&&se<20;)v=Math.floor(Math.random()*u.length),I=u[v].name,se++;R(u),ie(v),Q([...n,I]),N(!1),_(""),V(20),M(null),d?(B("ready"),U(3),W(10)):(B("memorize"),W(10))};s.useEffect(()=>{if(!(!b||E||k)){if(w==="ready")if(Z<=0)B("memorize");else{const e=setTimeout(()=>U(n=>n-1),1e3);return()=>clearTimeout(e)}if(w==="memorize")if(A<=0)B("guess");else{const e=setTimeout(()=>W(n=>n-1),1e3);return()=>clearTimeout(e)}if(w==="guess"){if(F<=0){N(!0),M("wrong");const n=x[p].name;D(d=>[...d,{round:h,answer:L,correct:n,result:"wrong"}]);return}const e=setTimeout(()=>V(n=>n-1),1e3);return()=>clearTimeout(e)}}},[w,Z,A,F,b,E,k,x,p,h,L]);const ce=()=>{if(p===null||O)return;const e=x[p].name,n=L.toLowerCase().trim();let d="wrong";n===e?(G(u=>u+1),M("correct"),d="correct"):je(n,e)===1?(G(u=>u+.5),M("almost"),d="almost"):(M("wrong"),d="wrong"),D(u=>[...u,{round:h,answer:n,correct:e,result:d}]),K(!0),setTimeout(()=>{K(!1),N(!0)},600)},me=()=>h<a?(C(e=>e+1),te()):$(!0),ue=()=>{S(!1),$(!1),z(null)},ge=s.useMemo(()=>t.jsx("div",{style:{...o.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:t.jsxs("picture",{children:[t.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),t.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:o.gmLogoImg,loading:"lazy"})]})}),[]),ne=1200,oe=700,q=s.useMemo(()=>{const e=r??(typeof window<"u"?window.innerWidth:ne),n=m??(typeof window<"u"?window.innerHeight:oe),d=Math.min(e/ne,n/oe);return Math.min(1.35,Math.max(1,d))},[r,m,f]);return t.jsx("div",{ref:i,style:{position:"fixed",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",overflow:"hidden",zIndex:1,width:"100vw",height:"100vh",transform:"none",zoom:1,scale:"1 !important"},children:t.jsx("div",{ref:g,style:{width:f?"100%":`${H}px`,height:f?"100%":`${H}px`,borderRadius:f?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",position:"relative",overflow:"hidden",boxShadow:f?"none":"0 0 40px rgba(0,0,0,0.08)",display:"flex",justifyContent:"center",alignItems:"center"},children:t.jsxs("div",{id:"whats-missing-root",style:{transform:`scale(${q})`,transformOrigin:"center center",transition:"transform 0.2s ease-out",width:`${100/q}%`,height:`${100/q}%`,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!f&&ge,!y&&!b&&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(e=>t.jsx("button",{style:o.gmButton,onClick:()=>z(e),children:e==="animals"?"🐶 Animals":e==="food"?"🍎 Food":"🧸 Toys"},e))}),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(e=>t.jsx("button",{style:{...o.gmButton,...a===e?o.gmButtonActive:{}},onClick:()=>j(e),children:e},e))})]})]}),y&&!b&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsxs("h1",{style:o.gmHeadline1,children:["Theme selected: ",y]}),t.jsxs("p",{style:o.gmBodyM,children:["Rounds: ",a]}),t.jsx("button",{style:o.gmButton,onClick:ee,children:"▶ Start game"})]}),E&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"Results"}),t.jsxs("h2",{style:o.gmHeadline3,children:["Your score: ",re," / ",a]}),t.jsx("p",{style:{...o.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),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:le.map((e,n)=>t.jsxs("tr",{children:[t.jsx("td",{style:o.gmTableCell,children:e.round}),t.jsx("td",{style:o.gmTableCell,children:e.answer||"—"}),t.jsx("td",{style:o.gmTableCell,children:e.correct}),t.jsx("td",{style:o.gmTableCell,children:e.result==="correct"?"✔ Correct":e.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},n))})]}),t.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[t.jsx("button",{style:o.gmButton,onClick:ee,children:"🔁 Play again"}),t.jsx("button",{style:o.gmButton,onClick:ue,children:"⬅️ Choose theme"})]})]}),b&&!E&&t.jsxs("div",{style:o.gmGameLayout,children:[t.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[w==="ready"&&t.jsxs(t.Fragment,{children:[t.jsx("h1",{style:{...o.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),t.jsx("div",{style:o.gmHourglass,children:"⏳"})]}),w==="memorize"&&t.jsxs("p",{style:{...o.gmBodyM,color:"#10b981"},children:["MEMORIZE (",A,")"]}),w==="guess"&&!k&&t.jsxs("p",{style:o.gmBodyM,children:["⏳ Time left: ",F,"s"]})]}),w!=="ready"&&t.jsx("div",{style:{...o.gmGrid,display:"grid",gridTemplateColumns:`repeat(${f?2:3}, 1fr)`,gridTemplateRows:`repeat(${f?3:2}, 1fr)`,gap:f?12:20,justifyContent:"center",alignContent:"center",padding:f?8:16,width:"100%",height:"100%",maxWidth:f?"100%":600,maxHeight:f?"100%":400,boxSizing:"border-box"},children:x.map((e,n)=>{const d=p===n&&w==="guess"&&!k;return t.jsx("div",{style:{...o.gmCard,width:"100%",height:"100%",...J==="correct"&&p===n?o.gmCorrect:{},...J==="wrong"&&p===n?o.gmWrong:{}},children:!d&&t.jsx("img",{src:e.src,alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},n)})}),t.jsxs("div",{style:{marginTop:16,height:80},children:[w==="guess"&&!k&&t.jsxs("div",{children:[t.jsx("input",{type:"text",placeholder:"Type the missing word",value:L,onChange:e=>_(e.target.value),style:o.gmInput}),t.jsx("button",{style:{...o.gmButton,marginLeft:8},onClick:ce,disabled:O,children:O?"...":"Check"})]}),k&&t.jsx("button",{type:"button",style:o.gmButton,onClick:me,children:"Next round"})]})]})]})})})}exports.Game=Se;exports.themes=P;

package/dist/whats-missing.es.js

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as a, Fragment as be } from "react/jsx-runtime";
-import { useRef as V, useState as d, useEffect as j, useMemo as P, useLayoutEffect as de } from "react";
+import { useRef as V, useState as d, useLayoutEffect as _, useEffect as j, useMemo as P } from "react";
 const xe = window.origin + "/cloud/speakid/games/whatsmissing/", U = (s, u) => s.map(([r, i]) => ({
   src: `${xe}${u}/${i.replace(/\s/g, "%20")}.png`,
   name: i
@@ -69,7 +69,7 @@ const xe = window.origin + "/cloud/speakid/games/whatsmissing/", U = (s, u) => s
   ["teddy_bear", "teddy bear"],
   ["yo-yo", "yo-yo"],
   ["crayons", "crayons"]
-], ae = {
+], de = {
   food: U(ve, "food"),
   animals: U(ze, "animals"),
   toys: U(Ce, "toys")
@@ -258,7 +258,7 @@ const Se = {
 };
 function Me(s, u = { minDesktopWidth: 1200, forceResize: !1 }) {
   const r = V(null), i = u.minDesktopWidth ?? 1200, h = !!u.forceResize;
-  de(() => {
+  _(() => {
     if (typeof window > "u" || !s || !s.current) return;
     const m = s.current, M = () => {
       try {
@@ -321,7 +321,10 @@ function Be({
   screenWidth: r
 }) {
   const i = V(null), h = V(null), [m, M] = d(null);
-  Me(i, { minDesktopWidth: 1024, forceResize: !1 }), j(() => {
+  Me(i, { minDesktopWidth: 1024, forceResize: !1 }), _(() => {
+    const e = i.current;
+    e && (e.style.position = "fixed", e.style.top = "0", e.style.left = "0", e.style.width = "100vw", e.style.height = "100vh", e.style.zIndex = "100", e.style.background = "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)", e.style.overflow = "hidden", e.style.transform = "none", e.style.zoom = "1", e.style.margin = "0", e.style.padding = "0");
+  }, []), j(() => {
     const e = document.body, t = document.documentElement, c = e.style.zoom, g = e.style.transform, C = t.style.zoom, B = t.style.transform;
     return e.style.zoom = "1", e.style.transform = "none", t.style.zoom = "1", t.style.transform = "none", () => {
       e.style.zoom = c, e.style.transform = g, t.style.zoom = C, t.style.transform = B;
@@ -334,7 +337,7 @@ function Be({
   j(() => (Te(), () => {
     document.body.style.overflow = "";
   }), []);
-  const [w, S] = d(null), [b, I] = d([]), [l, z] = d(4), [x, k] = d(!1), [f, T] = d(1), [y, ce] = d(null), [v, A] = d("ready"), [_, K] = d(3), [F, $] = d(10), [G, J] = d(20), [me, N] = d(0), [E, D] = d(!1), [W, Q] = d(""), [R, O] = d(!1), [q, X] = d(!1), [ee, H] = d(null), [ue, Y] = d([]), [ge, te] = d([]), [p, he] = d(!1);
+  const [w, S] = d(null), [b, I] = d([]), [l, z] = d(4), [x, k] = d(!1), [f, T] = d(1), [y, ce] = d(null), [v, A] = d("ready"), [K, J] = d(3), [F, $] = d(10), [G, Q] = d(20), [me, N] = d(0), [E, D] = d(!1), [W, X] = d(""), [R, O] = d(!1), [q, ee] = d(!1), [te, H] = d(null), [ue, Y] = d([]), [ge, ne] = d([]), [p, he] = d(!1);
   j(() => {
     if (typeof window > "u") return;
     const e = () => {
@@ -344,7 +347,7 @@ function Be({
     return e(), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
       window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
     };
-  }, [r]), de(() => {
+  }, [r]), _(() => {
     const e = h.current;
     if (!e || typeof window > "u") return;
     let t = null;
@@ -360,23 +363,23 @@ function Be({
     }
     return () => t?.disconnect();
   }, [p]);
-  const ne = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), oe = () => {
+  const oe = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), ie = () => {
     if (!w) return;
-    const e = ne(ae[w]);
-    I(e), k(!0), D(!1), T(1), N(0), Y([]), te([]), ie(e, [], !0);
-  }, ie = (e = b, t = ge, c = !1) => {
-    const g = ne(e.length ? e : ae[w]);
-    let C = Math.floor(Math.random() * g.length), B = g[C].name, le = 0;
-    for (; t.includes(B) && le < 20; )
-      C = Math.floor(Math.random() * g.length), B = g[C].name, le++;
-    I(g), ce(C), te([...t, B]), O(!1), Q(""), J(20), H(null), c ? (A("ready"), K(3), $(10)) : (A("memorize"), $(10));
+    const e = oe(de[w]);
+    I(e), k(!0), D(!1), T(1), N(0), Y([]), ne([]), re(e, [], !0);
+  }, re = (e = b, t = ge, c = !1) => {
+    const g = oe(e.length ? e : de[w]);
+    let C = Math.floor(Math.random() * g.length), B = g[C].name, ae = 0;
+    for (; t.includes(B) && ae < 20; )
+      C = Math.floor(Math.random() * g.length), B = g[C].name, ae++;
+    I(g), ce(C), ne([...t, B]), O(!1), X(""), Q(20), H(null), c ? (A("ready"), J(3), $(10)) : (A("memorize"), $(10));
   };
   j(() => {
     if (!(!x || E || R)) {
       if (v === "ready")
-        if (_ <= 0) A("memorize");
+        if (K <= 0) A("memorize");
         else {
-          const e = setTimeout(() => K((t) => t - 1), 1e3);
+          const e = setTimeout(() => J((t) => t - 1), 1e3);
           return () => clearTimeout(e);
         }
       if (v === "memorize")
@@ -395,19 +398,19 @@ function Be({
           ]);
           return;
         }
-        const e = setTimeout(() => J((t) => t - 1), 1e3);
+        const e = setTimeout(() => Q((t) => t - 1), 1e3);
         return () => clearTimeout(e);
       }
     }
-  }, [v, _, F, G, x, E, R, b, y, f, W]);
+  }, [v, K, F, G, x, E, R, b, y, f, W]);
   const fe = () => {
     if (y === null || q) return;
     const e = b[y].name, t = W.toLowerCase().trim();
     let c = "wrong";
-    t === e ? (N((g) => g + 1), H("correct"), c = "correct") : Re(t, e) === 1 ? (N((g) => g + 0.5), H("almost"), c = "almost") : (H("wrong"), c = "wrong"), Y((g) => [...g, { round: f, answer: t, correct: e, result: c }]), X(!0), setTimeout(() => {
-      X(!1), O(!0);
+    t === e ? (N((g) => g + 1), H("correct"), c = "correct") : Re(t, e) === 1 ? (N((g) => g + 0.5), H("almost"), c = "almost") : (H("wrong"), c = "wrong"), Y((g) => [...g, { round: f, answer: t, correct: e, result: c }]), ee(!0), setTimeout(() => {
+      ee(!1), O(!0);
     }, 600);
-  }, pe = () => f < l ? (T((e) => e + 1), ie()) : D(!0), ye = () => {
+  }, pe = () => f < l ? (T((e) => e + 1), re()) : D(!0), ye = () => {
     k(!1), D(!1), S(null);
   }, we = P(
     () => /* @__PURE__ */ o("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ a("picture", { children: [
@@ -429,8 +432,8 @@ function Be({
       )
     ] }) }),
     []
-  ), re = 1200, se = 700, Z = P(() => {
-    const e = r ?? (typeof window < "u" ? window.innerWidth : re), t = u ?? (typeof window < "u" ? window.innerHeight : se), c = Math.min(e / re, t / se);
+  ), se = 1200, le = 700, Z = P(() => {
+    const e = r ?? (typeof window < "u" ? window.innerWidth : se), t = u ?? (typeof window < "u" ? window.innerHeight : le), c = Math.min(e / se, t / le);
     return Math.min(1.35, Math.max(1, c));
   }, [r, u, p]);
   return /* @__PURE__ */ o(
@@ -516,7 +519,7 @@ function Be({
                     "Rounds: ",
                     l
                   ] }),
-                  /* @__PURE__ */ o("button", { style: n.gmButton, onClick: oe, children: "▶ Start game" })
+                  /* @__PURE__ */ o("button", { style: n.gmButton, onClick: ie, children: "▶ Start game" })
                 ] }),
                 E && /* @__PURE__ */ a("div", { style: n.gmCenterScreen, children: [
                   /* @__PURE__ */ o("h1", { style: n.gmHeadline1, children: "Results" }),
@@ -542,7 +545,7 @@ function Be({
                     ] }, t)) })
                   ] }),
                   /* @__PURE__ */ a("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
-                    /* @__PURE__ */ o("button", { style: n.gmButton, onClick: oe, children: "🔁 Play again" }),
+                    /* @__PURE__ */ o("button", { style: n.gmButton, onClick: ie, children: "🔁 Play again" }),
                     /* @__PURE__ */ o("button", { style: n.gmButton, onClick: ye, children: "⬅️ Choose theme" })
                   ] })
                 ] }),
@@ -602,8 +605,8 @@ function Be({
                               ...n.gmCard,
                               width: "100%",
                               height: "100%",
-                              ...ee === "correct" && y === t ? n.gmCorrect : {},
-                              ...ee === "wrong" && y === t ? n.gmWrong : {}
+                              ...te === "correct" && y === t ? n.gmCorrect : {},
+                              ...te === "wrong" && y === t ? n.gmWrong : {}
                             },
                             children: !c && /* @__PURE__ */ o(
                               "img",
@@ -632,7 +635,7 @@ function Be({
                           type: "text",
                           placeholder: "Type the missing word",
                           value: W,
-                          onChange: (e) => Q(e.target.value),
+                          onChange: (e) => X(e.target.value),
                           style: n.gmInput
                         }
                       ),
@@ -659,5 +662,5 @@ function Be({
 }
 export {
   Be as Game,
-  ae as themes
+  de as themes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@mblinkov/whats-missing",
- "version": "20.0.36",
+ "version": "20.0.37",
  "main": "dist/whats-missing.umd.js",
  "module": "dist/whats-missing.es.js",
  "types": "dist/index.d.ts",

package/src/Game.tsx

@@ -160,6 +160,26 @@ export default function Game({
   const [squareSize, setSquareSize] = useState<number | null>(null);
   useNeutralizeBodyZoom(containerRef, { minDesktopWidth: 1024, forceResize: false });
 
+  // ✅ полная изоляция игры от внешних стилей сайта
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    // полностью изолируем игру от внешних стилей
+    container.style.position = "fixed";
+    container.style.top = "0";
+    container.style.left = "0";
+    container.style.width = "100vw";
+    container.style.height = "100vh";
+    container.style.zIndex = "100";
+    container.style.background = "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)";
+    container.style.overflow = "hidden";
+    container.style.transform = "none";
+    container.style.zoom = "1";
+    container.style.margin = "0";
+    container.style.padding = "0";
+  }, []);
+
   useEffect(() => {
     const b = document.body;
     const h = document.documentElement;