@mblinkov/whats-missing 20.0.18 → 20.0.19
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 +4 -8
- package/dist/whats-missing.es.js +144 -192
- package/package.json +1 -1
- package/src/Game.tsx +81 -140
|
@@ -1,9 +1,9 @@
|
|
|
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"),i=require("react"),ge=window.origin+"/cloud/speakid/games/whatsmissing/",$=(a,l)=>a.map(([c,n])=>({src:`${ge}${l}/${n.replace(/\s/g,"%20")}.png`,name:n})),ue=[["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"]],he=[["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"]],pe=[["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"]],N={food:$(ue,"food"),animals:$(he,"animals"),toys:$(pe,"toys")},fe=`
|
|
2
2
|
@keyframes spin {
|
|
3
3
|
from { transform: rotate(0deg); }
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
5
5
|
}
|
|
6
|
-
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const a=document.createElement("style");a.id="spin-keyframes",a.innerHTML=fe,document.head.appendChild(a)}const xe={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",...xe}},ye=()=>{const a=document.createElement("style");a.textContent=`
|
|
7
7
|
#whats-missing-root, #whats-missing-root * {
|
|
8
8
|
box-sizing: border-box;
|
|
9
9
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
@@ -14,9 +14,5 @@
|
|
|
14
14
|
display: block;
|
|
15
15
|
user-select: none;
|
|
16
16
|
}
|
|
17
|
-
html, body {
|
|
18
|
-
|
|
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;
|
|
17
|
+
html, body { margin: 0; padding: 0; }
|
|
18
|
+
`,document.head.appendChild(a)},be=(a,l)=>{const c=Array.from({length:a.length+1},()=>Array(l.length+1).fill(0));for(let n=0;n<=a.length;n++)c[n][0]=n;for(let n=0;n<=l.length;n++)c[0][n]=n;for(let n=1;n<=a.length;n++)for(let m=1;m<=l.length;m++)c[n][m]=a[n-1]===l[m-1]?c[n-1][m-1]:Math.min(c[n-1][m-1],c[n][m-1],c[n-1][m])+1;return c[a.length][l.length]};function we(){const a=i.useRef(null);i.useEffect(()=>(ye(),()=>{document.body.style.overflow=""}),[]);const[l,c]=i.useState(null),[n,m]=i.useState([]),[S,te]=i.useState(4),[w,P]=i.useState(!1),[v,Y]=i.useState(1),[x,se]=i.useState(null),[g,k]=i.useState("ready"),[q,D]=i.useState(3),[R,I]=i.useState(10),[H,O]=i.useState(20),[ne,B]=i.useState(0),[C,A]=i.useState(!1),[z,U]=i.useState(""),[b,L]=i.useState(!1),[E,V]=i.useState(!1),[_,j]=i.useState(null),[oe,F]=i.useState([]),[ie,K]=i.useState([]),[h,re]=i.useState(!1),[T,Z]=i.useState(null),[y,W]=i.useState(1);i.useEffect(()=>{const t=()=>{const r=window.innerWidth<768;if(re(r),r){Z(null);return}const p=.97,u=1e3,f=Math.min(window.innerWidth,window.innerHeight),M=Math.max(360,Math.round(f*p)),ee=Math.min(M,u);Z(ee)},o=()=>{try{const r=document.body,p=getComputedStyle(r),u=parseFloat(p.zoom||"");if(u&&!isNaN(u)&&u>0){W(u);return}const f=p.transform;if(f&&f!=="none"){const M=f.match(/matrix\(([^)]+)\)/);if(M){const G=M[1].split(",").map(me=>parseFloat(me))[0];if(G&&!isNaN(G)){W(G);return}}}}catch{}W(1)};t(),o(),window.addEventListener("resize",t),window.addEventListener("resize",o);const d=new MutationObserver(o);return d.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("resize",t),window.removeEventListener("resize",o),d.disconnect()}},[]);const X=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),J=()=>{if(!l)return;const t=X(N[l]);m(t),P(!0),A(!1),Y(1),B(0),F([]),K([]),Q(t,[],!0)},Q=(t=n,o=ie,d=!1)=>{const r=X(t.length?t:N[l]);let p=Math.floor(Math.random()*r.length),u=r[p].name,f=0;for(;o.includes(u)&&f<20;)p=Math.floor(Math.random()*r.length),u=r[p].name,f++;m(r),se(p),K([...o,u]),L(!1),U(""),O(20),j(null),d?(k("ready"),D(3),I(10)):(k("memorize"),I(10))};i.useEffect(()=>{if(!(!w||C||b)){if(g==="ready")if(q<=0)k("memorize");else{const t=setTimeout(()=>D(o=>o-1),1e3);return()=>clearTimeout(t)}if(g==="memorize")if(R<=0)k("guess");else{const t=setTimeout(()=>I(o=>o-1),1e3);return()=>clearTimeout(t)}if(g==="guess"){if(H<=0){L(!0),j("wrong");const o=n[x].name;F(d=>[...d,{round:v,answer:z,correct:o,result:"wrong"}]);return}const t=setTimeout(()=>O(o=>o-1),1e3);return()=>clearTimeout(t)}}},[g,q,R,H,w,C,b,n,x,v,z]);const ae=()=>{if(x===null||E)return;const t=n[x].name,o=z.toLowerCase().trim();let d="wrong";o===t?(B(r=>r+1),j("correct"),d="correct"):be(o,t)===1?(B(r=>r+.5),j("almost"),d="almost"):(j("wrong"),d="wrong"),F(r=>[...r,{round:v,answer:o,correct:t,result:d}]),V(!0),setTimeout(()=>{V(!1),L(!0)},600)},le=()=>v<S?(Y(t=>t+1),Q()):A(!0),de=()=>{P(!1),A(!1),c(null)},ce=i.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: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:h?"100%":T?`${Math.round(T*y)}px`:`${Math.round(1e3*y)}px`,height:h?"100%":T?`${Math.round(T*y)}px`:`${Math.round(1e3*y)}px`,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:h?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:h?"none":"0 0 40px rgba(0,0,0,0.1)",margin:h?"0 auto":"unset",position:"relative"},children:e.jsx("div",{style:{transform:y&&y!==1?`scale(${1/y})`:"none",transformOrigin:"top left",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!h&&ce,!l&&!w&&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:()=>c(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,...S===t?s.gmButtonActive:{}},onClick:()=>te(t),children:t},t))})]})]}),l&&!w&&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: ",S]}),e.jsx("button",{style:s.gmButton,onClick:J,children:"▶ Start game"})]}),C&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",ne," / ",S]}),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:oe.map((t,o)=>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"})]},o))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:s.gmButton,onClick:J,children:"🔁 Play again"}),e.jsx("button",{style:s.gmButton,onClick:de,children:"⬅️ Choose theme"})]})]}),w&&!C&&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 (",R,")"]}),g==="guess"&&!b&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",H,"s"]})]}),g!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:h?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:h?"150px":"210px",gap:h?"12px":"20px",justifyItems:"center"},children:n.map((t,o)=>{const d=x===o&&g==="guess"&&!b;return e.jsx("div",{style:{...s.gmCard,..._==="correct"&&x===o?s.gmCorrect:{},..._==="wrong"&&x===o?s.gmWrong:{}},children:!d&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},o)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[g==="guess"&&!b&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:z,onChange:t=>U(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:ae,disabled:E,children:E?"...":"Check"})]}),b&&e.jsx("button",{style:s.gmButton,onClick:le,children:"Next round"})]})]})]})})})})}exports.Game=we;exports.themes=N;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as t, jsxs as s, Fragment as
|
|
2
|
-
import { useRef as
|
|
3
|
-
const
|
|
4
|
-
src: `${
|
|
1
|
+
import { jsx as t, jsxs as s, Fragment as pe } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as he, useEffect as N, useState as r, useMemo as fe } from "react";
|
|
3
|
+
const ye = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, d) => l.map(([m, o]) => ({
|
|
4
|
+
src: `${ye}${d}/${o.replace(/\s/g, "%20")}.png`,
|
|
5
5
|
name: o
|
|
6
|
-
})),
|
|
6
|
+
})), xe = [
|
|
7
7
|
["apple", "apple"],
|
|
8
8
|
["banana", "banana"],
|
|
9
9
|
["bread", "bread"],
|
|
@@ -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
|
+
], be = [
|
|
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
|
+
], we = [
|
|
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
|
+
], ne = {
|
|
73
|
+
food: Y(xe, "food"),
|
|
74
|
+
animals: Y(be, "animals"),
|
|
75
|
+
toys: Y(we, "toys")
|
|
76
|
+
}, ve = `
|
|
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 = ve, document.head.appendChild(l);
|
|
85
85
|
}
|
|
86
|
-
const
|
|
86
|
+
const ke = {
|
|
87
87
|
animation: "spin 1.4s linear infinite"
|
|
88
88
|
}, n = {
|
|
89
89
|
gmCenterScreen: {
|
|
@@ -233,9 +233,9 @@ const ye = {
|
|
|
233
233
|
},
|
|
234
234
|
gmHourglass: {
|
|
235
235
|
fontSize: "42px",
|
|
236
|
-
...
|
|
236
|
+
...ke
|
|
237
237
|
}
|
|
238
|
-
},
|
|
238
|
+
}, Ce = () => {
|
|
239
239
|
const l = document.createElement("style");
|
|
240
240
|
l.textContent = `
|
|
241
241
|
#whats-missing-root, #whats-missing-root * {
|
|
@@ -248,89 +248,107 @@ const ye = {
|
|
|
248
248
|
display: block;
|
|
249
249
|
user-select: none;
|
|
250
250
|
}
|
|
251
|
-
html, body {
|
|
252
|
-
margin: 0;
|
|
253
|
-
padding: 0;
|
|
254
|
-
zoom: 1 !important; /* ✅ защита от подзума */
|
|
255
|
-
}
|
|
251
|
+
html, body { margin: 0; padding: 0; }
|
|
256
252
|
`, document.head.appendChild(l);
|
|
257
|
-
},
|
|
258
|
-
const
|
|
259
|
-
for (let o = 0; o <= l.length; o++)
|
|
260
|
-
for (let o = 0; o <=
|
|
253
|
+
}, Se = (l, d) => {
|
|
254
|
+
const m = Array.from({ length: l.length + 1 }, () => Array(d.length + 1).fill(0));
|
|
255
|
+
for (let o = 0; o <= l.length; o++) m[o][0] = o;
|
|
256
|
+
for (let o = 0; o <= d.length; o++) m[0][o] = o;
|
|
261
257
|
for (let o = 1; o <= l.length; o++)
|
|
262
|
-
for (let
|
|
263
|
-
|
|
264
|
-
return
|
|
258
|
+
for (let g = 1; g <= d.length; g++)
|
|
259
|
+
m[o][g] = l[o - 1] === d[g - 1] ? m[o - 1][g - 1] : Math.min(m[o - 1][g - 1], m[o][g - 1], m[o - 1][g]) + 1;
|
|
260
|
+
return m[l.length][d.length];
|
|
265
261
|
};
|
|
266
|
-
function
|
|
267
|
-
const l =
|
|
268
|
-
|
|
262
|
+
function Me() {
|
|
263
|
+
const l = he(null);
|
|
264
|
+
N(() => (Ce(), () => {
|
|
269
265
|
document.body.style.overflow = "";
|
|
270
266
|
}), []);
|
|
271
|
-
const [
|
|
272
|
-
|
|
267
|
+
const [d, m] = r(null), [o, g] = r([]), [C, oe] = r(4), [v, D] = r(!1), [S, P] = r(1), [x, ie] = r(null), [u, z] = r("ready"), [O, U] = r(3), [H, B] = r(10), [A, V] = r(20), [re, L] = r(0), [T, j] = r(!1), [M, q] = r(""), [w, F] = r(!1), [W, _] = r(!1), [K, k] = r(null), [se, E] = r([]), [ae, Z] = r([]), [h, le] = r(!1), [R, X] = r(null), [b, G] = r(1);
|
|
268
|
+
N(() => {
|
|
273
269
|
const e = () => {
|
|
274
|
-
const
|
|
275
|
-
if (
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
270
|
+
const a = window.innerWidth < 768;
|
|
271
|
+
if (le(a), a) {
|
|
272
|
+
X(null);
|
|
273
|
+
return;
|
|
274
|
+
}
|
|
275
|
+
const f = 0.97, p = 1e3, y = Math.min(window.innerWidth, window.innerHeight), I = Math.max(360, Math.round(y * f)), te = Math.min(I, p);
|
|
276
|
+
X(te);
|
|
277
|
+
}, i = () => {
|
|
278
|
+
try {
|
|
279
|
+
const a = document.body, f = getComputedStyle(a), p = parseFloat(f.zoom || "");
|
|
280
|
+
if (p && !isNaN(p) && p > 0) {
|
|
281
|
+
G(p);
|
|
282
|
+
return;
|
|
283
|
+
}
|
|
284
|
+
const y = f.transform;
|
|
285
|
+
if (y && y !== "none") {
|
|
286
|
+
const I = y.match(/matrix\(([^)]+)\)/);
|
|
287
|
+
if (I) {
|
|
288
|
+
const $ = I[1].split(",").map((ue) => parseFloat(ue))[0];
|
|
289
|
+
if ($ && !isNaN($)) {
|
|
290
|
+
G($);
|
|
291
|
+
return;
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
} catch {
|
|
280
296
|
}
|
|
297
|
+
G(1);
|
|
298
|
+
};
|
|
299
|
+
e(), i(), window.addEventListener("resize", e), window.addEventListener("resize", i);
|
|
300
|
+
const c = new MutationObserver(i);
|
|
301
|
+
return c.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), () => {
|
|
302
|
+
window.removeEventListener("resize", e), window.removeEventListener("resize", i), c.disconnect();
|
|
281
303
|
};
|
|
282
|
-
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
283
304
|
}, []);
|
|
284
|
-
const
|
|
285
|
-
if (!
|
|
286
|
-
const e =
|
|
287
|
-
|
|
288
|
-
},
|
|
289
|
-
const
|
|
290
|
-
let
|
|
291
|
-
for (; i.includes(
|
|
292
|
-
|
|
293
|
-
|
|
305
|
+
const J = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), Q = () => {
|
|
306
|
+
if (!d) return;
|
|
307
|
+
const e = J(ne[d]);
|
|
308
|
+
g(e), D(!0), j(!1), P(1), L(0), E([]), Z([]), ee(e, [], !0);
|
|
309
|
+
}, ee = (e = o, i = ae, c = !1) => {
|
|
310
|
+
const a = J(e.length ? e : ne[d]);
|
|
311
|
+
let f = Math.floor(Math.random() * a.length), p = a[f].name, y = 0;
|
|
312
|
+
for (; i.includes(p) && y < 20; )
|
|
313
|
+
f = Math.floor(Math.random() * a.length), p = a[f].name, y++;
|
|
314
|
+
g(a), ie(f), Z([...i, p]), F(!1), q(""), V(20), k(null), c ? (z("ready"), U(3), B(10)) : (z("memorize"), B(10));
|
|
294
315
|
};
|
|
295
|
-
|
|
296
|
-
if (!(!
|
|
297
|
-
if (
|
|
298
|
-
if (
|
|
316
|
+
N(() => {
|
|
317
|
+
if (!(!v || T || w)) {
|
|
318
|
+
if (u === "ready")
|
|
319
|
+
if (O <= 0) z("memorize");
|
|
299
320
|
else {
|
|
300
|
-
const e = setTimeout(() =>
|
|
321
|
+
const e = setTimeout(() => U((i) => i - 1), 1e3);
|
|
301
322
|
return () => clearTimeout(e);
|
|
302
323
|
}
|
|
303
|
-
if (
|
|
304
|
-
if (
|
|
324
|
+
if (u === "memorize")
|
|
325
|
+
if (H <= 0) z("guess");
|
|
305
326
|
else {
|
|
306
|
-
const e = setTimeout(() =>
|
|
327
|
+
const e = setTimeout(() => B((i) => i - 1), 1e3);
|
|
307
328
|
return () => clearTimeout(e);
|
|
308
329
|
}
|
|
309
|
-
if (
|
|
310
|
-
if (
|
|
311
|
-
|
|
312
|
-
const i = o[
|
|
313
|
-
|
|
314
|
-
...g,
|
|
315
|
-
{ round: v, answer: z, correct: i, result: "wrong" }
|
|
316
|
-
]);
|
|
330
|
+
if (u === "guess") {
|
|
331
|
+
if (A <= 0) {
|
|
332
|
+
F(!0), k("wrong");
|
|
333
|
+
const i = o[x].name;
|
|
334
|
+
E((c) => [...c, { round: S, answer: M, correct: i, result: "wrong" }]);
|
|
317
335
|
return;
|
|
318
336
|
}
|
|
319
|
-
const e = setTimeout(() =>
|
|
337
|
+
const e = setTimeout(() => V((i) => i - 1), 1e3);
|
|
320
338
|
return () => clearTimeout(e);
|
|
321
339
|
}
|
|
322
340
|
}
|
|
323
|
-
}, [
|
|
324
|
-
const
|
|
325
|
-
if (
|
|
326
|
-
const e = o[
|
|
327
|
-
let
|
|
328
|
-
i === e ? (
|
|
329
|
-
|
|
341
|
+
}, [u, O, H, A, v, T, w, o, x, S, M]);
|
|
342
|
+
const de = () => {
|
|
343
|
+
if (x === null || W) return;
|
|
344
|
+
const e = o[x].name, i = M.toLowerCase().trim();
|
|
345
|
+
let c = "wrong";
|
|
346
|
+
i === e ? (L((a) => a + 1), k("correct"), c = "correct") : Se(i, e) === 1 ? (L((a) => a + 0.5), k("almost"), c = "almost") : (k("wrong"), c = "wrong"), E((a) => [...a, { round: S, answer: i, correct: e, result: c }]), _(!0), setTimeout(() => {
|
|
347
|
+
_(!1), F(!0);
|
|
330
348
|
}, 600);
|
|
331
|
-
},
|
|
332
|
-
|
|
333
|
-
},
|
|
349
|
+
}, ce = () => S < C ? (P((e) => e + 1), ee()) : j(!0), me = () => {
|
|
350
|
+
D(!1), j(!1), m(null);
|
|
351
|
+
}, ge = fe(
|
|
334
352
|
() => (
|
|
335
353
|
// ensure logo is positioned inside the square container
|
|
336
354
|
/* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ s("picture", { children: [
|
|
@@ -358,24 +376,24 @@ function Ce() {
|
|
|
358
376
|
"div",
|
|
359
377
|
{
|
|
360
378
|
style: {
|
|
361
|
-
width:
|
|
362
|
-
height:
|
|
379
|
+
width: h ? "100%" : R ? `${Math.round(R * b)}px` : `${Math.round(1e3 * b)}px`,
|
|
380
|
+
height: h ? "100%" : R ? `${Math.round(R * b)}px` : `${Math.round(1e3 * b)}px`,
|
|
363
381
|
display: "flex",
|
|
364
382
|
justifyContent: "center",
|
|
365
383
|
alignItems: "center",
|
|
366
384
|
overflow: "hidden",
|
|
367
|
-
borderRadius:
|
|
385
|
+
borderRadius: h ? 0 : "20px",
|
|
368
386
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
369
|
-
boxShadow:
|
|
370
|
-
margin:
|
|
387
|
+
boxShadow: h ? "none" : "0 0 40px rgba(0,0,0,0.1)",
|
|
388
|
+
margin: h ? "0 auto" : "unset",
|
|
371
389
|
position: "relative"
|
|
372
|
-
// needed so absolute logo is inside the square
|
|
373
390
|
},
|
|
374
391
|
children: /* @__PURE__ */ t(
|
|
375
392
|
"div",
|
|
376
393
|
{
|
|
377
394
|
style: {
|
|
378
|
-
transform: "none",
|
|
395
|
+
transform: b && b !== 1 ? `scale(${1 / b})` : "none",
|
|
396
|
+
transformOrigin: "top left",
|
|
379
397
|
width: "100%",
|
|
380
398
|
height: "100%",
|
|
381
399
|
display: "flex",
|
|
@@ -383,45 +401,42 @@ function Ce() {
|
|
|
383
401
|
alignItems: "center"
|
|
384
402
|
},
|
|
385
403
|
children: /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
|
|
386
|
-
!
|
|
387
|
-
!
|
|
404
|
+
!h && ge,
|
|
405
|
+
!d && !v && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
|
|
388
406
|
/* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
389
407
|
/* @__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: () =>
|
|
408
|
+
/* @__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)) }),
|
|
391
409
|
/* @__PURE__ */ s("div", { style: { marginTop: 24 }, children: [
|
|
392
410
|
/* @__PURE__ */ t("p", { style: n.gmBodyS, children: "Choose number of rounds:" }),
|
|
393
411
|
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ t(
|
|
394
412
|
"button",
|
|
395
413
|
{
|
|
396
|
-
style: {
|
|
397
|
-
|
|
398
|
-
...k === e ? n.gmButtonActive : {}
|
|
399
|
-
},
|
|
400
|
-
onClick: () => Q(e),
|
|
414
|
+
style: { ...n.gmButton, ...C === e ? n.gmButtonActive : {} },
|
|
415
|
+
onClick: () => oe(e),
|
|
401
416
|
children: e
|
|
402
417
|
},
|
|
403
418
|
e
|
|
404
419
|
)) })
|
|
405
420
|
] })
|
|
406
421
|
] }),
|
|
407
|
-
|
|
422
|
+
d && !v && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
|
|
408
423
|
/* @__PURE__ */ s("h1", { style: n.gmHeadline1, children: [
|
|
409
424
|
"Theme selected: ",
|
|
410
|
-
|
|
425
|
+
d
|
|
411
426
|
] }),
|
|
412
427
|
/* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
|
|
413
428
|
"Rounds: ",
|
|
414
|
-
|
|
429
|
+
C
|
|
415
430
|
] }),
|
|
416
|
-
/* @__PURE__ */ t("button", { style: n.gmButton, onClick:
|
|
431
|
+
/* @__PURE__ */ t("button", { style: n.gmButton, onClick: Q, children: "▶ Start game" })
|
|
417
432
|
] }),
|
|
418
|
-
|
|
433
|
+
T && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
|
|
419
434
|
/* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "Results" }),
|
|
420
435
|
/* @__PURE__ */ s("h2", { style: n.gmHeadline3, children: [
|
|
421
436
|
"Your score: ",
|
|
422
|
-
|
|
437
|
+
re,
|
|
423
438
|
" / ",
|
|
424
|
-
|
|
439
|
+
C
|
|
425
440
|
] }),
|
|
426
441
|
/* @__PURE__ */ t("p", { style: { ...n.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
|
|
427
442
|
/* @__PURE__ */ s("table", { style: n.gmTable, children: [
|
|
@@ -431,7 +446,7 @@ function Ce() {
|
|
|
431
446
|
/* @__PURE__ */ t("th", { children: "Correct" }),
|
|
432
447
|
/* @__PURE__ */ t("th", { children: "Result" })
|
|
433
448
|
] }) }),
|
|
434
|
-
/* @__PURE__ */ t("tbody", { children:
|
|
449
|
+
/* @__PURE__ */ t("tbody", { children: se.map((e, i) => /* @__PURE__ */ s("tr", { children: [
|
|
435
450
|
/* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.round }),
|
|
436
451
|
/* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.answer || "—" }),
|
|
437
452
|
/* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.correct }),
|
|
@@ -439,100 +454,37 @@ function Ce() {
|
|
|
439
454
|
] }, i)) })
|
|
440
455
|
] }),
|
|
441
456
|
/* @__PURE__ */ s("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
442
|
-
/* @__PURE__ */ t("button", { style: n.gmButton, onClick:
|
|
443
|
-
/* @__PURE__ */ t("button", { style: n.gmButton, onClick:
|
|
457
|
+
/* @__PURE__ */ t("button", { style: n.gmButton, onClick: Q, children: "🔁 Play again" }),
|
|
458
|
+
/* @__PURE__ */ t("button", { style: n.gmButton, onClick: me, children: "⬅️ Choose theme" })
|
|
444
459
|
] })
|
|
445
460
|
] }),
|
|
446
|
-
|
|
447
|
-
/* @__PURE__ */ s(
|
|
448
|
-
"
|
|
449
|
-
|
|
450
|
-
style:
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
h === "guess" && !f && /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
|
|
468
|
-
"⏳ Time left: ",
|
|
469
|
-
M,
|
|
470
|
-
"s"
|
|
471
|
-
] })
|
|
472
|
-
]
|
|
473
|
-
}
|
|
474
|
-
),
|
|
475
|
-
h !== "ready" && /* @__PURE__ */ t(
|
|
476
|
-
"div",
|
|
477
|
-
{
|
|
478
|
-
style: {
|
|
479
|
-
...n.gmGrid,
|
|
480
|
-
gridTemplateColumns: u ? "repeat(2, 1fr)" : "repeat(3, 210px)",
|
|
481
|
-
gridAutoRows: u ? "150px" : "210px",
|
|
482
|
-
gap: u ? "12px" : "20px",
|
|
483
|
-
justifyItems: "center"
|
|
484
|
-
},
|
|
485
|
-
children: o.map((e, i) => {
|
|
486
|
-
const g = p === i && h === "guess" && !f;
|
|
487
|
-
return /* @__PURE__ */ t(
|
|
488
|
-
"div",
|
|
489
|
-
{
|
|
490
|
-
style: {
|
|
491
|
-
...n.gmCard,
|
|
492
|
-
...N === "correct" && p === i ? n.gmCorrect : {},
|
|
493
|
-
...N === "wrong" && p === i ? n.gmWrong : {}
|
|
494
|
-
},
|
|
495
|
-
children: !g && /* @__PURE__ */ t(
|
|
496
|
-
"img",
|
|
497
|
-
{
|
|
498
|
-
src: e.src,
|
|
499
|
-
alt: e.name,
|
|
500
|
-
style: {
|
|
501
|
-
width: "100%",
|
|
502
|
-
height: "100%",
|
|
503
|
-
objectFit: "cover"
|
|
504
|
-
}
|
|
505
|
-
}
|
|
506
|
-
)
|
|
507
|
-
},
|
|
508
|
-
i
|
|
509
|
-
);
|
|
510
|
-
})
|
|
511
|
-
}
|
|
512
|
-
),
|
|
461
|
+
v && !T && /* @__PURE__ */ s("div", { style: n.gmGameLayout, children: [
|
|
462
|
+
/* @__PURE__ */ s("div", { style: { minHeight: 160, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }, children: [
|
|
463
|
+
u === "ready" && /* @__PURE__ */ s(pe, { children: [
|
|
464
|
+
/* @__PURE__ */ t("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
|
|
465
|
+
/* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
|
|
466
|
+
] }),
|
|
467
|
+
u === "memorize" && /* @__PURE__ */ s("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
|
|
468
|
+
"MEMORIZE (",
|
|
469
|
+
H,
|
|
470
|
+
")"
|
|
471
|
+
] }),
|
|
472
|
+
u === "guess" && !w && /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
|
|
473
|
+
"⏳ Time left: ",
|
|
474
|
+
A,
|
|
475
|
+
"s"
|
|
476
|
+
] })
|
|
477
|
+
] }),
|
|
478
|
+
u !== "ready" && /* @__PURE__ */ t("div", { style: { ...n.gmGrid, gridTemplateColumns: h ? "repeat(2, 1fr)" : "repeat(3, 210px)", gridAutoRows: h ? "150px" : "210px", gap: h ? "12px" : "20px", justifyItems: "center" }, children: o.map((e, i) => {
|
|
479
|
+
const c = x === i && u === "guess" && !w;
|
|
480
|
+
return /* @__PURE__ */ t("div", { style: { ...n.gmCard, ...K === "correct" && x === i ? n.gmCorrect : {}, ...K === "wrong" && x === i ? n.gmWrong : {} }, children: !c && /* @__PURE__ */ t("img", { src: e.src, alt: e.name, style: { width: "100%", height: "100%", objectFit: "cover" } }) }, i);
|
|
481
|
+
}) }),
|
|
513
482
|
/* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
514
|
-
|
|
515
|
-
/* @__PURE__ */ t(
|
|
516
|
-
|
|
517
|
-
{
|
|
518
|
-
type: "text",
|
|
519
|
-
placeholder: "Type the missing word",
|
|
520
|
-
value: z,
|
|
521
|
-
onChange: (e) => P(e.target.value),
|
|
522
|
-
style: n.gmInput
|
|
523
|
-
}
|
|
524
|
-
),
|
|
525
|
-
/* @__PURE__ */ t(
|
|
526
|
-
"button",
|
|
527
|
-
{
|
|
528
|
-
style: { ...n.gmButton, marginLeft: 8 },
|
|
529
|
-
onClick: re,
|
|
530
|
-
disabled: L,
|
|
531
|
-
children: L ? "..." : "Check"
|
|
532
|
-
}
|
|
533
|
-
)
|
|
483
|
+
u === "guess" && !w && /* @__PURE__ */ s("div", { children: [
|
|
484
|
+
/* @__PURE__ */ t("input", { type: "text", placeholder: "Type the missing word", value: M, onChange: (e) => q(e.target.value), style: n.gmInput }),
|
|
485
|
+
/* @__PURE__ */ t("button", { style: { ...n.gmButton, marginLeft: 8 }, onClick: de, disabled: W, children: W ? "..." : "Check" })
|
|
534
486
|
] }),
|
|
535
|
-
|
|
487
|
+
w && /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ce, children: "Next round" })
|
|
536
488
|
] })
|
|
537
489
|
] })
|
|
538
490
|
] })
|
|
@@ -544,6 +496,6 @@ function Ce() {
|
|
|
544
496
|
);
|
|
545
497
|
}
|
|
546
498
|
export {
|
|
547
|
-
|
|
548
|
-
|
|
499
|
+
Me as Game,
|
|
500
|
+
ne as themes
|
|
549
501
|
};
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
// ...existing code...
|
|
2
1
|
import { useState, useEffect, useMemo, useRef } from "react";
|
|
3
2
|
import { themes } from "./themes";
|
|
4
3
|
import { styles } from "./Game.styles";
|
|
@@ -26,11 +25,7 @@ const globalReset = () => {
|
|
|
26
25
|
display: block;
|
|
27
26
|
user-select: none;
|
|
28
27
|
}
|
|
29
|
-
html, body {
|
|
30
|
-
margin: 0;
|
|
31
|
-
padding: 0;
|
|
32
|
-
zoom: 1 !important; /* ✅ защита от подзума */
|
|
33
|
-
}
|
|
28
|
+
html, body { margin: 0; padding: 0; }
|
|
34
29
|
`;
|
|
35
30
|
document.head.appendChild(style);
|
|
36
31
|
};
|
|
@@ -80,40 +75,70 @@ export default function Game() {
|
|
|
80
75
|
const [resultsTable, setResultsTable] = useState<RoundResult[]>([]);
|
|
81
76
|
const [usedHidden, setUsedHidden] = useState<string[]>([]);
|
|
82
77
|
const [isMobile, setIsMobile] = useState(false);
|
|
83
|
-
const [scale, setScale] = useState(1);
|
|
84
78
|
const [containerSize, setContainerSize] = useState<number | null>(null);
|
|
79
|
+
const [pageScale, setPageScale] = useState<number>(1);
|
|
85
80
|
|
|
86
81
|
// ✅ адаптив под мобилки, планшеты и десктоп
|
|
87
82
|
useEffect(() => {
|
|
88
83
|
const resize = () => {
|
|
89
84
|
const mobile = window.innerWidth < 768;
|
|
90
|
-
const tablet = window.innerWidth >= 768 && window.innerWidth < 1200;
|
|
91
|
-
|
|
92
|
-
// treat only phones as "mobile" so tablets use the desktop (square/centered) layout
|
|
93
85
|
setIsMobile(mobile);
|
|
94
|
-
|
|
95
86
|
if (mobile) {
|
|
96
87
|
// mobile: fluid full-width layout
|
|
97
88
|
setContainerSize(null);
|
|
98
|
-
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
// tablets and desktops: fit into a centered square (max 1000)
|
|
92
|
+
const safeFactor = 0.97;
|
|
93
|
+
const maxSquare = 1000;
|
|
94
|
+
const available = Math.min(window.innerWidth, window.innerHeight);
|
|
95
|
+
const sizePx = Math.max(360, Math.round(available * safeFactor)); // don't go too small
|
|
96
|
+
const finalSize = Math.min(sizePx, maxSquare);
|
|
97
|
+
setContainerSize(finalSize);
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
const detectBodyScale = () => {
|
|
101
|
+
try {
|
|
102
|
+
const el = document.body;
|
|
103
|
+
const cs = getComputedStyle(el);
|
|
104
|
+
const zoomVal = parseFloat((cs.zoom as string) || "");
|
|
105
|
+
if (zoomVal && !isNaN(zoomVal) && zoomVal > 0) {
|
|
106
|
+
setPageScale(zoomVal);
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
const tf = cs.transform;
|
|
110
|
+
if (tf && tf !== "none") {
|
|
111
|
+
const m = tf.match(/matrix\(([^)]+)\)/);
|
|
112
|
+
if (m) {
|
|
113
|
+
const parts = m[1].split(",").map((p) => parseFloat(p));
|
|
114
|
+
const a = parts[0];
|
|
115
|
+
if (a && !isNaN(a)) {
|
|
116
|
+
setPageScale(a);
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
} catch (e) {
|
|
122
|
+
// ignore
|
|
108
123
|
}
|
|
124
|
+
setPageScale(1);
|
|
109
125
|
};
|
|
126
|
+
|
|
110
127
|
resize();
|
|
128
|
+
detectBodyScale();
|
|
111
129
|
window.addEventListener("resize", resize);
|
|
112
|
-
|
|
130
|
+
window.addEventListener("resize", detectBodyScale);
|
|
131
|
+
const mo = new MutationObserver(detectBodyScale);
|
|
132
|
+
mo.observe(document.body, { attributes: true, attributeFilter: ["style", "class"] });
|
|
133
|
+
|
|
134
|
+
return () => {
|
|
135
|
+
window.removeEventListener("resize", resize);
|
|
136
|
+
window.removeEventListener("resize", detectBodyScale);
|
|
137
|
+
mo.disconnect();
|
|
138
|
+
};
|
|
113
139
|
}, []);
|
|
114
140
|
|
|
115
|
-
const getRandomSix = (arr: ImageItem[]) =>
|
|
116
|
-
[...arr].sort(() => Math.random() - 0.5).slice(0, 6);
|
|
141
|
+
const getRandomSix = (arr: ImageItem[]) => [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
|
|
117
142
|
|
|
118
143
|
const startGame = () => {
|
|
119
144
|
if (!theme) return;
|
|
@@ -176,10 +201,7 @@ export default function Game() {
|
|
|
176
201
|
setAnswered(true);
|
|
177
202
|
setResult("wrong");
|
|
178
203
|
const correct = files[hiddenIndex!].name;
|
|
179
|
-
setResultsTable((prev) => [
|
|
180
|
-
...prev,
|
|
181
|
-
{ round: currentRound, answer: inputValue, correct, result: "wrong" },
|
|
182
|
-
]);
|
|
204
|
+
setResultsTable((prev) => [...prev, { round: currentRound, answer: inputValue, correct, result: "wrong" }]);
|
|
183
205
|
return;
|
|
184
206
|
}
|
|
185
207
|
const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);
|
|
@@ -212,8 +234,7 @@ export default function Game() {
|
|
|
212
234
|
}, 600);
|
|
213
235
|
};
|
|
214
236
|
|
|
215
|
-
const nextRound = () =>
|
|
216
|
-
currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true);
|
|
237
|
+
const nextRound = () => (currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true));
|
|
217
238
|
|
|
218
239
|
const exitGame = () => {
|
|
219
240
|
setStarted(false);
|
|
@@ -245,13 +266,13 @@ export default function Game() {
|
|
|
245
266
|
alignItems: "center",
|
|
246
267
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
247
268
|
transition: "background 0.3s ease",
|
|
248
|
-
overflowX: "clip"
|
|
269
|
+
overflowX: "clip",
|
|
249
270
|
}}
|
|
250
271
|
>
|
|
251
272
|
<div
|
|
252
273
|
style={{
|
|
253
|
-
width: isMobile ? "100%" : containerSize
|
|
254
|
-
height: isMobile ? "100%" : containerSize
|
|
274
|
+
width: isMobile ? "100%" : containerSize ? `${Math.round(containerSize * pageScale)}px` : `${Math.round(1000 * pageScale)}px`,
|
|
275
|
+
height: isMobile ? "100%" : containerSize ? `${Math.round(containerSize * pageScale)}px` : `${Math.round(1000 * pageScale)}px`,
|
|
255
276
|
display: "flex",
|
|
256
277
|
justifyContent: "center",
|
|
257
278
|
alignItems: "center",
|
|
@@ -260,12 +281,13 @@ export default function Game() {
|
|
|
260
281
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
261
282
|
boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.1)",
|
|
262
283
|
margin: isMobile ? "0 auto" : "unset",
|
|
263
|
-
position: "relative",
|
|
284
|
+
position: "relative",
|
|
264
285
|
}}
|
|
265
286
|
>
|
|
266
287
|
<div
|
|
267
288
|
style={{
|
|
268
|
-
transform: "none",
|
|
289
|
+
transform: pageScale && pageScale !== 1 ? `scale(${1 / pageScale})` : "none",
|
|
290
|
+
transformOrigin: "top left",
|
|
269
291
|
width: "100%",
|
|
270
292
|
height: "100%",
|
|
271
293
|
display: "flex",
|
|
@@ -275,6 +297,7 @@ export default function Game() {
|
|
|
275
297
|
>
|
|
276
298
|
<div id="whats-missing-root">
|
|
277
299
|
{!isMobile && MemoizedLogo}
|
|
300
|
+
|
|
278
301
|
{/* ====== ИГРОВАЯ ЛОГИКА ====== */}
|
|
279
302
|
{!theme && !started && (
|
|
280
303
|
<div style={styles.gmCenterScreen}>
|
|
@@ -293,10 +316,7 @@ export default function Game() {
|
|
|
293
316
|
{[3, 4, 5].map((n) => (
|
|
294
317
|
<button
|
|
295
318
|
key={n}
|
|
296
|
-
style={{
|
|
297
|
-
...styles.gmButton,
|
|
298
|
-
...(rounds === n ? styles.gmButtonActive : {}),
|
|
299
|
-
}}
|
|
319
|
+
style={{ ...styles.gmButton, ...(rounds === n ? styles.gmButtonActive : {}) }}
|
|
300
320
|
onClick={() => setRounds(n)}
|
|
301
321
|
>
|
|
302
322
|
{n}
|
|
@@ -306,30 +326,23 @@ export default function Game() {
|
|
|
306
326
|
</div>
|
|
307
327
|
</div>
|
|
308
328
|
)}
|
|
329
|
+
|
|
309
330
|
{theme && !started && (
|
|
310
331
|
<div style={styles.gmCenterScreen}>
|
|
311
332
|
<h1 style={styles.gmHeadline1}>Theme selected: {theme}</h1>
|
|
312
333
|
<p style={styles.gmBodyM}>Rounds: {rounds}</p>
|
|
313
|
-
<button style={styles.gmButton} onClick={startGame}>
|
|
314
|
-
▶ Start game
|
|
315
|
-
</button>
|
|
334
|
+
<button style={styles.gmButton} onClick={startGame}>▶ Start game</button>
|
|
316
335
|
</div>
|
|
317
336
|
)}
|
|
337
|
+
|
|
318
338
|
{finished && (
|
|
319
339
|
<div style={styles.gmCenterScreen}>
|
|
320
340
|
<h1 style={styles.gmHeadline1}>Results</h1>
|
|
321
|
-
<h2 style={styles.gmHeadline3}>
|
|
322
|
-
Your score: {score} / {rounds}
|
|
323
|
-
</h2>
|
|
341
|
+
<h2 style={styles.gmHeadline3}>Your score: {score} / {rounds}</h2>
|
|
324
342
|
<p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>Yahoo! You did it! 🍬✨</p>
|
|
325
343
|
<table style={styles.gmTable}>
|
|
326
344
|
<thead>
|
|
327
|
-
<tr>
|
|
328
|
-
<th>Round</th>
|
|
329
|
-
<th>Your Answer</th>
|
|
330
|
-
<th>Correct</th>
|
|
331
|
-
<th>Result</th>
|
|
332
|
-
</tr>
|
|
345
|
+
<tr><th>Round</th><th>Your Answer</th><th>Correct</th><th>Result</th></tr>
|
|
333
346
|
</thead>
|
|
334
347
|
<tbody>
|
|
335
348
|
{resultsTable.map((r, i) => (
|
|
@@ -338,120 +351,48 @@ export default function Game() {
|
|
|
338
351
|
<td style={styles.gmTableCell}>{r.answer || "—"}</td>
|
|
339
352
|
<td style={styles.gmTableCell}>{r.correct}</td>
|
|
340
353
|
<td style={styles.gmTableCell}>
|
|
341
|
-
{r.result === "correct"
|
|
342
|
-
? "✔ Correct"
|
|
343
|
-
: r.result === "almost"
|
|
344
|
-
? "◐ Almost (0.5)"
|
|
345
|
-
: "✘ Wrong"}
|
|
354
|
+
{r.result === "correct" ? "✔ Correct" : r.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong"}
|
|
346
355
|
</td>
|
|
347
356
|
</tr>
|
|
348
357
|
))}
|
|
349
358
|
</tbody>
|
|
350
359
|
</table>
|
|
351
360
|
<div style={{ display: "flex", gap: 12, marginTop: 24 }}>
|
|
352
|
-
<button style={styles.gmButton} onClick={startGame}>
|
|
353
|
-
|
|
354
|
-
</button>
|
|
355
|
-
<button style={styles.gmButton} onClick={exitGame}>
|
|
356
|
-
⬅️ Choose theme
|
|
357
|
-
</button>
|
|
361
|
+
<button style={styles.gmButton} onClick={startGame}>🔁 Play again</button>
|
|
362
|
+
<button style={styles.gmButton} onClick={exitGame}>⬅️ Choose theme</button>
|
|
358
363
|
</div>
|
|
359
364
|
</div>
|
|
360
365
|
)}
|
|
366
|
+
|
|
361
367
|
{started && !finished && (
|
|
362
368
|
<div style={styles.gmGameLayout}>
|
|
363
|
-
<div
|
|
364
|
-
style={{
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
flexDirection: "column",
|
|
368
|
-
justifyContent: "center",
|
|
369
|
-
alignItems: "center",
|
|
370
|
-
}}
|
|
371
|
-
>
|
|
372
|
-
{phase === "ready" && (
|
|
373
|
-
<>
|
|
374
|
-
<h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1>
|
|
375
|
-
<div style={styles.gmHourglass}>⏳</div>
|
|
376
|
-
</>
|
|
377
|
-
)}
|
|
378
|
-
{phase === "memorize" && (
|
|
379
|
-
<p style={{ ...styles.gmBodyM, color: "#10b981" }}>
|
|
380
|
-
MEMORIZE ({memorizeTime})
|
|
381
|
-
</p>
|
|
382
|
-
)}
|
|
383
|
-
{phase === "guess" && !answered && (
|
|
384
|
-
<p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
|
|
385
|
-
)}
|
|
369
|
+
<div style={{ minHeight: 160, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
|
|
370
|
+
{phase === "ready" && (<><h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1><div style={styles.gmHourglass}>⏳</div></>)}
|
|
371
|
+
{phase === "memorize" && (<p style={{ ...styles.gmBodyM, color: "#10b981" }}>MEMORIZE ({memorizeTime})</p>)}
|
|
372
|
+
{phase === "guess" && !answered && (<p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>)}
|
|
386
373
|
</div>
|
|
374
|
+
|
|
387
375
|
{phase !== "ready" && (
|
|
388
|
-
<div
|
|
389
|
-
style={{
|
|
390
|
-
...styles.gmGrid,
|
|
391
|
-
gridTemplateColumns: isMobile
|
|
392
|
-
? "repeat(2, 1fr)"
|
|
393
|
-
: "repeat(3, 210px)",
|
|
394
|
-
gridAutoRows: isMobile ? "150px" : "210px",
|
|
395
|
-
gap: isMobile ? "12px" : "20px",
|
|
396
|
-
justifyItems: "center",
|
|
397
|
-
}}
|
|
398
|
-
>
|
|
376
|
+
<div style={{ ...styles.gmGrid, gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(3, 210px)", gridAutoRows: isMobile ? "150px" : "210px", gap: isMobile ? "12px" : "20px", justifyItems: "center" }}>
|
|
399
377
|
{files.map((file, i) => {
|
|
400
|
-
const isHidden =
|
|
401
|
-
hiddenIndex === i && phase === "guess" && !answered;
|
|
378
|
+
const isHidden = hiddenIndex === i && phase === "guess" && !answered;
|
|
402
379
|
return (
|
|
403
|
-
<div
|
|
404
|
-
|
|
405
|
-
style={{
|
|
406
|
-
...styles.gmCard,
|
|
407
|
-
...(result === "correct" && hiddenIndex === i
|
|
408
|
-
? styles.gmCorrect
|
|
409
|
-
: {}),
|
|
410
|
-
...(result === "wrong" && hiddenIndex === i
|
|
411
|
-
? styles.gmWrong
|
|
412
|
-
: {}),
|
|
413
|
-
}}
|
|
414
|
-
>
|
|
415
|
-
{!isHidden && (
|
|
416
|
-
<img
|
|
417
|
-
src={file.src}
|
|
418
|
-
alt={file.name}
|
|
419
|
-
style={{
|
|
420
|
-
width: "100%",
|
|
421
|
-
height: "100%",
|
|
422
|
-
objectFit: "cover",
|
|
423
|
-
}}
|
|
424
|
-
/>
|
|
425
|
-
)}
|
|
380
|
+
<div key={i} style={{ ...styles.gmCard, ...(result === "correct" && hiddenIndex === i ? styles.gmCorrect : {}), ...(result === "wrong" && hiddenIndex === i ? styles.gmWrong : {}) }}>
|
|
381
|
+
{!isHidden && <img src={file.src} alt={file.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
|
|
426
382
|
</div>
|
|
427
383
|
);
|
|
428
384
|
})}
|
|
429
385
|
</div>
|
|
430
386
|
)}
|
|
387
|
+
|
|
431
388
|
<div style={{ marginTop: 16, height: 80 }}>
|
|
432
389
|
{phase === "guess" && !answered && (
|
|
433
390
|
<div>
|
|
434
|
-
<input
|
|
435
|
-
|
|
436
|
-
placeholder="Type the missing word"
|
|
437
|
-
value={inputValue}
|
|
438
|
-
onChange={(e) => setInputValue(e.target.value)}
|
|
439
|
-
style={styles.gmInput}
|
|
440
|
-
/>
|
|
441
|
-
<button
|
|
442
|
-
style={{ ...styles.gmButton, marginLeft: 8 }}
|
|
443
|
-
onClick={checkAnswer}
|
|
444
|
-
disabled={animating}
|
|
445
|
-
>
|
|
446
|
-
{animating ? "..." : "Check"}
|
|
447
|
-
</button>
|
|
391
|
+
<input type="text" placeholder="Type the missing word" value={inputValue} onChange={(e) => setInputValue(e.target.value)} style={styles.gmInput} />
|
|
392
|
+
<button style={{ ...styles.gmButton, marginLeft: 8 }} onClick={checkAnswer} disabled={animating}>{animating ? "..." : "Check"}</button>
|
|
448
393
|
</div>
|
|
449
394
|
)}
|
|
450
|
-
{answered &&
|
|
451
|
-
<button style={styles.gmButton} onClick={nextRound}>
|
|
452
|
-
Next round
|
|
453
|
-
</button>
|
|
454
|
-
)}
|
|
395
|
+
{answered && <button style={styles.gmButton} onClick={nextRound}>Next round</button>}
|
|
455
396
|
</div>
|
|
456
397
|
</div>
|
|
457
398
|
)}
|