@mblinkov/whats-missing 20.0.33 → 20.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/whats-missing.cjs.js +3 -3
- package/dist/whats-missing.es.js +141 -127
- package/package.json +1 -1
- package/src/Game.tsx +29 -0
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),he=window.origin+"/cloud/speakid/games/whatsmissing/",Y=(a
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),he=window.origin+"/cloud/speakid/games/whatsmissing/",Y=(r,a)=>r.map(([l,i])=>({src:`${he}${a}/${i.replace(/\s/g,"%20")}.png`,name:i})),fe=[["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"]],pe=[["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"]],ye=[["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"]],Z={food:Y(fe,"food"),animals:Y(pe,"animals"),toys:Y(ye,"toys")},xe=`
|
|
2
2
|
@keyframes spin {
|
|
3
3
|
from { transform: rotate(0deg); }
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
5
5
|
}
|
|
6
|
-
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=xe,document.head.appendChild(r)}const be={animation:"spin 1.4s linear infinite"},n={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100%",width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",color:"#1f2937",padding:"24px 16px",boxSizing:"border-box",transform:"translateY(20px)"},gmHeadline1:{fontWeight:700,fontSize:"clamp(28px, 4vw, 40px)",lineHeight:"110%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},gmBodyM:{fontWeight:400,fontSize:"16px",lineHeight:"140%"},gmBodyS:{fontWeight:400,fontSize:"14px",lineHeight:"140%",color:"#6b7280"},gmButton:{fontFamily:'"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',fontWeight:600,fontSize:"16px",padding:"10px 16px",borderRadius:"12px",border:"1px solid #e5e7eb",background:"#ec4c44",color:"#ffffff",cursor:"pointer",boxShadow:"0 6px 18px rgba(236, 76, 68, .18)",transition:"transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"none",minHeight:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"none",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...be}};s.useEffect(()=>{const r=document.body,a=document.documentElement,l=r.style.zoom,i=r.style.transform,m=a.style.zoom,c=a.style.transform;return r.style.zoom="1",r.style.transform="none",a.style.zoom="1",a.style.transform="none",console.log("Zoom and transform neutralized globally."),()=>{r.style.zoom=l,r.style.transform=i,a.style.zoom=m,a.style.transform=c}},[]);const we=()=>{const r=document.createElement("style");r.textContent=`
|
|
7
7
|
#whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
|
|
8
8
|
#whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
|
|
9
|
-
`,document.head.appendChild(a)},je=(a,m)=>{const r=Array.from({length:a.length+1},()=>Array(m.length+1).fill(0));for(let i=0;i<=a.length;i++)r[i][0]=i;for(let i=0;i<=m.length;i++)r[0][i]=i;for(let i=1;i<=a.length;i++)for(let u=1;u<=m.length;u++)r[i][u]=a[i-1]===m[u-1]?r[i-1][u-1]:Math.min(r[i-1][u-1],r[i][u-1],r[i-1][u])+1;return r[a.length][m.length]};function Se(a,m={minDesktopWidth:1200,forceResize:!1}){const r=s.useRef(null),i=m.minDesktopWidth??1200,u=!!m.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!a||!a.current)return;const d=a.current,R=()=>{try{const l=document.body,j=getComputedStyle(l),b=parseFloat(l.style&&l.style.zoom||"");if(b&&!isNaN(b)&&b>0)return b;const S=parseFloat(j.zoom||"");if(S&&!isNaN(S)&&S>0)return S;const g=document.createElement("div");g.style.position="absolute",g.style.left="0",g.style.top="0",g.style.width="100px",g.style.height="1px",g.style.visibility="hidden",document.documentElement.appendChild(g);const k=g.getBoundingClientRect();if(document.documentElement.removeChild(g),k&&k.width>0){const p=k.width/100;if(!isNaN(p)&&p>0)return p}}catch{}return 1},I=()=>{if(i&&window.innerWidth<i){y();return}const l=R();if(!l||l===1){y();return}r.current||(r.current={transform:d.style.transform||null,transformOrigin:d.style.transformOrigin||null,width:d.style.width||null,height:d.style.height||null,willChange:d.style.willChange||null});const j=1/l;u&&(d.style.width=`${l*100}%`,d.style.height=`${l*100}%`),d.style.transformOrigin="50% 50%",d.style.transform=`scale(${j})`,d.style.willChange="transform"},y=()=>{if(!r.current)return;const l=r.current;d.style.transform=l.transform??"",d.style.transformOrigin=l.transformOrigin??"",d.style.width=l.width??"",d.style.height=l.height??"",d.style.willChange=l.willChange??"",r.current=null};let C=0;const x=()=>{cancelAnimationFrame(C),C=requestAnimationFrame(I)},T=new MutationObserver(l=>{for(const j of l)if(j.type==="attributes"&&(j.attributeName==="style"||j.attributeName==="class")){x();break}});return T.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",x),x(),()=>{cancelAnimationFrame(C),T.disconnect(),window.removeEventListener("resize",x),y()}},[a,i,u])}function ve({gameCubeSize:a,screenHeight:m,screenWidth:r}){const i=s.useRef(null),u=s.useRef(null),[d,R]=s.useState(null);Se(i,{minDesktopWidth:1024,forceResize:!1});const I=s.useMemo(()=>{const e=a??Math.min(r??1e3,m??1e3),o=r??(typeof window<"u"?window.innerWidth:1e3);return e<600&&o>768?600:o<=768?Math.min(e,o-20):e},[a,r,m]);s.useEffect(()=>(we(),()=>{document.body.style.overflow=""}),[]);const[y,C]=s.useState(null),[x,T]=s.useState([]),[l,j]=s.useState(4),[b,S]=s.useState(!1),[g,k]=s.useState(1),[p,ie]=s.useState(null),[w,H]=s.useState("ready"),[U,V]=s.useState(3),[E,A]=s.useState(10),[W,Z]=s.useState(20),[re,F]=s.useState(0),[B,G]=s.useState(!1),[L,_]=s.useState(""),[z,$]=s.useState(!1),[N,K]=s.useState(!1),[J,M]=s.useState(null),[ae,O]=s.useState([]),[le,Q]=s.useState([]),[h,de]=s.useState(!1);s.useEffect(()=>{if(typeof window>"u")return;const e=()=>{const o=r??window.innerWidth,c=window.matchMedia&&window.matchMedia("(pointer: coarse)").matches;de(o<=768||c)};return e(),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}},[r]),s.useLayoutEffect(()=>{const e=u.current;if(!e||typeof window>"u")return;let o=null;try{o=new ResizeObserver(c=>{for(const f of c){const v=f.contentRect;R(Math.round(Math.min(v.width,v.height)))}}),o.observe(e),R(Math.round(Math.min(e.clientWidth,e.clientHeight)))}catch{R(Math.round(Math.min(e.clientWidth,e.clientHeight)))}return()=>o?.disconnect()},[h]);const X=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!y)return;const e=X(P[y]);T(e),S(!0),G(!1),k(1),F(0),O([]),Q([]),te(e,[],!0)},te=(e=x,o=le,c=!1)=>{const f=X(e.length?e:P[y]);let v=Math.floor(Math.random()*f.length),q=f[v].name,se=0;for(;o.includes(q)&&se<20;)v=Math.floor(Math.random()*f.length),q=f[v].name,se++;T(f),ie(v),Q([...o,q]),$(!1),_(""),Z(20),M(null),c?(H("ready"),V(3),A(10)):(H("memorize"),A(10))};s.useEffect(()=>{if(!(!b||B||z)){if(w==="ready")if(U<=0)H("memorize");else{const e=setTimeout(()=>V(o=>o-1),1e3);return()=>clearTimeout(e)}if(w==="memorize")if(E<=0)H("guess");else{const e=setTimeout(()=>A(o=>o-1),1e3);return()=>clearTimeout(e)}if(w==="guess"){if(W<=0){$(!0),M("wrong");const o=x[p].name;O(c=>[...c,{round:g,answer:L,correct:o,result:"wrong"}]);return}const e=setTimeout(()=>Z(o=>o-1),1e3);return()=>clearTimeout(e)}}},[w,U,E,W,b,B,z,x,p,g,L]);const ce=()=>{if(p===null||N)return;const e=x[p].name,o=L.toLowerCase().trim();let c="wrong";o===e?(F(f=>f+1),M("correct"),c="correct"):je(o,e)===1?(F(f=>f+.5),M("almost"),c="almost"):(M("wrong"),c="wrong"),O(f=>[...f,{round:g,answer:o,correct:e,result:c}]),K(!0),setTimeout(()=>{K(!1),$(!0)},600)},me=()=>g<l?(k(e=>e+1),te()):G(!0),ue=()=>{S(!1),G(!1),C(null)},ge=s.useMemo(()=>t.jsx("div",{style:{...n.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:n.gmLogoImg,loading:"lazy"})]})}),[]),ne=1200,oe=700,D=s.useMemo(()=>{const e=r??(typeof window<"u"?window.innerWidth:ne),o=m??(typeof window<"u"?window.innerHeight:oe),c=Math.min(e/ne,o/oe);return Math.min(1.35,Math.max(1,c))},[r,m,h]);return t.jsx("div",{ref:i,style:{position:"fixed",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",overflow:"hidden",zIndex:1},children:t.jsx("div",{ref:u,style:{width:h?"100%":`${I}px`,height:h?"100%":`${I}px`,borderRadius:h?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",position:"relative",overflow:"hidden",boxShadow:h?"none":"0 0 40px rgba(0,0,0,0.08)",display:"flex",justifyContent:"center",alignItems:"center"},children:t.jsxs("div",{id:"whats-missing-root",style:{transform:`scale(${D})`,transformOrigin:"center center",transition:"transform 0.2s ease-out",width:`${100/D}%`,height:`${100/D}%`,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!h&&ge,!y&&!b&&t.jsxs("div",{style:n.gmCenterScreen,children:[t.jsx("h1",{style:n.gmHeadline1,children:"WHAT'S MISSING?"}),t.jsx("p",{style:n.gmBodyM,children:"Select a theme:"}),t.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(e=>t.jsx("button",{style:n.gmButton,onClick:()=>C(e),children:e==="animals"?"🐶 Animals":e==="food"?"🍎 Food":"🧸 Toys"},e))}),t.jsxs("div",{style:{marginTop:24},children:[t.jsx("p",{style:n.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:{...n.gmButton,...l===e?n.gmButtonActive:{}},onClick:()=>j(e),children:e},e))})]})]}),y&&!b&&t.jsxs("div",{style:n.gmCenterScreen,children:[t.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",y]}),t.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",l]}),t.jsx("button",{style:n.gmButton,onClick:ee,children:"▶ Start game"})]}),B&&t.jsxs("div",{style:n.gmCenterScreen,children:[t.jsx("h1",{style:n.gmHeadline1,children:"Results"}),t.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",re," / ",l]}),t.jsx("p",{style:{...n.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),t.jsxs("table",{style:n.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,o)=>t.jsxs("tr",{children:[t.jsx("td",{style:n.gmTableCell,children:e.round}),t.jsx("td",{style:n.gmTableCell,children:e.answer||"—"}),t.jsx("td",{style:n.gmTableCell,children:e.correct}),t.jsx("td",{style:n.gmTableCell,children:e.result==="correct"?"✔ Correct":e.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},o))})]}),t.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[t.jsx("button",{style:n.gmButton,onClick:ee,children:"🔁 Play again"}),t.jsx("button",{style:n.gmButton,onClick:ue,children:"⬅️ Choose theme"})]})]}),b&&!B&&t.jsxs("div",{style:n.gmGameLayout,children:[t.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[w==="ready"&&t.jsxs(t.Fragment,{children:[t.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),t.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),w==="memorize"&&t.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",E,")"]}),w==="guess"&&!z&&t.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",W,"s"]})]}),w!=="ready"&&t.jsx("div",{style:{...n.gmGrid,display:"grid",gridTemplateColumns:`repeat(${h?2:3}, 1fr)`,gridTemplateRows:`repeat(${h?3:2}, 1fr)`,gap:h?12:20,justifyContent:"center",alignContent:"center",padding:h?8:16,width:"100%",height:"100%",maxWidth:h?"100%":600,maxHeight:h?"100%":400,boxSizing:"border-box"},children:x.map((e,o)=>{const c=p===o&&w==="guess"&&!z;return t.jsx("div",{style:{...n.gmCard,width:"100%",height:"100%",...J==="correct"&&p===o?n.gmCorrect:{},...J==="wrong"&&p===o?n.gmWrong:{}},children:!c&&t.jsx("img",{src:e.src,alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},o)})}),t.jsxs("div",{style:{marginTop:16,height:80},children:[w==="guess"&&!z&&t.jsxs("div",{children:[t.jsx("input",{type:"text",placeholder:"Type the missing word",value:L,onChange:e=>_(e.target.value),style:n.gmInput}),t.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:ce,disabled:N,children:N?"...":"Check"})]}),z&&t.jsx("button",{type:"button",style:n.gmButton,onClick:me,children:"Next round"})]})]})]})})})}exports.Game=ve;exports.themes=P;
|
|
9
|
+
`,document.head.appendChild(r)},je=(r,a)=>{const l=Array.from({length:r.length+1},()=>Array(a.length+1).fill(0));for(let i=0;i<=r.length;i++)l[i][0]=i;for(let i=0;i<=a.length;i++)l[0][i]=i;for(let i=1;i<=r.length;i++)for(let m=1;m<=a.length;m++)l[i][m]=r[i-1]===a[m-1]?l[i-1][m-1]:Math.min(l[i-1][m-1],l[i][m-1],l[i-1][m])+1;return l[r.length][a.length]};function Se(r,a={minDesktopWidth:1200,forceResize:!1}){const l=s.useRef(null),i=a.minDesktopWidth??1200,m=!!a.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!r||!r.current)return;const c=r.current,T=()=>{try{const d=document.body,j=getComputedStyle(d),b=parseFloat(d.style&&d.style.zoom||"");if(b&&!isNaN(b)&&b>0)return b;const S=parseFloat(j.zoom||"");if(S&&!isNaN(S)&&S>0)return S;const g=document.createElement("div");g.style.position="absolute",g.style.left="0",g.style.top="0",g.style.width="100px",g.style.height="1px",g.style.visibility="hidden",document.documentElement.appendChild(g);const C=g.getBoundingClientRect();if(document.documentElement.removeChild(g),C&&C.width>0){const p=C.width/100;if(!isNaN(p)&&p>0)return p}}catch{}return 1},I=()=>{if(i&&window.innerWidth<i){y();return}const d=T();if(!d||d===1){y();return}l.current||(l.current={transform:c.style.transform||null,transformOrigin:c.style.transformOrigin||null,width:c.style.width||null,height:c.style.height||null,willChange:c.style.willChange||null});const j=1/d;m&&(c.style.width=`${d*100}%`,c.style.height=`${d*100}%`),c.style.transformOrigin="50% 50%",c.style.transform=`scale(${j})`,c.style.willChange="transform"},y=()=>{if(!l.current)return;const d=l.current;c.style.transform=d.transform??"",c.style.transformOrigin=d.transformOrigin??"",c.style.width=d.width??"",c.style.height=d.height??"",c.style.willChange=d.willChange??"",l.current=null};let z=0;const x=()=>{cancelAnimationFrame(z),z=requestAnimationFrame(I)},R=new MutationObserver(d=>{for(const j of d)if(j.type==="attributes"&&(j.attributeName==="style"||j.attributeName==="class")){x();break}});return R.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",x),x(),()=>{cancelAnimationFrame(z),R.disconnect(),window.removeEventListener("resize",x),y()}},[r,i,m])}function ve({gameCubeSize:r,screenHeight:a,screenWidth:l}){const i=s.useRef(null),m=s.useRef(null),[c,T]=s.useState(null);Se(i,{minDesktopWidth:1024,forceResize:!1});const I=s.useMemo(()=>{const e=r??Math.min(l??1e3,a??1e3),o=l??(typeof window<"u"?window.innerWidth:1e3);return e<600&&o>768?600:o<=768?Math.min(e,o-20):e},[r,l,a]);s.useEffect(()=>(we(),()=>{document.body.style.overflow=""}),[]);const[y,z]=s.useState(null),[x,R]=s.useState([]),[d,j]=s.useState(4),[b,S]=s.useState(!1),[g,C]=s.useState(1),[p,ie]=s.useState(null),[w,H]=s.useState("ready"),[P,U]=s.useState(3),[L,A]=s.useState(10),[W,V]=s.useState(20),[re,F]=s.useState(0),[B,G]=s.useState(!1),[E,_]=s.useState(""),[k,$]=s.useState(!1),[N,K]=s.useState(!1),[J,M]=s.useState(null),[le,O]=s.useState([]),[ae,Q]=s.useState([]),[h,de]=s.useState(!1);s.useEffect(()=>{if(typeof window>"u")return;const e=()=>{const o=l??window.innerWidth,u=window.matchMedia&&window.matchMedia("(pointer: coarse)").matches;de(o<=768||u)};return e(),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}},[l]),s.useLayoutEffect(()=>{const e=m.current;if(!e||typeof window>"u")return;let o=null;try{o=new ResizeObserver(u=>{for(const f of u){const v=f.contentRect;T(Math.round(Math.min(v.width,v.height)))}}),o.observe(e),T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}catch{T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}return()=>o?.disconnect()},[h]);const X=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!y)return;const e=X(Z[y]);R(e),S(!0),G(!1),C(1),F(0),O([]),Q([]),te(e,[],!0)},te=(e=x,o=ae,u=!1)=>{const f=X(e.length?e:Z[y]);let v=Math.floor(Math.random()*f.length),q=f[v].name,se=0;for(;o.includes(q)&&se<20;)v=Math.floor(Math.random()*f.length),q=f[v].name,se++;R(f),ie(v),Q([...o,q]),$(!1),_(""),V(20),M(null),u?(H("ready"),U(3),A(10)):(H("memorize"),A(10))};s.useEffect(()=>{if(!(!b||B||k)){if(w==="ready")if(P<=0)H("memorize");else{const e=setTimeout(()=>U(o=>o-1),1e3);return()=>clearTimeout(e)}if(w==="memorize")if(L<=0)H("guess");else{const e=setTimeout(()=>A(o=>o-1),1e3);return()=>clearTimeout(e)}if(w==="guess"){if(W<=0){$(!0),M("wrong");const o=x[p].name;O(u=>[...u,{round:g,answer:E,correct:o,result:"wrong"}]);return}const e=setTimeout(()=>V(o=>o-1),1e3);return()=>clearTimeout(e)}}},[w,P,L,W,b,B,k,x,p,g,E]);const ce=()=>{if(p===null||N)return;const e=x[p].name,o=E.toLowerCase().trim();let u="wrong";o===e?(F(f=>f+1),M("correct"),u="correct"):je(o,e)===1?(F(f=>f+.5),M("almost"),u="almost"):(M("wrong"),u="wrong"),O(f=>[...f,{round:g,answer:o,correct:e,result:u}]),K(!0),setTimeout(()=>{K(!1),$(!0)},600)},me=()=>g<d?(C(e=>e+1),te()):G(!0),ue=()=>{S(!1),G(!1),z(null)},ge=s.useMemo(()=>t.jsx("div",{style:{...n.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:n.gmLogoImg,loading:"lazy"})]})}),[]),ne=1200,oe=700,D=s.useMemo(()=>{const e=l??(typeof window<"u"?window.innerWidth:ne),o=a??(typeof window<"u"?window.innerHeight:oe),u=Math.min(e/ne,o/oe);return Math.min(1.35,Math.max(1,u))},[l,a,h]);return t.jsx("div",{ref:i,style:{position:"fixed",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",overflow:"hidden",zIndex:1,width:"100vw",height:"100vh",transform:"none",zoom:1,scale:"1 !important"},children:t.jsx("div",{ref:m,style:{width:h?"100%":`${I}px`,height:h?"100%":`${I}px`,borderRadius:h?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",position:"relative",overflow:"hidden",boxShadow:h?"none":"0 0 40px rgba(0,0,0,0.08)",display:"flex",justifyContent:"center",alignItems:"center"},children:t.jsxs("div",{id:"whats-missing-root",style:{transform:`scale(${D})`,transformOrigin:"center center",transition:"transform 0.2s ease-out",width:`${100/D}%`,height:`${100/D}%`,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!h&&ge,!y&&!b&&t.jsxs("div",{style:n.gmCenterScreen,children:[t.jsx("h1",{style:n.gmHeadline1,children:"WHAT'S MISSING?"}),t.jsx("p",{style:n.gmBodyM,children:"Select a theme:"}),t.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(e=>t.jsx("button",{style:n.gmButton,onClick:()=>z(e),children:e==="animals"?"🐶 Animals":e==="food"?"🍎 Food":"🧸 Toys"},e))}),t.jsxs("div",{style:{marginTop:24},children:[t.jsx("p",{style:n.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:{...n.gmButton,...d===e?n.gmButtonActive:{}},onClick:()=>j(e),children:e},e))})]})]}),y&&!b&&t.jsxs("div",{style:n.gmCenterScreen,children:[t.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",y]}),t.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",d]}),t.jsx("button",{style:n.gmButton,onClick:ee,children:"▶ Start game"})]}),B&&t.jsxs("div",{style:n.gmCenterScreen,children:[t.jsx("h1",{style:n.gmHeadline1,children:"Results"}),t.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",re," / ",d]}),t.jsx("p",{style:{...n.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),t.jsxs("table",{style:n.gmTable,children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Round"}),t.jsx("th",{children:"Your Answer"}),t.jsx("th",{children:"Correct"}),t.jsx("th",{children:"Result"})]})}),t.jsx("tbody",{children:le.map((e,o)=>t.jsxs("tr",{children:[t.jsx("td",{style:n.gmTableCell,children:e.round}),t.jsx("td",{style:n.gmTableCell,children:e.answer||"—"}),t.jsx("td",{style:n.gmTableCell,children:e.correct}),t.jsx("td",{style:n.gmTableCell,children:e.result==="correct"?"✔ Correct":e.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},o))})]}),t.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[t.jsx("button",{style:n.gmButton,onClick:ee,children:"🔁 Play again"}),t.jsx("button",{style:n.gmButton,onClick:ue,children:"⬅️ Choose theme"})]})]}),b&&!B&&t.jsxs("div",{style:n.gmGameLayout,children:[t.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[w==="ready"&&t.jsxs(t.Fragment,{children:[t.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),t.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),w==="memorize"&&t.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",L,")"]}),w==="guess"&&!k&&t.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",W,"s"]})]}),w!=="ready"&&t.jsx("div",{style:{...n.gmGrid,display:"grid",gridTemplateColumns:`repeat(${h?2:3}, 1fr)`,gridTemplateRows:`repeat(${h?3:2}, 1fr)`,gap:h?12:20,justifyContent:"center",alignContent:"center",padding:h?8:16,width:"100%",height:"100%",maxWidth:h?"100%":600,maxHeight:h?"100%":400,boxSizing:"border-box"},children:x.map((e,o)=>{const u=p===o&&w==="guess"&&!k;return t.jsx("div",{style:{...n.gmCard,width:"100%",height:"100%",...J==="correct"&&p===o?n.gmCorrect:{},...J==="wrong"&&p===o?n.gmWrong:{}},children:!u&&t.jsx("img",{src:e.src,alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},o)})}),t.jsxs("div",{style:{marginTop:16,height:80},children:[w==="guess"&&!k&&t.jsxs("div",{children:[t.jsx("input",{type:"text",placeholder:"Type the missing word",value:E,onChange:e=>_(e.target.value),style:n.gmInput}),t.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:ce,disabled:N,children:N?"...":"Check"})]}),k&&t.jsx("button",{type:"button",style:n.gmButton,onClick:me,children:"Next round"})]})]})]})})})}exports.Game=ve;exports.themes=Z;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as n, jsxs as
|
|
2
|
-
import {
|
|
3
|
-
const xe = window.origin + "/cloud/speakid/games/whatsmissing/",
|
|
4
|
-
src: `${xe}${
|
|
1
|
+
import { jsx as n, jsxs as d, Fragment as be } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as W, useRef as V, useState as c, useMemo as P, useLayoutEffect as de } from "react";
|
|
3
|
+
const xe = window.origin + "/cloud/speakid/games/whatsmissing/", U = (r, l) => r.map(([s, i]) => ({
|
|
4
|
+
src: `${xe}${l}/${i.replace(/\s/g, "%20")}.png`,
|
|
5
5
|
name: i
|
|
6
6
|
})), ve = [
|
|
7
7
|
["apple", "apple"],
|
|
@@ -29,7 +29,7 @@ const xe = window.origin + "/cloud/speakid/games/whatsmissing/", V = (s, u) => s
|
|
|
29
29
|
["strawberry", "strawberry"],
|
|
30
30
|
["tomato", "tomato"],
|
|
31
31
|
["watermelon", "watermelon"]
|
|
32
|
-
],
|
|
32
|
+
], ze = [
|
|
33
33
|
["bear", "bear"],
|
|
34
34
|
["cat", "cat"],
|
|
35
35
|
["crocodile", "crocodile"],
|
|
@@ -49,7 +49,7 @@ const xe = window.origin + "/cloud/speakid/games/whatsmissing/", V = (s, u) => s
|
|
|
49
49
|
["tortoise", "tortoise"],
|
|
50
50
|
["wolf", "wolf"],
|
|
51
51
|
["zebra", "zebra"]
|
|
52
|
-
],
|
|
52
|
+
], Ce = [
|
|
53
53
|
["ball", "ball"],
|
|
54
54
|
["balloon", "balloon"],
|
|
55
55
|
["blocks", "blocks"],
|
|
@@ -70,18 +70,18 @@ const xe = window.origin + "/cloud/speakid/games/whatsmissing/", V = (s, u) => s
|
|
|
70
70
|
["yo-yo", "yo-yo"],
|
|
71
71
|
["crayons", "crayons"]
|
|
72
72
|
], ae = {
|
|
73
|
-
food:
|
|
74
|
-
animals:
|
|
75
|
-
toys:
|
|
76
|
-
},
|
|
73
|
+
food: U(ve, "food"),
|
|
74
|
+
animals: U(ze, "animals"),
|
|
75
|
+
toys: U(Ce, "toys")
|
|
76
|
+
}, ke = `
|
|
77
77
|
@keyframes spin {
|
|
78
78
|
from { transform: rotate(0deg); }
|
|
79
79
|
to { transform: rotate(360deg); }
|
|
80
80
|
}
|
|
81
81
|
`;
|
|
82
82
|
if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
|
|
83
|
-
const
|
|
84
|
-
|
|
83
|
+
const r = document.createElement("style");
|
|
84
|
+
r.id = "spin-keyframes", r.innerHTML = ke, document.head.appendChild(r);
|
|
85
85
|
}
|
|
86
86
|
const Se = {
|
|
87
87
|
animation: "spin 1.4s linear infinite"
|
|
@@ -241,31 +241,38 @@ const Se = {
|
|
|
241
241
|
fontSize: "42px",
|
|
242
242
|
...Se
|
|
243
243
|
}
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
s.
|
|
244
|
+
};
|
|
245
|
+
W(() => {
|
|
246
|
+
const r = document.body, l = document.documentElement, s = r.style.zoom, i = r.style.transform, u = l.style.zoom, m = l.style.transform;
|
|
247
|
+
return r.style.zoom = "1", r.style.transform = "none", l.style.zoom = "1", l.style.transform = "none", console.log("Zoom and transform neutralized globally."), () => {
|
|
248
|
+
r.style.zoom = s, r.style.transform = i, l.style.zoom = u, l.style.transform = m;
|
|
249
|
+
};
|
|
250
|
+
}, []);
|
|
251
|
+
const Te = () => {
|
|
252
|
+
const r = document.createElement("style");
|
|
253
|
+
r.textContent = `
|
|
247
254
|
#whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
|
|
248
255
|
#whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
|
|
249
|
-
`, document.head.appendChild(
|
|
250
|
-
}, Re = (
|
|
251
|
-
const
|
|
252
|
-
for (let i = 0; i <=
|
|
253
|
-
for (let i = 0; i <=
|
|
254
|
-
for (let i = 1; i <=
|
|
255
|
-
for (let
|
|
256
|
-
|
|
257
|
-
return r
|
|
256
|
+
`, document.head.appendChild(r);
|
|
257
|
+
}, Re = (r, l) => {
|
|
258
|
+
const s = Array.from({ length: r.length + 1 }, () => Array(l.length + 1).fill(0));
|
|
259
|
+
for (let i = 0; i <= r.length; i++) s[i][0] = i;
|
|
260
|
+
for (let i = 0; i <= l.length; i++) s[0][i] = i;
|
|
261
|
+
for (let i = 1; i <= r.length; i++)
|
|
262
|
+
for (let u = 1; u <= l.length; u++)
|
|
263
|
+
s[i][u] = r[i - 1] === l[u - 1] ? s[i - 1][u - 1] : Math.min(s[i - 1][u - 1], s[i][u - 1], s[i - 1][u]) + 1;
|
|
264
|
+
return s[r.length][l.length];
|
|
258
265
|
};
|
|
259
|
-
function Me(
|
|
260
|
-
const
|
|
266
|
+
function Me(r, l = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
267
|
+
const s = V(null), i = l.minDesktopWidth ?? 1200, u = !!l.forceResize;
|
|
261
268
|
de(() => {
|
|
262
|
-
if (typeof window > "u" || !
|
|
263
|
-
const
|
|
269
|
+
if (typeof window > "u" || !r || !r.current) return;
|
|
270
|
+
const m = r.current, M = () => {
|
|
264
271
|
try {
|
|
265
|
-
const
|
|
272
|
+
const a = document.body, z = getComputedStyle(a), x = parseFloat(a.style && a.style.zoom || "");
|
|
266
273
|
if (x && !isNaN(x) && x > 0) return x;
|
|
267
|
-
const
|
|
268
|
-
if (
|
|
274
|
+
const C = parseFloat(z.zoom || "");
|
|
275
|
+
if (C && !isNaN(C) && C > 0) return C;
|
|
269
276
|
const h = document.createElement("div");
|
|
270
277
|
h.style.position = "absolute", h.style.left = "0", h.style.top = "0", h.style.width = "100px", h.style.height = "1px", h.style.visibility = "hidden", document.documentElement.appendChild(h);
|
|
271
278
|
const T = h.getBoundingClientRect();
|
|
@@ -281,31 +288,31 @@ function Me(s, u = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
281
288
|
w();
|
|
282
289
|
return;
|
|
283
290
|
}
|
|
284
|
-
const
|
|
285
|
-
if (!
|
|
291
|
+
const a = M();
|
|
292
|
+
if (!a || a === 1) {
|
|
286
293
|
w();
|
|
287
294
|
return;
|
|
288
295
|
}
|
|
289
|
-
|
|
290
|
-
transform:
|
|
291
|
-
transformOrigin:
|
|
292
|
-
width:
|
|
293
|
-
height:
|
|
294
|
-
willChange:
|
|
296
|
+
s.current || (s.current = {
|
|
297
|
+
transform: m.style.transform || null,
|
|
298
|
+
transformOrigin: m.style.transformOrigin || null,
|
|
299
|
+
width: m.style.width || null,
|
|
300
|
+
height: m.style.height || null,
|
|
301
|
+
willChange: m.style.willChange || null
|
|
295
302
|
});
|
|
296
|
-
const
|
|
297
|
-
|
|
303
|
+
const z = 1 / a;
|
|
304
|
+
u && (m.style.width = `${a * 100}%`, m.style.height = `${a * 100}%`), m.style.transformOrigin = "50% 50%", m.style.transform = `scale(${z})`, m.style.willChange = "transform";
|
|
298
305
|
}, w = () => {
|
|
299
|
-
if (!
|
|
300
|
-
const
|
|
301
|
-
|
|
306
|
+
if (!s.current) return;
|
|
307
|
+
const a = s.current;
|
|
308
|
+
m.style.transform = a.transform ?? "", m.style.transformOrigin = a.transformOrigin ?? "", m.style.width = a.width ?? "", m.style.height = a.height ?? "", m.style.willChange = a.willChange ?? "", s.current = null;
|
|
302
309
|
};
|
|
303
310
|
let S = 0;
|
|
304
311
|
const b = () => {
|
|
305
312
|
cancelAnimationFrame(S), S = requestAnimationFrame(B);
|
|
306
|
-
}, I = new MutationObserver((
|
|
307
|
-
for (const
|
|
308
|
-
if (
|
|
313
|
+
}, I = new MutationObserver((a) => {
|
|
314
|
+
for (const z of a)
|
|
315
|
+
if (z.type === "attributes" && (z.attributeName === "style" || z.attributeName === "class")) {
|
|
309
316
|
b();
|
|
310
317
|
break;
|
|
311
318
|
}
|
|
@@ -313,41 +320,41 @@ function Me(s, u = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
313
320
|
return I.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", b), b(), () => {
|
|
314
321
|
cancelAnimationFrame(S), I.disconnect(), window.removeEventListener("resize", b), w();
|
|
315
322
|
};
|
|
316
|
-
}, [
|
|
323
|
+
}, [r, i, u]);
|
|
317
324
|
}
|
|
318
325
|
function Be({
|
|
319
|
-
gameCubeSize:
|
|
320
|
-
screenHeight:
|
|
321
|
-
screenWidth:
|
|
326
|
+
gameCubeSize: r,
|
|
327
|
+
screenHeight: l,
|
|
328
|
+
screenWidth: s
|
|
322
329
|
}) {
|
|
323
|
-
const i =
|
|
330
|
+
const i = V(null), u = V(null), [m, M] = c(null);
|
|
324
331
|
Me(i, { minDesktopWidth: 1024, forceResize: !1 });
|
|
325
332
|
const B = P(() => {
|
|
326
|
-
const e =
|
|
333
|
+
const e = r ?? Math.min(s ?? 1e3, l ?? 1e3), o = s ?? (typeof window < "u" ? window.innerWidth : 1e3);
|
|
327
334
|
return e < 600 && o > 768 ? 600 : o <= 768 ? Math.min(e, o - 20) : e;
|
|
328
|
-
}, [
|
|
329
|
-
|
|
335
|
+
}, [r, s, l]);
|
|
336
|
+
W(() => (Te(), () => {
|
|
330
337
|
document.body.style.overflow = "";
|
|
331
338
|
}), []);
|
|
332
|
-
const [w, S] =
|
|
333
|
-
|
|
339
|
+
const [w, S] = c(null), [b, I] = c([]), [a, z] = c(4), [x, C] = c(!1), [h, T] = c(1), [y, ce] = c(null), [v, L] = c("ready"), [_, K] = c(3), [j, F] = c(10), [$, J] = c(20), [me, G] = c(0), [A, N] = c(!1), [E, Q] = c(""), [R, D] = c(!1), [O, X] = c(!1), [ee, H] = c(null), [ue, q] = c([]), [ge, te] = c([]), [f, he] = c(!1);
|
|
340
|
+
W(() => {
|
|
334
341
|
if (typeof window > "u") return;
|
|
335
342
|
const e = () => {
|
|
336
|
-
const o =
|
|
337
|
-
he(o <= 768 ||
|
|
343
|
+
const o = s ?? window.innerWidth, g = window.matchMedia && window.matchMedia("(pointer: coarse)").matches;
|
|
344
|
+
he(o <= 768 || g);
|
|
338
345
|
};
|
|
339
346
|
return e(), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
|
|
340
347
|
window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
|
|
341
348
|
};
|
|
342
|
-
}, [
|
|
343
|
-
const e =
|
|
349
|
+
}, [s]), de(() => {
|
|
350
|
+
const e = u.current;
|
|
344
351
|
if (!e || typeof window > "u") return;
|
|
345
352
|
let o = null;
|
|
346
353
|
try {
|
|
347
|
-
o = new ResizeObserver((
|
|
348
|
-
for (const p of
|
|
349
|
-
const
|
|
350
|
-
M(Math.round(Math.min(
|
|
354
|
+
o = new ResizeObserver((g) => {
|
|
355
|
+
for (const p of g) {
|
|
356
|
+
const k = p.contentRect;
|
|
357
|
+
M(Math.round(Math.min(k.width, k.height)));
|
|
351
358
|
}
|
|
352
359
|
}), o.observe(e), M(Math.round(Math.min(e.clientWidth, e.clientHeight)));
|
|
353
360
|
} catch {
|
|
@@ -358,15 +365,15 @@ function Be({
|
|
|
358
365
|
const ne = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), oe = () => {
|
|
359
366
|
if (!w) return;
|
|
360
367
|
const e = ne(ae[w]);
|
|
361
|
-
I(e),
|
|
362
|
-
}, ie = (e = b, o = ge,
|
|
368
|
+
I(e), C(!0), N(!1), T(1), G(0), q([]), te([]), ie(e, [], !0);
|
|
369
|
+
}, ie = (e = b, o = ge, g = !1) => {
|
|
363
370
|
const p = ne(e.length ? e : ae[w]);
|
|
364
|
-
let
|
|
365
|
-
for (; o.includes(
|
|
366
|
-
|
|
367
|
-
I(p), ce(
|
|
371
|
+
let k = Math.floor(Math.random() * p.length), Z = p[k].name, le = 0;
|
|
372
|
+
for (; o.includes(Z) && le < 20; )
|
|
373
|
+
k = Math.floor(Math.random() * p.length), Z = p[k].name, le++;
|
|
374
|
+
I(p), ce(k), te([...o, Z]), D(!1), Q(""), J(20), H(null), g ? (L("ready"), K(3), F(10)) : (L("memorize"), F(10));
|
|
368
375
|
};
|
|
369
|
-
|
|
376
|
+
W(() => {
|
|
370
377
|
if (!(!x || A || R)) {
|
|
371
378
|
if (v === "ready")
|
|
372
379
|
if (_ <= 0) L("memorize");
|
|
@@ -375,18 +382,18 @@ function Be({
|
|
|
375
382
|
return () => clearTimeout(e);
|
|
376
383
|
}
|
|
377
384
|
if (v === "memorize")
|
|
378
|
-
if (
|
|
385
|
+
if (j <= 0) L("guess");
|
|
379
386
|
else {
|
|
380
|
-
const e = setTimeout(() =>
|
|
387
|
+
const e = setTimeout(() => F((o) => o - 1), 1e3);
|
|
381
388
|
return () => clearTimeout(e);
|
|
382
389
|
}
|
|
383
390
|
if (v === "guess") {
|
|
384
|
-
if (
|
|
385
|
-
|
|
391
|
+
if ($ <= 0) {
|
|
392
|
+
D(!0), H("wrong");
|
|
386
393
|
const o = b[y].name;
|
|
387
|
-
|
|
388
|
-
...
|
|
389
|
-
{ round: h, answer:
|
|
394
|
+
q((g) => [
|
|
395
|
+
...g,
|
|
396
|
+
{ round: h, answer: E, correct: o, result: "wrong" }
|
|
390
397
|
]);
|
|
391
398
|
return;
|
|
392
399
|
}
|
|
@@ -394,18 +401,18 @@ function Be({
|
|
|
394
401
|
return () => clearTimeout(e);
|
|
395
402
|
}
|
|
396
403
|
}
|
|
397
|
-
}, [v, _,
|
|
404
|
+
}, [v, _, j, $, x, A, R, b, y, h, E]);
|
|
398
405
|
const fe = () => {
|
|
399
|
-
if (y === null ||
|
|
400
|
-
const e = b[y].name, o =
|
|
401
|
-
let
|
|
402
|
-
o === e ? (
|
|
403
|
-
X(!1),
|
|
406
|
+
if (y === null || O) return;
|
|
407
|
+
const e = b[y].name, o = E.toLowerCase().trim();
|
|
408
|
+
let g = "wrong";
|
|
409
|
+
o === e ? (G((p) => p + 1), H("correct"), g = "correct") : Re(o, e) === 1 ? (G((p) => p + 0.5), H("almost"), g = "almost") : (H("wrong"), g = "wrong"), q((p) => [...p, { round: h, answer: o, correct: e, result: g }]), X(!0), setTimeout(() => {
|
|
410
|
+
X(!1), D(!0);
|
|
404
411
|
}, 600);
|
|
405
|
-
}, pe = () => h <
|
|
406
|
-
|
|
412
|
+
}, pe = () => h < a ? (T((e) => e + 1), ie()) : N(!0), ye = () => {
|
|
413
|
+
C(!1), N(!1), S(null);
|
|
407
414
|
}, we = P(
|
|
408
|
-
() => /* @__PURE__ */ n("div", { style: { ...t.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */
|
|
415
|
+
() => /* @__PURE__ */ n("div", { style: { ...t.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ d("picture", { children: [
|
|
409
416
|
/* @__PURE__ */ n(
|
|
410
417
|
"source",
|
|
411
418
|
{
|
|
@@ -424,10 +431,10 @@ function Be({
|
|
|
424
431
|
)
|
|
425
432
|
] }) }),
|
|
426
433
|
[]
|
|
427
|
-
), re = 1200, se = 700,
|
|
428
|
-
const e =
|
|
429
|
-
return Math.min(1.35, Math.max(1,
|
|
430
|
-
}, [
|
|
434
|
+
), re = 1200, se = 700, Y = P(() => {
|
|
435
|
+
const e = s ?? (typeof window < "u" ? window.innerWidth : re), o = l ?? (typeof window < "u" ? window.innerHeight : se), g = Math.min(e / re, o / se);
|
|
436
|
+
return Math.min(1.35, Math.max(1, g));
|
|
437
|
+
}, [s, l, f]);
|
|
431
438
|
return /* @__PURE__ */ n(
|
|
432
439
|
"div",
|
|
433
440
|
{
|
|
@@ -440,12 +447,19 @@ function Be({
|
|
|
440
447
|
alignItems: "center",
|
|
441
448
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
442
449
|
overflow: "hidden",
|
|
443
|
-
zIndex: 1
|
|
450
|
+
zIndex: 1,
|
|
451
|
+
width: "100vw",
|
|
452
|
+
height: "100vh",
|
|
453
|
+
transform: "none",
|
|
454
|
+
zoom: 1,
|
|
455
|
+
// ✅ игнорирует масштаб родителя
|
|
456
|
+
scale: "1 !important"
|
|
457
|
+
// ✅ на случай если transform тянется сверху
|
|
444
458
|
},
|
|
445
459
|
children: /* @__PURE__ */ n(
|
|
446
460
|
"div",
|
|
447
461
|
{
|
|
448
|
-
ref:
|
|
462
|
+
ref: u,
|
|
449
463
|
style: {
|
|
450
464
|
width: f ? "100%" : `${B}px`,
|
|
451
465
|
height: f ? "100%" : `${B}px`,
|
|
@@ -458,16 +472,16 @@ function Be({
|
|
|
458
472
|
justifyContent: "center",
|
|
459
473
|
alignItems: "center"
|
|
460
474
|
},
|
|
461
|
-
children: /* @__PURE__ */
|
|
475
|
+
children: /* @__PURE__ */ d(
|
|
462
476
|
"div",
|
|
463
477
|
{
|
|
464
478
|
id: "whats-missing-root",
|
|
465
479
|
style: {
|
|
466
|
-
transform: `scale(${
|
|
480
|
+
transform: `scale(${Y})`,
|
|
467
481
|
transformOrigin: "center center",
|
|
468
482
|
transition: "transform 0.2s ease-out",
|
|
469
|
-
width: `${100 /
|
|
470
|
-
height: `${100 /
|
|
483
|
+
width: `${100 / Y}%`,
|
|
484
|
+
height: `${100 / Y}%`,
|
|
471
485
|
display: "flex",
|
|
472
486
|
flexDirection: "column",
|
|
473
487
|
justifyContent: "center",
|
|
@@ -475,67 +489,67 @@ function Be({
|
|
|
475
489
|
},
|
|
476
490
|
children: [
|
|
477
491
|
!f && we,
|
|
478
|
-
!w && !x && /* @__PURE__ */
|
|
492
|
+
!w && !x && /* @__PURE__ */ d("div", { style: t.gmCenterScreen, children: [
|
|
479
493
|
/* @__PURE__ */ n("h1", { style: t.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
480
494
|
/* @__PURE__ */ n("p", { style: t.gmBodyM, children: "Select a theme:" }),
|
|
481
495
|
/* @__PURE__ */ n("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ n("button", { style: t.gmButton, onClick: () => S(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
|
|
482
|
-
/* @__PURE__ */
|
|
496
|
+
/* @__PURE__ */ d("div", { style: { marginTop: 24 }, children: [
|
|
483
497
|
/* @__PURE__ */ n("p", { style: t.gmBodyS, children: "Choose number of rounds:" }),
|
|
484
498
|
/* @__PURE__ */ n("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ n(
|
|
485
499
|
"button",
|
|
486
500
|
{
|
|
487
501
|
style: {
|
|
488
502
|
...t.gmButton,
|
|
489
|
-
...
|
|
503
|
+
...a === e ? t.gmButtonActive : {}
|
|
490
504
|
},
|
|
491
|
-
onClick: () =>
|
|
505
|
+
onClick: () => z(e),
|
|
492
506
|
children: e
|
|
493
507
|
},
|
|
494
508
|
e
|
|
495
509
|
)) })
|
|
496
510
|
] })
|
|
497
511
|
] }),
|
|
498
|
-
w && !x && /* @__PURE__ */
|
|
499
|
-
/* @__PURE__ */
|
|
512
|
+
w && !x && /* @__PURE__ */ d("div", { style: t.gmCenterScreen, children: [
|
|
513
|
+
/* @__PURE__ */ d("h1", { style: t.gmHeadline1, children: [
|
|
500
514
|
"Theme selected: ",
|
|
501
515
|
w
|
|
502
516
|
] }),
|
|
503
|
-
/* @__PURE__ */
|
|
517
|
+
/* @__PURE__ */ d("p", { style: t.gmBodyM, children: [
|
|
504
518
|
"Rounds: ",
|
|
505
|
-
|
|
519
|
+
a
|
|
506
520
|
] }),
|
|
507
521
|
/* @__PURE__ */ n("button", { style: t.gmButton, onClick: oe, children: "▶ Start game" })
|
|
508
522
|
] }),
|
|
509
|
-
A && /* @__PURE__ */
|
|
523
|
+
A && /* @__PURE__ */ d("div", { style: t.gmCenterScreen, children: [
|
|
510
524
|
/* @__PURE__ */ n("h1", { style: t.gmHeadline1, children: "Results" }),
|
|
511
|
-
/* @__PURE__ */
|
|
525
|
+
/* @__PURE__ */ d("h2", { style: t.gmHeadline3, children: [
|
|
512
526
|
"Your score: ",
|
|
513
527
|
me,
|
|
514
528
|
" / ",
|
|
515
|
-
|
|
529
|
+
a
|
|
516
530
|
] }),
|
|
517
531
|
/* @__PURE__ */ n("p", { style: { ...t.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
|
|
518
|
-
/* @__PURE__ */
|
|
519
|
-
/* @__PURE__ */ n("thead", { children: /* @__PURE__ */
|
|
532
|
+
/* @__PURE__ */ d("table", { style: t.gmTable, children: [
|
|
533
|
+
/* @__PURE__ */ n("thead", { children: /* @__PURE__ */ d("tr", { children: [
|
|
520
534
|
/* @__PURE__ */ n("th", { children: "Round" }),
|
|
521
535
|
/* @__PURE__ */ n("th", { children: "Your Answer" }),
|
|
522
536
|
/* @__PURE__ */ n("th", { children: "Correct" }),
|
|
523
537
|
/* @__PURE__ */ n("th", { children: "Result" })
|
|
524
538
|
] }) }),
|
|
525
|
-
/* @__PURE__ */ n("tbody", { children: ue.map((e, o) => /* @__PURE__ */
|
|
539
|
+
/* @__PURE__ */ n("tbody", { children: ue.map((e, o) => /* @__PURE__ */ d("tr", { children: [
|
|
526
540
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.round }),
|
|
527
541
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.answer || "—" }),
|
|
528
542
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.correct }),
|
|
529
543
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
|
|
530
544
|
] }, o)) })
|
|
531
545
|
] }),
|
|
532
|
-
/* @__PURE__ */
|
|
546
|
+
/* @__PURE__ */ d("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
533
547
|
/* @__PURE__ */ n("button", { style: t.gmButton, onClick: oe, children: "🔁 Play again" }),
|
|
534
548
|
/* @__PURE__ */ n("button", { style: t.gmButton, onClick: ye, children: "⬅️ Choose theme" })
|
|
535
549
|
] })
|
|
536
550
|
] }),
|
|
537
|
-
x && !A && /* @__PURE__ */
|
|
538
|
-
/* @__PURE__ */
|
|
551
|
+
x && !A && /* @__PURE__ */ d("div", { style: t.gmGameLayout, children: [
|
|
552
|
+
/* @__PURE__ */ d(
|
|
539
553
|
"div",
|
|
540
554
|
{
|
|
541
555
|
style: {
|
|
@@ -546,18 +560,18 @@ function Be({
|
|
|
546
560
|
alignItems: "center"
|
|
547
561
|
},
|
|
548
562
|
children: [
|
|
549
|
-
v === "ready" && /* @__PURE__ */
|
|
563
|
+
v === "ready" && /* @__PURE__ */ d(be, { children: [
|
|
550
564
|
/* @__PURE__ */ n("h1", { style: { ...t.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
|
|
551
565
|
/* @__PURE__ */ n("div", { style: t.gmHourglass, children: "⏳" })
|
|
552
566
|
] }),
|
|
553
|
-
v === "memorize" && /* @__PURE__ */
|
|
567
|
+
v === "memorize" && /* @__PURE__ */ d("p", { style: { ...t.gmBodyM, color: "#10b981" }, children: [
|
|
554
568
|
"MEMORIZE (",
|
|
555
|
-
|
|
569
|
+
j,
|
|
556
570
|
")"
|
|
557
571
|
] }),
|
|
558
|
-
v === "guess" && !R && /* @__PURE__ */
|
|
572
|
+
v === "guess" && !R && /* @__PURE__ */ d("p", { style: t.gmBodyM, children: [
|
|
559
573
|
"⏳ Time left: ",
|
|
560
|
-
|
|
574
|
+
$,
|
|
561
575
|
"s"
|
|
562
576
|
] })
|
|
563
577
|
]
|
|
@@ -582,7 +596,7 @@ function Be({
|
|
|
582
596
|
boxSizing: "border-box"
|
|
583
597
|
},
|
|
584
598
|
children: b.map((e, o) => {
|
|
585
|
-
const
|
|
599
|
+
const g = y === o && v === "guess" && !R;
|
|
586
600
|
return /* @__PURE__ */ n(
|
|
587
601
|
"div",
|
|
588
602
|
{
|
|
@@ -593,7 +607,7 @@ function Be({
|
|
|
593
607
|
...ee === "correct" && y === o ? t.gmCorrect : {},
|
|
594
608
|
...ee === "wrong" && y === o ? t.gmWrong : {}
|
|
595
609
|
},
|
|
596
|
-
children: !
|
|
610
|
+
children: !g && /* @__PURE__ */ n(
|
|
597
611
|
"img",
|
|
598
612
|
{
|
|
599
613
|
src: e.src,
|
|
@@ -612,14 +626,14 @@ function Be({
|
|
|
612
626
|
})
|
|
613
627
|
}
|
|
614
628
|
),
|
|
615
|
-
/* @__PURE__ */
|
|
616
|
-
v === "guess" && !R && /* @__PURE__ */
|
|
629
|
+
/* @__PURE__ */ d("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
630
|
+
v === "guess" && !R && /* @__PURE__ */ d("div", { children: [
|
|
617
631
|
/* @__PURE__ */ n(
|
|
618
632
|
"input",
|
|
619
633
|
{
|
|
620
634
|
type: "text",
|
|
621
635
|
placeholder: "Type the missing word",
|
|
622
|
-
value:
|
|
636
|
+
value: E,
|
|
623
637
|
onChange: (e) => Q(e.target.value),
|
|
624
638
|
style: t.gmInput
|
|
625
639
|
}
|
|
@@ -629,8 +643,8 @@ function Be({
|
|
|
629
643
|
{
|
|
630
644
|
style: { ...t.gmButton, marginLeft: 8 },
|
|
631
645
|
onClick: fe,
|
|
632
|
-
disabled:
|
|
633
|
-
children:
|
|
646
|
+
disabled: O,
|
|
647
|
+
children: O ? "..." : "Check"
|
|
634
648
|
}
|
|
635
649
|
)
|
|
636
650
|
] }),
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -3,6 +3,30 @@ import { themes } from "./themes";
|
|
|
3
3
|
import { styles } from "./Game.styles";
|
|
4
4
|
import type { Theme } from "./themes";
|
|
5
5
|
|
|
6
|
+
// ✅ глобальная нейтрализация зума с безопасным откатом
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const b = document.body;
|
|
9
|
+
const h = document.documentElement;
|
|
10
|
+
|
|
11
|
+
const oldBodyZoom = b.style.zoom;
|
|
12
|
+
const oldBodyTransform = b.style.transform;
|
|
13
|
+
const oldHtmlZoom = h.style.zoom;
|
|
14
|
+
const oldHtmlTransform = h.style.transform;
|
|
15
|
+
|
|
16
|
+
b.style.zoom = "1";
|
|
17
|
+
b.style.transform = "none";
|
|
18
|
+
h.style.zoom = "1";
|
|
19
|
+
h.style.transform = "none";
|
|
20
|
+
console.log("Zoom and transform neutralized globally.");
|
|
21
|
+
|
|
22
|
+
return () => {
|
|
23
|
+
b.style.zoom = oldBodyZoom;
|
|
24
|
+
b.style.transform = oldBodyTransform;
|
|
25
|
+
h.style.zoom = oldHtmlZoom;
|
|
26
|
+
h.style.transform = oldHtmlTransform;
|
|
27
|
+
};
|
|
28
|
+
}, []);
|
|
29
|
+
|
|
6
30
|
type ImageItem = { src: string; name: string };
|
|
7
31
|
type RoundResult = {
|
|
8
32
|
round: number;
|
|
@@ -392,6 +416,11 @@ export default function Game({
|
|
|
392
416
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
393
417
|
overflow: "hidden",
|
|
394
418
|
zIndex: 1,
|
|
419
|
+
width: "100vw",
|
|
420
|
+
height: "100vh",
|
|
421
|
+
transform: "none",
|
|
422
|
+
zoom: 1, // ✅ игнорирует масштаб родителя
|
|
423
|
+
scale: "1 !important", // ✅ на случай если transform тянется сверху
|
|
395
424
|
}}
|
|
396
425
|
>
|
|
397
426
|
<div
|