@mblinkov/whats-missing 20.0.11 → 20.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/whats-missing.cjs.js +3 -40
- package/dist/whats-missing.es.js +247 -295
- package/package.json +1 -1
- package/src/Game.tsx +217 -264
|
@@ -1,54 +1,17 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),oe=window.origin+"/cloud/speakid/games/whatsmissing/",B=(r,l)=>r.map(([a,n])=>({src:`${oe}${l}/${n.replace(/\s/g,"%20")}.png`,name:n})),ie=[["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"]],re=[["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"]],le=[["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"]],L={food:B(ie,"food"),animals:B(re,"animals"),toys:B(le,"toys")},ae=`
|
|
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 r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=ae,document.head.appendChild(r)}const
|
|
7
|
-
html, body {
|
|
8
|
-
margin: 0;
|
|
9
|
-
padding: 0;
|
|
10
|
-
width: 100%;
|
|
11
|
-
height: 100%;
|
|
12
|
-
overflow-x: hidden;
|
|
13
|
-
overflow-y: hidden;
|
|
14
|
-
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
15
|
-
background-repeat: no-repeat;
|
|
16
|
-
background-attachment: fixed;
|
|
17
|
-
background-size: cover;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
#whats-missing-root {
|
|
21
|
-
all: unset;
|
|
22
|
-
display: flex;
|
|
23
|
-
flex-direction: column;
|
|
24
|
-
justify-content: center;
|
|
25
|
-
align-items: center;
|
|
26
|
-
position: fixed;
|
|
27
|
-
inset: 0;
|
|
28
|
-
width: 100vw;
|
|
29
|
-
height: 100vh;
|
|
30
|
-
margin: 0;
|
|
31
|
-
padding: 0;
|
|
32
|
-
color: #1f2937;
|
|
33
|
-
text-align: center;
|
|
34
|
-
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
35
|
-
background-size: cover;
|
|
36
|
-
}
|
|
37
|
-
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=ae,document.head.appendChild(r)}const de={animation:"spin 1.4s linear infinite"},s={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",...de}},ce=()=>{const r=document.createElement("style");r.textContent=`
|
|
38
7
|
#whats-missing-root, #whats-missing-root * {
|
|
39
8
|
box-sizing: border-box;
|
|
40
9
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
41
10
|
}
|
|
42
|
-
|
|
43
11
|
#whats-missing-root img {
|
|
44
12
|
max-width: 100%;
|
|
45
13
|
height: auto;
|
|
46
14
|
display: block;
|
|
47
15
|
user-select: none;
|
|
48
16
|
}
|
|
49
|
-
|
|
50
|
-
@keyframes spin {
|
|
51
|
-
from { transform: rotate(0deg); }
|
|
52
|
-
to { transform: rotate(360deg); }
|
|
53
|
-
}
|
|
54
|
-
`,document.head.appendChild(r)},ce=(r,c)=>{const a=Array.from({length:r.length+1},()=>Array(c.length+1).fill(0));for(let s=0;s<=r.length;s++)a[s][0]=s;for(let s=0;s<=c.length;s++)a[0][s]=s;for(let s=1;s<=r.length;s++)for(let l=1;l<=c.length;l++)a[s][l]=r[s-1]===c[l-1]?a[s-1][l-1]:Math.min(a[s-1][l-1],a[s][l-1],a[s-1][l])+1;return a[r.length][c.length]};function me(){n.useEffect(()=>{de()},[]);const[r,c]=n.useState(null),[a,s]=n.useState([]),[l,_]=n.useState(4),[h,L]=n.useState(!1),[x,W]=n.useState(1),[u,$]=n.useState(null),[m,y]=n.useState("ready"),[E,G]=n.useState(3),[k,v]=n.useState(10),[C,F]=n.useState(20),[K,T]=n.useState(0),[b,z]=n.useState(!1),[w,Y]=n.useState(""),[p,R]=n.useState(!1),[I,D]=n.useState(!1),[q,f]=n.useState(null),[Z,A]=n.useState([]),[J,P]=n.useState([]),[j,Q]=n.useState(!1);n.useEffect(()=>{const t=()=>Q(window.innerWidth<768);return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const U=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),N=()=>{if(!r)return;const t=U(B[r]);s(t),L(!0),z(!1),W(1),T(0),A([]),P([]),O(t,[],!0)},O=(t=a,i=J,g=!1)=>{const d=U(t.length?t:B[r]);let S=Math.floor(Math.random()*d.length),M=d[S].name,V=0;for(;i.includes(M)&&V<20;)S=Math.floor(Math.random()*d.length),M=d[S].name,V++;s(d),$(S),P([...i,M]),R(!1),Y(""),F(20),f(null),g?(y("ready"),G(3),v(10)):(y("memorize"),v(10))};n.useEffect(()=>{if(!(!h||b||p)){if(m==="ready")if(E<=0)y("memorize");else{const t=setTimeout(()=>G(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="memorize")if(k<=0)y("guess");else{const t=setTimeout(()=>v(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="guess"){if(C<=0){R(!0),f("wrong");const i=a[u].name;A(g=>[...g,{round:x,answer:w,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}}},[m,E,k,C,h,b,p,a,u,x,w]);const X=()=>{if(u===null||I)return;const t=a[u].name,i=w.toLowerCase().trim();let g="wrong";i===t?(T(d=>d+1),f("correct"),g="correct"):ce(i,t)===1?(T(d=>d+.5),f("almost"),g="almost"):(f("wrong"),g="wrong"),A(d=>[...d,{round:x,answer:i,correct:t,result:g}]),D(!0),setTimeout(()=>{D(!1),R(!0)},600)},ee=()=>x<l?(W(t=>t+1),O()):z(!0),te=()=>{L(!1),z(!1),c(null)},oe=n.useMemo(()=>e.jsx("div",{style:o.gmLogoFixed,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:o.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsxs("div",{id:"whats-missing-root",children:[!j&&oe,!r&&!h&&e.jsxs("div",{style:o.gmCenterScreen,children:[e.jsx("h1",{style:o.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:o.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:o.gmButton,onClick:()=>c(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:o.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:{...o.gmButton,...l===t?o.gmButtonActive:{}},onClick:()=>_(t),children:t},t))})]})]}),r&&!h&&e.jsxs("div",{style:o.gmCenterScreen,children:[e.jsxs("h1",{style:o.gmHeadline1,children:["Theme selected: ",r]}),e.jsxs("p",{style:o.gmBodyM,children:["Rounds: ",l]}),e.jsx("button",{style:o.gmButton,onClick:N,children:"▶ Start game"})]}),b&&e.jsxs("div",{style:o.gmCenterScreen,children:[e.jsx("h1",{style:o.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:o.gmHeadline3,children:["Your score: ",K," / ",l]}),e.jsx("p",{style:{...o.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:o.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:Z.map((t,i)=>e.jsxs("tr",{children:[e.jsx("td",{style:o.gmTableCell,children:t.round}),e.jsx("td",{style:o.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:o.gmTableCell,children:t.correct}),e.jsx("td",{style:o.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:o.gmButton,onClick:N,children:"🔁 Play again"}),e.jsx("button",{style:o.gmButton,onClick:te,children:"⬅️ Choose theme"})]})]}),h&&!b&&e.jsxs("div",{style:o.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[m==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...o.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:o.gmHourglass,children:"⏳"})]}),m==="memorize"&&e.jsxs("p",{style:{...o.gmBodyM,color:"#10b981"},children:["MEMORIZE (",k,")"]}),m==="guess"&&!p&&e.jsxs("p",{style:o.gmBodyM,children:["⏳ Time left: ",C,"s"]})]}),m!=="ready"&&e.jsx("div",{style:{...o.gmGrid,gridTemplateColumns:j?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:j?"150px":"210px",gap:j?"12px":"20px",justifyItems:"center",...window.innerWidth>2e3?{gridTemplateColumns:"repeat(3, 260px)",gridAutoRows:"260px",gap:"28px"}:{},...window.innerWidth>2560?{gridTemplateColumns:"repeat(3, 300px)",gridAutoRows:"300px",gap:"32px"}:{}},children:a.map((t,i)=>{const g=u===i&&m==="guess"&&!p;return e.jsx("div",{style:{...o.gmCard,...q==="correct"&&u===i?o.gmCorrect:{},...q==="wrong"&&u===i?o.gmWrong:{}},children:!g&&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:[m==="guess"&&!p&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:w,onChange:t=>Y(t.target.value),style:o.gmInput}),e.jsx("button",{style:{...o.gmButton,marginLeft:8},onClick:X,disabled:I,children:I?"...":"Check"})]}),p&&e.jsx("button",{style:o.gmButton,onClick:ee,children:"Next round"})]})]})]})}exports.Game=me;exports.themes=B;
|
|
17
|
+
`,document.head.appendChild(r)},me=(r,l)=>{const a=Array.from({length:r.length+1},()=>Array(l.length+1).fill(0));for(let n=0;n<=r.length;n++)a[n][0]=n;for(let n=0;n<=l.length;n++)a[0][n]=n;for(let n=1;n<=r.length;n++)for(let d=1;d<=l.length;d++)a[n][d]=r[n-1]===l[d-1]?a[n-1][d-1]:Math.min(a[n-1][d-1],a[n][d-1],a[n-1][d])+1;return a[r.length][l.length]};function ge(){const r=o.useRef(null);o.useEffect(()=>(ce(),()=>{document.body.style.overflow=""}),[]);const[l,a]=o.useState(null),[n,d]=o.useState([]),[f,$]=o.useState(4),[p,W]=o.useState(!1),[y,E]=o.useState(1),[u,K]=o.useState(null),[m,b]=o.useState("ready"),[G,F]=o.useState(3),[v,C]=o.useState(10),[T,D]=o.useState(20),[Z,z]=o.useState(0),[w,R]=o.useState(!1),[j,Y]=o.useState(""),[h,I]=o.useState(!1),[H,q]=o.useState(!1),[P,x]=o.useState(null),[J,M]=o.useState([]),[Q,U]=o.useState([]),[S,X]=o.useState(!1);o.useEffect(()=>{const t=()=>X(window.innerWidth<768);return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const N=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),O=()=>{if(!l)return;const t=N(L[l]);d(t),W(!0),R(!1),E(1),z(0),M([]),U([]),V(t,[],!0)},V=(t=n,i=Q,g=!1)=>{const c=N(t.length?t:L[l]);let k=Math.floor(Math.random()*c.length),A=c[k].name,_=0;for(;i.includes(A)&&_<20;)k=Math.floor(Math.random()*c.length),A=c[k].name,_++;d(c),K(k),U([...i,A]),I(!1),Y(""),D(20),x(null),g?(b("ready"),F(3),C(10)):(b("memorize"),C(10))};o.useEffect(()=>{if(!(!p||w||h)){if(m==="ready")if(G<=0)b("memorize");else{const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="memorize")if(v<=0)b("guess");else{const t=setTimeout(()=>C(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="guess"){if(T<=0){I(!0),x("wrong");const i=n[u].name;M(g=>[...g,{round:y,answer:j,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>D(i=>i-1),1e3);return()=>clearTimeout(t)}}},[m,G,v,T,p,w,h,n,u,y,j]);const ee=()=>{if(u===null||H)return;const t=n[u].name,i=j.toLowerCase().trim();let g="wrong";i===t?(z(c=>c+1),x("correct"),g="correct"):me(i,t)===1?(z(c=>c+.5),x("almost"),g="almost"):(x("wrong"),g="wrong"),M(c=>[...c,{round:y,answer:i,correct:t,result:g}]),q(!0),setTimeout(()=>{q(!1),I(!0)},600)},te=()=>y<f?(E(t=>t+1),V()):R(!0),se=()=>{W(!1),R(!1),a(null)},ne=o.useMemo(()=>e.jsx("div",{style:s.gmLogoFixed,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:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%",overflow:"hidden"},children:e.jsx("div",{style:{width:window.innerWidth>window.innerHeight?"90vh":"90vw",height:window.innerWidth>window.innerHeight?"90vh":"90vw",display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",borderRadius:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)"},children:e.jsxs("div",{id:"whats-missing-root",children:[!S&&ne,!l&&!p&&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:()=>a(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,...f===t?s.gmButtonActive:{}},onClick:()=>$(t),children:t},t))})]})]}),l&&!p&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsxs("h1",{style:s.gmHeadline1,children:["Theme selected: ",l]}),e.jsxs("p",{style:s.gmBodyM,children:["Rounds: ",f]}),e.jsx("button",{style:s.gmButton,onClick:O,children:"▶ Start game"})]}),w&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",Z," / ",f]}),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:J.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:O,children:"🔁 Play again"}),e.jsx("button",{style:s.gmButton,onClick:se,children:"⬅️ Choose theme"})]})]}),p&&!w&&e.jsxs("div",{style:s.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[m==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...s.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:s.gmHourglass,children:"⏳"})]}),m==="memorize"&&e.jsxs("p",{style:{...s.gmBodyM,color:"#10b981"},children:["MEMORIZE (",v,")"]}),m==="guess"&&!h&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",T,"s"]})]}),m!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:S?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:S?"150px":"210px",gap:S?"12px":"20px",justifyItems:"center"},children:n.map((t,i)=>{const g=u===i&&m==="guess"&&!h;return e.jsx("div",{style:{...s.gmCard,...P==="correct"&&u===i?s.gmCorrect:{},...P==="wrong"&&u===i?s.gmWrong:{}},children:!g&&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:[m==="guess"&&!h&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:j,onChange:t=>Y(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:ee,disabled:H,children:H?"...":"Check"})]}),h&&e.jsx("button",{style:s.gmButton,onClick:te,children:"Next round"})]})]})]})})})}exports.Game=ge;exports.themes=L;
|