@mblinkov/whats-missing 20.0.38 → 20.0.40
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 +41 -5
- package/dist/whats-missing.es.js +338 -320
- package/package.json +1 -1
- package/src/Game.tsx +102 -72
|
@@ -1,9 +1,45 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),fe=require("react-dom"),pe=window.origin+"/cloud/speakid/games/whatsmissing/",P=(c,h)=>c.map(([r,i])=>({src:`${pe}${h}/${i.replace(/\s/g,"%20")}.png`,name:i})),ye=[["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"]],xe=[["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"]],we=[["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"]],Y={food:P(ye,"food"),animals:P(xe,"animals"),toys:P(we,"toys")},be=`
|
|
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
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
`,document.head.appendChild(l)},je=(l,m)=>{const r=Array.from({length:l.length+1},()=>Array(m.length+1).fill(0));for(let i=0;i<=l.length;i++)r[i][0]=i;for(let i=0;i<=m.length;i++)r[0][i]=i;for(let i=1;i<=l.length;i++)for(let g=1;g<=m.length;g++)r[i][g]=l[i-1]===m[g-1]?r[i-1][g-1]:Math.min(r[i-1][g-1],r[i][g-1],r[i-1][g])+1;return r[l.length][m.length]};function ve(l,m={minDesktopWidth:1200,forceResize:!1}){const r=s.useRef(null),i=m.minDesktopWidth??1200,g=!!m.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!l||!l.current)return;const c=l.current,T=()=>{try{const a=document.body,j=getComputedStyle(a),b=parseFloat(a.style&&a.style.zoom||"");if(b&&!isNaN(b)&&b>0)return b;const S=parseFloat(j.zoom||"");if(S&&!isNaN(S)&&S>0)return S;const h=document.createElement("div");h.style.position="absolute",h.style.left="0",h.style.top="0",h.style.width="100px",h.style.height="1px",h.style.visibility="hidden",document.documentElement.appendChild(h);const C=h.getBoundingClientRect();if(document.documentElement.removeChild(h),C&&C.width>0){const p=C.width/100;if(!isNaN(p)&&p>0)return p}}catch{}return 1},H=()=>{if(i&&window.innerWidth<i){y();return}const a=T();if(!a||a===1){y();return}r.current||(r.current={transform:c.style.transform||null,transformOrigin:c.style.transformOrigin||null,width:c.style.width||null,height:c.style.height||null,willChange:c.style.willChange||null});const j=1/a;g&&(c.style.width=`${a*100}%`,c.style.height=`${a*100}%`),c.style.transformOrigin="50% 50%",c.style.transform=`scale(${j})`,c.style.willChange="transform"},y=()=>{if(!r.current)return;const a=r.current;c.style.transform=a.transform??"",c.style.transformOrigin=a.transformOrigin??"",c.style.width=a.width??"",c.style.height=a.height??"",c.style.willChange=a.willChange??"",r.current=null};let z=0;const x=()=>{cancelAnimationFrame(z),z=requestAnimationFrame(H)},R=new MutationObserver(a=>{for(const j of a)if(j.type==="attributes"&&(j.attributeName==="style"||j.attributeName==="class")){x();break}});return R.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",x),x(),()=>{cancelAnimationFrame(z),R.disconnect(),window.removeEventListener("resize",x),y()}},[l,i,g])}function Se({gameCubeSize:l,screenHeight:m,screenWidth:r}){const i=s.useRef(null),g=s.useRef(null),[c,T]=s.useState(null);ve(i,{minDesktopWidth:1024,forceResize:!1}),s.useLayoutEffect(()=>{const e=i.current;if(!e)return;const n=e.style;n.position="fixed",n.top="0",n.left="0",n.width="100vw",n.height="100vh",n.zIndex="100",n.background="linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",n.overflow="hidden",n.margin="0",n.padding="0",n.setProperty("transform","none","important"),n.setProperty("zoom","1","important")},[]),s.useEffect(()=>{const e=document.body,n=document.documentElement,d=e.style.zoom,u=e.style.transform,v=n.style.zoom,I=n.style.transform;return e.style.zoom="1",e.style.transform="none",n.style.zoom="1",n.style.transform="none",()=>{e.style.zoom=d,e.style.transform=u,n.style.zoom=v,n.style.transform=I}},[]);const H=s.useMemo(()=>{const e=l??Math.min(r??1e3,m??1e3),n=r??(typeof window<"u"?window.innerWidth:1e3);return e<600&&n>768?600:n<=768?Math.min(e,n-20):e},[l,r,m]);s.useEffect(()=>(we(),()=>{document.body.style.overflow=""}),[]);const[y,z]=s.useState(null),[x,R]=s.useState([]),[a,j]=s.useState(4),[b,S]=s.useState(!1),[h,C]=s.useState(1),[p,ie]=s.useState(null),[w,B]=s.useState("ready"),[Z,U]=s.useState(3),[A,W]=s.useState(10),[F,V]=s.useState(20),[re,G]=s.useState(0),[E,$]=s.useState(!1),[L,_]=s.useState(""),[k,N]=s.useState(!1),[O,K]=s.useState(!1),[J,M]=s.useState(null),[le,D]=s.useState([]),[ae,Q]=s.useState([]),[f,de]=s.useState(!1);s.useEffect(()=>{if(typeof window>"u")return;const e=()=>{const n=r??window.innerWidth,d=window.matchMedia&&window.matchMedia("(pointer: coarse)").matches;de(n<=768||d)};return e(),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}},[r]),s.useLayoutEffect(()=>{const e=g.current;if(!e||typeof window>"u")return;let n=null;try{n=new ResizeObserver(d=>{for(const u of d){const v=u.contentRect;T(Math.round(Math.min(v.width,v.height)))}}),n.observe(e),T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}catch{T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}return()=>n?.disconnect()},[f]);const X=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!y)return;const e=X(Y[y]);R(e),S(!0),$(!1),C(1),G(0),D([]),Q([]),te(e,[],!0)},te=(e=x,n=ae,d=!1)=>{const u=X(e.length?e:Y[y]);let v=Math.floor(Math.random()*u.length),I=u[v].name,se=0;for(;n.includes(I)&&se<20;)v=Math.floor(Math.random()*u.length),I=u[v].name,se++;R(u),ie(v),Q([...n,I]),N(!1),_(""),V(20),M(null),d?(B("ready"),U(3),W(10)):(B("memorize"),W(10))};s.useEffect(()=>{if(!(!b||E||k)){if(w==="ready")if(Z<=0)B("memorize");else{const e=setTimeout(()=>U(n=>n-1),1e3);return()=>clearTimeout(e)}if(w==="memorize")if(A<=0)B("guess");else{const e=setTimeout(()=>W(n=>n-1),1e3);return()=>clearTimeout(e)}if(w==="guess"){if(F<=0){N(!0),M("wrong");const n=x[p].name;D(d=>[...d,{round:h,answer:L,correct:n,result:"wrong"}]);return}const e=setTimeout(()=>V(n=>n-1),1e3);return()=>clearTimeout(e)}}},[w,Z,A,F,b,E,k,x,p,h,L]);const ce=()=>{if(p===null||O)return;const e=x[p].name,n=L.toLowerCase().trim();let d="wrong";n===e?(G(u=>u+1),M("correct"),d="correct"):je(n,e)===1?(G(u=>u+.5),M("almost"),d="almost"):(M("wrong"),d="wrong"),D(u=>[...u,{round:h,answer:n,correct:e,result:d}]),K(!0),setTimeout(()=>{K(!1),N(!0)},600)},me=()=>h<a?(C(e=>e+1),te()):$(!0),ue=()=>{S(!1),$(!1),z(null)},ge=s.useMemo(()=>t.jsx("div",{style:{...o.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:t.jsxs("picture",{children:[t.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),t.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:o.gmLogoImg,loading:"lazy"})]})}),[]),ne=1200,oe=700,q=s.useMemo(()=>{const e=r??(typeof window<"u"?window.innerWidth:ne),n=m??(typeof window<"u"?window.innerHeight:oe),d=Math.min(e/ne,n/oe);return Math.min(1.35,Math.max(1,d))},[r,m,f]);return t.jsx("div",{ref:i,style:{position:"fixed",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",overflow:"hidden",zIndex:1,width:"100vw",height:"100vh",transform:"none",zoom:1,scale:"1 !important"},children:t.jsx("div",{ref:g,style:{width:f?"100%":`${H}px`,height:f?"100%":`${H}px`,borderRadius:f?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",position:"relative",overflow:"hidden",boxShadow:f?"none":"0 0 40px rgba(0,0,0,0.08)",display:"flex",justifyContent:"center",alignItems:"center"},children:t.jsxs("div",{id:"whats-missing-root",style:{transform:`scale(${q})`,transformOrigin:"center center",transition:"transform 0.2s ease-out",width:`${100/q}%`,height:`${100/q}%`,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!f&&ge,!y&&!b&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"WHAT'S MISSING?"}),t.jsx("p",{style:o.gmBodyM,children:"Select a theme:"}),t.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(e=>t.jsx("button",{style:o.gmButton,onClick:()=>z(e),children:e==="animals"?"🐶 Animals":e==="food"?"🍎 Food":"🧸 Toys"},e))}),t.jsxs("div",{style:{marginTop:24},children:[t.jsx("p",{style:o.gmBodyS,children:"Choose number of rounds:"}),t.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(e=>t.jsx("button",{style:{...o.gmButton,...a===e?o.gmButtonActive:{}},onClick:()=>j(e),children:e},e))})]})]}),y&&!b&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsxs("h1",{style:o.gmHeadline1,children:["Theme selected: ",y]}),t.jsxs("p",{style:o.gmBodyM,children:["Rounds: ",a]}),t.jsx("button",{style:o.gmButton,onClick:ee,children:"▶ Start game"})]}),E&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"Results"}),t.jsxs("h2",{style:o.gmHeadline3,children:["Your score: ",re," / ",a]}),t.jsx("p",{style:{...o.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),t.jsxs("table",{style:o.gmTable,children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Round"}),t.jsx("th",{children:"Your Answer"}),t.jsx("th",{children:"Correct"}),t.jsx("th",{children:"Result"})]})}),t.jsx("tbody",{children:le.map((e,n)=>t.jsxs("tr",{children:[t.jsx("td",{style:o.gmTableCell,children:e.round}),t.jsx("td",{style:o.gmTableCell,children:e.answer||"—"}),t.jsx("td",{style:o.gmTableCell,children:e.correct}),t.jsx("td",{style:o.gmTableCell,children:e.result==="correct"?"✔ Correct":e.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},n))})]}),t.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[t.jsx("button",{style:o.gmButton,onClick:ee,children:"🔁 Play again"}),t.jsx("button",{style:o.gmButton,onClick:ue,children:"⬅️ Choose theme"})]})]}),b&&!E&&t.jsxs("div",{style:o.gmGameLayout,children:[t.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[w==="ready"&&t.jsxs(t.Fragment,{children:[t.jsx("h1",{style:{...o.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),t.jsx("div",{style:o.gmHourglass,children:"⏳"})]}),w==="memorize"&&t.jsxs("p",{style:{...o.gmBodyM,color:"#10b981"},children:["MEMORIZE (",A,")"]}),w==="guess"&&!k&&t.jsxs("p",{style:o.gmBodyM,children:["⏳ Time left: ",F,"s"]})]}),w!=="ready"&&t.jsx("div",{style:{...o.gmGrid,display:"grid",gridTemplateColumns:`repeat(${f?2:3}, 1fr)`,gridTemplateRows:`repeat(${f?3:2}, 1fr)`,gap:f?12:20,justifyContent:"center",alignContent:"center",padding:f?8:16,width:"100%",height:"100%",maxWidth:f?"100%":600,maxHeight:f?"100%":400,boxSizing:"border-box"},children:x.map((e,n)=>{const d=p===n&&w==="guess"&&!k;return t.jsx("div",{style:{...o.gmCard,width:"100%",height:"100%",...J==="correct"&&p===n?o.gmCorrect:{},...J==="wrong"&&p===n?o.gmWrong:{}},children:!d&&t.jsx("img",{src:e.src,alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},n)})}),t.jsxs("div",{style:{marginTop:16,height:80},children:[w==="guess"&&!k&&t.jsxs("div",{children:[t.jsx("input",{type:"text",placeholder:"Type the missing word",value:L,onChange:e=>_(e.target.value),style:o.gmInput}),t.jsx("button",{style:{...o.gmButton,marginLeft:8},onClick:ce,disabled:O,children:O?"...":"Check"})]}),k&&t.jsx("button",{type:"button",style:o.gmButton,onClick:me,children:"Next round"})]})]})]})})})}exports.Game=Se;exports.themes=Y;
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const c=document.createElement("style");c.id="spin-keyframes",c.innerHTML=be,document.head.appendChild(c)}const je={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",...je}},ve=(c,h)=>{const r=Array.from({length:c.length+1},()=>Array(h.length+1).fill(0));for(let i=0;i<=c.length;i++)r[i][0]=i;for(let i=0;i<=h.length;i++)r[0][i]=i;for(let i=1;i<=c.length;i++)for(let m=1;m<=h.length;m++)r[i][m]=c[i-1]===h[m-1]?r[i-1][m-1]:Math.min(r[i-1][m-1],r[i][m-1],r[i-1][m])+1;return r[c.length][h.length]};function Se(c,h={minDesktopWidth:1200,forceResize:!1}){const r=s.useRef(null),i=h.minDesktopWidth??1200,m=!!h.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!c||!c.current)return;const u=c.current,T=()=>{try{const a=document.body,j=getComputedStyle(a),w=parseFloat(a.style&&a.style.zoom||"");if(w&&!isNaN(w)&&w>0)return w;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 z=g.getBoundingClientRect();if(document.documentElement.removeChild(g),z&&z.width>0){const p=z.width/100;if(!isNaN(p)&&p>0)return p}}catch{}return 1},E=()=>{if(i&&window.innerWidth<i){y();return}const a=T();if(!a||a===1){y();return}r.current||(r.current={transform:u.style.transform||null,transformOrigin:u.style.transformOrigin||null,width:u.style.width||null,height:u.style.height||null,willChange:u.style.willChange||null});const j=1/a;m&&(u.style.width=`${a*100}%`,u.style.height=`${a*100}%`),u.style.transformOrigin="50% 50%",u.style.transform=`scale(${j})`,u.style.willChange="transform"},y=()=>{if(!r.current)return;const a=r.current;u.style.transform=a.transform??"",u.style.transformOrigin=a.transformOrigin??"",u.style.width=a.width??"",u.style.height=a.height??"",u.style.willChange=a.willChange??"",r.current=null};let C=0;const x=()=>{cancelAnimationFrame(C),C=requestAnimationFrame(E)},R=new MutationObserver(a=>{for(const j of a)if(j.type==="attributes"&&(j.attributeName==="style"||j.attributeName==="class")){x();break}});return R.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",x),x(),()=>{cancelAnimationFrame(C),R.disconnect(),window.removeEventListener("resize",x),y()}},[c,i,m])}function Ce({gameCubeSize:c,screenHeight:h,screenWidth:r}){const i=s.useRef(null),m=s.useRef(null),[u,T]=s.useState(null);Se(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 l=document.createElement("style");l.textContent=`
|
|
7
|
+
:host {
|
|
8
|
+
position: fixed !important;
|
|
9
|
+
top: 0 !important;
|
|
10
|
+
left: 0 !important;
|
|
11
|
+
width: 100vw !important;
|
|
12
|
+
height: 100vh !important;
|
|
13
|
+
z-index: 100 !important;
|
|
14
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%) !important;
|
|
15
|
+
overflow: hidden !important;
|
|
16
|
+
margin: 0 !important;
|
|
17
|
+
padding: 0 !important;
|
|
18
|
+
transform: none !important;
|
|
19
|
+
zoom: 1 !important;
|
|
20
|
+
scale: 1 !important;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
#whats-missing-root, #whats-missing-root * {
|
|
24
|
+
box-sizing: border-box !important;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
#whats-missing-root img {
|
|
28
|
+
max-width: 100% !important;
|
|
29
|
+
height: auto !important;
|
|
30
|
+
display: block !important;
|
|
31
|
+
user-select: none !important;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
#whats-missing-root {
|
|
35
|
+
position: relative !important;
|
|
36
|
+
width: 100% !important;
|
|
37
|
+
height: 100% !important;
|
|
38
|
+
display: flex !important;
|
|
39
|
+
justify-content: center !important;
|
|
40
|
+
align-items: center !important;
|
|
41
|
+
transform: none !important;
|
|
42
|
+
zoom: 1 !important;
|
|
43
|
+
scale: 1 !important;
|
|
44
|
+
}
|
|
45
|
+
`;const d=document.createElement("div");d.id="whats-missing-root",n.appendChild(l),n.appendChild(d),m.current!==d&&(m.current=d)},[]),s.useEffect(()=>{const e=document.body,n=document.documentElement,l=e.style.zoom,d=e.style.transform,v=n.style.zoom,H=n.style.transform;return e.style.zoom="1",e.style.transform="none",n.style.zoom="1",n.style.transform="none",()=>{e.style.zoom=l,e.style.transform=d,n.style.zoom=v,n.style.transform=H}},[]);const E=s.useMemo(()=>{const e=c??Math.min(r??1e3,h??1e3),n=r??(typeof window<"u"?window.innerWidth:1e3);return e<600&&n>768?600:n<=768?Math.min(e,n-20):e},[c,r,h]);s.useEffect(()=>()=>{document.body.style.overflow=""},[]);const[y,C]=s.useState(null),[x,R]=s.useState([]),[a,j]=s.useState(4),[w,S]=s.useState(!1),[g,z]=s.useState(1),[p,re]=s.useState(null),[b,I]=s.useState("ready"),[Z,U]=s.useState(3),[A,W]=s.useState(10),[F,V]=s.useState(20),[ae,G]=s.useState(0),[B,$]=s.useState(!1),[L,_]=s.useState(""),[k,N]=s.useState(!1),[D,K]=s.useState(!1),[J,M]=s.useState(null),[le,O]=s.useState([]),[de,Q]=s.useState([]),[f,ce]=s.useState(!1);s.useEffect(()=>{if(typeof window>"u")return;const e=()=>{const n=r??window.innerWidth,l=window.matchMedia&&window.matchMedia("(pointer: coarse)").matches;ce(n<=768||l)};return e(),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}},[r]),s.useLayoutEffect(()=>{const e=m.current;if(!e||typeof window>"u")return;let n=null;try{n=new ResizeObserver(l=>{for(const d of l){const v=d.contentRect;T(Math.round(Math.min(v.width,v.height)))}}),n.observe(e),T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}catch{T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}return()=>n?.disconnect()},[f]);const X=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!y)return;const e=X(Y[y]);R(e),S(!0),$(!1),z(1),G(0),O([]),Q([]),te(e,[],!0)},te=(e=x,n=de,l=!1)=>{const d=X(e.length?e:Y[y]);let v=Math.floor(Math.random()*d.length),H=d[v].name,ie=0;for(;n.includes(H)&&ie<20;)v=Math.floor(Math.random()*d.length),H=d[v].name,ie++;R(d),re(v),Q([...n,H]),N(!1),_(""),V(20),M(null),l?(I("ready"),U(3),W(10)):(I("memorize"),W(10))};s.useEffect(()=>{if(!(!w||B||k)){if(b==="ready")if(Z<=0)I("memorize");else{const e=setTimeout(()=>U(n=>n-1),1e3);return()=>clearTimeout(e)}if(b==="memorize")if(A<=0)I("guess");else{const e=setTimeout(()=>W(n=>n-1),1e3);return()=>clearTimeout(e)}if(b==="guess"){if(F<=0){N(!0),M("wrong");const n=x[p].name;O(l=>[...l,{round:g,answer:L,correct:n,result:"wrong"}]);return}const e=setTimeout(()=>V(n=>n-1),1e3);return()=>clearTimeout(e)}}},[b,Z,A,F,w,B,k,x,p,g,L]);const me=()=>{if(p===null||D)return;const e=x[p].name,n=L.toLowerCase().trim();let l="wrong";n===e?(G(d=>d+1),M("correct"),l="correct"):ve(n,e)===1?(G(d=>d+.5),M("almost"),l="almost"):(M("wrong"),l="wrong"),O(d=>[...d,{round:g,answer:n,correct:e,result:l}]),K(!0),setTimeout(()=>{K(!1),N(!0)},600)},ue=()=>g<a?(z(e=>e+1),te()):$(!0),he=()=>{S(!1),$(!1),C(null)},ge=s.useMemo(()=>t.jsx("div",{style:{...o.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:t.jsxs("picture",{children:[t.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),t.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:o.gmLogoImg,loading:"lazy"})]})}),[]),ne=1200,oe=700,q=s.useMemo(()=>{const e=r??(typeof window<"u"?window.innerWidth:ne),n=h??(typeof window<"u"?window.innerHeight:oe),l=Math.min(e/ne,n/oe);return Math.min(1.35,Math.max(1,l))},[r,h,f]),se=m.current;return t.jsx("div",{ref:i,children:se&&fe.createPortal(t.jsx("div",{ref:m,style:{width:f?"100%":`${E}px`,height:f?"100%":`${E}px`,borderRadius:f?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",position:"relative",overflow:"hidden",boxShadow:f?"none":"0 0 40px rgba(0,0,0,0.08)",display:"flex",justifyContent:"center",alignItems:"center"},children:t.jsxs("div",{id:"whats-missing-root",style:{transform:`scale(${q})`,transformOrigin:"center center",transition:"transform 0.2s ease-out",width:`${100/q}%`,height:`${100/q}%`,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!f&&ge,!y&&!w&&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:()=>C(e),children:e==="animals"?"🐶 Animals":e==="food"?"🍎 Food":"🧸 Toys"},e))}),t.jsxs("div",{style:{marginTop:24},children:[t.jsx("p",{style:o.gmBodyS,children:"Choose number of rounds:"}),t.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(e=>t.jsx("button",{style:{...o.gmButton,...a===e?o.gmButtonActive:{}},onClick:()=>j(e),children:e},e))})]})]}),y&&!w&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsxs("h1",{style:o.gmHeadline1,children:["Theme selected: ",y]}),t.jsxs("p",{style:o.gmBodyM,children:["Rounds: ",a]}),t.jsx("button",{style:o.gmButton,onClick:ee,children:"▶ Start game"})]}),B&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"Results"}),t.jsxs("h2",{style:o.gmHeadline3,children:["Your score: ",ae," / ",a]}),t.jsx("p",{style:{...o.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),t.jsxs("table",{style:o.gmTable,children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Round"}),t.jsx("th",{children:"Your Answer"}),t.jsx("th",{children:"Correct"}),t.jsx("th",{children:"Result"})]})}),t.jsx("tbody",{children:le.map((e,n)=>t.jsxs("tr",{children:[t.jsx("td",{style:o.gmTableCell,children:e.round}),t.jsx("td",{style:o.gmTableCell,children:e.answer||"—"}),t.jsx("td",{style:o.gmTableCell,children:e.correct}),t.jsx("td",{style:o.gmTableCell,children:e.result==="correct"?"✔ Correct":e.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},n))})]}),t.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[t.jsx("button",{style:o.gmButton,onClick:ee,children:"🔁 Play again"}),t.jsx("button",{style:o.gmButton,onClick:he,children:"⬅️ Choose theme"})]})]}),w&&!B&&t.jsxs("div",{style:o.gmGameLayout,children:[t.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[b==="ready"&&t.jsxs(t.Fragment,{children:[t.jsx("h1",{style:{...o.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),t.jsx("div",{style:o.gmHourglass,children:"⏳"})]}),b==="memorize"&&t.jsxs("p",{style:{...o.gmBodyM,color:"#10b981"},children:["MEMORIZE (",A,")"]}),b==="guess"&&!k&&t.jsxs("p",{style:o.gmBodyM,children:["⏳ Time left: ",F,"s"]})]}),b!=="ready"&&t.jsx("div",{style:{...o.gmGrid,display:"grid",gridTemplateColumns:`repeat(${f?2:3}, 1fr)`,gridTemplateRows:`repeat(${f?3:2}, 1fr)`,gap:f?12:20,justifyContent:"center",alignContent:"center",padding:f?8:16,width:"100%",height:"100%",maxWidth:f?"100%":600,maxHeight:f?"100%":400,boxSizing:"border-box"},children:x.map((e,n)=>{const l=p===n&&b==="guess"&&!k;return t.jsx("div",{style:{...o.gmCard,width:"100%",height:"100%",...J==="correct"&&p===n?o.gmCorrect:{},...J==="wrong"&&p===n?o.gmWrong:{}},children:!l&&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:[b==="guess"&&!k&&t.jsxs("div",{children:[t.jsx("input",{type:"text",placeholder:"Type the missing word",value:L,onChange:e=>_(e.target.value),style:o.gmInput}),t.jsx("button",{style:{...o.gmButton,marginLeft:8},onClick:me,disabled:D,children:D?"...":"Check"})]}),k&&t.jsx("button",{type:"button",style:o.gmButton,onClick:ue,children:"Next round"})]})]})]})}),se)})}exports.Game=Ce;exports.themes=Y;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
2
|
-
import { useRef as V, useState as
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { jsx as o, jsxs as d, Fragment as xe } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as V, useState as c, useLayoutEffect as _, useEffect as j, useMemo as Z } from "react";
|
|
3
|
+
import { createPortal as ve } from "react-dom";
|
|
4
|
+
const Ce = window.origin + "/cloud/speakid/games/whatsmissing/", U = (m, g) => m.map(([r, i]) => ({
|
|
5
|
+
src: `${Ce}${g}/${i.replace(/\s/g, "%20")}.png`,
|
|
5
6
|
name: i
|
|
6
|
-
})),
|
|
7
|
+
})), ze = [
|
|
7
8
|
["apple", "apple"],
|
|
8
9
|
["banana", "banana"],
|
|
9
10
|
["bread", "bread"],
|
|
@@ -29,7 +30,7 @@ const xe = window.origin + "/cloud/speakid/games/whatsmissing/", U = (s, u) => s
|
|
|
29
30
|
["strawberry", "strawberry"],
|
|
30
31
|
["tomato", "tomato"],
|
|
31
32
|
["watermelon", "watermelon"]
|
|
32
|
-
],
|
|
33
|
+
], ke = [
|
|
33
34
|
["bear", "bear"],
|
|
34
35
|
["cat", "cat"],
|
|
35
36
|
["crocodile", "crocodile"],
|
|
@@ -49,7 +50,7 @@ const xe = window.origin + "/cloud/speakid/games/whatsmissing/", U = (s, u) => s
|
|
|
49
50
|
["tortoise", "tortoise"],
|
|
50
51
|
["wolf", "wolf"],
|
|
51
52
|
["zebra", "zebra"]
|
|
52
|
-
],
|
|
53
|
+
], Se = [
|
|
53
54
|
["ball", "ball"],
|
|
54
55
|
["balloon", "balloon"],
|
|
55
56
|
["blocks", "blocks"],
|
|
@@ -69,21 +70,21 @@ const xe = window.origin + "/cloud/speakid/games/whatsmissing/", U = (s, u) => s
|
|
|
69
70
|
["teddy_bear", "teddy bear"],
|
|
70
71
|
["yo-yo", "yo-yo"],
|
|
71
72
|
["crayons", "crayons"]
|
|
72
|
-
],
|
|
73
|
-
food: U(
|
|
74
|
-
animals: U(
|
|
75
|
-
toys: U(
|
|
76
|
-
},
|
|
73
|
+
], ce = {
|
|
74
|
+
food: U(ze, "food"),
|
|
75
|
+
animals: U(ke, "animals"),
|
|
76
|
+
toys: U(Se, "toys")
|
|
77
|
+
}, Te = `
|
|
77
78
|
@keyframes spin {
|
|
78
79
|
from { transform: rotate(0deg); }
|
|
79
80
|
to { transform: rotate(360deg); }
|
|
80
81
|
}
|
|
81
82
|
`;
|
|
82
83
|
if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
|
|
83
|
-
const
|
|
84
|
-
|
|
84
|
+
const m = document.createElement("style");
|
|
85
|
+
m.id = "spin-keyframes", m.innerHTML = Te, document.head.appendChild(m);
|
|
85
86
|
}
|
|
86
|
-
const
|
|
87
|
+
const Re = {
|
|
87
88
|
animation: "spin 1.4s linear infinite"
|
|
88
89
|
}, n = {
|
|
89
90
|
gmCenterScreen: {
|
|
@@ -239,37 +240,31 @@ const Se = {
|
|
|
239
240
|
},
|
|
240
241
|
gmHourglass: {
|
|
241
242
|
fontSize: "42px",
|
|
242
|
-
...
|
|
243
|
+
...Re
|
|
243
244
|
}
|
|
244
|
-
},
|
|
245
|
-
const
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
for (let i = 0; i <= s.length; i++) r[i][0] = i;
|
|
253
|
-
for (let i = 0; i <= u.length; i++) r[0][i] = i;
|
|
254
|
-
for (let i = 1; i <= s.length; i++)
|
|
255
|
-
for (let h = 1; h <= u.length; h++)
|
|
256
|
-
r[i][h] = s[i - 1] === u[h - 1] ? r[i - 1][h - 1] : Math.min(r[i - 1][h - 1], r[i][h - 1], r[i - 1][h]) + 1;
|
|
257
|
-
return r[s.length][u.length];
|
|
245
|
+
}, Me = (m, g) => {
|
|
246
|
+
const r = Array.from({ length: m.length + 1 }, () => Array(g.length + 1).fill(0));
|
|
247
|
+
for (let i = 0; i <= m.length; i++) r[i][0] = i;
|
|
248
|
+
for (let i = 0; i <= g.length; i++) r[0][i] = i;
|
|
249
|
+
for (let i = 1; i <= m.length; i++)
|
|
250
|
+
for (let u = 1; u <= g.length; u++)
|
|
251
|
+
r[i][u] = m[i - 1] === g[u - 1] ? r[i - 1][u - 1] : Math.min(r[i - 1][u - 1], r[i][u - 1], r[i - 1][u]) + 1;
|
|
252
|
+
return r[m.length][g.length];
|
|
258
253
|
};
|
|
259
|
-
function
|
|
260
|
-
const r = V(null), i =
|
|
254
|
+
function He(m, g = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
255
|
+
const r = V(null), i = g.minDesktopWidth ?? 1200, u = !!g.forceResize;
|
|
261
256
|
_(() => {
|
|
262
|
-
if (typeof window > "u" || !
|
|
263
|
-
const
|
|
257
|
+
if (typeof window > "u" || !m || !m.current) return;
|
|
258
|
+
const h = m.current, M = () => {
|
|
264
259
|
try {
|
|
265
|
-
const
|
|
260
|
+
const s = document.body, C = getComputedStyle(s), x = parseFloat(s.style && s.style.zoom || "");
|
|
266
261
|
if (x && !isNaN(x) && x > 0) return x;
|
|
267
|
-
const k = parseFloat(
|
|
262
|
+
const k = parseFloat(C.zoom || "");
|
|
268
263
|
if (k && !isNaN(k) && k > 0) return k;
|
|
269
|
-
const
|
|
270
|
-
|
|
271
|
-
const T =
|
|
272
|
-
if (document.documentElement.removeChild(
|
|
264
|
+
const p = document.createElement("div");
|
|
265
|
+
p.style.position = "absolute", p.style.left = "0", p.style.top = "0", p.style.width = "100px", p.style.height = "1px", p.style.visibility = "hidden", document.documentElement.appendChild(p);
|
|
266
|
+
const T = p.getBoundingClientRect();
|
|
267
|
+
if (document.documentElement.removeChild(p), T && T.width > 0) {
|
|
273
268
|
const y = T.width / 100;
|
|
274
269
|
if (!isNaN(y) && y > 0) return y;
|
|
275
270
|
}
|
|
@@ -281,100 +276,143 @@ function Me(s, u = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
281
276
|
w();
|
|
282
277
|
return;
|
|
283
278
|
}
|
|
284
|
-
const
|
|
285
|
-
if (!
|
|
279
|
+
const s = M();
|
|
280
|
+
if (!s || s === 1) {
|
|
286
281
|
w();
|
|
287
282
|
return;
|
|
288
283
|
}
|
|
289
284
|
r.current || (r.current = {
|
|
290
|
-
transform:
|
|
291
|
-
transformOrigin:
|
|
292
|
-
width:
|
|
293
|
-
height:
|
|
294
|
-
willChange:
|
|
285
|
+
transform: h.style.transform || null,
|
|
286
|
+
transformOrigin: h.style.transformOrigin || null,
|
|
287
|
+
width: h.style.width || null,
|
|
288
|
+
height: h.style.height || null,
|
|
289
|
+
willChange: h.style.willChange || null
|
|
295
290
|
});
|
|
296
|
-
const
|
|
297
|
-
|
|
291
|
+
const C = 1 / s;
|
|
292
|
+
u && (h.style.width = `${s * 100}%`, h.style.height = `${s * 100}%`), h.style.transformOrigin = "50% 50%", h.style.transform = `scale(${C})`, h.style.willChange = "transform";
|
|
298
293
|
}, w = () => {
|
|
299
294
|
if (!r.current) return;
|
|
300
|
-
const
|
|
301
|
-
|
|
295
|
+
const s = r.current;
|
|
296
|
+
h.style.transform = s.transform ?? "", h.style.transformOrigin = s.transformOrigin ?? "", h.style.width = s.width ?? "", h.style.height = s.height ?? "", h.style.willChange = s.willChange ?? "", r.current = null;
|
|
302
297
|
};
|
|
303
298
|
let S = 0;
|
|
304
299
|
const b = () => {
|
|
305
300
|
cancelAnimationFrame(S), S = requestAnimationFrame(L);
|
|
306
|
-
},
|
|
307
|
-
for (const
|
|
308
|
-
if (
|
|
301
|
+
}, H = new MutationObserver((s) => {
|
|
302
|
+
for (const C of s)
|
|
303
|
+
if (C.type === "attributes" && (C.attributeName === "style" || C.attributeName === "class")) {
|
|
309
304
|
b();
|
|
310
305
|
break;
|
|
311
306
|
}
|
|
312
307
|
});
|
|
313
|
-
return
|
|
314
|
-
cancelAnimationFrame(S),
|
|
308
|
+
return H.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", b), b(), () => {
|
|
309
|
+
cancelAnimationFrame(S), H.disconnect(), window.removeEventListener("resize", b), w();
|
|
315
310
|
};
|
|
316
|
-
}, [
|
|
311
|
+
}, [m, i, u]);
|
|
317
312
|
}
|
|
318
|
-
function
|
|
319
|
-
gameCubeSize:
|
|
320
|
-
screenHeight:
|
|
313
|
+
function Ae({
|
|
314
|
+
gameCubeSize: m,
|
|
315
|
+
screenHeight: g,
|
|
321
316
|
screenWidth: r
|
|
322
317
|
}) {
|
|
323
|
-
const i = V(null),
|
|
324
|
-
|
|
318
|
+
const i = V(null), u = V(null), [h, M] = c(null);
|
|
319
|
+
He(i, { minDesktopWidth: 1024, forceResize: !1 }), _(() => {
|
|
325
320
|
const e = i.current;
|
|
326
321
|
if (!e) return;
|
|
327
|
-
|
|
328
|
-
t
|
|
322
|
+
let t = e.shadowRoot;
|
|
323
|
+
t || (t = e.attachShadow({ mode: "open" })), t.innerHTML = "";
|
|
324
|
+
const a = document.createElement("style");
|
|
325
|
+
a.textContent = `
|
|
326
|
+
:host {
|
|
327
|
+
position: fixed !important;
|
|
328
|
+
top: 0 !important;
|
|
329
|
+
left: 0 !important;
|
|
330
|
+
width: 100vw !important;
|
|
331
|
+
height: 100vh !important;
|
|
332
|
+
z-index: 100 !important;
|
|
333
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%) !important;
|
|
334
|
+
overflow: hidden !important;
|
|
335
|
+
margin: 0 !important;
|
|
336
|
+
padding: 0 !important;
|
|
337
|
+
transform: none !important;
|
|
338
|
+
zoom: 1 !important;
|
|
339
|
+
scale: 1 !important;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
#whats-missing-root, #whats-missing-root * {
|
|
343
|
+
box-sizing: border-box !important;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
#whats-missing-root img {
|
|
347
|
+
max-width: 100% !important;
|
|
348
|
+
height: auto !important;
|
|
349
|
+
display: block !important;
|
|
350
|
+
user-select: none !important;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
#whats-missing-root {
|
|
354
|
+
position: relative !important;
|
|
355
|
+
width: 100% !important;
|
|
356
|
+
height: 100% !important;
|
|
357
|
+
display: flex !important;
|
|
358
|
+
justify-content: center !important;
|
|
359
|
+
align-items: center !important;
|
|
360
|
+
transform: none !important;
|
|
361
|
+
zoom: 1 !important;
|
|
362
|
+
scale: 1 !important;
|
|
363
|
+
}
|
|
364
|
+
`;
|
|
365
|
+
const l = document.createElement("div");
|
|
366
|
+
l.id = "whats-missing-root", t.appendChild(a), t.appendChild(l), u.current !== l && (u.current = l);
|
|
329
367
|
}, []), j(() => {
|
|
330
|
-
const e = document.body, t = document.documentElement,
|
|
368
|
+
const e = document.body, t = document.documentElement, a = e.style.zoom, l = e.style.transform, z = t.style.zoom, B = t.style.transform;
|
|
331
369
|
return e.style.zoom = "1", e.style.transform = "none", t.style.zoom = "1", t.style.transform = "none", () => {
|
|
332
|
-
e.style.zoom =
|
|
370
|
+
e.style.zoom = a, e.style.transform = l, t.style.zoom = z, t.style.transform = B;
|
|
333
371
|
};
|
|
334
372
|
}, []);
|
|
335
373
|
const L = Z(() => {
|
|
336
|
-
const e =
|
|
374
|
+
const e = m ?? Math.min(r ?? 1e3, g ?? 1e3), t = r ?? (typeof window < "u" ? window.innerWidth : 1e3);
|
|
337
375
|
return e < 600 && t > 768 ? 600 : t <= 768 ? Math.min(e, t - 20) : e;
|
|
338
|
-
}, [
|
|
339
|
-
j(() => (
|
|
376
|
+
}, [m, r, g]);
|
|
377
|
+
j(() => () => {
|
|
340
378
|
document.body.style.overflow = "";
|
|
341
|
-
}
|
|
342
|
-
const [w, S] =
|
|
379
|
+
}, []);
|
|
380
|
+
const [w, S] = c(null), [b, H] = c([]), [s, C] = c(4), [x, k] = c(!1), [p, T] = c(1), [y, me] = c(null), [v, A] = c("ready"), [K, J] = c(3), [F, $] = c(10), [G, Q] = c(20), [ue, N] = c(0), [E, D] = c(!1), [W, X] = c(""), [R, O] = c(!1), [q, ee] = c(!1), [te, I] = c(null), [he, Y] = c([]), [ge, ne] = c([]), [f, pe] = c(!1);
|
|
343
381
|
j(() => {
|
|
344
382
|
if (typeof window > "u") return;
|
|
345
383
|
const e = () => {
|
|
346
|
-
const t = r ?? window.innerWidth,
|
|
347
|
-
|
|
384
|
+
const t = r ?? window.innerWidth, a = window.matchMedia && window.matchMedia("(pointer: coarse)").matches;
|
|
385
|
+
pe(t <= 768 || a);
|
|
348
386
|
};
|
|
349
387
|
return e(), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
|
|
350
388
|
window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
|
|
351
389
|
};
|
|
352
390
|
}, [r]), _(() => {
|
|
353
|
-
const e =
|
|
391
|
+
const e = u.current;
|
|
354
392
|
if (!e || typeof window > "u") return;
|
|
355
393
|
let t = null;
|
|
356
394
|
try {
|
|
357
|
-
t = new ResizeObserver((
|
|
358
|
-
for (const
|
|
359
|
-
const
|
|
360
|
-
M(Math.round(Math.min(
|
|
395
|
+
t = new ResizeObserver((a) => {
|
|
396
|
+
for (const l of a) {
|
|
397
|
+
const z = l.contentRect;
|
|
398
|
+
M(Math.round(Math.min(z.width, z.height)));
|
|
361
399
|
}
|
|
362
400
|
}), t.observe(e), M(Math.round(Math.min(e.clientWidth, e.clientHeight)));
|
|
363
401
|
} catch {
|
|
364
402
|
M(Math.round(Math.min(e.clientWidth, e.clientHeight)));
|
|
365
403
|
}
|
|
366
404
|
return () => t?.disconnect();
|
|
367
|
-
}, [
|
|
405
|
+
}, [f]);
|
|
368
406
|
const oe = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), ie = () => {
|
|
369
407
|
if (!w) return;
|
|
370
|
-
const e = oe(
|
|
371
|
-
|
|
372
|
-
}, re = (e = b, t = ge,
|
|
373
|
-
const
|
|
374
|
-
let
|
|
375
|
-
for (; t.includes(B) &&
|
|
376
|
-
|
|
377
|
-
|
|
408
|
+
const e = oe(ce[w]);
|
|
409
|
+
H(e), k(!0), D(!1), T(1), N(0), Y([]), ne([]), re(e, [], !0);
|
|
410
|
+
}, re = (e = b, t = ge, a = !1) => {
|
|
411
|
+
const l = oe(e.length ? e : ce[w]);
|
|
412
|
+
let z = Math.floor(Math.random() * l.length), B = l[z].name, de = 0;
|
|
413
|
+
for (; t.includes(B) && de < 20; )
|
|
414
|
+
z = Math.floor(Math.random() * l.length), B = l[z].name, de++;
|
|
415
|
+
H(l), me(z), ne([...t, B]), O(!1), X(""), Q(20), I(null), a ? (A("ready"), J(3), $(10)) : (A("memorize"), $(10));
|
|
378
416
|
};
|
|
379
417
|
j(() => {
|
|
380
418
|
if (!(!x || E || R)) {
|
|
@@ -392,11 +430,11 @@ function Be({
|
|
|
392
430
|
}
|
|
393
431
|
if (v === "guess") {
|
|
394
432
|
if (G <= 0) {
|
|
395
|
-
O(!0),
|
|
433
|
+
O(!0), I("wrong");
|
|
396
434
|
const t = b[y].name;
|
|
397
|
-
|
|
398
|
-
...
|
|
399
|
-
{ round:
|
|
435
|
+
Y((a) => [
|
|
436
|
+
...a,
|
|
437
|
+
{ round: p, answer: W, correct: t, result: "wrong" }
|
|
400
438
|
]);
|
|
401
439
|
return;
|
|
402
440
|
}
|
|
@@ -404,18 +442,18 @@ function Be({
|
|
|
404
442
|
return () => clearTimeout(e);
|
|
405
443
|
}
|
|
406
444
|
}
|
|
407
|
-
}, [v, K, F, G, x, E, R, b, y,
|
|
445
|
+
}, [v, K, F, G, x, E, R, b, y, p, W]);
|
|
408
446
|
const fe = () => {
|
|
409
447
|
if (y === null || q) return;
|
|
410
448
|
const e = b[y].name, t = W.toLowerCase().trim();
|
|
411
|
-
let
|
|
412
|
-
t === e ? (N((
|
|
449
|
+
let a = "wrong";
|
|
450
|
+
t === e ? (N((l) => l + 1), I("correct"), a = "correct") : Me(t, e) === 1 ? (N((l) => l + 0.5), I("almost"), a = "almost") : (I("wrong"), a = "wrong"), Y((l) => [...l, { round: p, answer: t, correct: e, result: a }]), ee(!0), setTimeout(() => {
|
|
413
451
|
ee(!1), O(!0);
|
|
414
452
|
}, 600);
|
|
415
|
-
},
|
|
453
|
+
}, ye = () => p < s ? (T((e) => e + 1), re()) : D(!0), we = () => {
|
|
416
454
|
k(!1), D(!1), S(null);
|
|
417
|
-
},
|
|
418
|
-
() => /* @__PURE__ */ o("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */
|
|
455
|
+
}, be = Z(
|
|
456
|
+
() => /* @__PURE__ */ o("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ d("picture", { children: [
|
|
419
457
|
/* @__PURE__ */ o(
|
|
420
458
|
"source",
|
|
421
459
|
{
|
|
@@ -434,235 +472,215 @@ function Be({
|
|
|
434
472
|
)
|
|
435
473
|
] }) }),
|
|
436
474
|
[]
|
|
437
|
-
), se = 1200,
|
|
438
|
-
const e = r ?? (typeof window < "u" ? window.innerWidth : se), t =
|
|
439
|
-
return Math.min(1.35, Math.max(1,
|
|
440
|
-
}, [r,
|
|
441
|
-
return /* @__PURE__ */ o(
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
height: `${100 / Y}%`,
|
|
488
|
-
display: "flex",
|
|
489
|
-
flexDirection: "column",
|
|
490
|
-
justifyContent: "center",
|
|
491
|
-
alignItems: "center"
|
|
492
|
-
},
|
|
493
|
-
children: [
|
|
494
|
-
!p && we,
|
|
495
|
-
!w && !x && /* @__PURE__ */ a("div", { style: n.gmCenterScreen, children: [
|
|
496
|
-
/* @__PURE__ */ o("h1", { style: n.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
497
|
-
/* @__PURE__ */ o("p", { style: n.gmBodyM, children: "Select a theme:" }),
|
|
498
|
-
/* @__PURE__ */ o("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ o("button", { style: n.gmButton, onClick: () => S(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
|
|
499
|
-
/* @__PURE__ */ a("div", { style: { marginTop: 24 }, children: [
|
|
500
|
-
/* @__PURE__ */ o("p", { style: n.gmBodyS, children: "Choose number of rounds:" }),
|
|
501
|
-
/* @__PURE__ */ o("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ o(
|
|
502
|
-
"button",
|
|
503
|
-
{
|
|
504
|
-
style: {
|
|
505
|
-
...n.gmButton,
|
|
506
|
-
...l === e ? n.gmButtonActive : {}
|
|
507
|
-
},
|
|
508
|
-
onClick: () => z(e),
|
|
509
|
-
children: e
|
|
475
|
+
), se = 1200, ae = 700, P = Z(() => {
|
|
476
|
+
const e = r ?? (typeof window < "u" ? window.innerWidth : se), t = g ?? (typeof window < "u" ? window.innerHeight : ae), a = Math.min(e / se, t / ae);
|
|
477
|
+
return Math.min(1.35, Math.max(1, a));
|
|
478
|
+
}, [r, g, f]), le = u.current;
|
|
479
|
+
return /* @__PURE__ */ o("div", { ref: i, children: le && ve(
|
|
480
|
+
/* @__PURE__ */ o(
|
|
481
|
+
"div",
|
|
482
|
+
{
|
|
483
|
+
ref: u,
|
|
484
|
+
style: {
|
|
485
|
+
width: f ? "100%" : `${L}px`,
|
|
486
|
+
height: f ? "100%" : `${L}px`,
|
|
487
|
+
borderRadius: f ? 0 : "20px",
|
|
488
|
+
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
489
|
+
position: "relative",
|
|
490
|
+
overflow: "hidden",
|
|
491
|
+
boxShadow: f ? "none" : "0 0 40px rgba(0,0,0,0.08)",
|
|
492
|
+
display: "flex",
|
|
493
|
+
justifyContent: "center",
|
|
494
|
+
alignItems: "center"
|
|
495
|
+
},
|
|
496
|
+
children: /* @__PURE__ */ d(
|
|
497
|
+
"div",
|
|
498
|
+
{
|
|
499
|
+
id: "whats-missing-root",
|
|
500
|
+
style: {
|
|
501
|
+
transform: `scale(${P})`,
|
|
502
|
+
transformOrigin: "center center",
|
|
503
|
+
transition: "transform 0.2s ease-out",
|
|
504
|
+
width: `${100 / P}%`,
|
|
505
|
+
height: `${100 / P}%`,
|
|
506
|
+
display: "flex",
|
|
507
|
+
flexDirection: "column",
|
|
508
|
+
justifyContent: "center",
|
|
509
|
+
alignItems: "center"
|
|
510
|
+
},
|
|
511
|
+
children: [
|
|
512
|
+
!f && be,
|
|
513
|
+
!w && !x && /* @__PURE__ */ d("div", { style: n.gmCenterScreen, children: [
|
|
514
|
+
/* @__PURE__ */ o("h1", { style: n.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
515
|
+
/* @__PURE__ */ o("p", { style: n.gmBodyM, children: "Select a theme:" }),
|
|
516
|
+
/* @__PURE__ */ o("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ o("button", { style: n.gmButton, onClick: () => S(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
|
|
517
|
+
/* @__PURE__ */ d("div", { style: { marginTop: 24 }, children: [
|
|
518
|
+
/* @__PURE__ */ o("p", { style: n.gmBodyS, children: "Choose number of rounds:" }),
|
|
519
|
+
/* @__PURE__ */ o("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ o(
|
|
520
|
+
"button",
|
|
521
|
+
{
|
|
522
|
+
style: {
|
|
523
|
+
...n.gmButton,
|
|
524
|
+
...s === e ? n.gmButtonActive : {}
|
|
510
525
|
},
|
|
511
|
-
e
|
|
512
|
-
|
|
513
|
-
|
|
526
|
+
onClick: () => C(e),
|
|
527
|
+
children: e
|
|
528
|
+
},
|
|
529
|
+
e
|
|
530
|
+
)) })
|
|
531
|
+
] })
|
|
532
|
+
] }),
|
|
533
|
+
w && !x && /* @__PURE__ */ d("div", { style: n.gmCenterScreen, children: [
|
|
534
|
+
/* @__PURE__ */ d("h1", { style: n.gmHeadline1, children: [
|
|
535
|
+
"Theme selected: ",
|
|
536
|
+
w
|
|
514
537
|
] }),
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
w
|
|
519
|
-
] }),
|
|
520
|
-
/* @__PURE__ */ a("p", { style: n.gmBodyM, children: [
|
|
521
|
-
"Rounds: ",
|
|
522
|
-
l
|
|
523
|
-
] }),
|
|
524
|
-
/* @__PURE__ */ o("button", { style: n.gmButton, onClick: ie, children: "▶ Start game" })
|
|
538
|
+
/* @__PURE__ */ d("p", { style: n.gmBodyM, children: [
|
|
539
|
+
"Rounds: ",
|
|
540
|
+
s
|
|
525
541
|
] }),
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
/* @__PURE__ */ a("table", { style: n.gmTable, children: [
|
|
536
|
-
/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ a("tr", { children: [
|
|
537
|
-
/* @__PURE__ */ o("th", { children: "Round" }),
|
|
538
|
-
/* @__PURE__ */ o("th", { children: "Your Answer" }),
|
|
539
|
-
/* @__PURE__ */ o("th", { children: "Correct" }),
|
|
540
|
-
/* @__PURE__ */ o("th", { children: "Result" })
|
|
541
|
-
] }) }),
|
|
542
|
-
/* @__PURE__ */ o("tbody", { children: ue.map((e, t) => /* @__PURE__ */ a("tr", { children: [
|
|
543
|
-
/* @__PURE__ */ o("td", { style: n.gmTableCell, children: e.round }),
|
|
544
|
-
/* @__PURE__ */ o("td", { style: n.gmTableCell, children: e.answer || "—" }),
|
|
545
|
-
/* @__PURE__ */ o("td", { style: n.gmTableCell, children: e.correct }),
|
|
546
|
-
/* @__PURE__ */ o("td", { style: n.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
|
|
547
|
-
] }, t)) })
|
|
548
|
-
] }),
|
|
549
|
-
/* @__PURE__ */ a("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
550
|
-
/* @__PURE__ */ o("button", { style: n.gmButton, onClick: ie, children: "🔁 Play again" }),
|
|
551
|
-
/* @__PURE__ */ o("button", { style: n.gmButton, onClick: ye, children: "⬅️ Choose theme" })
|
|
552
|
-
] })
|
|
542
|
+
/* @__PURE__ */ o("button", { style: n.gmButton, onClick: ie, children: "▶ Start game" })
|
|
543
|
+
] }),
|
|
544
|
+
E && /* @__PURE__ */ d("div", { style: n.gmCenterScreen, children: [
|
|
545
|
+
/* @__PURE__ */ o("h1", { style: n.gmHeadline1, children: "Results" }),
|
|
546
|
+
/* @__PURE__ */ d("h2", { style: n.gmHeadline3, children: [
|
|
547
|
+
"Your score: ",
|
|
548
|
+
ue,
|
|
549
|
+
" / ",
|
|
550
|
+
s
|
|
553
551
|
] }),
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
{
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
...n.
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
)
|
|
626
|
-
},
|
|
627
|
-
t
|
|
628
|
-
);
|
|
629
|
-
})
|
|
630
|
-
}
|
|
631
|
-
),
|
|
632
|
-
/* @__PURE__ */ a("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
633
|
-
v === "guess" && !R && /* @__PURE__ */ a("div", { children: [
|
|
634
|
-
/* @__PURE__ */ o(
|
|
635
|
-
"input",
|
|
636
|
-
{
|
|
637
|
-
type: "text",
|
|
638
|
-
placeholder: "Type the missing word",
|
|
639
|
-
value: W,
|
|
640
|
-
onChange: (e) => X(e.target.value),
|
|
641
|
-
style: n.gmInput
|
|
642
|
-
}
|
|
643
|
-
),
|
|
644
|
-
/* @__PURE__ */ o(
|
|
645
|
-
"button",
|
|
552
|
+
/* @__PURE__ */ o("p", { style: { ...n.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
|
|
553
|
+
/* @__PURE__ */ d("table", { style: n.gmTable, children: [
|
|
554
|
+
/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ d("tr", { children: [
|
|
555
|
+
/* @__PURE__ */ o("th", { children: "Round" }),
|
|
556
|
+
/* @__PURE__ */ o("th", { children: "Your Answer" }),
|
|
557
|
+
/* @__PURE__ */ o("th", { children: "Correct" }),
|
|
558
|
+
/* @__PURE__ */ o("th", { children: "Result" })
|
|
559
|
+
] }) }),
|
|
560
|
+
/* @__PURE__ */ o("tbody", { children: he.map((e, t) => /* @__PURE__ */ d("tr", { children: [
|
|
561
|
+
/* @__PURE__ */ o("td", { style: n.gmTableCell, children: e.round }),
|
|
562
|
+
/* @__PURE__ */ o("td", { style: n.gmTableCell, children: e.answer || "—" }),
|
|
563
|
+
/* @__PURE__ */ o("td", { style: n.gmTableCell, children: e.correct }),
|
|
564
|
+
/* @__PURE__ */ o("td", { style: n.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
|
|
565
|
+
] }, t)) })
|
|
566
|
+
] }),
|
|
567
|
+
/* @__PURE__ */ d("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
568
|
+
/* @__PURE__ */ o("button", { style: n.gmButton, onClick: ie, children: "🔁 Play again" }),
|
|
569
|
+
/* @__PURE__ */ o("button", { style: n.gmButton, onClick: we, children: "⬅️ Choose theme" })
|
|
570
|
+
] })
|
|
571
|
+
] }),
|
|
572
|
+
x && !E && /* @__PURE__ */ d("div", { style: n.gmGameLayout, children: [
|
|
573
|
+
/* @__PURE__ */ d(
|
|
574
|
+
"div",
|
|
575
|
+
{
|
|
576
|
+
style: {
|
|
577
|
+
minHeight: 160,
|
|
578
|
+
display: "flex",
|
|
579
|
+
flexDirection: "column",
|
|
580
|
+
justifyContent: "center",
|
|
581
|
+
alignItems: "center"
|
|
582
|
+
},
|
|
583
|
+
children: [
|
|
584
|
+
v === "ready" && /* @__PURE__ */ d(xe, { children: [
|
|
585
|
+
/* @__PURE__ */ o("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
|
|
586
|
+
/* @__PURE__ */ o("div", { style: n.gmHourglass, children: "⏳" })
|
|
587
|
+
] }),
|
|
588
|
+
v === "memorize" && /* @__PURE__ */ d("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
|
|
589
|
+
"MEMORIZE (",
|
|
590
|
+
F,
|
|
591
|
+
")"
|
|
592
|
+
] }),
|
|
593
|
+
v === "guess" && !R && /* @__PURE__ */ d("p", { style: n.gmBodyM, children: [
|
|
594
|
+
"⏳ Time left: ",
|
|
595
|
+
G,
|
|
596
|
+
"s"
|
|
597
|
+
] })
|
|
598
|
+
]
|
|
599
|
+
}
|
|
600
|
+
),
|
|
601
|
+
v !== "ready" && /* @__PURE__ */ o(
|
|
602
|
+
"div",
|
|
603
|
+
{
|
|
604
|
+
style: {
|
|
605
|
+
...n.gmGrid,
|
|
606
|
+
display: "grid",
|
|
607
|
+
gridTemplateColumns: `repeat(${f ? 2 : 3}, 1fr)`,
|
|
608
|
+
gridTemplateRows: `repeat(${f ? 3 : 2}, 1fr)`,
|
|
609
|
+
gap: f ? 12 : 20,
|
|
610
|
+
justifyContent: "center",
|
|
611
|
+
alignContent: "center",
|
|
612
|
+
padding: f ? 8 : 16,
|
|
613
|
+
width: "100%",
|
|
614
|
+
height: "100%",
|
|
615
|
+
maxWidth: f ? "100%" : 600,
|
|
616
|
+
maxHeight: f ? "100%" : 400,
|
|
617
|
+
boxSizing: "border-box"
|
|
618
|
+
},
|
|
619
|
+
children: b.map((e, t) => {
|
|
620
|
+
const a = y === t && v === "guess" && !R;
|
|
621
|
+
return /* @__PURE__ */ o(
|
|
622
|
+
"div",
|
|
646
623
|
{
|
|
647
|
-
style: {
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
624
|
+
style: {
|
|
625
|
+
...n.gmCard,
|
|
626
|
+
width: "100%",
|
|
627
|
+
height: "100%",
|
|
628
|
+
...te === "correct" && y === t ? n.gmCorrect : {},
|
|
629
|
+
...te === "wrong" && y === t ? n.gmWrong : {}
|
|
630
|
+
},
|
|
631
|
+
children: !a && /* @__PURE__ */ o(
|
|
632
|
+
"img",
|
|
633
|
+
{
|
|
634
|
+
src: e.src,
|
|
635
|
+
alt: e.name,
|
|
636
|
+
style: {
|
|
637
|
+
width: "100%",
|
|
638
|
+
height: "100%",
|
|
639
|
+
objectFit: "cover",
|
|
640
|
+
display: "block"
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
)
|
|
644
|
+
},
|
|
645
|
+
t
|
|
646
|
+
);
|
|
647
|
+
})
|
|
648
|
+
}
|
|
649
|
+
),
|
|
650
|
+
/* @__PURE__ */ d("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
651
|
+
v === "guess" && !R && /* @__PURE__ */ d("div", { children: [
|
|
652
|
+
/* @__PURE__ */ o(
|
|
653
|
+
"input",
|
|
654
|
+
{
|
|
655
|
+
type: "text",
|
|
656
|
+
placeholder: "Type the missing word",
|
|
657
|
+
value: W,
|
|
658
|
+
onChange: (e) => X(e.target.value),
|
|
659
|
+
style: n.gmInput
|
|
660
|
+
}
|
|
661
|
+
),
|
|
662
|
+
/* @__PURE__ */ o(
|
|
663
|
+
"button",
|
|
664
|
+
{
|
|
665
|
+
style: { ...n.gmButton, marginLeft: 8 },
|
|
666
|
+
onClick: fe,
|
|
667
|
+
disabled: q,
|
|
668
|
+
children: q ? "..." : "Check"
|
|
669
|
+
}
|
|
670
|
+
)
|
|
671
|
+
] }),
|
|
672
|
+
R && /* @__PURE__ */ o("button", { type: "button", style: n.gmButton, onClick: ye, children: "Next round" })
|
|
656
673
|
] })
|
|
657
|
-
]
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
674
|
+
] })
|
|
675
|
+
]
|
|
676
|
+
}
|
|
677
|
+
)
|
|
678
|
+
}
|
|
679
|
+
),
|
|
680
|
+
le
|
|
681
|
+
) });
|
|
664
682
|
}
|
|
665
683
|
export {
|
|
666
|
-
|
|
667
|
-
|
|
684
|
+
Ae as Game,
|
|
685
|
+
ce as themes
|
|
668
686
|
};
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useState, useEffect, useMemo, useRef, useLayoutEffect } from "react";
|
|
2
|
+
import { createPortal } from "react-dom";
|
|
2
3
|
import { themes } from "./themes";
|
|
3
4
|
import { styles } from "./Game.styles";
|
|
4
5
|
import type { Theme } from "./themes";
|
|
@@ -12,15 +13,7 @@ type RoundResult = {
|
|
|
12
13
|
result: "correct" | "almost" | "wrong";
|
|
13
14
|
};
|
|
14
15
|
|
|
15
|
-
// ✅
|
|
16
|
-
const globalReset = () => {
|
|
17
|
-
const style = document.createElement("style");
|
|
18
|
-
style.textContent = `
|
|
19
|
-
#whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
|
|
20
|
-
#whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
|
|
21
|
-
`;
|
|
22
|
-
document.head.appendChild(style);
|
|
23
|
-
};
|
|
16
|
+
// ✅ globalReset удален - теперь используется Shadow DOM изоляция
|
|
24
17
|
|
|
25
18
|
// ✅ расстояние Левенштейна — для проверки “почти правильно”
|
|
26
19
|
const levenshtein = (a: string, b: string) => {
|
|
@@ -160,26 +153,75 @@ export default function Game({
|
|
|
160
153
|
const [squareSize, setSquareSize] = useState<number | null>(null);
|
|
161
154
|
useNeutralizeBodyZoom(containerRef, { minDesktopWidth: 1024, forceResize: false });
|
|
162
155
|
|
|
163
|
-
// ✅
|
|
156
|
+
// ✅ Shadow DOM изоляция для полной независимости от глобальных стилей
|
|
164
157
|
useLayoutEffect(() => {
|
|
165
158
|
const container = containerRef.current;
|
|
166
159
|
if (!container) return;
|
|
167
160
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
161
|
+
// Создаем Shadow DOM если его нет
|
|
162
|
+
let shadowRoot = container.shadowRoot;
|
|
163
|
+
if (!shadowRoot) {
|
|
164
|
+
shadowRoot = container.attachShadow({ mode: 'open' });
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
// Очищаем содержимое shadow root
|
|
168
|
+
shadowRoot.innerHTML = '';
|
|
169
|
+
|
|
170
|
+
// Создаем стили для изоляции
|
|
171
|
+
const style = document.createElement('style');
|
|
172
|
+
style.textContent = `
|
|
173
|
+
:host {
|
|
174
|
+
position: fixed !important;
|
|
175
|
+
top: 0 !important;
|
|
176
|
+
left: 0 !important;
|
|
177
|
+
width: 100vw !important;
|
|
178
|
+
height: 100vh !important;
|
|
179
|
+
z-index: 100 !important;
|
|
180
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%) !important;
|
|
181
|
+
overflow: hidden !important;
|
|
182
|
+
margin: 0 !important;
|
|
183
|
+
padding: 0 !important;
|
|
184
|
+
transform: none !important;
|
|
185
|
+
zoom: 1 !important;
|
|
186
|
+
scale: 1 !important;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
#whats-missing-root, #whats-missing-root * {
|
|
190
|
+
box-sizing: border-box !important;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
#whats-missing-root img {
|
|
194
|
+
max-width: 100% !important;
|
|
195
|
+
height: auto !important;
|
|
196
|
+
display: block !important;
|
|
197
|
+
user-select: none !important;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
#whats-missing-root {
|
|
201
|
+
position: relative !important;
|
|
202
|
+
width: 100% !important;
|
|
203
|
+
height: 100% !important;
|
|
204
|
+
display: flex !important;
|
|
205
|
+
justify-content: center !important;
|
|
206
|
+
align-items: center !important;
|
|
207
|
+
transform: none !important;
|
|
208
|
+
zoom: 1 !important;
|
|
209
|
+
scale: 1 !important;
|
|
210
|
+
}
|
|
211
|
+
`;
|
|
212
|
+
|
|
213
|
+
// Создаем контейнер игры внутри shadow root
|
|
214
|
+
const gameContainer = document.createElement('div');
|
|
215
|
+
gameContainer.id = 'whats-missing-root';
|
|
216
|
+
|
|
217
|
+
// Добавляем стили и контейнер в shadow root
|
|
218
|
+
shadowRoot.appendChild(style);
|
|
219
|
+
shadowRoot.appendChild(gameContainer);
|
|
220
|
+
|
|
221
|
+
// Обновляем squareRef чтобы он указывал на контейнер внутри shadow root
|
|
222
|
+
if (squareRef.current !== gameContainer) {
|
|
223
|
+
squareRef.current = gameContainer;
|
|
224
|
+
}
|
|
183
225
|
}, []);
|
|
184
226
|
|
|
185
227
|
useEffect(() => {
|
|
@@ -223,7 +265,6 @@ export default function Game({
|
|
|
223
265
|
}, [gameCubeSize, screenWidth, screenHeight]);
|
|
224
266
|
|
|
225
267
|
useEffect(() => {
|
|
226
|
-
globalReset();
|
|
227
268
|
return () => {
|
|
228
269
|
document.body.style.overflow = "";
|
|
229
270
|
};
|
|
@@ -425,58 +466,45 @@ export default function Game({
|
|
|
425
466
|
return Math.min(1.35, Math.max(1.0, rawScale));
|
|
426
467
|
}, [screenWidth, screenHeight, isMobile]);
|
|
427
468
|
|
|
469
|
+
// Получаем контейнер внутри Shadow DOM для рендера
|
|
470
|
+
const shadowContainer = squareRef.current;
|
|
471
|
+
|
|
428
472
|
return (
|
|
429
|
-
<div
|
|
430
|
-
|
|
431
|
-
style={{
|
|
432
|
-
position: "fixed",
|
|
433
|
-
inset: 0,
|
|
434
|
-
display: "flex",
|
|
435
|
-
justifyContent: "center",
|
|
436
|
-
alignItems: "center",
|
|
437
|
-
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
438
|
-
overflow: "hidden",
|
|
439
|
-
zIndex: 1,
|
|
440
|
-
width: "100vw",
|
|
441
|
-
height: "100vh",
|
|
442
|
-
transform: "none",
|
|
443
|
-
zoom: 1, // ✅ игнорирует масштаб родителя
|
|
444
|
-
scale: "1 !important", // ✅ на случай если transform тянется сверху
|
|
445
|
-
}}
|
|
446
|
-
>
|
|
447
|
-
<div
|
|
448
|
-
ref={squareRef}
|
|
449
|
-
style={{
|
|
450
|
-
width: isMobile
|
|
451
|
-
? "100%"
|
|
452
|
-
: `${effectiveGameCubeSize}px`,
|
|
453
|
-
height: isMobile
|
|
454
|
-
? "100%"
|
|
455
|
-
: `${effectiveGameCubeSize}px`,
|
|
456
|
-
borderRadius: isMobile ? 0 : "20px",
|
|
457
|
-
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
458
|
-
position: "relative",
|
|
459
|
-
overflow: "hidden",
|
|
460
|
-
boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.08)",
|
|
461
|
-
display: "flex",
|
|
462
|
-
justifyContent: "center",
|
|
463
|
-
alignItems: "center",
|
|
464
|
-
}}
|
|
465
|
-
>
|
|
473
|
+
<div ref={containerRef}>
|
|
474
|
+
{shadowContainer && createPortal(
|
|
466
475
|
<div
|
|
467
|
-
|
|
476
|
+
ref={squareRef}
|
|
468
477
|
style={{
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
478
|
+
width: isMobile
|
|
479
|
+
? "100%"
|
|
480
|
+
: `${effectiveGameCubeSize}px`,
|
|
481
|
+
height: isMobile
|
|
482
|
+
? "100%"
|
|
483
|
+
: `${effectiveGameCubeSize}px`,
|
|
484
|
+
borderRadius: isMobile ? 0 : "20px",
|
|
485
|
+
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
486
|
+
position: "relative",
|
|
487
|
+
overflow: "hidden",
|
|
488
|
+
boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.08)",
|
|
474
489
|
display: "flex",
|
|
475
|
-
flexDirection: "column",
|
|
476
490
|
justifyContent: "center",
|
|
477
491
|
alignItems: "center",
|
|
478
492
|
}}
|
|
479
493
|
>
|
|
494
|
+
<div
|
|
495
|
+
id="whats-missing-root"
|
|
496
|
+
style={{
|
|
497
|
+
transform: `scale(${scale})`,
|
|
498
|
+
transformOrigin: "center center",
|
|
499
|
+
transition: "transform 0.2s ease-out",
|
|
500
|
+
width: `${100 / scale}%`,
|
|
501
|
+
height: `${100 / scale}%`,
|
|
502
|
+
display: "flex",
|
|
503
|
+
flexDirection: "column",
|
|
504
|
+
justifyContent: "center",
|
|
505
|
+
alignItems: "center",
|
|
506
|
+
}}
|
|
507
|
+
>
|
|
480
508
|
{!isMobile && MemoizedLogo}
|
|
481
509
|
|
|
482
510
|
{/* ====== ЛОББИ ====== */}
|
|
@@ -675,8 +703,10 @@ export default function Game({
|
|
|
675
703
|
</div>
|
|
676
704
|
</div>
|
|
677
705
|
)}
|
|
678
|
-
|
|
679
|
-
|
|
706
|
+
</div>
|
|
707
|
+
</div>,
|
|
708
|
+
shadowContainer
|
|
709
|
+
)}
|
|
680
710
|
</div>
|
|
681
711
|
);
|
|
682
712
|
}
|