@mblinkov/whats-missing 20.0.29 → 20.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/whats-missing.cjs.js +3 -3
- package/dist/whats-missing.es.js +65 -68
- package/package.json +1 -1
- package/src/Game.tsx +8 -9
|
@@ -1,9 +1,9 @@
|
|
|
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"),Se=window.origin+"/cloud/speakid/games/whatsmissing/",Z=(r,m)=>r.map(([l,s])=>({src:`${Se}${m}/${s.replace(/\s/g,"%20")}.png`,name:s})),Ce=[["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"]],ke=[["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"]],ze=[["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"]],_={food:Z(Ce,"food"),animals:Z(ke,"animals"),toys:Z(ze,"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 r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=Me,document.head.appendChild(r)}const Re={animation:"spin 1.4s linear infinite"},n={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100%",width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",color:"#1f2937",padding:"24px 16px",boxSizing:"border-box",transform:"translateY(20px)"},gmHeadline1:{fontWeight:700,fontSize:"clamp(28px, 4vw, 40px)",lineHeight:"110%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},gmBodyM:{fontWeight:400,fontSize:"16px",lineHeight:"140%"},gmBodyS:{fontWeight:400,fontSize:"14px",lineHeight:"140%",color:"#6b7280"},gmButton:{fontFamily:'"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',fontWeight:600,fontSize:"16px",padding:"10px 16px",borderRadius:"12px",border:"1px solid #e5e7eb",background:"#ec4c44",color:"#ffffff",cursor:"pointer",boxShadow:"0 6px 18px rgba(236, 76, 68, .18)",transition:"transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"none",minHeight:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"none",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...Re}},Te=()=>{const r=document.createElement("style");r.textContent=`
|
|
7
7
|
#whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
|
|
8
8
|
#whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
|
|
9
|
-
`,document.head.appendChild(r)},ze=(r,m)=>{const l=Array.from({length:r.length+1},()=>Array(m.length+1).fill(0));for(let s=0;s<=r.length;s++)l[s][0]=s;for(let s=0;s<=m.length;s++)l[0][s]=s;for(let s=1;s<=r.length;s++)for(let d=1;d<=m.length;d++)l[s][d]=r[s-1]===m[d-1]?l[s-1][d-1]:Math.min(l[s-1][d-1],l[s][d-1],l[s-1][d])+1;return l[r.length][m.length]};function Me(r,m={minDesktopWidth:1200,forceResize:!1}){const l=o.useRef(null),s=m.minDesktopWidth??1200,d=!!m.forceResize;o.useLayoutEffect(()=>{if(typeof window>"u"||!r||!r.current)return;const c=r.current,T=()=>{try{const a=document.body,g=getComputedStyle(a),C=parseFloat(a.style&&a.style.zoom||"");if(C&&!isNaN(C)&&C>0)return C;const w=parseFloat(g.zoom||"");if(w&&!isNaN(w)&&w>0)return w;const h=document.createElement("div");h.style.position="absolute",h.style.left="0",h.style.top="0",h.style.width="100px",h.style.height="1px",h.style.visibility="hidden",document.documentElement.appendChild(h);const p=h.getBoundingClientRect();if(document.documentElement.removeChild(h),p&&p.width>0){const I=p.width/100;if(!isNaN(I)&&I>0)return I}}catch{}return 1},j=()=>{if(s&&window.innerWidth<s){z();return}const a=T();if(!a||a===1){z();return}l.current||(l.current={transform:c.style.transform||null,transformOrigin:c.style.transformOrigin||null,width:c.style.width||null,height:c.style.height||null,willChange:c.style.willChange||null});const g=1/a;d&&(c.style.width=`${a*100}%`,c.style.height=`${a*100}%`),c.style.transformOrigin="50% 50%",c.style.transform=`scale(${g})`,c.style.willChange="transform"},z=()=>{if(!l.current)return;const a=l.current;c.style.transform=a.transform??"",c.style.transformOrigin=a.transformOrigin??"",c.style.width=a.width??"",c.style.height=a.height??"",c.style.willChange=a.willChange??"",l.current=null};let b=0;const S=()=>{cancelAnimationFrame(b),b=requestAnimationFrame(j)},v=new MutationObserver(a=>{for(const g of a)if(g.type==="attributes"&&(g.attributeName==="style"||g.attributeName==="class")){S();break}});return v.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",S),S(),()=>{cancelAnimationFrame(b),v.disconnect(),window.removeEventListener("resize",S),z()}},[r,s,d])}function Re({gameCubeSize:r,screenHeight:m,screenWidth:l}){const s=o.useRef(null),d=o.useRef(null),[c,T]=o.useState(null);Me(s,{minDesktopWidth:1200,forceResize:!1}),o.useEffect(()=>(ke(),()=>{document.body.style.overflow=""}),[]);const[j,z]=o.useState(null),[b,S]=o.useState([]),[v,a]=o.useState(4),[g,C]=o.useState(!1),[w,h]=o.useState(1),[p,I]=o.useState(null),[y,A]=o.useState("ready"),[K,J]=o.useState(3),[$,G]=o.useState(10),[N,Q]=o.useState(20),[ae,O]=o.useState(0),[E,D]=o.useState(!1),[W,X]=o.useState(""),[M,q]=o.useState(!1),[Y,ee]=o.useState(!1),[te,H]=o.useState(null),[de,P]=o.useState([]),[ce,ne]=o.useState([]),[k,me]=o.useState(!1);o.useEffect(()=>{if(typeof window>"u")return;const t=()=>{const i=l??window.innerWidth;me(i<=768)};return t(),window.addEventListener("resize",t),window.addEventListener("orientationchange",t),()=>{window.removeEventListener("resize",t),window.removeEventListener("orientationchange",t)}},[l]),o.useLayoutEffect(()=>{const t=d.current;if(!t||typeof window>"u")return;let i=null;try{i=new ResizeObserver(f=>{for(const u of f){const x=u.contentRect;T(Math.round(Math.min(x.width,x.height)))}}),i.observe(t),T(Math.round(Math.min(t.clientWidth,t.clientHeight)))}catch{T(Math.round(Math.min(t.clientWidth,t.clientHeight)))}return()=>i?.disconnect()},[k]);const oe=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),se=()=>{if(!j)return;const t=oe(_[j]);S(t),C(!0),D(!1),h(1),O(0),P([]),ne([]),ie(t,[],!0)},ie=(t=b,i=ce,f=!1)=>{const u=oe(t.length?t:_[j]);let x=Math.floor(Math.random()*u.length),R=u[x].name,B=0;for(;i.includes(R)&&B<20;)x=Math.floor(Math.random()*u.length),R=u[x].name,B++;S(u),I(x),ne([...i,R]),q(!1),X(""),Q(20),H(null),f?(A("ready"),J(3),G(10)):(A("memorize"),G(10))};o.useEffect(()=>{if(!(!g||E||M)){if(y==="ready")if(K<=0)A("memorize");else{const t=setTimeout(()=>J(i=>i-1),1e3);return()=>clearTimeout(t)}if(y==="memorize")if($<=0)A("guess");else{const t=setTimeout(()=>G(i=>i-1),1e3);return()=>clearTimeout(t)}if(y==="guess"){if(N<=0){q(!0),H("wrong");const i=b[p].name;P(f=>[...f,{round:w,answer:W,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>Q(i=>i-1),1e3);return()=>clearTimeout(t)}}},[y,K,$,N,g,E,M,b,p,w,W]);const ue=()=>{if(p===null||Y)return;const t=b[p].name,i=W.toLowerCase().trim();let f="wrong";i===t?(O(u=>u+1),H("correct"),f="correct"):ze(i,t)===1?(O(u=>u+.5),H("almost"),f="almost"):(H("wrong"),f="wrong"),P(u=>[...u,{round:w,answer:i,correct:t,result:f}]),ee(!0),setTimeout(()=>{ee(!1),q(!0)},600)},ge=()=>w<v?(h(t=>t+1),ie()):D(!0),he=()=>{C(!1),D(!1),z(null)},fe=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"})]})}),[]),U=typeof window<"u"?Math.min((l??window.innerWidth)/1440,(m??window.innerHeight)/900):1;return e.jsx("div",{ref:s,style:{position:"fixed",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",overflow:"hidden",zIndex:1},children:e.jsx("div",{ref:d,style:{width:k?"100%":`${Math.min(r??1e3,l??1e3,m??1e3)}px`,height:k?"100%":`${Math.min(r??1e3,l??1e3,m??1e3)}px`,borderRadius:k?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",position:"relative",overflow:"hidden",boxShadow:k?"none":"0 0 40px rgba(0,0,0,0.08)",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",style:{transform:`scale(${U})`,transformOrigin:"center center",width:`${100/U}%`,height:`${100/U}%`,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!k&&fe,!j&&!g&&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:()=>z(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,...v===t?n.gmButtonActive:{}},onClick:()=>a(t),children:t},t))})]})]}),j&&!g&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",j]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",v]}),e.jsx("button",{style:n.gmButton,onClick:se,children:"▶ Start game"})]}),E&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",ae," / ",v]}),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:de.map((t,i)=>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"})]},i))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:n.gmButton,onClick:se,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:he,children:"⬅️ Choose theme"})]})]}),g&&!E&&e.jsxs("div",{style:n.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[y==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),y==="memorize"&&e.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",$,")"]}),y==="guess"&&!M&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",N,"s"]})]}),y!=="ready"&&(()=>{const t=k?12:20,i=32,f=d.current?.clientWidth??Math.min(r??1e3,l??1e3),u=d.current?.clientHeight??Math.min(r??1e3,m??1e3),x=Math.min(f,u),R=typeof window<"u"?window.innerWidth:l??1e3,B=R<600?110:R<1024?140:180,pe=4,re=2,V=Math.max(re,Math.min(pe,Math.floor((x-i+t)/(B+t))||re)),ye=Math.floor((x-i-t*(V-1))/V),L=Math.max(B,ye);return e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:`repeat(${V}, ${L}px)`,gridAutoRows:`${L}px`,gap:`${t}px`,justifyContent:"center",justifyItems:"center",padding:8,boxSizing:"border-box"},children:b.map((le,F)=>{const xe=p===F&&y==="guess"&&!M;return e.jsx("div",{style:{...n.gmCard,width:`${L}px`,height:`${L}px`,padding:L>=160?10:8,boxSizing:"border-box",...te==="correct"&&p===F?n.gmCorrect:{},...te==="wrong"&&p===F?n.gmWrong:{}},children:!xe&&e.jsx("img",{src:le.src,alt:le.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},F)})})})(),e.jsxs("div",{style:{marginTop:16,height:80},children:[y==="guess"&&!M&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:W,onChange:t=>X(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:ue,disabled:Y,children:Y?"...":"Check"})]}),M&&e.jsx("button",{type:"button",style:n.gmButton,onClick:ge,children:"Next round"})]})]})]})})})}exports.Game=Re;exports.themes=_;
|
|
9
|
+
`,document.head.appendChild(r)},Ie=(r,m)=>{const l=Array.from({length:r.length+1},()=>Array(m.length+1).fill(0));for(let s=0;s<=r.length;s++)l[s][0]=s;for(let s=0;s<=m.length;s++)l[0][s]=s;for(let s=1;s<=r.length;s++)for(let d=1;d<=m.length;d++)l[s][d]=r[s-1]===m[d-1]?l[s-1][d-1]:Math.min(l[s-1][d-1],l[s][d-1],l[s-1][d])+1;return l[r.length][m.length]};function He(r,m={minDesktopWidth:1200,forceResize:!1}){const l=o.useRef(null),s=m.minDesktopWidth??1200,d=!!m.forceResize;o.useLayoutEffect(()=>{if(typeof window>"u"||!r||!r.current)return;const c=r.current,T=()=>{try{const a=document.body,g=getComputedStyle(a),C=parseFloat(a.style&&a.style.zoom||"");if(C&&!isNaN(C)&&C>0)return C;const w=parseFloat(g.zoom||"");if(w&&!isNaN(w)&&w>0)return w;const h=document.createElement("div");h.style.position="absolute",h.style.left="0",h.style.top="0",h.style.width="100px",h.style.height="1px",h.style.visibility="hidden",document.documentElement.appendChild(h);const p=h.getBoundingClientRect();if(document.documentElement.removeChild(h),p&&p.width>0){const I=p.width/100;if(!isNaN(I)&&I>0)return I}}catch{}return 1},j=()=>{if(s&&window.innerWidth<s){M();return}const a=T();if(!a||a===1){M();return}l.current||(l.current={transform:c.style.transform||null,transformOrigin:c.style.transformOrigin||null,width:c.style.width||null,height:c.style.height||null,willChange:c.style.willChange||null});const g=1/a;d&&(c.style.width=`${a*100}%`,c.style.height=`${a*100}%`),c.style.transformOrigin="50% 50%",c.style.transform=`scale(${g})`,c.style.willChange="transform"},M=()=>{if(!l.current)return;const a=l.current;c.style.transform=a.transform??"",c.style.transformOrigin=a.transformOrigin??"",c.style.width=a.width??"",c.style.height=a.height??"",c.style.willChange=a.willChange??"",l.current=null};let b=0;const v=()=>{cancelAnimationFrame(b),b=requestAnimationFrame(j)},S=new MutationObserver(a=>{for(const g of a)if(g.type==="attributes"&&(g.attributeName==="style"||g.attributeName==="class")){v();break}});return S.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",v),v(),()=>{cancelAnimationFrame(b),S.disconnect(),window.removeEventListener("resize",v),M()}},[r,s,d])}function Be({gameCubeSize:r,screenHeight:m,screenWidth:l}){const s=o.useRef(null),d=o.useRef(null),[c,T]=o.useState(null);He(s,{minDesktopWidth:1200,forceResize:!1}),o.useEffect(()=>(Te(),()=>{document.body.style.overflow=""}),[]);const[j,M]=o.useState(null),[b,v]=o.useState([]),[S,a]=o.useState(4),[g,C]=o.useState(!1),[w,h]=o.useState(1),[p,I]=o.useState(null),[y,A]=o.useState("ready"),[K,J]=o.useState(3),[$,G]=o.useState(10),[N,Q]=o.useState(20),[ce,O]=o.useState(0),[E,D]=o.useState(!1),[W,X]=o.useState(""),[R,q]=o.useState(!1),[Y,ee]=o.useState(!1),[te,H]=o.useState(null),[me,P]=o.useState([]),[ue,ne]=o.useState([]),[k,ge]=o.useState(!1);o.useEffect(()=>{if(typeof window>"u")return;const t=()=>{const i=l??window.innerWidth;ge(i<=768)};return t(),window.addEventListener("resize",t),window.addEventListener("orientationchange",t),()=>{window.removeEventListener("resize",t),window.removeEventListener("orientationchange",t)}},[l]),o.useLayoutEffect(()=>{const t=d.current;if(!t||typeof window>"u")return;let i=null;try{i=new ResizeObserver(f=>{for(const u of f){const x=u.contentRect;T(Math.round(Math.min(x.width,x.height)))}}),i.observe(t),T(Math.round(Math.min(t.clientWidth,t.clientHeight)))}catch{T(Math.round(Math.min(t.clientWidth,t.clientHeight)))}return()=>i?.disconnect()},[k]);const oe=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),se=()=>{if(!j)return;const t=oe(_[j]);v(t),C(!0),D(!1),h(1),O(0),P([]),ne([]),ie(t,[],!0)},ie=(t=b,i=ue,f=!1)=>{const u=oe(t.length?t:_[j]);let x=Math.floor(Math.random()*u.length),z=u[x].name,B=0;for(;i.includes(z)&&B<20;)x=Math.floor(Math.random()*u.length),z=u[x].name,B++;v(u),I(x),ne([...i,z]),q(!1),X(""),Q(20),H(null),f?(A("ready"),J(3),G(10)):(A("memorize"),G(10))};o.useEffect(()=>{if(!(!g||E||R)){if(y==="ready")if(K<=0)A("memorize");else{const t=setTimeout(()=>J(i=>i-1),1e3);return()=>clearTimeout(t)}if(y==="memorize")if($<=0)A("guess");else{const t=setTimeout(()=>G(i=>i-1),1e3);return()=>clearTimeout(t)}if(y==="guess"){if(N<=0){q(!0),H("wrong");const i=b[p].name;P(f=>[...f,{round:w,answer:W,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>Q(i=>i-1),1e3);return()=>clearTimeout(t)}}},[y,K,$,N,g,E,R,b,p,w,W]);const he=()=>{if(p===null||Y)return;const t=b[p].name,i=W.toLowerCase().trim();let f="wrong";i===t?(O(u=>u+1),H("correct"),f="correct"):Ie(i,t)===1?(O(u=>u+.5),H("almost"),f="almost"):(H("wrong"),f="wrong"),P(u=>[...u,{round:w,answer:i,correct:t,result:f}]),ee(!0),setTimeout(()=>{ee(!1),q(!0)},600)},fe=()=>w<S?(h(t=>t+1),ie()):D(!0),pe=()=>{C(!1),D(!1),M(null)},ye=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"})]})}),[]),re=1440,le=900,xe=d.current?.clientWidth??l??(typeof window<"u"?window.innerWidth:re),be=d.current?.clientHeight??m??(typeof window<"u"?window.innerHeight:le),U=Math.min(xe/re,be/le);return e.jsx("div",{ref:s,style:{position:"fixed",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",overflow:"hidden",zIndex:1},children:e.jsx("div",{ref:d,style:{width:k?"100%":`${Math.min(r??1e3,l??1e3,m??1e3)}px`,height:k?"100%":`${Math.min(r??1e3,l??1e3,m??1e3)}px`,borderRadius:k?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",position:"relative",overflow:"hidden",boxShadow:k?"none":"0 0 40px rgba(0,0,0,0.08)",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",style:{transform:`scale(${U})`,transformOrigin:"center center",width:`${100/U}%`,height:`${100/U}%`,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!k&&ye,!j&&!g&&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:()=>M(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,...S===t?n.gmButtonActive:{}},onClick:()=>a(t),children:t},t))})]})]}),j&&!g&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",j]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",S]}),e.jsx("button",{style:n.gmButton,onClick:se,children:"▶ Start game"})]}),E&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",ce," / ",S]}),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:me.map((t,i)=>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"})]},i))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:n.gmButton,onClick:se,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:pe,children:"⬅️ Choose theme"})]})]}),g&&!E&&e.jsxs("div",{style:n.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[y==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),y==="memorize"&&e.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",$,")"]}),y==="guess"&&!R&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",N,"s"]})]}),y!=="ready"&&(()=>{const t=k?12:20,i=32,f=d.current?.clientWidth??Math.min(r??1e3,l??1e3),u=d.current?.clientHeight??Math.min(r??1e3,m??1e3),x=Math.min(f,u),z=typeof window<"u"?window.innerWidth:l??1e3,B=z<600?110:z<900?130:z<1280?150:180,we=4,ae=2,V=Math.max(ae,Math.min(we,Math.floor((x-i+t)/(B+t))||ae)),je=Math.floor((x-i-t*(V-1))/V),L=Math.max(B,je);return e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:`repeat(${V}, ${L}px)`,gridAutoRows:`${L}px`,gap:`${t}px`,justifyContent:"center",justifyItems:"center",padding:8,boxSizing:"border-box"},children:b.map((de,F)=>{const ve=p===F&&y==="guess"&&!R;return e.jsx("div",{style:{...n.gmCard,width:`${L}px`,height:`${L}px`,padding:L>=160?10:8,boxSizing:"border-box",...te==="correct"&&p===F?n.gmCorrect:{},...te==="wrong"&&p===F?n.gmWrong:{}},children:!ve&&e.jsx("img",{src:de.src,alt:de.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},F)})})})(),e.jsxs("div",{style:{marginTop:16,height:80},children:[y==="guess"&&!R&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:W,onChange:t=>X(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:he,disabled:Y,children:Y?"...":"Check"})]}),R&&e.jsx("button",{type:"button",style:n.gmButton,onClick:fe,children:"Next round"})]})]})]})})})}exports.Game=Be;exports.themes=_;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as n, jsxs as l, Fragment as
|
|
2
|
-
import { useRef as J, useState as a, useEffect as _, useLayoutEffect as
|
|
3
|
-
const
|
|
4
|
-
src: `${
|
|
1
|
+
import { jsx as n, jsxs as l, Fragment as Te } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as J, useState as a, useEffect as _, useLayoutEffect as ge, useMemo as Re } from "react";
|
|
3
|
+
const Ie = window.origin + "/cloud/speakid/games/whatsmissing/", K = (r, u) => r.map(([s, o]) => ({
|
|
4
|
+
src: `${Ie}${u}/${o.replace(/\s/g, "%20")}.png`,
|
|
5
5
|
name: o
|
|
6
|
-
})),
|
|
6
|
+
})), He = [
|
|
7
7
|
["apple", "apple"],
|
|
8
8
|
["banana", "banana"],
|
|
9
9
|
["bread", "bread"],
|
|
@@ -29,7 +29,7 @@ const Me = window.origin + "/cloud/speakid/games/whatsmissing/", K = (r, u) => r
|
|
|
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 Me = window.origin + "/cloud/speakid/games/whatsmissing/", K = (r, u) => r
|
|
|
49
49
|
["tortoise", "tortoise"],
|
|
50
50
|
["wolf", "wolf"],
|
|
51
51
|
["zebra", "zebra"]
|
|
52
|
-
],
|
|
52
|
+
], Ae = [
|
|
53
53
|
["ball", "ball"],
|
|
54
54
|
["balloon", "balloon"],
|
|
55
55
|
["blocks", "blocks"],
|
|
@@ -69,11 +69,11 @@ const Me = window.origin + "/cloud/speakid/games/whatsmissing/", K = (r, u) => r
|
|
|
69
69
|
["teddy_bear", "teddy bear"],
|
|
70
70
|
["yo-yo", "yo-yo"],
|
|
71
71
|
["crayons", "crayons"]
|
|
72
|
-
],
|
|
73
|
-
food: K(
|
|
74
|
-
animals: K(
|
|
75
|
-
toys: K(
|
|
76
|
-
},
|
|
72
|
+
], ue = {
|
|
73
|
+
food: K(He, "food"),
|
|
74
|
+
animals: K(Be, "animals"),
|
|
75
|
+
toys: K(Ae, "toys")
|
|
76
|
+
}, Le = `
|
|
77
77
|
@keyframes spin {
|
|
78
78
|
from { transform: rotate(0deg); }
|
|
79
79
|
to { transform: rotate(360deg); }
|
|
@@ -81,9 +81,9 @@ const Me = window.origin + "/cloud/speakid/games/whatsmissing/", K = (r, u) => r
|
|
|
81
81
|
`;
|
|
82
82
|
if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
|
|
83
83
|
const r = document.createElement("style");
|
|
84
|
-
r.id = "spin-keyframes", r.innerHTML =
|
|
84
|
+
r.id = "spin-keyframes", r.innerHTML = Le, document.head.appendChild(r);
|
|
85
85
|
}
|
|
86
|
-
const
|
|
86
|
+
const We = {
|
|
87
87
|
animation: "spin 1.4s linear infinite"
|
|
88
88
|
}, t = {
|
|
89
89
|
gmCenterScreen: {
|
|
@@ -239,15 +239,15 @@ const He = {
|
|
|
239
239
|
},
|
|
240
240
|
gmHourglass: {
|
|
241
241
|
fontSize: "42px",
|
|
242
|
-
...
|
|
242
|
+
...We
|
|
243
243
|
}
|
|
244
|
-
},
|
|
244
|
+
}, Ee = () => {
|
|
245
245
|
const r = document.createElement("style");
|
|
246
246
|
r.textContent = `
|
|
247
247
|
#whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
|
|
248
248
|
#whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
|
|
249
249
|
`, document.head.appendChild(r);
|
|
250
|
-
},
|
|
250
|
+
}, je = (r, u) => {
|
|
251
251
|
const s = Array.from({ length: r.length + 1 }, () => Array(u.length + 1).fill(0));
|
|
252
252
|
for (let o = 0; o <= r.length; o++) s[o][0] = o;
|
|
253
253
|
for (let o = 0; o <= u.length; o++) s[0][o] = o;
|
|
@@ -256,9 +256,9 @@ const He = {
|
|
|
256
256
|
s[o][c] = r[o - 1] === u[c - 1] ? s[o - 1][c - 1] : Math.min(s[o - 1][c - 1], s[o][c - 1], s[o - 1][c]) + 1;
|
|
257
257
|
return s[r.length][u.length];
|
|
258
258
|
};
|
|
259
|
-
function
|
|
259
|
+
function Fe(r, u = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
260
260
|
const s = J(null), o = u.minDesktopWidth ?? 1200, c = !!u.forceResize;
|
|
261
|
-
|
|
261
|
+
ge(() => {
|
|
262
262
|
if (typeof window > "u" || !r || !r.current) return;
|
|
263
263
|
const m = r.current, H = () => {
|
|
264
264
|
try {
|
|
@@ -278,12 +278,12 @@ function Le(r, u = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
278
278
|
return 1;
|
|
279
279
|
}, C = () => {
|
|
280
280
|
if (o && window.innerWidth < o) {
|
|
281
|
-
|
|
281
|
+
R();
|
|
282
282
|
return;
|
|
283
283
|
}
|
|
284
284
|
const d = H();
|
|
285
285
|
if (!d || d === 1) {
|
|
286
|
-
|
|
286
|
+
R();
|
|
287
287
|
return;
|
|
288
288
|
}
|
|
289
289
|
s.current || (s.current = {
|
|
@@ -295,7 +295,7 @@ function Le(r, u = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
295
295
|
});
|
|
296
296
|
const h = 1 / d;
|
|
297
297
|
c && (m.style.width = `${d * 100}%`, m.style.height = `${d * 100}%`), m.style.transformOrigin = "50% 50%", m.style.transform = `scale(${h})`, m.style.willChange = "transform";
|
|
298
|
-
},
|
|
298
|
+
}, R = () => {
|
|
299
299
|
if (!s.current) return;
|
|
300
300
|
const d = s.current;
|
|
301
301
|
m.style.transform = d.transform ?? "", m.style.transformOrigin = d.transformOrigin ?? "", m.style.width = d.width ?? "", m.style.height = d.height ?? "", m.style.willChange = d.willChange ?? "", s.current = null;
|
|
@@ -311,30 +311,30 @@ function Le(r, u = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
311
311
|
}
|
|
312
312
|
});
|
|
313
313
|
return z.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", k), k(), () => {
|
|
314
|
-
cancelAnimationFrame(x), z.disconnect(), window.removeEventListener("resize", k),
|
|
314
|
+
cancelAnimationFrame(x), z.disconnect(), window.removeEventListener("resize", k), R();
|
|
315
315
|
};
|
|
316
316
|
}, [r, o, c]);
|
|
317
317
|
}
|
|
318
|
-
function
|
|
318
|
+
function De({
|
|
319
319
|
gameCubeSize: r,
|
|
320
320
|
screenHeight: u,
|
|
321
321
|
screenWidth: s
|
|
322
322
|
}) {
|
|
323
323
|
const o = J(null), c = J(null), [m, H] = a(null);
|
|
324
|
-
|
|
324
|
+
Fe(o, { minDesktopWidth: 1200, forceResize: !1 }), _(() => (Ee(), () => {
|
|
325
325
|
document.body.style.overflow = "";
|
|
326
326
|
}), []);
|
|
327
|
-
const [C,
|
|
327
|
+
const [C, R] = a(null), [x, k] = a([]), [z, d] = a(4), [h, M] = a(!1), [v, f] = a(1), [y, B] = a(null), [b, E] = a("ready"), [Q, X] = a(3), [G, N] = a(10), [D, ee] = a(20), [he, O] = a(0), [j, q] = a(!1), [F, te] = a(""), [I, Y] = a(!1), [P, ne] = a(!1), [oe, A] = a(null), [fe, U] = a([]), [pe, ie] = a([]), [S, ye] = a(!1);
|
|
328
328
|
_(() => {
|
|
329
329
|
if (typeof window > "u") return;
|
|
330
330
|
const e = () => {
|
|
331
331
|
const i = s ?? window.innerWidth;
|
|
332
|
-
|
|
332
|
+
ye(i <= 768);
|
|
333
333
|
};
|
|
334
334
|
return e(), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
|
|
335
335
|
window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
|
|
336
336
|
};
|
|
337
|
-
}, [s]),
|
|
337
|
+
}, [s]), ge(() => {
|
|
338
338
|
const e = c.current;
|
|
339
339
|
if (!e || typeof window > "u") return;
|
|
340
340
|
let i = null;
|
|
@@ -352,17 +352,17 @@ function Ge({
|
|
|
352
352
|
}, [S]);
|
|
353
353
|
const re = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), se = () => {
|
|
354
354
|
if (!C) return;
|
|
355
|
-
const e = re(
|
|
355
|
+
const e = re(ue[C]);
|
|
356
356
|
k(e), M(!0), q(!1), f(1), O(0), U([]), ie([]), le(e, [], !0);
|
|
357
|
-
}, le = (e = x, i =
|
|
358
|
-
const g = re(e.length ? e :
|
|
359
|
-
let w = Math.floor(Math.random() * g.length),
|
|
360
|
-
for (; i.includes(
|
|
361
|
-
w = Math.floor(Math.random() * g.length),
|
|
362
|
-
k(g), B(w), ie([...i,
|
|
357
|
+
}, le = (e = x, i = pe, p = !1) => {
|
|
358
|
+
const g = re(e.length ? e : ue[C]);
|
|
359
|
+
let w = Math.floor(Math.random() * g.length), T = g[w].name, L = 0;
|
|
360
|
+
for (; i.includes(T) && L < 20; )
|
|
361
|
+
w = Math.floor(Math.random() * g.length), T = g[w].name, L++;
|
|
362
|
+
k(g), B(w), ie([...i, T]), Y(!1), te(""), ee(20), A(null), p ? (E("ready"), X(3), N(10)) : (E("memorize"), N(10));
|
|
363
363
|
};
|
|
364
364
|
_(() => {
|
|
365
|
-
if (!(!h || j ||
|
|
365
|
+
if (!(!h || j || I)) {
|
|
366
366
|
if (b === "ready")
|
|
367
367
|
if (Q <= 0) E("memorize");
|
|
368
368
|
else {
|
|
@@ -389,17 +389,17 @@ function Ge({
|
|
|
389
389
|
return () => clearTimeout(e);
|
|
390
390
|
}
|
|
391
391
|
}
|
|
392
|
-
}, [b, Q, G, D, h, j,
|
|
393
|
-
const
|
|
392
|
+
}, [b, Q, G, D, h, j, I, x, y, v, F]);
|
|
393
|
+
const be = () => {
|
|
394
394
|
if (y === null || P) return;
|
|
395
395
|
const e = x[y].name, i = F.toLowerCase().trim();
|
|
396
396
|
let p = "wrong";
|
|
397
|
-
i === e ? (O((g) => g + 1), A("correct"), p = "correct") :
|
|
397
|
+
i === e ? (O((g) => g + 1), A("correct"), p = "correct") : je(i, e) === 1 ? (O((g) => g + 0.5), A("almost"), p = "almost") : (A("wrong"), p = "wrong"), U((g) => [...g, { round: v, answer: i, correct: e, result: p }]), ne(!0), setTimeout(() => {
|
|
398
398
|
ne(!1), Y(!0);
|
|
399
399
|
}, 600);
|
|
400
|
-
},
|
|
401
|
-
M(!1), q(!1),
|
|
402
|
-
},
|
|
400
|
+
}, we = () => v < z ? (f((e) => e + 1), le()) : q(!0), xe = () => {
|
|
401
|
+
M(!1), q(!1), R(null);
|
|
402
|
+
}, ve = Re(
|
|
403
403
|
() => /* @__PURE__ */ n("div", { style: { ...t.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ l("picture", { children: [
|
|
404
404
|
/* @__PURE__ */ n(
|
|
405
405
|
"source",
|
|
@@ -419,10 +419,7 @@ function Ge({
|
|
|
419
419
|
)
|
|
420
420
|
] }) }),
|
|
421
421
|
[]
|
|
422
|
-
),
|
|
423
|
-
(s ?? window.innerWidth) / 1440,
|
|
424
|
-
(u ?? window.innerHeight) / 900
|
|
425
|
-
) : 1;
|
|
422
|
+
), ae = 1440, de = 900, Ce = c.current?.clientWidth ?? s ?? (typeof window < "u" ? window.innerWidth : ae), ke = c.current?.clientHeight ?? u ?? (typeof window < "u" ? window.innerHeight : de), V = Math.min(Ce / ae, ke / de);
|
|
426
423
|
return /* @__PURE__ */ n(
|
|
427
424
|
"div",
|
|
428
425
|
{
|
|
@@ -468,11 +465,11 @@ function Ge({
|
|
|
468
465
|
alignItems: "center"
|
|
469
466
|
},
|
|
470
467
|
children: [
|
|
471
|
-
!S &&
|
|
468
|
+
!S && ve,
|
|
472
469
|
!C && !h && /* @__PURE__ */ l("div", { style: t.gmCenterScreen, children: [
|
|
473
470
|
/* @__PURE__ */ n("h1", { style: t.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
474
471
|
/* @__PURE__ */ n("p", { style: t.gmBodyM, children: "Select a theme:" }),
|
|
475
|
-
/* @__PURE__ */ n("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ n("button", { style: t.gmButton, onClick: () =>
|
|
472
|
+
/* @__PURE__ */ n("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ n("button", { style: t.gmButton, onClick: () => R(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
|
|
476
473
|
/* @__PURE__ */ l("div", { style: { marginTop: 24 }, children: [
|
|
477
474
|
/* @__PURE__ */ n("p", { style: t.gmBodyS, children: "Choose number of rounds:" }),
|
|
478
475
|
/* @__PURE__ */ n("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ n(
|
|
@@ -504,7 +501,7 @@ function Ge({
|
|
|
504
501
|
/* @__PURE__ */ n("h1", { style: t.gmHeadline1, children: "Results" }),
|
|
505
502
|
/* @__PURE__ */ l("h2", { style: t.gmHeadline3, children: [
|
|
506
503
|
"Your score: ",
|
|
507
|
-
|
|
504
|
+
he,
|
|
508
505
|
" / ",
|
|
509
506
|
z
|
|
510
507
|
] }),
|
|
@@ -516,7 +513,7 @@ function Ge({
|
|
|
516
513
|
/* @__PURE__ */ n("th", { children: "Correct" }),
|
|
517
514
|
/* @__PURE__ */ n("th", { children: "Result" })
|
|
518
515
|
] }) }),
|
|
519
|
-
/* @__PURE__ */ n("tbody", { children:
|
|
516
|
+
/* @__PURE__ */ n("tbody", { children: fe.map((e, i) => /* @__PURE__ */ l("tr", { children: [
|
|
520
517
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.round }),
|
|
521
518
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.answer || "—" }),
|
|
522
519
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.correct }),
|
|
@@ -525,7 +522,7 @@ function Ge({
|
|
|
525
522
|
] }),
|
|
526
523
|
/* @__PURE__ */ l("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
527
524
|
/* @__PURE__ */ n("button", { style: t.gmButton, onClick: se, children: "🔁 Play again" }),
|
|
528
|
-
/* @__PURE__ */ n("button", { style: t.gmButton, onClick:
|
|
525
|
+
/* @__PURE__ */ n("button", { style: t.gmButton, onClick: xe, children: "⬅️ Choose theme" })
|
|
529
526
|
] })
|
|
530
527
|
] }),
|
|
531
528
|
h && !j && /* @__PURE__ */ l("div", { style: t.gmGameLayout, children: [
|
|
@@ -540,7 +537,7 @@ function Ge({
|
|
|
540
537
|
alignItems: "center"
|
|
541
538
|
},
|
|
542
539
|
children: [
|
|
543
|
-
b === "ready" && /* @__PURE__ */ l(
|
|
540
|
+
b === "ready" && /* @__PURE__ */ l(Te, { children: [
|
|
544
541
|
/* @__PURE__ */ n("h1", { style: { ...t.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
|
|
545
542
|
/* @__PURE__ */ n("div", { style: t.gmHourglass, children: "⏳" })
|
|
546
543
|
] }),
|
|
@@ -549,7 +546,7 @@ function Ge({
|
|
|
549
546
|
G,
|
|
550
547
|
")"
|
|
551
548
|
] }),
|
|
552
|
-
b === "guess" && !
|
|
549
|
+
b === "guess" && !I && /* @__PURE__ */ l("p", { style: t.gmBodyM, children: [
|
|
553
550
|
"⏳ Time left: ",
|
|
554
551
|
D,
|
|
555
552
|
"s"
|
|
@@ -558,13 +555,13 @@ function Ge({
|
|
|
558
555
|
}
|
|
559
556
|
),
|
|
560
557
|
b !== "ready" && (() => {
|
|
561
|
-
const e = S ? 12 : 20, i = 32, p = c.current?.clientWidth ?? Math.min(r ?? 1e3, s ?? 1e3), g = c.current?.clientHeight ?? Math.min(r ?? 1e3, u ?? 1e3), w = Math.min(p, g),
|
|
562
|
-
|
|
558
|
+
const e = S ? 12 : 20, i = 32, p = c.current?.clientWidth ?? Math.min(r ?? 1e3, s ?? 1e3), g = c.current?.clientHeight ?? Math.min(r ?? 1e3, u ?? 1e3), w = Math.min(p, g), T = typeof window < "u" ? window.innerWidth : s ?? 1e3, L = T < 600 ? 110 : T < 900 ? 130 : T < 1280 ? 150 : 180, ze = 4, ce = 2, Z = Math.max(
|
|
559
|
+
ce,
|
|
563
560
|
Math.min(
|
|
564
|
-
|
|
565
|
-
Math.floor((w - i + e) / (L + e)) ||
|
|
561
|
+
ze,
|
|
562
|
+
Math.floor((w - i + e) / (L + e)) || ce
|
|
566
563
|
)
|
|
567
|
-
),
|
|
564
|
+
), Me = Math.floor((w - i - e * (Z - 1)) / Z), W = Math.max(L, Me);
|
|
568
565
|
return /* @__PURE__ */ n(
|
|
569
566
|
"div",
|
|
570
567
|
{
|
|
@@ -578,8 +575,8 @@ function Ge({
|
|
|
578
575
|
padding: 8,
|
|
579
576
|
boxSizing: "border-box"
|
|
580
577
|
},
|
|
581
|
-
children: x.map((
|
|
582
|
-
const
|
|
578
|
+
children: x.map((me, $) => {
|
|
579
|
+
const Se = y === $ && b === "guess" && !I;
|
|
583
580
|
return /* @__PURE__ */ n(
|
|
584
581
|
"div",
|
|
585
582
|
{
|
|
@@ -592,11 +589,11 @@ function Ge({
|
|
|
592
589
|
...oe === "correct" && y === $ ? t.gmCorrect : {},
|
|
593
590
|
...oe === "wrong" && y === $ ? t.gmWrong : {}
|
|
594
591
|
},
|
|
595
|
-
children: !
|
|
592
|
+
children: !Se && /* @__PURE__ */ n(
|
|
596
593
|
"img",
|
|
597
594
|
{
|
|
598
|
-
src:
|
|
599
|
-
alt:
|
|
595
|
+
src: me.src,
|
|
596
|
+
alt: me.name,
|
|
600
597
|
style: {
|
|
601
598
|
width: "100%",
|
|
602
599
|
height: "100%",
|
|
@@ -613,7 +610,7 @@ function Ge({
|
|
|
613
610
|
);
|
|
614
611
|
})(),
|
|
615
612
|
/* @__PURE__ */ l("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
616
|
-
b === "guess" && !
|
|
613
|
+
b === "guess" && !I && /* @__PURE__ */ l("div", { children: [
|
|
617
614
|
/* @__PURE__ */ n(
|
|
618
615
|
"input",
|
|
619
616
|
{
|
|
@@ -628,13 +625,13 @@ function Ge({
|
|
|
628
625
|
"button",
|
|
629
626
|
{
|
|
630
627
|
style: { ...t.gmButton, marginLeft: 8 },
|
|
631
|
-
onClick:
|
|
628
|
+
onClick: be,
|
|
632
629
|
disabled: P,
|
|
633
630
|
children: P ? "..." : "Check"
|
|
634
631
|
}
|
|
635
632
|
)
|
|
636
633
|
] }),
|
|
637
|
-
|
|
634
|
+
I && /* @__PURE__ */ n("button", { type: "button", style: t.gmButton, onClick: we, children: "Next round" })
|
|
638
635
|
] })
|
|
639
636
|
] })
|
|
640
637
|
]
|
|
@@ -646,6 +643,6 @@ function Ge({
|
|
|
646
643
|
);
|
|
647
644
|
}
|
|
648
645
|
export {
|
|
649
|
-
|
|
650
|
-
|
|
646
|
+
De as Game,
|
|
647
|
+
ue as themes
|
|
651
648
|
};
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -349,16 +349,13 @@ export default function Game({
|
|
|
349
349
|
[]
|
|
350
350
|
);
|
|
351
351
|
|
|
352
|
-
// ✅ масштаб интерфейса под
|
|
352
|
+
// ✅ масштаб интерфейса под доступный размер контейнера (а не всей вкладки)
|
|
353
|
+
// это устраняет резкие перепады масштаба при открытии DevTools или панелей браузера
|
|
353
354
|
const baseWidth = 1440;
|
|
354
355
|
const baseHeight = 900;
|
|
355
|
-
const
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
(screenWidth ?? window.innerWidth) / baseWidth,
|
|
359
|
-
(screenHeight ?? window.innerHeight) / baseHeight
|
|
360
|
-
)
|
|
361
|
-
: 1;
|
|
356
|
+
const effectiveWidth = squareRef.current?.clientWidth ?? (screenWidth ?? (typeof window !== "undefined" ? window.innerWidth : baseWidth));
|
|
357
|
+
const effectiveHeight = squareRef.current?.clientHeight ?? (screenHeight ?? (typeof window !== "undefined" ? window.innerHeight : baseHeight));
|
|
358
|
+
const scale = Math.min(effectiveWidth / baseWidth, effectiveHeight / baseHeight);
|
|
362
359
|
|
|
363
360
|
return (
|
|
364
361
|
<div
|
|
@@ -536,7 +533,9 @@ export default function Game({
|
|
|
536
533
|
|
|
537
534
|
// choose a comfortable minimum card size per breakpoint
|
|
538
535
|
const vw = typeof window !== "undefined" ? window.innerWidth : (screenWidth ?? 1000);
|
|
539
|
-
|
|
536
|
+
// Tune breakpoints so common laptop sizes (e.g., 1366×768) keep a 3×3 grid
|
|
537
|
+
// by allowing a slightly smaller minimum card size when width < 1280.
|
|
538
|
+
const minCardBase = vw < 600 ? 110 : vw < 900 ? 130 : vw < 1280 ? 150 : 180;
|
|
540
539
|
|
|
541
540
|
// compute columns to best fill available space without going below minCardBase
|
|
542
541
|
const maxColumns = 4;
|