@mblinkov/whats-missing 20.0.18 → 20.0.20
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 +6 -18
- package/dist/whats-missing.es.js +186 -138
- package/package.json +2 -1
- package/src/Game.tsx +577 -438
|
@@ -1,22 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),le=window.origin+"/cloud/speakid/games/whatsmissing/",D=(a,m)=>a.map(([c,s])=>({src:`${le}${m}/${s.replace(/\s/g,"%20")}.png`,name:s})),ae=[["apple","apple"],["banana","banana"],["bread","bread"],["burger","burger"],["cake","cake"],["carrot","carrot"],["cheese","cheese"],["chicken","chicken"],["chocolate","chocolate"],["corn","corn"],["donut","donut"],["fish","fish"],["fries","fries"],["grapes","grapes"],["ice_cream","ice cream"],["milk","milk"],["orange","orange"],["pear","pear"],["pizza","pizza"],["rice","rice"],["sandwich","sandwich"],["soup","soup"],["strawberry","strawberry"],["tomato","tomato"],["watermelon","watermelon"]],de=[["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"]],ce=[["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"]],P={food:D(ae,"food"),animals:D(de,"animals"),toys:D(ce,"toys")},me=`
|
|
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
|
-
|
|
10
|
-
|
|
11
|
-
#whats-missing-root img {
|
|
12
|
-
max-width: 100%;
|
|
13
|
-
height: auto;
|
|
14
|
-
display: block;
|
|
15
|
-
user-select: none;
|
|
16
|
-
}
|
|
17
|
-
html, body {
|
|
18
|
-
margin: 0;
|
|
19
|
-
padding: 0;
|
|
20
|
-
zoom: 1 !important; /* ✅ защита от подзума */
|
|
21
|
-
}
|
|
22
|
-
`,document.head.appendChild(r)},he=(r,a)=>{const l=Array.from({length:r.length+1},()=>Array(a.length+1).fill(0));for(let n=0;n<=r.length;n++)l[n][0]=n;for(let n=0;n<=a.length;n++)l[0][n]=n;for(let n=1;n<=r.length;n++)for(let c=1;c<=a.length;c++)l[n][c]=r[n-1]===a[c-1]?l[n-1][c-1]:Math.min(l[n-1][c-1],l[n][c-1],l[n-1][c])+1;return l[r.length][a.length]};function pe(){const r=o.useRef(null);o.useEffect(()=>(ue(),()=>{document.body.style.overflow=""}),[]);const[a,l]=o.useState(null),[n,c]=o.useState([]),[w,X]=o.useState(4),[x,E]=o.useState(!1),[j,F]=o.useState(1),[h,J]=o.useState(null),[g,S]=o.useState("ready"),[G,q]=o.useState(3),[T,z]=o.useState(10),[R,Y]=o.useState(20),[Q,I]=o.useState(0),[k,M]=o.useState(!1),[v,D]=o.useState(""),[p,H]=o.useState(!1),[A,P]=o.useState(!1),[U,y]=o.useState(null),[ee,B]=o.useState([]),[te,N]=o.useState([]),[u,se]=o.useState(!1),[fe,O]=o.useState(1),[V,_]=o.useState(null);o.useEffect(()=>{const t=()=>{const i=window.innerWidth<768;if(se(i),i)_(null),O(1);else{const f=Math.min(window.innerWidth,window.innerHeight),b=Math.max(360,Math.round(f*.97)),C=Math.min(b,1e3);_(C),O(1)}};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const $=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),K=()=>{if(!a)return;const t=$(W[a]);c(t),E(!0),M(!1),F(1),I(0),B([]),N([]),Z(t,[],!0)},Z=(t=n,i=te,m=!1)=>{const d=$(t.length?t:W[a]);let f=Math.floor(Math.random()*d.length),b=d[f].name,C=0;for(;i.includes(b)&&C<20;)f=Math.floor(Math.random()*d.length),b=d[f].name,C++;c(d),J(f),N([...i,b]),H(!1),D(""),Y(20),y(null),m?(S("ready"),q(3),z(10)):(S("memorize"),z(10))};o.useEffect(()=>{if(!(!x||k||p)){if(g==="ready")if(G<=0)S("memorize");else{const t=setTimeout(()=>q(i=>i-1),1e3);return()=>clearTimeout(t)}if(g==="memorize")if(T<=0)S("guess");else{const t=setTimeout(()=>z(i=>i-1),1e3);return()=>clearTimeout(t)}if(g==="guess"){if(R<=0){H(!0),y("wrong");const i=n[h].name;B(m=>[...m,{round:j,answer:v,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>Y(i=>i-1),1e3);return()=>clearTimeout(t)}}},[g,G,T,R,x,k,p,n,h,j,v]);const ne=()=>{if(h===null||A)return;const t=n[h].name,i=v.toLowerCase().trim();let m="wrong";i===t?(I(d=>d+1),y("correct"),m="correct"):he(i,t)===1?(I(d=>d+.5),y("almost"),m="almost"):(y("wrong"),m="wrong"),B(d=>[...d,{round:j,answer:i,correct:t,result:m}]),P(!0),setTimeout(()=>{P(!1),H(!0)},600)},oe=()=>j<w?(F(t=>t+1),Z()):M(!0),ie=()=>{E(!1),M(!1),l(null)},re=o.useMemo(()=>e.jsx("div",{style:{...s.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:e.jsxs("picture",{children:[e.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),e.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:s.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:r,style:{width:"100%",height:"100vh",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflowX:"clip"},children:e.jsx("div",{style:{width:u?"100%":V||1e3,height:u?"100%":V||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:u?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:u?"none":"0 0 40px rgba(0,0,0,0.1)",margin:u?"0 auto":"unset",position:"relative"},children:e.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!u&&re,!a&&!x&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:s.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:s.gmButton,onClick:()=>l(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:s.gmBodyS,children:"Choose number of rounds:"}),e.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>e.jsx("button",{style:{...s.gmButton,...w===t?s.gmButtonActive:{}},onClick:()=>X(t),children:t},t))})]})]}),a&&!x&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsxs("h1",{style:s.gmHeadline1,children:["Theme selected: ",a]}),e.jsxs("p",{style:s.gmBodyM,children:["Rounds: ",w]}),e.jsx("button",{style:s.gmButton,onClick:K,children:"▶ Start game"})]}),k&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",Q," / ",w]}),e.jsx("p",{style:{...s.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:s.gmTable,children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Round"}),e.jsx("th",{children:"Your Answer"}),e.jsx("th",{children:"Correct"}),e.jsx("th",{children:"Result"})]})}),e.jsx("tbody",{children:ee.map((t,i)=>e.jsxs("tr",{children:[e.jsx("td",{style:s.gmTableCell,children:t.round}),e.jsx("td",{style:s.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:s.gmTableCell,children:t.correct}),e.jsx("td",{style:s.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},i))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:s.gmButton,onClick:K,children:"🔁 Play again"}),e.jsx("button",{style:s.gmButton,onClick:ie,children:"⬅️ Choose theme"})]})]}),x&&!k&&e.jsxs("div",{style:s.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[g==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...s.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:s.gmHourglass,children:"⏳"})]}),g==="memorize"&&e.jsxs("p",{style:{...s.gmBodyM,color:"#10b981"},children:["MEMORIZE (",T,")"]}),g==="guess"&&!p&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",R,"s"]})]}),g!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:u?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:u?"150px":"210px",gap:u?"12px":"20px",justifyItems:"center"},children:n.map((t,i)=>{const m=h===i&&g==="guess"&&!p;return e.jsx("div",{style:{...s.gmCard,...U==="correct"&&h===i?s.gmCorrect:{},...U==="wrong"&&h===i?s.gmWrong:{}},children:!m&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},i)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[g==="guess"&&!p&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:v,onChange:t=>D(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:ne,disabled:A,children:A?"...":"Check"})]}),p&&e.jsx("button",{style:s.gmButton,onClick:oe,children:"Next round"})]})]})]})})})})}exports.Game=pe;exports.themes=W;
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const a=document.createElement("style");a.id="spin-keyframes",a.innerHTML=me,document.head.appendChild(a)}const ue={animation:"spin 1.4s linear infinite"},n={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100vh",width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",color:"#1f2937",padding:"24px 16px",boxSizing:"border-box",transform:"translateY(20px)"},gmHeadline1:{fontWeight:700,fontSize:"clamp(28px, 4vw, 40px)",lineHeight:"110%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},gmBodyM:{fontWeight:400,fontSize:"16px",lineHeight:"140%"},gmBodyS:{fontWeight:400,fontSize:"14px",lineHeight:"140%",color:"#6b7280"},gmButton:{fontFamily:'"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',fontWeight:600,fontSize:"16px",padding:"10px 16px",borderRadius:"12px",border:"1px solid #e5e7eb",background:"#ec4c44",color:"#ffffff",cursor:"pointer",boxShadow:"0 6px 18px rgba(236, 76, 68, .18)",transition:"transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"600px",minHeight:"100vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"calc(210px * 3 + 20px * 2)",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...ue}},ge=()=>{const a=document.createElement("style");a.textContent=`
|
|
7
|
+
/* scope only inside game root */
|
|
8
|
+
#whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
|
|
9
|
+
#whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
|
|
10
|
+
`,document.head.appendChild(a)},he=(a,m)=>{const c=Array.from({length:a.length+1},()=>Array(m.length+1).fill(0));for(let s=0;s<=a.length;s++)c[s][0]=s;for(let s=0;s<=m.length;s++)c[0][s]=s;for(let s=1;s<=a.length;s++)for(let u=1;u<=m.length;u++)c[s][u]=a[s-1]===m[u-1]?c[s-1][u-1]:Math.min(c[s-1][u-1],c[s][u-1],c[s-1][u])+1;return c[a.length][m.length]};function fe(a,m={minDesktopWidth:1200,forceResize:!1}){const c=o.useRef(null),s=m.minDesktopWidth??1200,u=!!m.forceResize;o.useLayoutEffect(()=>{if(typeof window>"u"||!a||!a.current)return;const i=a.current,L=()=>{try{const r=document.body,d=getComputedStyle(r),p=parseFloat(r.style&&r.style.zoom||"");if(p&&!isNaN(p)&&p>0)return p;const j=parseFloat(d.zoom||"");if(j&&!isNaN(j)&&j>0)return j;const k=d.transform||d.webkitTransform||d.mozTransform;if(k&&k!=="none"){const C=k.match(/matrix\(([^)]+)\)/);if(C){const v=C[1].split(",").map(B=>parseFloat(B))[0];if(v&&!isNaN(v))return v}}}catch{}return 1},b=()=>{if(s&&window.innerWidth<s){S();return}const r=L();if(!r||r===1){S();return}c.current||(c.current={transform:i.style.transform||null,transformOrigin:i.style.transformOrigin||null,width:i.style.width||null,height:i.style.height||null,willChange:i.style.willChange||null});const d=1/r;u&&(i.style.width=`${r*100}%`,i.style.height=`${r*100}%`),i.style.transform=`scale(${d})`,i.style.transformOrigin="top left",i.style.willChange="transform",typeof process<"u"&&process.env&&process.env.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] applied scale:",{scale:r,inv:d,forceResize:u})},S=()=>{if(!c.current)return;const r=c.current;r.transform===null?i.style.removeProperty("transform"):i.style.transform=r.transform,r.transformOrigin===null?i.style.removeProperty("transform-origin"):i.style.transformOrigin=r.transformOrigin,r.width===null?i.style.removeProperty("width"):i.style.width=r.width,r.height===null?i.style.removeProperty("height"):i.style.height=r.height,r.willChange===null?i.style.removeProperty("will-change"):i.style.willChange=r.willChange,c.current=null,process.env.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] restored original styles")};let x=0;const w=()=>{cancelAnimationFrame(x),x=requestAnimationFrame(b)},f=new MutationObserver(r=>{for(const d of r)if(d.type==="attributes"&&(d.attributeName==="style"||d.attributeName==="class")){w();break}});return f.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",w),w(),()=>{cancelAnimationFrame(x),f.disconnect(),window.removeEventListener("resize",w),S()}},[a,s,u])}function pe(){const a=o.useRef(null);fe(a,{minDesktopWidth:1200,forceResize:!1}),o.useEffect(()=>(ge(),()=>{document.body.style.overflow=""}),[]);const[m,c]=o.useState(null),[s,u]=o.useState([]),[i,L]=o.useState(4),[b,S]=o.useState(!1),[x,w]=o.useState(1),[f,r]=o.useState(null),[d,p]=o.useState("ready"),[j,k]=o.useState(3),[C,M]=o.useState(10),[v,B]=o.useState(20),[Q,F]=o.useState(0),[A,W]=o.useState(!1),[H,q]=o.useState(""),[z,N]=o.useState(!1),[G,Y]=o.useState(!1),[$,R]=o.useState(null),[ee,O]=o.useState([]),[te,V]=o.useState([]),[y,ne]=o.useState(!1),[ye,Z]=o.useState(1),[_,U]=o.useState(null);o.useEffect(()=>{const t=()=>{const l=window.innerWidth<768;if(ne(l),l)U(null),Z(1);else{const T=Math.min(window.innerWidth,window.innerHeight),I=Math.max(360,Math.round(T*.97)),E=Math.min(I,1e3);U(E),Z(1)}};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const K=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),X=()=>{if(!m)return;const t=K(P[m]);u(t),S(!0),W(!1),w(1),F(0),O([]),V([]),J(t,[],!0)},J=(t=s,l=te,h=!1)=>{const g=K(t.length?t:P[m]);let T=Math.floor(Math.random()*g.length),I=g[T].name,E=0;for(;l.includes(I)&&E<20;)T=Math.floor(Math.random()*g.length),I=g[T].name,E++;u(g),r(T),V([...l,I]),N(!1),q(""),B(20),R(null),h?(p("ready"),k(3),M(10)):(p("memorize"),M(10))};o.useEffect(()=>{if(!(!b||A||z)){if(d==="ready")if(j<=0)p("memorize");else{const t=setTimeout(()=>k(l=>l-1),1e3);return()=>clearTimeout(t)}if(d==="memorize")if(C<=0)p("guess");else{const t=setTimeout(()=>M(l=>l-1),1e3);return()=>clearTimeout(t)}if(d==="guess"){if(v<=0){N(!0),R("wrong");const l=s[f].name;O(h=>[...h,{round:x,answer:H,correct:l,result:"wrong"}]);return}const t=setTimeout(()=>B(l=>l-1),1e3);return()=>clearTimeout(t)}}},[d,j,C,v,b,A,z,s,f,x,H]);const se=()=>{if(f===null||G)return;const t=s[f].name,l=H.toLowerCase().trim();let h="wrong";l===t?(F(g=>g+1),R("correct"),h="correct"):he(l,t)===1?(F(g=>g+.5),R("almost"),h="almost"):(R("wrong"),h="wrong"),O(g=>[...g,{round:x,answer:l,correct:t,result:h}]),Y(!0),setTimeout(()=>{Y(!1),N(!0)},600)},oe=()=>x<i?(w(t=>t+1),J()):W(!0),re=()=>{S(!1),W(!1),c(null)},ie=o.useMemo(()=>e.jsx("div",{style:{...n.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:e.jsxs("picture",{children:[e.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),e.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:n.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:a,style:{width:"100%",height:"100vh",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflowX:"clip"},children:e.jsx("div",{style:{width:y?"100%":_||1e3,height:y?"100%":_||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:y?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:y?"none":"0 0 40px rgba(0,0,0,0.1)",margin:y?"0 auto":"unset",position:"relative"},children:e.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!y&&ie,!m&&!b&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:n.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:n.gmButton,onClick:()=>c(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:n.gmBodyS,children:"Choose number of rounds:"}),e.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>e.jsx("button",{style:{...n.gmButton,...i===t?n.gmButtonActive:{}},onClick:()=>L(t),children:t},t))})]})]}),m&&!b&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",m]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",i]}),e.jsx("button",{style:n.gmButton,onClick:X,children:"▶ Start game"})]}),A&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",Q," / ",i]}),e.jsx("p",{style:{...n.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:n.gmTable,children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Round"}),e.jsx("th",{children:"Your Answer"}),e.jsx("th",{children:"Correct"}),e.jsx("th",{children:"Result"})]})}),e.jsx("tbody",{children:ee.map((t,l)=>e.jsxs("tr",{children:[e.jsx("td",{style:n.gmTableCell,children:t.round}),e.jsx("td",{style:n.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:n.gmTableCell,children:t.correct}),e.jsx("td",{style:n.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},l))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:n.gmButton,onClick:X,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:re,children:"⬅️ Choose theme"})]})]}),b&&!A&&e.jsxs("div",{style:n.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[d==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),d==="memorize"&&e.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",C,")"]}),d==="guess"&&!z&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",v,"s"]})]}),d!=="ready"&&e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:y?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:y?"150px":"210px",gap:y?"12px":"20px",justifyItems:"center"},children:s.map((t,l)=>{const h=f===l&&d==="guess"&&!z;return e.jsx("div",{style:{...n.gmCard,...$==="correct"&&f===l?n.gmCorrect:{},...$==="wrong"&&f===l?n.gmWrong:{}},children:!h&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},l)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[d==="guess"&&!z&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:H,onChange:t=>q(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:se,disabled:G,children:G?"...":"Check"})]}),z&&e.jsx("button",{type:"button",style:n.gmButton,onClick:oe,children:"Next round"})]})]})]})})})})}exports.Game=pe;exports.themes=P;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { useRef as
|
|
3
|
-
const
|
|
4
|
-
src: `${
|
|
1
|
+
import { jsx as t, jsxs as c, Fragment as ce } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as te, useEffect as P, useState as d, useMemo as me, useLayoutEffect as ge } from "react";
|
|
3
|
+
const ue = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, g) => l.map(([m, o]) => ({
|
|
4
|
+
src: `${ue}${g}/${o.replace(/\s/g, "%20")}.png`,
|
|
5
5
|
name: o
|
|
6
6
|
})), he = [
|
|
7
7
|
["apple", "apple"],
|
|
@@ -29,7 +29,7 @@ const ge = window.origin + "/cloud/speakid/games/whatsmissing/", F = (l, a) => l
|
|
|
29
29
|
["strawberry", "strawberry"],
|
|
30
30
|
["tomato", "tomato"],
|
|
31
31
|
["watermelon", "watermelon"]
|
|
32
|
-
],
|
|
32
|
+
], pe = [
|
|
33
33
|
["bear", "bear"],
|
|
34
34
|
["cat", "cat"],
|
|
35
35
|
["crocodile", "crocodile"],
|
|
@@ -49,7 +49,7 @@ const ge = window.origin + "/cloud/speakid/games/whatsmissing/", F = (l, a) => l
|
|
|
49
49
|
["tortoise", "tortoise"],
|
|
50
50
|
["wolf", "wolf"],
|
|
51
51
|
["zebra", "zebra"]
|
|
52
|
-
],
|
|
52
|
+
], fe = [
|
|
53
53
|
["ball", "ball"],
|
|
54
54
|
["balloon", "balloon"],
|
|
55
55
|
["blocks", "blocks"],
|
|
@@ -69,11 +69,11 @@ const ge = window.origin + "/cloud/speakid/games/whatsmissing/", F = (l, a) => l
|
|
|
69
69
|
["teddy_bear", "teddy bear"],
|
|
70
70
|
["yo-yo", "yo-yo"],
|
|
71
71
|
["crayons", "crayons"]
|
|
72
|
-
],
|
|
73
|
-
food:
|
|
74
|
-
animals:
|
|
75
|
-
toys:
|
|
76
|
-
},
|
|
72
|
+
], ee = {
|
|
73
|
+
food: Y(he, "food"),
|
|
74
|
+
animals: Y(pe, "animals"),
|
|
75
|
+
toys: Y(fe, "toys")
|
|
76
|
+
}, ye = `
|
|
77
77
|
@keyframes spin {
|
|
78
78
|
from { transform: rotate(0deg); }
|
|
79
79
|
to { transform: rotate(360deg); }
|
|
@@ -81,9 +81,9 @@ const ge = window.origin + "/cloud/speakid/games/whatsmissing/", F = (l, a) => l
|
|
|
81
81
|
`;
|
|
82
82
|
if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
|
|
83
83
|
const l = document.createElement("style");
|
|
84
|
-
l.id = "spin-keyframes", l.innerHTML =
|
|
84
|
+
l.id = "spin-keyframes", l.innerHTML = ye, document.head.appendChild(l);
|
|
85
85
|
}
|
|
86
|
-
const
|
|
86
|
+
const be = {
|
|
87
87
|
animation: "spin 1.4s linear infinite"
|
|
88
88
|
}, n = {
|
|
89
89
|
gmCenterScreen: {
|
|
@@ -233,107 +233,155 @@ const ye = {
|
|
|
233
233
|
},
|
|
234
234
|
gmHourglass: {
|
|
235
235
|
fontSize: "42px",
|
|
236
|
-
...
|
|
236
|
+
...be
|
|
237
237
|
}
|
|
238
238
|
}, xe = () => {
|
|
239
239
|
const l = document.createElement("style");
|
|
240
240
|
l.textContent = `
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
}
|
|
245
|
-
#whats-missing-root img {
|
|
246
|
-
max-width: 100%;
|
|
247
|
-
height: auto;
|
|
248
|
-
display: block;
|
|
249
|
-
user-select: none;
|
|
250
|
-
}
|
|
251
|
-
html, body {
|
|
252
|
-
margin: 0;
|
|
253
|
-
padding: 0;
|
|
254
|
-
zoom: 1 !important; /* ✅ защита от подзума */
|
|
255
|
-
}
|
|
241
|
+
/* scope only inside game root */
|
|
242
|
+
#whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
|
|
243
|
+
#whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
|
|
256
244
|
`, document.head.appendChild(l);
|
|
257
|
-
},
|
|
258
|
-
const
|
|
259
|
-
for (let o = 0; o <= l.length; o++)
|
|
260
|
-
for (let o = 0; o <=
|
|
245
|
+
}, we = (l, g) => {
|
|
246
|
+
const m = Array.from({ length: l.length + 1 }, () => Array(g.length + 1).fill(0));
|
|
247
|
+
for (let o = 0; o <= l.length; o++) m[o][0] = o;
|
|
248
|
+
for (let o = 0; o <= g.length; o++) m[0][o] = o;
|
|
261
249
|
for (let o = 1; o <= l.length; o++)
|
|
262
|
-
for (let
|
|
263
|
-
|
|
264
|
-
return
|
|
250
|
+
for (let u = 1; u <= g.length; u++)
|
|
251
|
+
m[o][u] = l[o - 1] === g[u - 1] ? m[o - 1][u - 1] : Math.min(m[o - 1][u - 1], m[o][u - 1], m[o - 1][u]) + 1;
|
|
252
|
+
return m[l.length][g.length];
|
|
265
253
|
};
|
|
266
|
-
function
|
|
267
|
-
const
|
|
268
|
-
|
|
254
|
+
function ve(l, g = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
255
|
+
const m = te(null), o = g.minDesktopWidth ?? 1200, u = !!g.forceResize;
|
|
256
|
+
ge(() => {
|
|
257
|
+
if (typeof window > "u" || !l || !l.current) return;
|
|
258
|
+
const i = l.current, E = () => {
|
|
259
|
+
try {
|
|
260
|
+
const r = document.body, a = getComputedStyle(r), y = parseFloat(r.style && r.style.zoom || "");
|
|
261
|
+
if (y && !isNaN(y) && y > 0) return y;
|
|
262
|
+
const k = parseFloat(a.zoom || "");
|
|
263
|
+
if (k && !isNaN(k) && k > 0) return k;
|
|
264
|
+
const S = a.transform || a.webkitTransform || a.mozTransform;
|
|
265
|
+
if (S && S !== "none") {
|
|
266
|
+
const T = S.match(/matrix\(([^)]+)\)/);
|
|
267
|
+
if (T) {
|
|
268
|
+
const C = T[1].split(",").map((H) => parseFloat(H))[0];
|
|
269
|
+
if (C && !isNaN(C)) return C;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
} catch {
|
|
273
|
+
}
|
|
274
|
+
return 1;
|
|
275
|
+
}, w = () => {
|
|
276
|
+
if (o && window.innerWidth < o) {
|
|
277
|
+
z();
|
|
278
|
+
return;
|
|
279
|
+
}
|
|
280
|
+
const r = E();
|
|
281
|
+
if (!r || r === 1) {
|
|
282
|
+
z();
|
|
283
|
+
return;
|
|
284
|
+
}
|
|
285
|
+
m.current || (m.current = {
|
|
286
|
+
transform: i.style.transform || null,
|
|
287
|
+
transformOrigin: i.style.transformOrigin || null,
|
|
288
|
+
width: i.style.width || null,
|
|
289
|
+
height: i.style.height || null,
|
|
290
|
+
willChange: i.style.willChange || null
|
|
291
|
+
});
|
|
292
|
+
const a = 1 / r;
|
|
293
|
+
u && (i.style.width = `${r * 100}%`, i.style.height = `${r * 100}%`), i.style.transform = `scale(${a})`, i.style.transformOrigin = "top left", i.style.willChange = "transform", typeof process < "u" && process.env && process.env.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] applied scale:", { scale: r, inv: a, forceResize: u });
|
|
294
|
+
}, z = () => {
|
|
295
|
+
if (!m.current) return;
|
|
296
|
+
const r = m.current;
|
|
297
|
+
r.transform === null ? i.style.removeProperty("transform") : i.style.transform = r.transform, r.transformOrigin === null ? i.style.removeProperty("transform-origin") : i.style.transformOrigin = r.transformOrigin, r.width === null ? i.style.removeProperty("width") : i.style.width = r.width, r.height === null ? i.style.removeProperty("height") : i.style.height = r.height, r.willChange === null ? i.style.removeProperty("will-change") : i.style.willChange = r.willChange, m.current = null, process.env.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] restored original styles");
|
|
298
|
+
};
|
|
299
|
+
let x = 0;
|
|
300
|
+
const v = () => {
|
|
301
|
+
cancelAnimationFrame(x), x = requestAnimationFrame(w);
|
|
302
|
+
}, f = new MutationObserver((r) => {
|
|
303
|
+
for (const a of r)
|
|
304
|
+
if (a.type === "attributes" && (a.attributeName === "style" || a.attributeName === "class")) {
|
|
305
|
+
v();
|
|
306
|
+
break;
|
|
307
|
+
}
|
|
308
|
+
});
|
|
309
|
+
return f.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", v), v(), () => {
|
|
310
|
+
cancelAnimationFrame(x), f.disconnect(), window.removeEventListener("resize", v), z();
|
|
311
|
+
};
|
|
312
|
+
}, [l, o, u]);
|
|
313
|
+
}
|
|
314
|
+
function Se() {
|
|
315
|
+
const l = te(null);
|
|
316
|
+
ve(l, { minDesktopWidth: 1200, forceResize: !1 }), P(() => (xe(), () => {
|
|
269
317
|
document.body.style.overflow = "";
|
|
270
318
|
}), []);
|
|
271
|
-
const [
|
|
272
|
-
|
|
319
|
+
const [g, m] = d(null), [o, u] = d([]), [i, E] = d(4), [w, z] = d(!1), [x, v] = d(1), [f, r] = d(null), [a, y] = d("ready"), [k, S] = d(3), [T, A] = d(10), [C, H] = d(20), [ne, N] = d(0), [L, j] = d(!1), [F, $] = d(""), [R, D] = d(!1), [G, q] = d(!1), [V, M] = d(null), [oe, O] = d([]), [re, Z] = d([]), [b, ie] = d(!1), [ke, _] = d(1), [U, K] = d(null);
|
|
320
|
+
P(() => {
|
|
273
321
|
const e = () => {
|
|
274
|
-
const
|
|
275
|
-
if (ie(
|
|
322
|
+
const s = window.innerWidth < 768;
|
|
323
|
+
if (ie(s), s)
|
|
276
324
|
K(null), _(1);
|
|
277
325
|
else {
|
|
278
|
-
const
|
|
279
|
-
K(
|
|
326
|
+
const I = Math.min(window.innerWidth, window.innerHeight), B = Math.max(360, Math.round(I * 0.97)), W = Math.min(B, 1e3);
|
|
327
|
+
K(W), _(1);
|
|
280
328
|
}
|
|
281
329
|
};
|
|
282
330
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
283
331
|
}, []);
|
|
284
|
-
const
|
|
285
|
-
if (!
|
|
286
|
-
const e =
|
|
287
|
-
|
|
288
|
-
},
|
|
289
|
-
const
|
|
290
|
-
let
|
|
291
|
-
for (;
|
|
292
|
-
|
|
293
|
-
|
|
332
|
+
const X = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), J = () => {
|
|
333
|
+
if (!g) return;
|
|
334
|
+
const e = X(ee[g]);
|
|
335
|
+
u(e), z(!0), j(!1), v(1), N(0), O([]), Z([]), Q(e, [], !0);
|
|
336
|
+
}, Q = (e = o, s = re, p = !1) => {
|
|
337
|
+
const h = X(e.length ? e : ee[g]);
|
|
338
|
+
let I = Math.floor(Math.random() * h.length), B = h[I].name, W = 0;
|
|
339
|
+
for (; s.includes(B) && W < 20; )
|
|
340
|
+
I = Math.floor(Math.random() * h.length), B = h[I].name, W++;
|
|
341
|
+
u(h), r(I), Z([...s, B]), D(!1), $(""), H(20), M(null), p ? (y("ready"), S(3), A(10)) : (y("memorize"), A(10));
|
|
294
342
|
};
|
|
295
|
-
|
|
296
|
-
if (!(!
|
|
297
|
-
if (
|
|
298
|
-
if (
|
|
343
|
+
P(() => {
|
|
344
|
+
if (!(!w || L || R)) {
|
|
345
|
+
if (a === "ready")
|
|
346
|
+
if (k <= 0) y("memorize");
|
|
299
347
|
else {
|
|
300
|
-
const e = setTimeout(() =>
|
|
348
|
+
const e = setTimeout(() => S((s) => s - 1), 1e3);
|
|
301
349
|
return () => clearTimeout(e);
|
|
302
350
|
}
|
|
303
|
-
if (
|
|
304
|
-
if (
|
|
351
|
+
if (a === "memorize")
|
|
352
|
+
if (T <= 0) y("guess");
|
|
305
353
|
else {
|
|
306
|
-
const e = setTimeout(() =>
|
|
354
|
+
const e = setTimeout(() => A((s) => s - 1), 1e3);
|
|
307
355
|
return () => clearTimeout(e);
|
|
308
356
|
}
|
|
309
|
-
if (
|
|
310
|
-
if (
|
|
311
|
-
|
|
312
|
-
const
|
|
313
|
-
|
|
314
|
-
...
|
|
315
|
-
{ round:
|
|
357
|
+
if (a === "guess") {
|
|
358
|
+
if (C <= 0) {
|
|
359
|
+
D(!0), M("wrong");
|
|
360
|
+
const s = o[f].name;
|
|
361
|
+
O((p) => [
|
|
362
|
+
...p,
|
|
363
|
+
{ round: x, answer: F, correct: s, result: "wrong" }
|
|
316
364
|
]);
|
|
317
365
|
return;
|
|
318
366
|
}
|
|
319
|
-
const e = setTimeout(() =>
|
|
367
|
+
const e = setTimeout(() => H((s) => s - 1), 1e3);
|
|
320
368
|
return () => clearTimeout(e);
|
|
321
369
|
}
|
|
322
370
|
}
|
|
323
|
-
}, [
|
|
324
|
-
const
|
|
325
|
-
if (
|
|
326
|
-
const e = o[
|
|
327
|
-
let
|
|
328
|
-
|
|
329
|
-
|
|
371
|
+
}, [a, k, T, C, w, L, R, o, f, x, F]);
|
|
372
|
+
const se = () => {
|
|
373
|
+
if (f === null || G) return;
|
|
374
|
+
const e = o[f].name, s = F.toLowerCase().trim();
|
|
375
|
+
let p = "wrong";
|
|
376
|
+
s === e ? (N((h) => h + 1), M("correct"), p = "correct") : we(s, e) === 1 ? (N((h) => h + 0.5), M("almost"), p = "almost") : (M("wrong"), p = "wrong"), O((h) => [...h, { round: x, answer: s, correct: e, result: p }]), q(!0), setTimeout(() => {
|
|
377
|
+
q(!1), D(!0);
|
|
330
378
|
}, 600);
|
|
331
|
-
},
|
|
332
|
-
|
|
333
|
-
},
|
|
379
|
+
}, le = () => x < i ? (v((e) => e + 1), Q()) : j(!0), ae = () => {
|
|
380
|
+
z(!1), j(!1), m(null);
|
|
381
|
+
}, de = me(
|
|
334
382
|
() => (
|
|
335
383
|
// ensure logo is positioned inside the square container
|
|
336
|
-
/* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */
|
|
384
|
+
/* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ c("picture", { children: [
|
|
337
385
|
/* @__PURE__ */ t("source", { srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg", type: "image/svg+xml" }),
|
|
338
386
|
/* @__PURE__ */ t("img", { src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png", alt: "SPEAKID Logo", style: n.gmLogoImg, loading: "lazy" })
|
|
339
387
|
] }) })
|
|
@@ -358,16 +406,16 @@ function Ce() {
|
|
|
358
406
|
"div",
|
|
359
407
|
{
|
|
360
408
|
style: {
|
|
361
|
-
width:
|
|
362
|
-
height:
|
|
409
|
+
width: b ? "100%" : U || 1e3,
|
|
410
|
+
height: b ? "100%" : U || 1e3,
|
|
363
411
|
display: "flex",
|
|
364
412
|
justifyContent: "center",
|
|
365
413
|
alignItems: "center",
|
|
366
414
|
overflow: "hidden",
|
|
367
|
-
borderRadius:
|
|
415
|
+
borderRadius: b ? 0 : "20px",
|
|
368
416
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
369
|
-
boxShadow:
|
|
370
|
-
margin:
|
|
417
|
+
boxShadow: b ? "none" : "0 0 40px rgba(0,0,0,0.1)",
|
|
418
|
+
margin: b ? "0 auto" : "unset",
|
|
371
419
|
position: "relative"
|
|
372
420
|
// needed so absolute logo is inside the square
|
|
373
421
|
},
|
|
@@ -382,69 +430,69 @@ function Ce() {
|
|
|
382
430
|
justifyContent: "center",
|
|
383
431
|
alignItems: "center"
|
|
384
432
|
},
|
|
385
|
-
children: /* @__PURE__ */
|
|
386
|
-
!
|
|
387
|
-
!
|
|
433
|
+
children: /* @__PURE__ */ c("div", { id: "whats-missing-root", children: [
|
|
434
|
+
!b && de,
|
|
435
|
+
!g && !w && /* @__PURE__ */ c("div", { style: n.gmCenterScreen, children: [
|
|
388
436
|
/* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
389
437
|
/* @__PURE__ */ t("p", { style: n.gmBodyM, children: "Select a theme:" }),
|
|
390
|
-
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t("button", { style: n.gmButton, onClick: () =>
|
|
391
|
-
/* @__PURE__ */
|
|
438
|
+
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t("button", { style: n.gmButton, onClick: () => m(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
|
|
439
|
+
/* @__PURE__ */ c("div", { style: { marginTop: 24 }, children: [
|
|
392
440
|
/* @__PURE__ */ t("p", { style: n.gmBodyS, children: "Choose number of rounds:" }),
|
|
393
441
|
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ t(
|
|
394
442
|
"button",
|
|
395
443
|
{
|
|
396
444
|
style: {
|
|
397
445
|
...n.gmButton,
|
|
398
|
-
...
|
|
446
|
+
...i === e ? n.gmButtonActive : {}
|
|
399
447
|
},
|
|
400
|
-
onClick: () =>
|
|
448
|
+
onClick: () => E(e),
|
|
401
449
|
children: e
|
|
402
450
|
},
|
|
403
451
|
e
|
|
404
452
|
)) })
|
|
405
453
|
] })
|
|
406
454
|
] }),
|
|
407
|
-
|
|
408
|
-
/* @__PURE__ */
|
|
455
|
+
g && !w && /* @__PURE__ */ c("div", { style: n.gmCenterScreen, children: [
|
|
456
|
+
/* @__PURE__ */ c("h1", { style: n.gmHeadline1, children: [
|
|
409
457
|
"Theme selected: ",
|
|
410
|
-
|
|
458
|
+
g
|
|
411
459
|
] }),
|
|
412
|
-
/* @__PURE__ */
|
|
460
|
+
/* @__PURE__ */ c("p", { style: n.gmBodyM, children: [
|
|
413
461
|
"Rounds: ",
|
|
414
|
-
|
|
462
|
+
i
|
|
415
463
|
] }),
|
|
416
|
-
/* @__PURE__ */ t("button", { style: n.gmButton, onClick:
|
|
464
|
+
/* @__PURE__ */ t("button", { style: n.gmButton, onClick: J, children: "▶ Start game" })
|
|
417
465
|
] }),
|
|
418
|
-
|
|
466
|
+
L && /* @__PURE__ */ c("div", { style: n.gmCenterScreen, children: [
|
|
419
467
|
/* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "Results" }),
|
|
420
|
-
/* @__PURE__ */
|
|
468
|
+
/* @__PURE__ */ c("h2", { style: n.gmHeadline3, children: [
|
|
421
469
|
"Your score: ",
|
|
422
|
-
|
|
470
|
+
ne,
|
|
423
471
|
" / ",
|
|
424
|
-
|
|
472
|
+
i
|
|
425
473
|
] }),
|
|
426
474
|
/* @__PURE__ */ t("p", { style: { ...n.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
|
|
427
|
-
/* @__PURE__ */
|
|
428
|
-
/* @__PURE__ */ t("thead", { children: /* @__PURE__ */
|
|
475
|
+
/* @__PURE__ */ c("table", { style: n.gmTable, children: [
|
|
476
|
+
/* @__PURE__ */ t("thead", { children: /* @__PURE__ */ c("tr", { children: [
|
|
429
477
|
/* @__PURE__ */ t("th", { children: "Round" }),
|
|
430
478
|
/* @__PURE__ */ t("th", { children: "Your Answer" }),
|
|
431
479
|
/* @__PURE__ */ t("th", { children: "Correct" }),
|
|
432
480
|
/* @__PURE__ */ t("th", { children: "Result" })
|
|
433
481
|
] }) }),
|
|
434
|
-
/* @__PURE__ */ t("tbody", { children:
|
|
482
|
+
/* @__PURE__ */ t("tbody", { children: oe.map((e, s) => /* @__PURE__ */ c("tr", { children: [
|
|
435
483
|
/* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.round }),
|
|
436
484
|
/* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.answer || "—" }),
|
|
437
485
|
/* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.correct }),
|
|
438
486
|
/* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
|
|
439
|
-
] },
|
|
487
|
+
] }, s)) })
|
|
440
488
|
] }),
|
|
441
|
-
/* @__PURE__ */
|
|
442
|
-
/* @__PURE__ */ t("button", { style: n.gmButton, onClick:
|
|
443
|
-
/* @__PURE__ */ t("button", { style: n.gmButton, onClick:
|
|
489
|
+
/* @__PURE__ */ c("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
490
|
+
/* @__PURE__ */ t("button", { style: n.gmButton, onClick: J, children: "🔁 Play again" }),
|
|
491
|
+
/* @__PURE__ */ t("button", { style: n.gmButton, onClick: ae, children: "⬅️ Choose theme" })
|
|
444
492
|
] })
|
|
445
493
|
] }),
|
|
446
|
-
|
|
447
|
-
/* @__PURE__ */
|
|
494
|
+
w && !L && /* @__PURE__ */ c("div", { style: n.gmGameLayout, children: [
|
|
495
|
+
/* @__PURE__ */ c(
|
|
448
496
|
"div",
|
|
449
497
|
{
|
|
450
498
|
style: {
|
|
@@ -455,44 +503,44 @@ function Ce() {
|
|
|
455
503
|
alignItems: "center"
|
|
456
504
|
},
|
|
457
505
|
children: [
|
|
458
|
-
|
|
506
|
+
a === "ready" && /* @__PURE__ */ c(ce, { children: [
|
|
459
507
|
/* @__PURE__ */ t("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
|
|
460
508
|
/* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
|
|
461
509
|
] }),
|
|
462
|
-
|
|
510
|
+
a === "memorize" && /* @__PURE__ */ c("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
|
|
463
511
|
"MEMORIZE (",
|
|
464
|
-
|
|
512
|
+
T,
|
|
465
513
|
")"
|
|
466
514
|
] }),
|
|
467
|
-
|
|
515
|
+
a === "guess" && !R && /* @__PURE__ */ c("p", { style: n.gmBodyM, children: [
|
|
468
516
|
"⏳ Time left: ",
|
|
469
|
-
|
|
517
|
+
C,
|
|
470
518
|
"s"
|
|
471
519
|
] })
|
|
472
520
|
]
|
|
473
521
|
}
|
|
474
522
|
),
|
|
475
|
-
|
|
523
|
+
a !== "ready" && /* @__PURE__ */ t(
|
|
476
524
|
"div",
|
|
477
525
|
{
|
|
478
526
|
style: {
|
|
479
527
|
...n.gmGrid,
|
|
480
|
-
gridTemplateColumns:
|
|
481
|
-
gridAutoRows:
|
|
482
|
-
gap:
|
|
528
|
+
gridTemplateColumns: b ? "repeat(2, 1fr)" : "repeat(3, 210px)",
|
|
529
|
+
gridAutoRows: b ? "150px" : "210px",
|
|
530
|
+
gap: b ? "12px" : "20px",
|
|
483
531
|
justifyItems: "center"
|
|
484
532
|
},
|
|
485
|
-
children: o.map((e,
|
|
486
|
-
const
|
|
533
|
+
children: o.map((e, s) => {
|
|
534
|
+
const p = f === s && a === "guess" && !R;
|
|
487
535
|
return /* @__PURE__ */ t(
|
|
488
536
|
"div",
|
|
489
537
|
{
|
|
490
538
|
style: {
|
|
491
539
|
...n.gmCard,
|
|
492
|
-
...
|
|
493
|
-
...
|
|
540
|
+
...V === "correct" && f === s ? n.gmCorrect : {},
|
|
541
|
+
...V === "wrong" && f === s ? n.gmWrong : {}
|
|
494
542
|
},
|
|
495
|
-
children: !
|
|
543
|
+
children: !p && /* @__PURE__ */ t(
|
|
496
544
|
"img",
|
|
497
545
|
{
|
|
498
546
|
src: e.src,
|
|
@@ -505,20 +553,20 @@ function Ce() {
|
|
|
505
553
|
}
|
|
506
554
|
)
|
|
507
555
|
},
|
|
508
|
-
|
|
556
|
+
s
|
|
509
557
|
);
|
|
510
558
|
})
|
|
511
559
|
}
|
|
512
560
|
),
|
|
513
|
-
/* @__PURE__ */
|
|
514
|
-
|
|
561
|
+
/* @__PURE__ */ c("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
562
|
+
a === "guess" && !R && /* @__PURE__ */ c("div", { children: [
|
|
515
563
|
/* @__PURE__ */ t(
|
|
516
564
|
"input",
|
|
517
565
|
{
|
|
518
566
|
type: "text",
|
|
519
567
|
placeholder: "Type the missing word",
|
|
520
|
-
value:
|
|
521
|
-
onChange: (e) =>
|
|
568
|
+
value: F,
|
|
569
|
+
onChange: (e) => $(e.target.value),
|
|
522
570
|
style: n.gmInput
|
|
523
571
|
}
|
|
524
572
|
),
|
|
@@ -526,13 +574,13 @@ function Ce() {
|
|
|
526
574
|
"button",
|
|
527
575
|
{
|
|
528
576
|
style: { ...n.gmButton, marginLeft: 8 },
|
|
529
|
-
onClick:
|
|
530
|
-
disabled:
|
|
531
|
-
children:
|
|
577
|
+
onClick: se,
|
|
578
|
+
disabled: G,
|
|
579
|
+
children: G ? "..." : "Check"
|
|
532
580
|
}
|
|
533
581
|
)
|
|
534
582
|
] }),
|
|
535
|
-
|
|
583
|
+
R && /* @__PURE__ */ t("button", { type: "button", style: n.gmButton, onClick: le, children: "Next round" })
|
|
536
584
|
] })
|
|
537
585
|
] })
|
|
538
586
|
] })
|
|
@@ -544,6 +592,6 @@ function Ce() {
|
|
|
544
592
|
);
|
|
545
593
|
}
|
|
546
594
|
export {
|
|
547
|
-
|
|
548
|
-
|
|
595
|
+
Se as Game,
|
|
596
|
+
ee as themes
|
|
549
597
|
};
|