@mblinkov/whats-missing 20.0.42 → 20.0.43

package/dist/whats-missing.cjs.js

@@ -3,23 +3,12 @@
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
-`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const d=document.createElement("style");d.id="spin-keyframes",d.innerHTML=je,document.head.appendChild(d)}const Se={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",...Se}},ve=(d,m)=>{const r=Array.from({length:d.length+1},()=>Array(m.length+1).fill(0));for(let i=0;i<=d.length;i++)r[i][0]=i;for(let i=0;i<=m.length;i++)r[0][i]=i;for(let i=1;i<=d.length;i++)for(let g=1;g<=m.length;g++)r[i][g]=d[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[d.length][m.length]};function ze(d,m={minDesktopWidth:1200,forceResize:!1}){const r=s.useRef(null),i=m.minDesktopWidth??1200,g=!!m.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!d||!d.current)return;const c=d.current,T=()=>{try{const l=document.body,y=getComputedStyle(l),w=parseFloat(l.style&&l.style.zoom||"");if(w&&!isNaN(w)&&w>0)return w;const z=parseFloat(y.zoom||"");if(z&&!isNaN(z)&&z>0)return z;const u=document.createElement("div");u.style.position="absolute",u.style.left="0",u.style.top="0",u.style.width="100px",u.style.height="1px",u.style.visibility="hidden",document.documentElement.appendChild(u);const C=u.getBoundingClientRect();if(document.documentElement.removeChild(u),C&&C.width>0){const j=C.width/100;if(!isNaN(j)&&j>0)return j}}catch{}return 1},B=()=>{if(i&&window.innerWidth<i){R();return}const l=T();if(!l||l===1){R();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 y=1/l;g&&(c.style.width=`${l*100}%`,c.style.height=`${l*100}%`),c.style.transformOrigin="50% 50%",c.style.transform=`scale(${y})`,c.style.willChange="transform"},R=()=>{if(!r.current)return;const l=r.current;c.style.transform=l.transform??"",c.style.transformOrigin=l.transformOrigin??"",c.style.width=l.width??"",c.style.height=l.height??"",c.style.willChange=l.willChange??"",r.current=null};let v=0;const p=()=>{cancelAnimationFrame(v),v=requestAnimationFrame(B)},M=new MutationObserver(l=>{for(const y of l)if(y.type==="attributes"&&(y.attributeName==="style"||y.attributeName==="class")){p();break}});return M.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",p),p(),()=>{cancelAnimationFrame(v),M.disconnect(),window.removeEventListener("resize",p),R()}},[d,i,g])}function Ce({gameCubeSize:d,screenHeight:m,screenWidth:r}){const i=s.useRef(null),g=s.useRef(null),[c,T]=s.useState(null),[B,R]=s.useState(null);ze(i,{minDesktopWidth:1024,forceResize:!1}),s.useLayoutEffect(()=>{const e=i.current;if(!e)return;let n=e.shadowRoot;n||(n=e.attachShadow({mode:"open"})),n.innerHTML="";const a=document.createElement("style");a.textContent=`
+`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const d=document.createElement("style");d.id="spin-keyframes",d.innerHTML=je,document.head.appendChild(d)}const Se={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",...Se}},ve=(d,m)=>{const r=Array.from({length:d.length+1},()=>Array(m.length+1).fill(0));for(let i=0;i<=d.length;i++)r[i][0]=i;for(let i=0;i<=m.length;i++)r[0][i]=i;for(let i=1;i<=d.length;i++)for(let g=1;g<=m.length;g++)r[i][g]=d[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[d.length][m.length]};function ze(d,m={minDesktopWidth:1200,forceResize:!1}){const r=s.useRef(null),i=m.minDesktopWidth??1200,g=!!m.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!d||!d.current)return;const c=d.current,T=()=>{try{const l=document.body,y=getComputedStyle(l),w=parseFloat(l.style&&l.style.zoom||"");if(w&&!isNaN(w)&&w>0)return w;const z=parseFloat(y.zoom||"");if(z&&!isNaN(z)&&z>0)return z;const u=document.createElement("div");u.style.position="absolute",u.style.left="0",u.style.top="0",u.style.width="100px",u.style.height="1px",u.style.visibility="hidden",document.documentElement.appendChild(u);const C=u.getBoundingClientRect();if(document.documentElement.removeChild(u),C&&C.width>0){const j=C.width/100;if(!isNaN(j)&&j>0)return j}}catch{}return 1},B=()=>{if(i&&window.innerWidth<i){R();return}const l=T();if(!l||l===1){R();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 y=1/l;g&&(c.style.width=`${l*100}%`,c.style.height=`${l*100}%`),c.style.transformOrigin="50% 50%",c.style.transform=`scale(${y})`,c.style.willChange="transform"},R=()=>{if(!r.current)return;const l=r.current;c.style.transform=l.transform??"",c.style.transformOrigin=l.transformOrigin??"",c.style.width=l.width??"",c.style.height=l.height??"",c.style.willChange=l.willChange??"",r.current=null};let v=0;const p=()=>{cancelAnimationFrame(v),v=requestAnimationFrame(B)},M=new MutationObserver(l=>{for(const y of l)if(y.type==="attributes"&&(y.attributeName==="style"||y.attributeName==="class")){p();break}});return M.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",p),p(),()=>{cancelAnimationFrame(v),M.disconnect(),window.removeEventListener("resize",p),R()}},[d,i,g])}function Ce({gameCubeSize:d,screenHeight:m,screenWidth:r}){const i=s.useRef(null),g=s.useRef(null),[c,T]=s.useState(null),[B,R]=s.useState(null);ze(i,{minDesktopWidth:1024,forceResize:!1}),s.useLayoutEffect(()=>{const e=i.current;if(!e)return;let n=e.shadowRoot;n||(n=e.attachShadow({mode:"open"})),e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.width="100vw",e.style.height="100vh",e.style.zIndex="9999",e.style.background="linear-gradient(to bottom, #fff8f8, #f9fafb)",e.style.margin="0",e.style.padding="0",e.style.transform="none",e.style.zoom="1",n.innerHTML="";const a=document.createElement("style");a.textContent=`
       :host {
-        position: fixed;
-        inset: 0;
-        width: 100vw;
-        height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
-        background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
-        z-index: 100;
         overflow: hidden;
-        margin: 0;
-        padding: 0;
-        transform: none;
-        zoom: 1;
-        scale: 1;
       }
       
       #whats-missing-root, #whats-missing-root * { 
@@ -41,8 +30,5 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        transform: none;
-        zoom: 1;
-        scale: 1;
       }
     `,n.appendChild(a),R(n)},[]),s.useEffect(()=>{const e=document.body,n=document.documentElement,a=e.style.zoom,h=e.style.transform,b=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=a,e.style.transform=h,n.style.zoom=b,n.style.transform=I}},[]);const v=s.useMemo(()=>{const e=d??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},[d,r,m]);s.useEffect(()=>()=>{document.body.style.overflow=""},[]);const[p,M]=s.useState(null),[l,y]=s.useState([]),[w,z]=s.useState(4),[u,C]=s.useState(!1),[j,Z]=s.useState(1),[S,re]=s.useState(null),[x,E]=s.useState("ready"),[U,V]=s.useState(3),[W,F]=s.useState(10),[G,_]=s.useState(20),[le,N]=s.useState(0),[L,D]=s.useState(!1),[A,K]=s.useState(""),[k,O]=s.useState(!1),[$,J]=s.useState(!1),[Q,H]=s.useState(null),[ae,q]=s.useState([]),[de,X]=s.useState([]),[f,ce]=s.useState(!1);s.useEffect(()=>{if(typeof window>"u")return;const e=()=>{const n=r??window.innerWidth,a=window.matchMedia&&window.matchMedia("(pointer: coarse)").matches;ce(n<=768||a)};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(a=>{for(const h of a){const b=h.contentRect;T(Math.round(Math.min(b.width,b.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 ee=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),te=()=>{if(!p)return;const e=ee(Y[p]);y(e),C(!0),D(!1),Z(1),N(0),q([]),X([]),ne(e,[],!0)},ne=(e=l,n=de,a=!1)=>{const h=ee(e.length?e:Y[p]);let b=Math.floor(Math.random()*h.length),I=h[b].name,ie=0;for(;n.includes(I)&&ie<20;)b=Math.floor(Math.random()*h.length),I=h[b].name,ie++;y(h),re(b),X([...n,I]),O(!1),K(""),_(20),H(null),a?(E("ready"),V(3),F(10)):(E("memorize"),F(10))};s.useEffect(()=>{if(!(!u||L||k)){if(x==="ready")if(U<=0)E("memorize");else{const e=setTimeout(()=>V(n=>n-1),1e3);return()=>clearTimeout(e)}if(x==="memorize")if(W<=0)E("guess");else{const e=setTimeout(()=>F(n=>n-1),1e3);return()=>clearTimeout(e)}if(x==="guess"){if(G<=0){O(!0),H("wrong");const n=l[S].name;q(a=>[...a,{round:j,answer:A,correct:n,result:"wrong"}]);return}const e=setTimeout(()=>_(n=>n-1),1e3);return()=>clearTimeout(e)}}},[x,U,W,G,u,L,k,l,S,j,A]);const me=()=>{if(S===null||$)return;const e=l[S].name,n=A.toLowerCase().trim();let a="wrong";n===e?(N(h=>h+1),H("correct"),a="correct"):ve(n,e)===1?(N(h=>h+.5),H("almost"),a="almost"):(H("wrong"),a="wrong"),q(h=>[...h,{round:j,answer:n,correct:e,result:a}]),J(!0),setTimeout(()=>{J(!1),O(!0)},600)},ue=()=>j<w?(Z(e=>e+1),ne()):D(!0),he=()=>{C(!1),D(!1),M(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"})]})}),[]),oe=1200,se=700,fe=s.useMemo(()=>{const e=r??(typeof window<"u"?window.innerWidth:oe),n=m??(typeof window<"u"?window.innerHeight:se),a=Math.min(e/oe,n/se);return Math.min(1.35,Math.max(1,a))},[r,m,f]);return t.jsx("div",{ref:i,style:{width:"100%",height:"100%"},children:B&&pe.createPortal(t.jsx("div",{id:"whats-missing-root",style:{all:"unset"},children:t.jsx("div",{ref:g,style:{width:f?"100%":`${v}px`,height:f?"100%":`${v}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",{style:{transform:`scale(${fe})`,transformOrigin:"center center",transition:"transform 0.2s ease-out",width:"100%",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!f&&ge,!p&&!u&&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:()=>M(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,...w===e?o.gmButtonActive:{}},onClick:()=>z(e),children:e},e))})]})]}),p&&!u&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsxs("h1",{style:o.gmHeadline1,children:["Theme selected: ",p]}),t.jsxs("p",{style:o.gmBodyM,children:["Rounds: ",w]}),t.jsx("button",{style:o.gmButton,onClick:te,children:"▶ Start game"})]}),L&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"Results"}),t.jsxs("h2",{style:o.gmHeadline3,children:["Your score: ",le," / ",w]}),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:ae.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:te,children:"🔁 Play again"}),t.jsx("button",{style:o.gmButton,onClick:he,children:"⬅️ Choose theme"})]})]}),u&&!L&&t.jsxs("div",{style:o.gmGameLayout,children:[t.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[x==="ready"&&t.jsxs(t.Fragment,{children:[t.jsx("h1",{style:{...o.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),t.jsx("div",{style:o.gmHourglass,children:"⏳"})]}),x==="memorize"&&t.jsxs("p",{style:{...o.gmBodyM,color:"#10b981"},children:["MEMORIZE (",W,")"]}),x==="guess"&&!k&&t.jsxs("p",{style:o.gmBodyM,children:["⏳ Time left: ",G,"s"]})]}),x!=="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:l.map((e,n)=>{const a=S===n&&x==="guess"&&!k;return t.jsx("div",{style:{...o.gmCard,width:"100%",height:"100%",...Q==="correct"&&S===n?o.gmCorrect:{},...Q==="wrong"&&S===n?o.gmWrong:{}},children:!a&&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:[x==="guess"&&!k&&t.jsxs("div",{children:[t.jsx("input",{type:"text",placeholder:"Type the missing word",value:A,onChange:e=>K(e.target.value),style:o.gmInput}),t.jsx("button",{style:{...o.gmButton,marginLeft:8},onClick:me,disabled:$,children:$?"...":"Check"})]}),k&&t.jsx("button",{type:"button",style:o.gmButton,onClick:ue,children:"Next round"})]})]})]})})}),B)})}exports.Game=Ce;exports.themes=Y;

package/dist/whats-missing.es.js

@@ -320,25 +320,14 @@ function Ee({
     const e = i.current;
     if (!e) return;
     let t = e.shadowRoot;
-    t || (t = e.attachShadow({ mode: "open" })), t.innerHTML = "";
+    t || (t = e.attachShadow({ mode: "open" })), e.style.position = "fixed", e.style.top = "0", e.style.left = "0", e.style.width = "100vw", e.style.height = "100vh", e.style.zIndex = "9999", e.style.background = "linear-gradient(to bottom, #fff8f8, #f9fafb)", e.style.margin = "0", e.style.padding = "0", e.style.transform = "none", e.style.zoom = "1", t.innerHTML = "";
     const l = document.createElement("style");
     l.textContent = `
       :host {
-        position: fixed;
-        inset: 0;
-        width: 100vw;
-        height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
-        background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
-        z-index: 100;
         overflow: hidden;
-        margin: 0;
-        padding: 0;
-        transform: none;
-        zoom: 1;
-        scale: 1;
       }
       
       #whats-missing-root, #whats-missing-root * { 
@@ -360,9 +349,6 @@ function Ee({
         display: flex;
         justify-content: center;
         align-items: center;
-        transform: none;
-        zoom: 1;
-        scale: 1;
       }
     `, t.appendChild(l), H(t);
   }, []), F(() => {

package/package.json

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

package/src/Game.tsx

@@ -165,6 +165,19 @@ export default function Game({
       root = container.attachShadow({ mode: 'open' });
     }
 
+    // Растягиваем хост-элемент на весь экран
+    container.style.position = 'fixed';
+    container.style.top = '0';
+    container.style.left = '0';
+    container.style.width = '100vw';
+    container.style.height = '100vh';
+    container.style.zIndex = '9999';
+    container.style.background = 'linear-gradient(to bottom, #fff8f8, #f9fafb)';
+    container.style.margin = '0';
+    container.style.padding = '0';
+    container.style.transform = 'none';
+    container.style.zoom = '1';
+
     // Очищаем содержимое shadow root
     root.innerHTML = '';
 
@@ -172,21 +185,10 @@ export default function Game({
     const style = document.createElement('style');
     style.textContent = `
       :host {
-        position: fixed;
-        inset: 0;
-        width: 100vw;
-        height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
-        background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
-        z-index: 100;
         overflow: hidden;
-        margin: 0;
-        padding: 0;
-        transform: none;
-        zoom: 1;
-        scale: 1;
       }
       
       #whats-missing-root, #whats-missing-root * { 
@@ -208,9 +210,6 @@ export default function Game({
         display: flex;
         justify-content: center;
         align-items: center;
-        transform: none;
-        zoom: 1;
-        scale: 1;
       }
     `;