@mblinkov/whats-missing 20.0.23 → 20.0.24

package/dist/whats-missing.cjs.js

@@ -7,4 +7,4 @@
     /* scope only inside game root */
     #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(a)},Ce=(a,f)=>{const g=Array.from({length:a.length+1},()=>Array(f.length+1).fill(0));for(let i=0;i<=a.length;i++)g[i][0]=i;for(let i=0;i<=f.length;i++)g[0][i]=i;for(let i=1;i<=a.length;i++)for(let u=1;u<=f.length;u++)g[i][u]=a[i-1]===f[u-1]?g[i-1][u-1]:Math.min(g[i-1][u-1],g[i][u-1],g[i-1][u])+1;return g[a.length][f.length]};function ke(a,f={minDesktopWidth:1200,forceResize:!1}){const g=s.useRef(null),i=f.minDesktopWidth??1200,u=!!f.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!a||!a.current)return;const l=a.current,z=()=>{try{const r=document.body,y=getComputedStyle(r),p=parseFloat(r.style&&r.style.zoom||"");if(p&&!isNaN(p)&&p>0)return p;const C=parseFloat(y.zoom||"");if(C&&!isNaN(C)&&C>0)return C;const d=document.createElement("div");d.style.position="absolute",d.style.left="0",d.style.top="0",d.style.width="100px",d.style.height="1px",d.style.visibility="hidden",d.style.pointerEvents="none",document.documentElement.appendChild(d);const j=d.getBoundingClientRect();if(document.documentElement.removeChild(d),j&&j.width>0){const k=j.width/100;if(!isNaN(k)&&k>0)return k}}catch{}return 1},L=()=>{if(i&&window.innerWidth<i){v();return}const r=z();if(!r||r===1){v();return}g.current||(g.current={transform:l.style.transform||null,transformOrigin:l.style.transformOrigin||null,width:l.style.width||null,height:l.style.height||null,willChange:l.style.willChange||null});const y=1/r;u&&(l.style.width=`${r*100}%`,l.style.height=`${r*100}%`),l.style.transformOrigin="50% 50%",l.style.transform=`scale(${y})`,l.style.willChange="transform",typeof process<"u"&&process.env?.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] applied scale:",{scale:r,inv:y,forceResize:u})},v=()=>{if(!g.current)return;const r=g.current;r.transform===null?l.style.removeProperty("transform"):l.style.transform=r.transform,r.transformOrigin===null?l.style.removeProperty("transform-origin"):l.style.transformOrigin=r.transformOrigin,r.width===null?l.style.removeProperty("width"):l.style.width=r.width,r.height===null?l.style.removeProperty("height"):l.style.height=r.height,r.willChange===null?l.style.removeProperty("will-change"):l.style.willChange=r.willChange,g.current=null,typeof process<"u"&&process.env?.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] restored original styles")};let R=0;const x=()=>{cancelAnimationFrame(R),R=requestAnimationFrame(L)},M=new MutationObserver(r=>{for(const y of r)if(y.type==="attributes"&&(y.attributeName==="style"||y.attributeName==="class")){x();break}});return M.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",x),x(),()=>{cancelAnimationFrame(R),M.disconnect(),window.removeEventListener("resize",x),v()}},[a,i,u])}function Te(){const a=s.useRef(null),f=s.useRef(null),[g,i]=s.useState(null);ke(a,{minDesktopWidth:1200,forceResize:!1}),s.useEffect(()=>(ze(),()=>{document.body.style.overflow=""}),[]);const[u,l]=s.useState(null),[z,L]=s.useState([]),[v,R]=s.useState(4),[x,M]=s.useState(!1),[r,y]=s.useState(1),[p,C]=s.useState(null),[d,j]=s.useState("ready"),[k,Y]=s.useState(3),[W,N]=s.useState(10),[F,_]=s.useState(20),[oe,O]=s.useState(0),[B,$]=s.useState(!1),[H,Z]=s.useState(""),[T,G]=s.useState(!1),[D,K]=s.useState(!1),[U,E]=s.useState(null),[se,P]=s.useState([]),[ie,J]=s.useState([]),[b,re]=s.useState(!1),[I,Q]=s.useState(null);s.useLayoutEffect(()=>{const t=f.current;if(!t||typeof window>"u")return;let o=null;try{o=new ResizeObserver(m=>{for(const c of m){const h=c.contentRect;i(Math.round(Math.min(h.width,h.height)))}}),o.observe(t),i(Math.round(Math.min(t.clientWidth,t.clientHeight)))}catch{i(Math.round(Math.min(t.clientWidth,t.clientHeight)))}return()=>{o&&o.disconnect()}},[b]),s.useEffect(()=>{const t=()=>{const m=window.visualViewport,c=m?Math.round(m.width):window.innerWidth,h=m?Math.round(m.height):window.innerHeight,S=820,w=typeof navigator<"u"&&(navigator.maxTouchPoints>0||"ontouchstart"in window),A=c<=S||w&&h>c;if(re(A),A){Q(null);return}const ue=.88,me=1e3,ne=40,ge=Math.max(360,c-ne),he=Math.max(360,h-ne),fe=Math.min(ge,he),pe=Math.max(360,Math.round(fe*ue)),ye=Math.min(pe,me);Q(ye)};t(),window.addEventListener("resize",t);const o=window.visualViewport;return o&&typeof o.addEventListener=="function"&&(o.addEventListener("resize",t),o.addEventListener("scroll",t)),()=>{window.removeEventListener("resize",t),o&&typeof o.removeEventListener=="function"&&(o.removeEventListener("resize",t),o.removeEventListener("scroll",t))}},[]);const X=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!u)return;const t=X(V[u]);L(t),M(!0),$(!1),y(1),O(0),P([]),J([]),te(t,[],!0)},te=(t=z,o=ie,m=!1)=>{const c=X(t.length?t:V[u]);let h=Math.floor(Math.random()*c.length),S=c[h].name,w=0;for(;o.includes(S)&&w<20;)h=Math.floor(Math.random()*c.length),S=c[h].name,w++;L(c),C(h),J([...o,S]),G(!1),Z(""),_(20),E(null),m?(j("ready"),Y(3),N(10)):(j("memorize"),N(10))};s.useEffect(()=>{if(!(!x||B||T)){if(d==="ready")if(k<=0)j("memorize");else{const t=setTimeout(()=>Y(o=>o-1),1e3);return()=>clearTimeout(t)}if(d==="memorize")if(W<=0)j("guess");else{const t=setTimeout(()=>N(o=>o-1),1e3);return()=>clearTimeout(t)}if(d==="guess"){if(F<=0){G(!0),E("wrong");const o=z[p].name;P(m=>[...m,{round:r,answer:H,correct:o,result:"wrong"}]);return}const t=setTimeout(()=>_(o=>o-1),1e3);return()=>clearTimeout(t)}}},[d,k,W,F,x,B,T,z,p,r,H]);const le=()=>{if(p===null||D)return;const t=z[p].name,o=H.toLowerCase().trim();let m="wrong";o===t?(O(c=>c+1),E("correct"),m="correct"):Ce(o,t)===1?(O(c=>c+.5),E("almost"),m="almost"):(E("wrong"),m="wrong"),P(c=>[...c,{round:r,answer:o,correct:t,result:m}]),K(!0),setTimeout(()=>{K(!1),G(!0)},600)},ae=()=>r<v?(y(t=>t+1),te()):$(!0),de=()=>{M(!1),$(!1),l(null)},ce=s.useMemo(()=>e.jsx("div",{style:{...n.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:n.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:a,style:{position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflow:"hidden",zIndex:1,pointerEvents:"auto"},children:e.jsx("div",{ref:f,style:{width:b?"100%":I?`${I}px`:"1000px",height:b?"100%":I?`${I}px`:"1000px",maxWidth:"calc(100vw - 24px)",maxHeight:"calc(100vh - 40px)",display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:b?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:b?"none":"0 0 40px rgba(0,0,0,0.08)",position:"relative"},children:e.jsx("div",{style:{transform:"none",transformOrigin:"50% 50%",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!b&&ce,!u&&!x&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:n.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:n.gmButton,onClick:()=>l(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:n.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:{...n.gmButton,...v===t?n.gmButtonActive:{}},onClick:()=>R(t),children:t},t))})]})]}),u&&!x&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",u]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",v]}),e.jsx("button",{style:n.gmButton,onClick:ee,children:"▶ Start game"})]}),B&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",oe," / ",v]}),e.jsx("p",{style:{...n.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:n.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:se.map((t,o)=>e.jsxs("tr",{children:[e.jsx("td",{style:n.gmTableCell,children:t.round}),e.jsx("td",{style:n.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:n.gmTableCell,children:t.correct}),e.jsx("td",{style:n.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:n.gmButton,onClick:ee,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:de,children:"⬅️ Choose theme"})]})]}),x&&!B&&e.jsxs("div",{style:n.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[d==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),d==="memorize"&&e.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",W,")"]}),d==="guess"&&!T&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",F,"s"]})]}),d!=="ready"&&(()=>{const t=b?12:20,o=32,m=g??I??(b?360:1e3),c=b?2:3,h=Math.max(90,Math.floor((m-o-t*(c-1))/c));return e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:`repeat(${c}, ${h}px)`,gridAutoRows:`${h}px`,gap:`${t}px`,justifyContent:"center",justifyItems:"center",padding:8,boxSizing:"border-box"},children:z.map((S,w)=>{const A=p===w&&d==="guess"&&!T;return e.jsx("div",{style:{...n.gmCard,width:`${h}px`,height:`${h}px`,padding:b?8:10,boxSizing:"border-box",...U==="correct"&&p===w?n.gmCorrect:{},...U==="wrong"&&p===w?n.gmWrong:{}},children:!A&&e.jsx("img",{src:S.src,alt:S.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},w)})})})(),e.jsxs("div",{style:{marginTop:16,height:80},children:[d==="guess"&&!T&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:H,onChange:t=>Z(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:le,disabled:D,children:D?"...":"Check"})]}),T&&e.jsx("button",{type:"button",style:n.gmButton,onClick:ae,children:"Next round"})]})]})]})})})})}exports.Game=Te;exports.themes=V;
+  `,document.head.appendChild(a)},Ce=(a,f)=>{const g=Array.from({length:a.length+1},()=>Array(f.length+1).fill(0));for(let i=0;i<=a.length;i++)g[i][0]=i;for(let i=0;i<=f.length;i++)g[0][i]=i;for(let i=1;i<=a.length;i++)for(let u=1;u<=f.length;u++)g[i][u]=a[i-1]===f[u-1]?g[i-1][u-1]:Math.min(g[i-1][u-1],g[i][u-1],g[i-1][u])+1;return g[a.length][f.length]};function ke(a,f={minDesktopWidth:1200,forceResize:!1}){const g=s.useRef(null),i=f.minDesktopWidth??1200,u=!!f.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!a||!a.current)return;const l=a.current,z=()=>{try{const r=document.body,y=getComputedStyle(r),p=parseFloat(r.style&&r.style.zoom||"");if(p&&!isNaN(p)&&p>0)return p;const C=parseFloat(y.zoom||"");if(C&&!isNaN(C)&&C>0)return C;const d=document.createElement("div");d.style.position="absolute",d.style.left="0",d.style.top="0",d.style.width="100px",d.style.height="1px",d.style.visibility="hidden",d.style.pointerEvents="none",document.documentElement.appendChild(d);const j=d.getBoundingClientRect();if(document.documentElement.removeChild(d),j&&j.width>0){const k=j.width/100;if(!isNaN(k)&&k>0)return k}}catch{}return 1},L=()=>{if(i&&window.innerWidth<i){v();return}const r=z();if(!r||r===1){v();return}g.current||(g.current={transform:l.style.transform||null,transformOrigin:l.style.transformOrigin||null,width:l.style.width||null,height:l.style.height||null,willChange:l.style.willChange||null});const y=1/r;u&&(l.style.width=`${r*100}%`,l.style.height=`${r*100}%`),l.style.transformOrigin="50% 50%",l.style.transform=`scale(${y})`,l.style.willChange="transform",typeof process<"u"&&process.env?.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] applied scale:",{scale:r,inv:y,forceResize:u})},v=()=>{if(!g.current)return;const r=g.current;r.transform===null?l.style.removeProperty("transform"):l.style.transform=r.transform,r.transformOrigin===null?l.style.removeProperty("transform-origin"):l.style.transformOrigin=r.transformOrigin,r.width===null?l.style.removeProperty("width"):l.style.width=r.width,r.height===null?l.style.removeProperty("height"):l.style.height=r.height,r.willChange===null?l.style.removeProperty("will-change"):l.style.willChange=r.willChange,g.current=null,typeof process<"u"&&process.env?.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] restored original styles")};let R=0;const x=()=>{cancelAnimationFrame(R),R=requestAnimationFrame(L)},M=new MutationObserver(r=>{for(const y of r)if(y.type==="attributes"&&(y.attributeName==="style"||y.attributeName==="class")){x();break}});return M.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",x),x(),()=>{cancelAnimationFrame(R),M.disconnect(),window.removeEventListener("resize",x),v()}},[a,i,u])}function Te(){const a=s.useRef(null),f=s.useRef(null),[g,i]=s.useState(null);ke(a,{minDesktopWidth:1200,forceResize:!1}),s.useEffect(()=>(ze(),()=>{document.body.style.overflow=""}),[]);const[u,l]=s.useState(null),[z,L]=s.useState([]),[v,R]=s.useState(4),[x,M]=s.useState(!1),[r,y]=s.useState(1),[p,C]=s.useState(null),[d,j]=s.useState("ready"),[k,Y]=s.useState(3),[W,N]=s.useState(10),[F,_]=s.useState(20),[oe,O]=s.useState(0),[B,$]=s.useState(!1),[H,Z]=s.useState(""),[T,G]=s.useState(!1),[D,K]=s.useState(!1),[U,E]=s.useState(null),[se,P]=s.useState([]),[ie,J]=s.useState([]),[b,re]=s.useState(!1),[I,Q]=s.useState(null);s.useLayoutEffect(()=>{const t=f.current;if(!t||typeof window>"u")return;let o=null;try{o=new ResizeObserver(m=>{for(const c of m){const h=c.contentRect;i(Math.round(Math.min(h.width,h.height)))}}),o.observe(t),i(Math.round(Math.min(t.clientWidth,t.clientHeight)))}catch{i(Math.round(Math.min(t.clientWidth,t.clientHeight)))}return()=>{o&&o.disconnect()}},[b]),s.useEffect(()=>{const t=()=>{const m=window.visualViewport,c=m?Math.round(m.width):window.innerWidth,h=m?Math.round(m.height):window.innerHeight,S=820,w=typeof navigator<"u"&&(navigator.maxTouchPoints>0||"ontouchstart"in window),A=c<=S||w&&h>c;if(re(A),A){Q(null);return}const ue=.92,me=1e3,ne=40,ge=Math.max(360,c-ne),he=Math.max(360,h-ne),fe=Math.min(ge,he),pe=Math.max(360,Math.round(fe*ue)),ye=Math.min(pe,me);Q(ye)};t(),window.addEventListener("resize",t);const o=window.visualViewport;return o&&typeof o.addEventListener=="function"&&(o.addEventListener("resize",t),o.addEventListener("scroll",t)),()=>{window.removeEventListener("resize",t),o&&typeof o.removeEventListener=="function"&&(o.removeEventListener("resize",t),o.removeEventListener("scroll",t))}},[]);const X=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!u)return;const t=X(V[u]);L(t),M(!0),$(!1),y(1),O(0),P([]),J([]),te(t,[],!0)},te=(t=z,o=ie,m=!1)=>{const c=X(t.length?t:V[u]);let h=Math.floor(Math.random()*c.length),S=c[h].name,w=0;for(;o.includes(S)&&w<20;)h=Math.floor(Math.random()*c.length),S=c[h].name,w++;L(c),C(h),J([...o,S]),G(!1),Z(""),_(20),E(null),m?(j("ready"),Y(3),N(10)):(j("memorize"),N(10))};s.useEffect(()=>{if(!(!x||B||T)){if(d==="ready")if(k<=0)j("memorize");else{const t=setTimeout(()=>Y(o=>o-1),1e3);return()=>clearTimeout(t)}if(d==="memorize")if(W<=0)j("guess");else{const t=setTimeout(()=>N(o=>o-1),1e3);return()=>clearTimeout(t)}if(d==="guess"){if(F<=0){G(!0),E("wrong");const o=z[p].name;P(m=>[...m,{round:r,answer:H,correct:o,result:"wrong"}]);return}const t=setTimeout(()=>_(o=>o-1),1e3);return()=>clearTimeout(t)}}},[d,k,W,F,x,B,T,z,p,r,H]);const le=()=>{if(p===null||D)return;const t=z[p].name,o=H.toLowerCase().trim();let m="wrong";o===t?(O(c=>c+1),E("correct"),m="correct"):Ce(o,t)===1?(O(c=>c+.5),E("almost"),m="almost"):(E("wrong"),m="wrong"),P(c=>[...c,{round:r,answer:o,correct:t,result:m}]),K(!0),setTimeout(()=>{K(!1),G(!0)},600)},ae=()=>r<v?(y(t=>t+1),te()):$(!0),de=()=>{M(!1),$(!1),l(null)},ce=s.useMemo(()=>e.jsx("div",{style:{...n.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:n.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:a,style:{position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflow:"hidden",zIndex:1,pointerEvents:"auto"},children:e.jsx("div",{ref:f,style:{width:b?"100%":I?`${I}px`:"1000px",height:b?"100%":I?`${I}px`:"1000px",maxWidth:"calc(100vw - 24px)",maxHeight:"calc(100vh - 20px)",display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:b?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:b?"none":"0 0 40px rgba(0,0,0,0.08)",position:"relative"},children:e.jsx("div",{style:{transform:"none",transformOrigin:"50% 50%",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!b&&ce,!u&&!x&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:n.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:n.gmButton,onClick:()=>l(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:n.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:{...n.gmButton,...v===t?n.gmButtonActive:{}},onClick:()=>R(t),children:t},t))})]})]}),u&&!x&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",u]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",v]}),e.jsx("button",{style:n.gmButton,onClick:ee,children:"▶ Start game"})]}),B&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",oe," / ",v]}),e.jsx("p",{style:{...n.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:n.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:se.map((t,o)=>e.jsxs("tr",{children:[e.jsx("td",{style:n.gmTableCell,children:t.round}),e.jsx("td",{style:n.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:n.gmTableCell,children:t.correct}),e.jsx("td",{style:n.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:n.gmButton,onClick:ee,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:de,children:"⬅️ Choose theme"})]})]}),x&&!B&&e.jsxs("div",{style:n.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[d==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),d==="memorize"&&e.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",W,")"]}),d==="guess"&&!T&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",F,"s"]})]}),d!=="ready"&&(()=>{const t=b?12:20,o=32,m=g??I??(b?360:1e3),c=b?2:3,h=Math.max(90,Math.floor((m-o-t*(c-1))/c));return e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:`repeat(${c}, ${h}px)`,gridAutoRows:`${h}px`,gap:`${t}px`,justifyContent:"center",justifyItems:"center",padding:8,boxSizing:"border-box"},children:z.map((S,w)=>{const A=p===w&&d==="guess"&&!T;return e.jsx("div",{style:{...n.gmCard,width:`${h}px`,height:`${h}px`,padding:b?8:10,boxSizing:"border-box",...U==="correct"&&p===w?n.gmCorrect:{},...U==="wrong"&&p===w?n.gmWrong:{}},children:!A&&e.jsx("img",{src:S.src,alt:S.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},w)})})})(),e.jsxs("div",{style:{marginTop:16,height:80},children:[d==="guess"&&!T&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:H,onChange:t=>Z(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:le,disabled:D,children:D?"...":"Check"})]}),T&&e.jsx("button",{type:"button",style:n.gmButton,onClick:ae,children:"Next round"})]})]})]})})})})}exports.Game=Te;exports.themes=V;

package/dist/whats-missing.es.js

@@ -343,7 +343,7 @@ function We() {
         ee(null);
         return;
       }
-      const pe = 0.88, fe = 1e3, ie = 40, ye = Math.max(360, d - ie), be = Math.max(360, p - ie), xe = Math.min(ye, be), we = Math.max(360, Math.round(xe * pe)), ve = Math.min(we, fe);
+      const pe = 0.92, fe = 1e3, ie = 40, ye = Math.max(360, d - ie), be = Math.max(360, p - ie), xe = Math.min(ye, be), we = Math.max(360, Math.round(xe * pe)), ve = Math.min(we, fe);
       ee(ve);
     };
     e(), window.addEventListener("resize", e);
@@ -436,7 +436,7 @@ function We() {
             width: w ? "100%" : L ? `${L}px` : "1000px",
             height: w ? "100%" : L ? `${L}px` : "1000px",
             maxWidth: "calc(100vw - 24px)",
-            maxHeight: "calc(100vh - 40px)",
+            maxHeight: "calc(100vh - 20px)",
             display: "flex",
             justifyContent: "center",
             alignItems: "center",

package/package.json

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

package/src/Game.tsx

@@ -264,7 +264,7 @@ export default function Game() {
       }
 
       // tablets & desktop: conservative square
-      const safeFactor = 0.88; // leave margins for browser UI
+      const safeFactor = 0.92; // leave margins for browser UI
       const maxSquare = 1000;
       const gutter = 40;
       const availableW = Math.max(360, vw - gutter);
@@ -450,7 +450,7 @@ export default function Game() {
          width: isMobile ? "100%" : containerSize ? `${containerSize}px` : "1000px",
          height: isMobile ? "100%" : containerSize ? `${containerSize}px` : "1000px",
          maxWidth: "calc(100vw - 24px)",
-         maxHeight: "calc(100vh - 40px)",
+         maxHeight: "calc(100vh - 20px)",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",