@mblinkov/whats-missing 20.0.17 → 20.0.19

package/dist/whats-missing.cjs.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),re=window.origin+"/cloud/speakid/games/whatsmissing/",B=(r,a)=>r.map(([d,n])=>({src:`${re}${a}/${n.replace(/\s/g,"%20")}.png`,name:n})),ae=[["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"]],le=[["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"]],de=[["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"]],W={food:B(ae,"food"),animals:B(le,"animals"),toys:B(de,"toys")},ce=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),ge=window.origin+"/cloud/speakid/games/whatsmissing/",$=(a,l)=>a.map(([c,n])=>({src:`${ge}${l}/${n.replace(/\s/g,"%20")}.png`,name:n})),ue=[["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"]],he=[["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"]],pe=[["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"]],N={food:$(ue,"food"),animals:$(he,"animals"),toys:$(pe,"toys")},fe=`
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
-`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=ce,document.head.appendChild(r)}const me={animation:"spin 1.4s linear infinite"},s={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:"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",...me}},ge=()=>{const r=document.createElement("style");r.textContent=`
+`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const a=document.createElement("style");a.id="spin-keyframes",a.innerHTML=fe,document.head.appendChild(a)}const xe={animation:"spin 1.4s linear infinite"},s={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:"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",...xe}},ye=()=>{const a=document.createElement("style");a.textContent=`
     #whats-missing-root, #whats-missing-root * {
       box-sizing: border-box;
       font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
@@ -14,9 +14,5 @@
       display: block;
       user-select: none;
     }
-    html, body { 
-      margin: 0; 
-      padding: 0; 
-      zoom: 1 !important; /* ✅ защита от подзума */
-    }
-  `,document.head.appendChild(r)},ue=(r,a)=>{const d=Array.from({length:r.length+1},()=>Array(a.length+1).fill(0));for(let n=0;n<=r.length;n++)d[n][0]=n;for(let n=0;n<=a.length;n++)d[0][n]=n;for(let n=1;n<=r.length;n++)for(let m=1;m<=a.length;m++)d[n][m]=r[n-1]===a[m-1]?d[n-1][m-1]:Math.min(d[n-1][m-1],d[n][m-1],d[n-1][m])+1;return d[r.length][a.length]};function he(){const r=o.useRef(null);o.useEffect(()=>(ge(),()=>{document.body.style.overflow=""}),[]);const[a,d]=o.useState(null),[n,m]=o.useState([]),[w,K]=o.useState(4),[f,L]=o.useState(!1),[j,E]=o.useState(1),[h,Z]=o.useState(null),[g,S]=o.useState("ready"),[G,F]=o.useState(3),[C,T]=o.useState(10),[z,Y]=o.useState(20),[X,R]=o.useState(0),[k,I]=o.useState(!1),[v,D]=o.useState(""),[p,H]=o.useState(!1),[M,q]=o.useState(!1),[O,x]=o.useState(null),[J,A]=o.useState([]),[Q,P]=o.useState([]),[u,ee]=o.useState(!1),[te,U]=o.useState(1);o.useEffect(()=>{const t=()=>{const i=window.innerWidth<768,l=window.innerWidth>=768&&window.innerWidth<1200;if(ee(i||l),!i&&!l){const b=Math.min(window.innerWidth/1440,window.innerHeight/768)*.97;U(b)}else U(1)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const $=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),N=()=>{if(!a)return;const t=$(W[a]);m(t),L(!0),I(!1),E(1),R(0),A([]),P([]),V(t,[],!0)},V=(t=n,i=Q,l=!1)=>{const c=$(t.length?t:W[a]);let y=Math.floor(Math.random()*c.length),b=c[y].name,_=0;for(;i.includes(b)&&_<20;)y=Math.floor(Math.random()*c.length),b=c[y].name,_++;m(c),Z(y),P([...i,b]),H(!1),D(""),Y(20),x(null),l?(S("ready"),F(3),T(10)):(S("memorize"),T(10))};o.useEffect(()=>{if(!(!f||k||p)){if(g==="ready")if(G<=0)S("memorize");else{const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}if(g==="memorize")if(C<=0)S("guess");else{const t=setTimeout(()=>T(i=>i-1),1e3);return()=>clearTimeout(t)}if(g==="guess"){if(z<=0){H(!0),x("wrong");const i=n[h].name;A(l=>[...l,{round:j,answer:v,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>Y(i=>i-1),1e3);return()=>clearTimeout(t)}}},[g,G,C,z,f,k,p,n,h,j,v]);const se=()=>{if(h===null||M)return;const t=n[h].name,i=v.toLowerCase().trim();let l="wrong";i===t?(R(c=>c+1),x("correct"),l="correct"):ue(i,t)===1?(R(c=>c+.5),x("almost"),l="almost"):(x("wrong"),l="wrong"),A(c=>[...c,{round:j,answer:i,correct:t,result:l}]),q(!0),setTimeout(()=>{q(!1),H(!0)},600)},ne=()=>j<w?(E(t=>t+1),V()):I(!0),oe=()=>{L(!1),I(!1),d(null)},ie=o.useMemo(()=>e.jsx("div",{style:s.gmLogoFixed,children:e.jsxs("picture",{children:[e.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),e.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:s.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:r,style:{width:"100%",height:"100vh",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflowX:"clip"},children:e.jsx("div",{style:{width:u?"100%":1440,height:u?"100%":768,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:u?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:u?"none":"0 0 40px rgba(0,0,0,0.1)",margin:u?"0 auto":"unset"},children:e.jsx("div",{style:{transform:u?"none":`scale(${te})`,transformOrigin:"top center",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!u&&ie,!a&&!f&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:s.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:s.gmButton,onClick:()=>d(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:s.gmBodyS,children:"Choose number of rounds:"}),e.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>e.jsx("button",{style:{...s.gmButton,...w===t?s.gmButtonActive:{}},onClick:()=>K(t),children:t},t))})]})]}),a&&!f&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsxs("h1",{style:s.gmHeadline1,children:["Theme selected: ",a]}),e.jsxs("p",{style:s.gmBodyM,children:["Rounds: ",w]}),e.jsx("button",{style:s.gmButton,onClick:N,children:"▶ Start game"})]}),k&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",X," / ",w]}),e.jsx("p",{style:{...s.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:s.gmTable,children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Round"}),e.jsx("th",{children:"Your Answer"}),e.jsx("th",{children:"Correct"}),e.jsx("th",{children:"Result"})]})}),e.jsx("tbody",{children:J.map((t,i)=>e.jsxs("tr",{children:[e.jsx("td",{style:s.gmTableCell,children:t.round}),e.jsx("td",{style:s.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:s.gmTableCell,children:t.correct}),e.jsx("td",{style:s.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},i))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:s.gmButton,onClick:N,children:"🔁 Play again"}),e.jsx("button",{style:s.gmButton,onClick:oe,children:"⬅️ Choose theme"})]})]}),f&&!k&&e.jsxs("div",{style:s.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[g==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...s.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:s.gmHourglass,children:"⏳"})]}),g==="memorize"&&e.jsxs("p",{style:{...s.gmBodyM,color:"#10b981"},children:["MEMORIZE (",C,")"]}),g==="guess"&&!p&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",z,"s"]})]}),g!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:u?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:u?"150px":"210px",gap:u?"12px":"20px",justifyItems:"center"},children:n.map((t,i)=>{const l=h===i&&g==="guess"&&!p;return e.jsx("div",{style:{...s.gmCard,...O==="correct"&&h===i?s.gmCorrect:{},...O==="wrong"&&h===i?s.gmWrong:{}},children:!l&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},i)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[g==="guess"&&!p&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:v,onChange:t=>D(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:se,disabled:M,children:M?"...":"Check"})]}),p&&e.jsx("button",{style:s.gmButton,onClick:ne,children:"Next round"})]})]})]})})})})}exports.Game=he;exports.themes=W;
+    html, body { margin: 0; padding: 0; }
+  `,document.head.appendChild(a)},be=(a,l)=>{const c=Array.from({length:a.length+1},()=>Array(l.length+1).fill(0));for(let n=0;n<=a.length;n++)c[n][0]=n;for(let n=0;n<=l.length;n++)c[0][n]=n;for(let n=1;n<=a.length;n++)for(let m=1;m<=l.length;m++)c[n][m]=a[n-1]===l[m-1]?c[n-1][m-1]:Math.min(c[n-1][m-1],c[n][m-1],c[n-1][m])+1;return c[a.length][l.length]};function we(){const a=i.useRef(null);i.useEffect(()=>(ye(),()=>{document.body.style.overflow=""}),[]);const[l,c]=i.useState(null),[n,m]=i.useState([]),[S,te]=i.useState(4),[w,P]=i.useState(!1),[v,Y]=i.useState(1),[x,se]=i.useState(null),[g,k]=i.useState("ready"),[q,D]=i.useState(3),[R,I]=i.useState(10),[H,O]=i.useState(20),[ne,B]=i.useState(0),[C,A]=i.useState(!1),[z,U]=i.useState(""),[b,L]=i.useState(!1),[E,V]=i.useState(!1),[_,j]=i.useState(null),[oe,F]=i.useState([]),[ie,K]=i.useState([]),[h,re]=i.useState(!1),[T,Z]=i.useState(null),[y,W]=i.useState(1);i.useEffect(()=>{const t=()=>{const r=window.innerWidth<768;if(re(r),r){Z(null);return}const p=.97,u=1e3,f=Math.min(window.innerWidth,window.innerHeight),M=Math.max(360,Math.round(f*p)),ee=Math.min(M,u);Z(ee)},o=()=>{try{const r=document.body,p=getComputedStyle(r),u=parseFloat(p.zoom||"");if(u&&!isNaN(u)&&u>0){W(u);return}const f=p.transform;if(f&&f!=="none"){const M=f.match(/matrix\(([^)]+)\)/);if(M){const G=M[1].split(",").map(me=>parseFloat(me))[0];if(G&&!isNaN(G)){W(G);return}}}}catch{}W(1)};t(),o(),window.addEventListener("resize",t),window.addEventListener("resize",o);const d=new MutationObserver(o);return d.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("resize",t),window.removeEventListener("resize",o),d.disconnect()}},[]);const X=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),J=()=>{if(!l)return;const t=X(N[l]);m(t),P(!0),A(!1),Y(1),B(0),F([]),K([]),Q(t,[],!0)},Q=(t=n,o=ie,d=!1)=>{const r=X(t.length?t:N[l]);let p=Math.floor(Math.random()*r.length),u=r[p].name,f=0;for(;o.includes(u)&&f<20;)p=Math.floor(Math.random()*r.length),u=r[p].name,f++;m(r),se(p),K([...o,u]),L(!1),U(""),O(20),j(null),d?(k("ready"),D(3),I(10)):(k("memorize"),I(10))};i.useEffect(()=>{if(!(!w||C||b)){if(g==="ready")if(q<=0)k("memorize");else{const t=setTimeout(()=>D(o=>o-1),1e3);return()=>clearTimeout(t)}if(g==="memorize")if(R<=0)k("guess");else{const t=setTimeout(()=>I(o=>o-1),1e3);return()=>clearTimeout(t)}if(g==="guess"){if(H<=0){L(!0),j("wrong");const o=n[x].name;F(d=>[...d,{round:v,answer:z,correct:o,result:"wrong"}]);return}const t=setTimeout(()=>O(o=>o-1),1e3);return()=>clearTimeout(t)}}},[g,q,R,H,w,C,b,n,x,v,z]);const ae=()=>{if(x===null||E)return;const t=n[x].name,o=z.toLowerCase().trim();let d="wrong";o===t?(B(r=>r+1),j("correct"),d="correct"):be(o,t)===1?(B(r=>r+.5),j("almost"),d="almost"):(j("wrong"),d="wrong"),F(r=>[...r,{round:v,answer:o,correct:t,result:d}]),V(!0),setTimeout(()=>{V(!1),L(!0)},600)},le=()=>v<S?(Y(t=>t+1),Q()):A(!0),de=()=>{P(!1),A(!1),c(null)},ce=i.useMemo(()=>e.jsx("div",{style:{...s.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:e.jsxs("picture",{children:[e.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),e.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:s.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:a,style:{width:"100%",height:"100vh",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflowX:"clip"},children:e.jsx("div",{style:{width:h?"100%":T?`${Math.round(T*y)}px`:`${Math.round(1e3*y)}px`,height:h?"100%":T?`${Math.round(T*y)}px`:`${Math.round(1e3*y)}px`,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:h?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:h?"none":"0 0 40px rgba(0,0,0,0.1)",margin:h?"0 auto":"unset",position:"relative"},children:e.jsx("div",{style:{transform:y&&y!==1?`scale(${1/y})`:"none",transformOrigin:"top left",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!h&&ce,!l&&!w&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:s.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:s.gmButton,onClick:()=>c(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:s.gmBodyS,children:"Choose number of rounds:"}),e.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>e.jsx("button",{style:{...s.gmButton,...S===t?s.gmButtonActive:{}},onClick:()=>te(t),children:t},t))})]})]}),l&&!w&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsxs("h1",{style:s.gmHeadline1,children:["Theme selected: ",l]}),e.jsxs("p",{style:s.gmBodyM,children:["Rounds: ",S]}),e.jsx("button",{style:s.gmButton,onClick:J,children:"▶ Start game"})]}),C&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",ne," / ",S]}),e.jsx("p",{style:{...s.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:s.gmTable,children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Round"}),e.jsx("th",{children:"Your Answer"}),e.jsx("th",{children:"Correct"}),e.jsx("th",{children:"Result"})]})}),e.jsx("tbody",{children:oe.map((t,o)=>e.jsxs("tr",{children:[e.jsx("td",{style:s.gmTableCell,children:t.round}),e.jsx("td",{style:s.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:s.gmTableCell,children:t.correct}),e.jsx("td",{style:s.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},o))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:s.gmButton,onClick:J,children:"🔁 Play again"}),e.jsx("button",{style:s.gmButton,onClick:de,children:"⬅️ Choose theme"})]})]}),w&&!C&&e.jsxs("div",{style:s.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[g==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...s.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:s.gmHourglass,children:"⏳"})]}),g==="memorize"&&e.jsxs("p",{style:{...s.gmBodyM,color:"#10b981"},children:["MEMORIZE (",R,")"]}),g==="guess"&&!b&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",H,"s"]})]}),g!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:h?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:h?"150px":"210px",gap:h?"12px":"20px",justifyItems:"center"},children:n.map((t,o)=>{const d=x===o&&g==="guess"&&!b;return e.jsx("div",{style:{...s.gmCard,..._==="correct"&&x===o?s.gmCorrect:{},..._==="wrong"&&x===o?s.gmWrong:{}},children:!d&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},o)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[g==="guess"&&!b&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:z,onChange:t=>U(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:ae,disabled:E,children:E?"...":"Check"})]}),b&&e.jsx("button",{style:s.gmButton,onClick:le,children:"Next round"})]})]})]})})})})}exports.Game=we;exports.themes=N;

package/dist/whats-missing.es.js

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as r, Fragment as ae } from "react/jsx-runtime";
-import { useRef as de, useEffect as L, useState as s, useMemo as ce } from "react";
-const me = window.origin + "/cloud/speakid/games/whatsmissing/", j = (l, a) => l.map(([c, o]) => ({
-  src: `${me}${a}/${o.replace(/\s/g, "%20")}.png`,
+import { jsx as t, jsxs as s, Fragment as pe } from "react/jsx-runtime";
+import { useRef as he, useEffect as N, useState as r, useMemo as fe } from "react";
+const ye = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, d) => l.map(([m, o]) => ({
+  src: `${ye}${d}/${o.replace(/\s/g, "%20")}.png`,
   name: o
-})), ge = [
+})), xe = [
   ["apple", "apple"],
   ["banana", "banana"],
   ["bread", "bread"],
@@ -29,7 +29,7 @@ const me = window.origin + "/cloud/speakid/games/whatsmissing/", j = (l, a) => l
   ["strawberry", "strawberry"],
   ["tomato", "tomato"],
   ["watermelon", "watermelon"]
-], he = [
+], be = [
   ["bear", "bear"],
   ["cat", "cat"],
   ["crocodile", "crocodile"],
@@ -49,7 +49,7 @@ const me = window.origin + "/cloud/speakid/games/whatsmissing/", j = (l, a) => l
   ["tortoise", "tortoise"],
   ["wolf", "wolf"],
   ["zebra", "zebra"]
-], pe = [
+], we = [
   ["ball", "ball"],
   ["balloon", "balloon"],
   ["blocks", "blocks"],
@@ -69,11 +69,11 @@ const me = window.origin + "/cloud/speakid/games/whatsmissing/", j = (l, a) => l
   ["teddy_bear", "teddy bear"],
   ["yo-yo", "yo-yo"],
   ["crayons", "crayons"]
-], Z = {
-  food: j(ge, "food"),
-  animals: j(he, "animals"),
-  toys: j(pe, "toys")
-}, ue = `
+], ne = {
+  food: Y(xe, "food"),
+  animals: Y(be, "animals"),
+  toys: Y(we, "toys")
+}, ve = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -81,9 +81,9 @@ const me = window.origin + "/cloud/speakid/games/whatsmissing/", j = (l, a) => l
 `;
 if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
   const l = document.createElement("style");
-  l.id = "spin-keyframes", l.innerHTML = ue, document.head.appendChild(l);
+  l.id = "spin-keyframes", l.innerHTML = ve, document.head.appendChild(l);
 }
-const fe = {
+const ke = {
   animation: "spin 1.4s linear infinite"
 }, n = {
   gmCenterScreen: {
@@ -233,9 +233,9 @@ const fe = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...fe
+    ...ke
   }
-}, ye = () => {
+}, Ce = () => {
   const l = document.createElement("style");
   l.textContent = `
     #whats-missing-root, #whats-missing-root * {
@@ -248,92 +248,114 @@ const fe = {
       display: block;
       user-select: none;
     }
-    html, body { 
-      margin: 0; 
-      padding: 0; 
-      zoom: 1 !important; /* ✅ защита от подзума */
-    }
+    html, body { margin: 0; padding: 0; }
   `, document.head.appendChild(l);
-}, be = (l, a) => {
-  const c = Array.from({ length: l.length + 1 }, () => Array(a.length + 1).fill(0));
-  for (let o = 0; o <= l.length; o++) c[o][0] = o;
-  for (let o = 0; o <= a.length; o++) c[0][o] = o;
+}, Se = (l, d) => {
+  const m = Array.from({ length: l.length + 1 }, () => Array(d.length + 1).fill(0));
+  for (let o = 0; o <= l.length; o++) m[o][0] = o;
+  for (let o = 0; o <= d.length; o++) m[0][o] = o;
   for (let o = 1; o <= l.length; o++)
-    for (let g = 1; g <= a.length; g++)
-      c[o][g] = l[o - 1] === a[g - 1] ? c[o - 1][g - 1] : Math.min(c[o - 1][g - 1], c[o][g - 1], c[o - 1][g]) + 1;
-  return c[l.length][a.length];
+    for (let g = 1; g <= d.length; g++)
+      m[o][g] = l[o - 1] === d[g - 1] ? m[o - 1][g - 1] : Math.min(m[o - 1][g - 1], m[o][g - 1], m[o - 1][g]) + 1;
+  return m[l.length][d.length];
 };
-function ke() {
-  const l = de(null);
-  L(() => (ye(), () => {
+function Me() {
+  const l = he(null);
+  N(() => (Ce(), () => {
     document.body.style.overflow = "";
   }), []);
-  const [a, c] = s(null), [o, g] = s([]), [k, X] = s(4), [y, E] = s(!1), [v, G] = s(1), [u, J] = s(null), [h, C] = s("ready"), [F, Y] = s(3), [z, R] = s(10), [I, D] = s(20), [Q, H] = s(0), [T, M] = s(!1), [S, U] = s(""), [f, A] = s(!1), [B, $] = s(!1), [N, b] = s(null), [ee, W] = s([]), [te, O] = s([]), [p, ne] = s(!1), [oe, P] = s(1);
-  L(() => {
+  const [d, m] = r(null), [o, g] = r([]), [C, oe] = r(4), [v, D] = r(!1), [S, P] = r(1), [x, ie] = r(null), [u, z] = r("ready"), [O, U] = r(3), [H, B] = r(10), [A, V] = r(20), [re, L] = r(0), [T, j] = r(!1), [M, q] = r(""), [w, F] = r(!1), [W, _] = r(!1), [K, k] = r(null), [se, E] = r([]), [ae, Z] = r([]), [h, le] = r(!1), [R, X] = r(null), [b, G] = r(1);
+  N(() => {
     const e = () => {
-      const i = window.innerWidth < 768, d = window.innerWidth >= 768 && window.innerWidth < 1200;
-      if (ne(i || d), !i && !d) {
-        const w = Math.min(window.innerWidth / 1440, window.innerHeight / 768) * 0.97;
-        P(w);
-      } else
-        P(1);
+      const a = window.innerWidth < 768;
+      if (le(a), a) {
+        X(null);
+        return;
+      }
+      const f = 0.97, p = 1e3, y = Math.min(window.innerWidth, window.innerHeight), I = Math.max(360, Math.round(y * f)), te = Math.min(I, p);
+      X(te);
+    }, i = () => {
+      try {
+        const a = document.body, f = getComputedStyle(a), p = parseFloat(f.zoom || "");
+        if (p && !isNaN(p) && p > 0) {
+          G(p);
+          return;
+        }
+        const y = f.transform;
+        if (y && y !== "none") {
+          const I = y.match(/matrix\(([^)]+)\)/);
+          if (I) {
+            const $ = I[1].split(",").map((ue) => parseFloat(ue))[0];
+            if ($ && !isNaN($)) {
+              G($);
+              return;
+            }
+          }
+        }
+      } catch {
+      }
+      G(1);
+    };
+    e(), i(), window.addEventListener("resize", e), window.addEventListener("resize", i);
+    const c = new MutationObserver(i);
+    return c.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("resize", i), c.disconnect();
     };
-    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  const V = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), _ = () => {
-    if (!a) return;
-    const e = V(Z[a]);
-    g(e), E(!0), M(!1), G(1), H(0), W([]), O([]), q(e, [], !0);
-  }, q = (e = o, i = te, d = !1) => {
-    const m = V(e.length ? e : Z[a]);
-    let x = Math.floor(Math.random() * m.length), w = m[x].name, K = 0;
-    for (; i.includes(w) && K < 20; )
-      x = Math.floor(Math.random() * m.length), w = m[x].name, K++;
-    g(m), J(x), O([...i, w]), A(!1), U(""), D(20), b(null), d ? (C("ready"), Y(3), R(10)) : (C("memorize"), R(10));
+  const J = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), Q = () => {
+    if (!d) return;
+    const e = J(ne[d]);
+    g(e), D(!0), j(!1), P(1), L(0), E([]), Z([]), ee(e, [], !0);
+  }, ee = (e = o, i = ae, c = !1) => {
+    const a = J(e.length ? e : ne[d]);
+    let f = Math.floor(Math.random() * a.length), p = a[f].name, y = 0;
+    for (; i.includes(p) && y < 20; )
+      f = Math.floor(Math.random() * a.length), p = a[f].name, y++;
+    g(a), ie(f), Z([...i, p]), F(!1), q(""), V(20), k(null), c ? (z("ready"), U(3), B(10)) : (z("memorize"), B(10));
   };
-  L(() => {
-    if (!(!y || T || f)) {
-      if (h === "ready")
-        if (F <= 0) C("memorize");
+  N(() => {
+    if (!(!v || T || w)) {
+      if (u === "ready")
+        if (O <= 0) z("memorize");
         else {
-          const e = setTimeout(() => Y((i) => i - 1), 1e3);
+          const e = setTimeout(() => U((i) => i - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (h === "memorize")
-        if (z <= 0) C("guess");
+      if (u === "memorize")
+        if (H <= 0) z("guess");
         else {
-          const e = setTimeout(() => R((i) => i - 1), 1e3);
+          const e = setTimeout(() => B((i) => i - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (h === "guess") {
-        if (I <= 0) {
-          A(!0), b("wrong");
-          const i = o[u].name;
-          W((d) => [
-            ...d,
-            { round: v, answer: S, correct: i, result: "wrong" }
-          ]);
+      if (u === "guess") {
+        if (A <= 0) {
+          F(!0), k("wrong");
+          const i = o[x].name;
+          E((c) => [...c, { round: S, answer: M, correct: i, result: "wrong" }]);
           return;
         }
-        const e = setTimeout(() => D((i) => i - 1), 1e3);
+        const e = setTimeout(() => V((i) => i - 1), 1e3);
         return () => clearTimeout(e);
       }
     }
-  }, [h, F, z, I, y, T, f, o, u, v, S]);
-  const ie = () => {
-    if (u === null || B) return;
-    const e = o[u].name, i = S.toLowerCase().trim();
-    let d = "wrong";
-    i === e ? (H((m) => m + 1), b("correct"), d = "correct") : be(i, e) === 1 ? (H((m) => m + 0.5), b("almost"), d = "almost") : (b("wrong"), d = "wrong"), W((m) => [...m, { round: v, answer: i, correct: e, result: d }]), $(!0), setTimeout(() => {
-      $(!1), A(!0);
+  }, [u, O, H, A, v, T, w, o, x, S, M]);
+  const de = () => {
+    if (x === null || W) return;
+    const e = o[x].name, i = M.toLowerCase().trim();
+    let c = "wrong";
+    i === e ? (L((a) => a + 1), k("correct"), c = "correct") : Se(i, e) === 1 ? (L((a) => a + 0.5), k("almost"), c = "almost") : (k("wrong"), c = "wrong"), E((a) => [...a, { round: S, answer: i, correct: e, result: c }]), _(!0), setTimeout(() => {
+      _(!1), F(!0);
     }, 600);
-  }, re = () => v < k ? (G((e) => e + 1), q()) : M(!0), se = () => {
-    E(!1), M(!1), c(null);
-  }, le = ce(
-    () => /* @__PURE__ */ t("div", { style: n.gmLogoFixed, children: /* @__PURE__ */ r("picture", { children: [
-      /* @__PURE__ */ t("source", { srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg", type: "image/svg+xml" }),
-      /* @__PURE__ */ t("img", { src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png", alt: "SPEAKID Logo", style: n.gmLogoImg, loading: "lazy" })
-    ] }) }),
+  }, ce = () => S < C ? (P((e) => e + 1), ee()) : j(!0), me = () => {
+    D(!1), j(!1), m(null);
+  }, ge = fe(
+    () => (
+      // ensure logo is positioned inside the square container
+      /* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ s("picture", { children: [
+        /* @__PURE__ */ t("source", { srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg", type: "image/svg+xml" }),
+        /* @__PURE__ */ t("img", { src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png", alt: "SPEAKID Logo", style: n.gmLogoImg, loading: "lazy" })
+      ] }) })
+    ),
     []
   );
   return /* @__PURE__ */ t(
@@ -354,181 +376,115 @@ function ke() {
         "div",
         {
           style: {
-            width: p ? "100%" : 1440,
-            height: p ? "100%" : 768,
+            width: h ? "100%" : R ? `${Math.round(R * b)}px` : `${Math.round(1e3 * b)}px`,
+            height: h ? "100%" : R ? `${Math.round(R * b)}px` : `${Math.round(1e3 * b)}px`,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             overflow: "hidden",
-            borderRadius: p ? 0 : "20px",
+            borderRadius: h ? 0 : "20px",
             background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-            boxShadow: p ? "none" : "0 0 40px rgba(0,0,0,0.1)",
-            margin: p ? "0 auto" : "unset"
+            boxShadow: h ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: h ? "0 auto" : "unset",
+            position: "relative"
           },
           children: /* @__PURE__ */ t(
             "div",
             {
               style: {
-                transform: p ? "none" : `scale(${oe})`,
-                transformOrigin: "top center",
-                // ✅ фикс вертикального смещения
+                transform: b && b !== 1 ? `scale(${1 / b})` : "none",
+                transformOrigin: "top left",
                 width: "100%",
                 height: "100%",
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center"
               },
-              children: /* @__PURE__ */ r("div", { id: "whats-missing-root", children: [
-                !p && le,
-                !a && !y && /* @__PURE__ */ r("div", { style: n.gmCenterScreen, children: [
+              children: /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
+                !h && ge,
+                !d && !v && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
                   /* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "WHAT'S MISSING?" }),
                   /* @__PURE__ */ t("p", { style: n.gmBodyM, children: "Select a theme:" }),
-                  /* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t("button", { style: n.gmButton, onClick: () => c(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
-                  /* @__PURE__ */ r("div", { style: { marginTop: 24 }, children: [
+                  /* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t("button", { style: n.gmButton, onClick: () => m(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
+                  /* @__PURE__ */ s("div", { style: { marginTop: 24 }, children: [
                     /* @__PURE__ */ t("p", { style: n.gmBodyS, children: "Choose number of rounds:" }),
                     /* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ t(
                       "button",
                       {
-                        style: {
-                          ...n.gmButton,
-                          ...k === e ? n.gmButtonActive : {}
-                        },
-                        onClick: () => X(e),
+                        style: { ...n.gmButton, ...C === e ? n.gmButtonActive : {} },
+                        onClick: () => oe(e),
                         children: e
                       },
                       e
                     )) })
                   ] })
                 ] }),
-                a && !y && /* @__PURE__ */ r("div", { style: n.gmCenterScreen, children: [
-                  /* @__PURE__ */ r("h1", { style: n.gmHeadline1, children: [
+                d && !v && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
+                  /* @__PURE__ */ s("h1", { style: n.gmHeadline1, children: [
                     "Theme selected: ",
-                    a
+                    d
                   ] }),
-                  /* @__PURE__ */ r("p", { style: n.gmBodyM, children: [
+                  /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
                     "Rounds: ",
-                    k
+                    C
                   ] }),
-                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: _, children: "▶ Start game" })
+                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: Q, children: "▶ Start game" })
                 ] }),
-                T && /* @__PURE__ */ r("div", { style: n.gmCenterScreen, children: [
+                T && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
                   /* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "Results" }),
-                  /* @__PURE__ */ r("h2", { style: n.gmHeadline3, children: [
+                  /* @__PURE__ */ s("h2", { style: n.gmHeadline3, children: [
                     "Your score: ",
-                    Q,
+                    re,
                     " / ",
-                    k
+                    C
                   ] }),
                   /* @__PURE__ */ t("p", { style: { ...n.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
-                  /* @__PURE__ */ r("table", { style: n.gmTable, children: [
-                    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ r("tr", { children: [
+                  /* @__PURE__ */ s("table", { style: n.gmTable, children: [
+                    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ s("tr", { children: [
                       /* @__PURE__ */ t("th", { children: "Round" }),
                       /* @__PURE__ */ t("th", { children: "Your Answer" }),
                       /* @__PURE__ */ t("th", { children: "Correct" }),
                       /* @__PURE__ */ t("th", { children: "Result" })
                     ] }) }),
-                    /* @__PURE__ */ t("tbody", { children: ee.map((e, i) => /* @__PURE__ */ r("tr", { children: [
+                    /* @__PURE__ */ t("tbody", { children: se.map((e, i) => /* @__PURE__ */ s("tr", { children: [
                       /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.round }),
                       /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.answer || "—" }),
                       /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.correct }),
                       /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
                     ] }, i)) })
                   ] }),
-                  /* @__PURE__ */ r("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
-                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: _, children: "🔁 Play again" }),
-                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: se, children: "⬅️ Choose theme" })
+                  /* @__PURE__ */ s("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: Q, children: "🔁 Play again" }),
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: me, children: "⬅️ Choose theme" })
                   ] })
                 ] }),
-                y && !T && /* @__PURE__ */ r("div", { style: n.gmGameLayout, children: [
-                  /* @__PURE__ */ r(
-                    "div",
-                    {
-                      style: {
-                        minHeight: 160,
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "center",
-                        alignItems: "center"
-                      },
-                      children: [
-                        h === "ready" && /* @__PURE__ */ r(ae, { children: [
-                          /* @__PURE__ */ t("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
-                          /* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
-                        ] }),
-                        h === "memorize" && /* @__PURE__ */ r("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
-                          "MEMORIZE (",
-                          z,
-                          ")"
-                        ] }),
-                        h === "guess" && !f && /* @__PURE__ */ r("p", { style: n.gmBodyM, children: [
-                          "⏳ Time left: ",
-                          I,
-                          "s"
-                        ] })
-                      ]
-                    }
-                  ),
-                  h !== "ready" && /* @__PURE__ */ t(
-                    "div",
-                    {
-                      style: {
-                        ...n.gmGrid,
-                        gridTemplateColumns: p ? "repeat(2, 1fr)" : "repeat(3, 210px)",
-                        gridAutoRows: p ? "150px" : "210px",
-                        gap: p ? "12px" : "20px",
-                        justifyItems: "center"
-                      },
-                      children: o.map((e, i) => {
-                        const d = u === i && h === "guess" && !f;
-                        return /* @__PURE__ */ t(
-                          "div",
-                          {
-                            style: {
-                              ...n.gmCard,
-                              ...N === "correct" && u === i ? n.gmCorrect : {},
-                              ...N === "wrong" && u === i ? n.gmWrong : {}
-                            },
-                            children: !d && /* @__PURE__ */ t(
-                              "img",
-                              {
-                                src: e.src,
-                                alt: e.name,
-                                style: {
-                                  width: "100%",
-                                  height: "100%",
-                                  objectFit: "cover"
-                                }
-                              }
-                            )
-                          },
-                          i
-                        );
-                      })
-                    }
-                  ),
-                  /* @__PURE__ */ r("div", { style: { marginTop: 16, height: 80 }, children: [
-                    h === "guess" && !f && /* @__PURE__ */ r("div", { children: [
-                      /* @__PURE__ */ t(
-                        "input",
-                        {
-                          type: "text",
-                          placeholder: "Type the missing word",
-                          value: S,
-                          onChange: (e) => U(e.target.value),
-                          style: n.gmInput
-                        }
-                      ),
-                      /* @__PURE__ */ t(
-                        "button",
-                        {
-                          style: { ...n.gmButton, marginLeft: 8 },
-                          onClick: ie,
-                          disabled: B,
-                          children: B ? "..." : "Check"
-                        }
-                      )
+                v && !T && /* @__PURE__ */ s("div", { style: n.gmGameLayout, children: [
+                  /* @__PURE__ */ s("div", { style: { minHeight: 160, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }, children: [
+                    u === "ready" && /* @__PURE__ */ s(pe, { children: [
+                      /* @__PURE__ */ t("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
+                      /* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
+                    ] }),
+                    u === "memorize" && /* @__PURE__ */ s("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
+                      "MEMORIZE (",
+                      H,
+                      ")"
+                    ] }),
+                    u === "guess" && !w && /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
+                      "⏳ Time left: ",
+                      A,
+                      "s"
+                    ] })
+                  ] }),
+                  u !== "ready" && /* @__PURE__ */ t("div", { style: { ...n.gmGrid, gridTemplateColumns: h ? "repeat(2, 1fr)" : "repeat(3, 210px)", gridAutoRows: h ? "150px" : "210px", gap: h ? "12px" : "20px", justifyItems: "center" }, children: o.map((e, i) => {
+                    const c = x === i && u === "guess" && !w;
+                    return /* @__PURE__ */ t("div", { style: { ...n.gmCard, ...K === "correct" && x === i ? n.gmCorrect : {}, ...K === "wrong" && x === i ? n.gmWrong : {} }, children: !c && /* @__PURE__ */ t("img", { src: e.src, alt: e.name, style: { width: "100%", height: "100%", objectFit: "cover" } }) }, i);
+                  }) }),
+                  /* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
+                    u === "guess" && !w && /* @__PURE__ */ s("div", { children: [
+                      /* @__PURE__ */ t("input", { type: "text", placeholder: "Type the missing word", value: M, onChange: (e) => q(e.target.value), style: n.gmInput }),
+                      /* @__PURE__ */ t("button", { style: { ...n.gmButton, marginLeft: 8 }, onClick: de, disabled: W, children: W ? "..." : "Check" })
                     ] }),
-                    f && /* @__PURE__ */ t("button", { style: n.gmButton, onClick: re, children: "Next round" })
+                    w && /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ce, children: "Next round" })
                   ] })
                 ] })
               ] })
@@ -540,6 +496,6 @@ function ke() {
   );
 }
 export {
-  ke as Game,
-  Z as themes
+  Me as Game,
+  ne as themes
 };

package/package.json

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

package/src/Game.tsx

@@ -25,11 +25,7 @@ const globalReset = () => {
       display: block;
       user-select: none;
     }
-    html, body { 
-      margin: 0; 
-      padding: 0; 
-      zoom: 1 !important; /* ✅ защита от подзума */
-    }
+    html, body { margin: 0; padding: 0; }
   `;
   document.head.appendChild(style);
 };
@@ -79,33 +75,70 @@ export default function Game() {
   const [resultsTable, setResultsTable] = useState<RoundResult[]>([]);
   const [usedHidden, setUsedHidden] = useState<string[]>([]);
   const [isMobile, setIsMobile] = useState(false);
-  const [scale, setScale] = useState(1);
+  const [containerSize, setContainerSize] = useState<number | null>(null);
+  const [pageScale, setPageScale] = useState<number>(1);
 
   // ✅ адаптив под мобилки, планшеты и десктоп
   useEffect(() => {
     const resize = () => {
       const mobile = window.innerWidth < 768;
-      const tablet = window.innerWidth >= 768 && window.innerWidth < 1200;
-
-      setIsMobile(mobile || tablet);
+      setIsMobile(mobile);
+      if (mobile) {
+        // mobile: fluid full-width layout
+        setContainerSize(null);
+        return;
+      }
+      // tablets and desktops: fit into a centered square (max 1000)
+      const safeFactor = 0.97;
+      const maxSquare = 1000;
+      const available = Math.min(window.innerWidth, window.innerHeight);
+      const sizePx = Math.max(360, Math.round(available * safeFactor)); // don't go too small
+      const finalSize = Math.min(sizePx, maxSquare);
+      setContainerSize(finalSize);
+    };
 
-      if (!mobile && !tablet) {
-        const baseW = 1440;
-        const baseH = 768;
-        // ✅ коэффициент безопасности, чтобы кнопка не обрезалась
-        const ratio = Math.min(window.innerWidth / baseW, window.innerHeight / baseH) * 0.97;
-        setScale(ratio);
-      } else {
-        setScale(1);
+    const detectBodyScale = () => {
+      try {
+        const el = document.body;
+        const cs = getComputedStyle(el);
+        const zoomVal = parseFloat((cs.zoom as string) || "");
+        if (zoomVal && !isNaN(zoomVal) && zoomVal > 0) {
+          setPageScale(zoomVal);
+          return;
+        }
+        const tf = cs.transform;
+        if (tf && tf !== "none") {
+          const m = tf.match(/matrix\(([^)]+)\)/);
+          if (m) {
+            const parts = m[1].split(",").map((p) => parseFloat(p));
+            const a = parts[0];
+            if (a && !isNaN(a)) {
+              setPageScale(a);
+              return;
+            }
+          }
+        }
+      } catch (e) {
+        // ignore
       }
+      setPageScale(1);
     };
+
     resize();
+    detectBodyScale();
     window.addEventListener("resize", resize);
-    return () => window.removeEventListener("resize", resize);
+    window.addEventListener("resize", detectBodyScale);
+    const mo = new MutationObserver(detectBodyScale);
+    mo.observe(document.body, { attributes: true, attributeFilter: ["style", "class"] });
+
+    return () => {
+      window.removeEventListener("resize", resize);
+      window.removeEventListener("resize", detectBodyScale);
+      mo.disconnect();
+    };
   }, []);
 
-  const getRandomSix = (arr: ImageItem[]) =>
-    [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
+  const getRandomSix = (arr: ImageItem[]) => [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
 
   const startGame = () => {
     if (!theme) return;
@@ -168,10 +201,7 @@ export default function Game() {
         setAnswered(true);
         setResult("wrong");
         const correct = files[hiddenIndex!].name;
-        setResultsTable((prev) => [
-          ...prev,
-          { round: currentRound, answer: inputValue, correct, result: "wrong" },
-        ]);
+        setResultsTable((prev) => [...prev, { round: currentRound, answer: inputValue, correct, result: "wrong" }]);
         return;
       }
       const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);
@@ -204,8 +234,7 @@ export default function Game() {
     }, 600);
   };
 
-  const nextRound = () =>
-    currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true);
+  const nextRound = () => (currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true));
 
   const exitGame = () => {
     setStarted(false);
@@ -215,7 +244,8 @@ export default function Game() {
 
   const MemoizedLogo = useMemo(
     () => (
-      <div style={styles.gmLogoFixed}>
+      // ensure logo is positioned inside the square container
+      <div style={{ ...styles.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }}>
         <picture>
           <source srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"} type="image/svg+xml" />
           <img src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"} alt="SPEAKID Logo" style={styles.gmLogoImg} loading="lazy" />
@@ -236,13 +266,13 @@ export default function Game() {
         alignItems: "center",
         background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
         transition: "background 0.3s ease",
-        overflowX: "clip"
+        overflowX: "clip",
       }}
     >
       <div
         style={{
-          width: isMobile ? "100%" : 1440,
-          height: isMobile ? "100%" : 768,
+          width: isMobile ? "100%" : containerSize ? `${Math.round(containerSize * pageScale)}px` : `${Math.round(1000 * pageScale)}px`,
+          height: isMobile ? "100%" : containerSize ? `${Math.round(containerSize * pageScale)}px` : `${Math.round(1000 * pageScale)}px`,
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -251,12 +281,13 @@ export default function Game() {
           background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
           boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.1)",
           margin: isMobile ? "0 auto" : "unset",
+          position: "relative",
         }}
       >
         <div
           style={{
-            transform: isMobile ? "none" : `scale(${scale})`,
-            transformOrigin: "top center", // ✅ фикс вертикального смещения
+            transform: pageScale && pageScale !== 1 ? `scale(${1 / pageScale})` : "none",
+            transformOrigin: "top left",
             width: "100%",
             height: "100%",
             display: "flex",
@@ -266,6 +297,7 @@ export default function Game() {
         >
           <div id="whats-missing-root">
             {!isMobile && MemoizedLogo}
+
             {/* ====== ИГРОВАЯ ЛОГИКА ====== */}
             {!theme && !started && (
               <div style={styles.gmCenterScreen}>
@@ -284,10 +316,7 @@ export default function Game() {
                     {[3, 4, 5].map((n) => (
                       <button
                         key={n}
-                        style={{
-                          ...styles.gmButton,
-                          ...(rounds === n ? styles.gmButtonActive : {}),
-                        }}
+                        style={{ ...styles.gmButton, ...(rounds === n ? styles.gmButtonActive : {}) }}
                         onClick={() => setRounds(n)}
                       >
                         {n}
@@ -297,30 +326,23 @@ export default function Game() {
                 </div>
               </div>
             )}
+
             {theme && !started && (
               <div style={styles.gmCenterScreen}>
                 <h1 style={styles.gmHeadline1}>Theme selected: {theme}</h1>
                 <p style={styles.gmBodyM}>Rounds: {rounds}</p>
-                <button style={styles.gmButton} onClick={startGame}>
-                  ▶ Start game
-                </button>
+                <button style={styles.gmButton} onClick={startGame}>▶ Start game</button>
               </div>
             )}
+
             {finished && (
               <div style={styles.gmCenterScreen}>
                 <h1 style={styles.gmHeadline1}>Results</h1>
-                <h2 style={styles.gmHeadline3}>
-                  Your score: {score} / {rounds}
-                </h2>
+                <h2 style={styles.gmHeadline3}>Your score: {score} / {rounds}</h2>
                 <p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>Yahoo! You did it! 🍬✨</p>
                 <table style={styles.gmTable}>
                   <thead>
-                    <tr>
-                      <th>Round</th>
-                      <th>Your Answer</th>
-                      <th>Correct</th>
-                      <th>Result</th>
-                    </tr>
+                    <tr><th>Round</th><th>Your Answer</th><th>Correct</th><th>Result</th></tr>
                   </thead>
                   <tbody>
                     {resultsTable.map((r, i) => (
@@ -329,120 +351,48 @@ export default function Game() {
                         <td style={styles.gmTableCell}>{r.answer || "—"}</td>
                         <td style={styles.gmTableCell}>{r.correct}</td>
                         <td style={styles.gmTableCell}>
-                          {r.result === "correct"
-                            ? "✔ Correct"
-                            : r.result === "almost"
-                            ? "◐ Almost (0.5)"
-                            : "✘ Wrong"}
+                          {r.result === "correct" ? "✔ Correct" : r.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong"}
                         </td>
                       </tr>
                     ))}
                   </tbody>
                 </table>
                 <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
-                  <button style={styles.gmButton} onClick={startGame}>
-                    🔁 Play again
-                  </button>
-                  <button style={styles.gmButton} onClick={exitGame}>
-                    ⬅️ Choose theme
-                  </button>
+                  <button style={styles.gmButton} onClick={startGame}>🔁 Play again</button>
+                  <button style={styles.gmButton} onClick={exitGame}>⬅️ Choose theme</button>
                 </div>
               </div>
             )}
+
             {started && !finished && (
               <div style={styles.gmGameLayout}>
-                <div
-                  style={{
-                    minHeight: 160,
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center",
-                  }}
-                >
-                  {phase === "ready" && (
-                    <>
-                      <h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1>
-                      <div style={styles.gmHourglass}>⏳</div>
-                    </>
-                  )}
-                  {phase === "memorize" && (
-                    <p style={{ ...styles.gmBodyM, color: "#10b981" }}>
-                      MEMORIZE ({memorizeTime})
-                    </p>
-                  )}
-                  {phase === "guess" && !answered && (
-                    <p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
-                  )}
+                <div style={{ minHeight: 160, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
+                  {phase === "ready" && (<><h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1><div style={styles.gmHourglass}>⏳</div></>)}
+                  {phase === "memorize" && (<p style={{ ...styles.gmBodyM, color: "#10b981" }}>MEMORIZE ({memorizeTime})</p>)}
+                  {phase === "guess" && !answered && (<p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>)}
                 </div>
+
                 {phase !== "ready" && (
-                  <div
-                    style={{
-                      ...styles.gmGrid,
-                      gridTemplateColumns: isMobile
-                        ? "repeat(2, 1fr)"
-                        : "repeat(3, 210px)",
-                      gridAutoRows: isMobile ? "150px" : "210px",
-                      gap: isMobile ? "12px" : "20px",
-                      justifyItems: "center",
-                    }}
-                  >
+                  <div style={{ ...styles.gmGrid, gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(3, 210px)", gridAutoRows: isMobile ? "150px" : "210px", gap: isMobile ? "12px" : "20px", justifyItems: "center" }}>
                     {files.map((file, i) => {
-                      const isHidden =
-                        hiddenIndex === i && phase === "guess" && !answered;
+                      const isHidden = hiddenIndex === i && phase === "guess" && !answered;
                       return (
-                        <div
-                          key={i}
-                          style={{
-                            ...styles.gmCard,
-                            ...(result === "correct" && hiddenIndex === i
-                              ? styles.gmCorrect
-                              : {}),
-                            ...(result === "wrong" && hiddenIndex === i
-                              ? styles.gmWrong
-                              : {}),
-                          }}
-                        >
-                          {!isHidden && (
-                            <img
-                              src={file.src}
-                              alt={file.name}
-                              style={{
-                                width: "100%",
-                                height: "100%",
-                                objectFit: "cover",
-                              }}
-                            />
-                          )}
+                        <div key={i} style={{ ...styles.gmCard, ...(result === "correct" && hiddenIndex === i ? styles.gmCorrect : {}), ...(result === "wrong" && hiddenIndex === i ? styles.gmWrong : {}) }}>
+                          {!isHidden && <img src={file.src} alt={file.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
                         </div>
                       );
                     })}
                   </div>
                 )}
+
                 <div style={{ marginTop: 16, height: 80 }}>
                   {phase === "guess" && !answered && (
                     <div>
-                      <input
-                        type="text"
-                        placeholder="Type the missing word"
-                        value={inputValue}
-                        onChange={(e) => setInputValue(e.target.value)}
-                        style={styles.gmInput}
-                      />
-                      <button
-                        style={{ ...styles.gmButton, marginLeft: 8 }}
-                        onClick={checkAnswer}
-                        disabled={animating}
-                      >
-                        {animating ? "..." : "Check"}
-                      </button>
+                      <input type="text" placeholder="Type the missing word" value={inputValue} onChange={(e) => setInputValue(e.target.value)} style={styles.gmInput} />
+                      <button style={{ ...styles.gmButton, marginLeft: 8 }} onClick={checkAnswer} disabled={animating}>{animating ? "..." : "Check"}</button>
                     </div>
                   )}
-                  {answered && (
-                    <button style={styles.gmButton} onClick={nextRound}>
-                      Next round
-                    </button>
-                  )}
+                  {answered && <button style={styles.gmButton} onClick={nextRound}>Next round</button>}
                 </div>
               </div>
             )}
@@ -451,4 +401,4 @@ export default function Game() {
       </div>
     </div>
   );
-}
+}