@mblinkov/whats-missing 20.0.27 → 20.0.28
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 +192 -213
- package/package.json +1 -1
- package/src/Game.tsx +227 -241
|
@@ -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"),me=window.origin+"/cloud/speakid/games/whatsmissing/",P=(i,u)=>i.map(([l,s])=>({src:`${me}${u}/${s.replace(/\s/g,"%20")}.png`,name:s})),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"]],ge=[["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"]],he=[["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"]],U={food:P(ue,"food"),animals:P(ge,"animals"),toys:P(he,"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 i=document.createElement("style");i.id="spin-keyframes",i.innerHTML=
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const i=document.createElement("style");i.id="spin-keyframes",i.innerHTML=fe,document.head.appendChild(i)}const pe={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:"600px",minHeight:"100%",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",...pe}},ye=()=>{const i=document.createElement("style");i.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(i)},xe=(i,
|
|
9
|
+
`,document.head.appendChild(i)},xe=(i,u)=>{const l=Array.from({length:i.length+1},()=>Array(u.length+1).fill(0));for(let s=0;s<=i.length;s++)l[s][0]=s;for(let s=0;s<=u.length;s++)l[0][s]=s;for(let s=1;s<=i.length;s++)for(let c=1;c<=u.length;c++)l[s][c]=i[s-1]===u[c-1]?l[s-1][c-1]:Math.min(l[s-1][c-1],l[s][c-1],l[s-1][c])+1;return l[i.length][u.length]};function be(i,u={minDesktopWidth:1200,forceResize:!1}){const l=o.useRef(null),s=u.minDesktopWidth??1200,c=!!u.forceResize;o.useLayoutEffect(()=>{if(typeof window>"u"||!i||!i.current)return;const m=i.current,I=()=>{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 y=h.getBoundingClientRect();if(document.documentElement.removeChild(h),y&&y.width>0){const H=y.width/100;if(!isNaN(H)&&H>0)return H}}catch{}return 1},S=()=>{if(s&&window.innerWidth<s){R();return}const a=I();if(!a||a===1){R();return}l.current||(l.current={transform:m.style.transform||null,transformOrigin:m.style.transformOrigin||null,width:m.style.width||null,height:m.style.height||null,willChange:m.style.willChange||null});const g=1/a;c&&(m.style.width=`${a*100}%`,m.style.height=`${a*100}%`),m.style.transformOrigin="50% 50%",m.style.transform=`scale(${g})`,m.style.willChange="transform"},R=()=>{if(!l.current)return;const a=l.current;m.style.transform=a.transform??"",m.style.transformOrigin=a.transformOrigin??"",m.style.width=a.width??"",m.style.height=a.height??"",m.style.willChange=a.willChange??"",l.current=null};let b=0;const k=()=>{cancelAnimationFrame(b),b=requestAnimationFrame(S)},v=new MutationObserver(a=>{for(const g of a)if(g.type==="attributes"&&(g.attributeName==="style"||g.attributeName==="class")){k();break}});return v.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",k),k(),()=>{cancelAnimationFrame(b),v.disconnect(),window.removeEventListener("resize",k),R()}},[i,s,c])}function we({gameCubeSize:i,screenHeight:u,screenWidth:l}){const s=o.useRef(null),c=o.useRef(null),[m,I]=o.useState(null);be(s,{minDesktopWidth:1200,forceResize:!1}),o.useEffect(()=>(ye(),()=>{document.body.style.overflow=""}),[]);const[S,R]=o.useState(null),[b,k]=o.useState([]),[v,a]=o.useState(4),[g,C]=o.useState(!1),[w,h]=o.useState(1),[y,H]=o.useState(null),[x,A]=o.useState("ready"),[V,Z]=o.useState(3),[E,F]=o.useState(10),[$,_]=o.useState(20),[se,G]=o.useState(0),[W,N]=o.useState(!1),[L,K]=o.useState(""),[T,O]=o.useState(!1),[D,J]=o.useState(!1),[Q,B]=o.useState(null),[oe,q]=o.useState([]),[ie,X]=o.useState([]),[j,je]=o.useState(!1);o.useLayoutEffect(()=>{const t=c.current;if(!t||typeof window>"u")return;let r=null;try{r=new ResizeObserver(f=>{for(const d of f){const p=d.contentRect;I(Math.round(Math.min(p.width,p.height)))}}),r.observe(t),I(Math.round(Math.min(t.clientWidth,t.clientHeight)))}catch{I(Math.round(Math.min(t.clientWidth,t.clientHeight)))}return()=>r?.disconnect()},[j]);const ee=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),te=()=>{if(!S)return;const t=ee(U[S]);k(t),C(!0),N(!1),h(1),G(0),q([]),X([]),ne(t,[],!0)},ne=(t=b,r=ie,f=!1)=>{const d=ee(t.length?t:U[S]);let p=Math.floor(Math.random()*d.length),M=d[p].name,z=0;for(;r.includes(M)&&z<20;)p=Math.floor(Math.random()*d.length),M=d[p].name,z++;k(d),H(p),X([...r,M]),O(!1),K(""),_(20),B(null),f?(A("ready"),Z(3),F(10)):(A("memorize"),F(10))};o.useEffect(()=>{if(!(!g||W||T)){if(x==="ready")if(V<=0)A("memorize");else{const t=setTimeout(()=>Z(r=>r-1),1e3);return()=>clearTimeout(t)}if(x==="memorize")if(E<=0)A("guess");else{const t=setTimeout(()=>F(r=>r-1),1e3);return()=>clearTimeout(t)}if(x==="guess"){if($<=0){O(!0),B("wrong");const r=b[y].name;q(f=>[...f,{round:w,answer:L,correct:r,result:"wrong"}]);return}const t=setTimeout(()=>_(r=>r-1),1e3);return()=>clearTimeout(t)}}},[x,V,E,$,g,W,T,b,y,w,L]);const re=()=>{if(y===null||D)return;const t=b[y].name,r=L.toLowerCase().trim();let f="wrong";r===t?(G(d=>d+1),B("correct"),f="correct"):xe(r,t)===1?(G(d=>d+.5),B("almost"),f="almost"):(B("wrong"),f="wrong"),q(d=>[...d,{round:w,answer:r,correct:t,result:f}]),J(!0),setTimeout(()=>{J(!1),O(!0)},600)},le=()=>w<v?(h(t=>t+1),ne()):N(!0),ae=()=>{C(!1),N(!1),R(null)},de=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"})]})}),[]),Y=typeof window<"u"?Math.min((l??window.innerWidth)/1440,(u??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:c,style:{width:j?"100%":`${Math.min(i??1e3,l??1e3,u??1e3)}px`,height:j?"100%":`${Math.min(i??1e3,l??1e3,u??1e3)}px`,borderRadius:j?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",position:"relative",overflow:"hidden",boxShadow:j?"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(${Y})`,transformOrigin:"center center",width:`${100/Y}%`,height:`${100/Y}%`,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!j&&de,!S&&!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:()=>R(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))})]})]}),S&&!g&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",S]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",v]}),e.jsx("button",{style:n.gmButton,onClick:te,children:"▶ Start game"})]}),W&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",se," / ",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:oe.map((t,r)=>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"})]},r))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:n.gmButton,onClick:te,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:ae,children:"⬅️ Choose theme"})]})]}),g&&!W&&e.jsxs("div",{style:n.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[x==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),x==="memorize"&&e.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",E,")"]}),x==="guess"&&!T&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",$,"s"]})]}),x!=="ready"&&(()=>{const t=j?12:20,r=32,f=Math.min(c.current?.clientWidth??i??1e3,c.current?.clientHeight??u??1e3,l??1e3),d=j?2:3,p=Math.max(90,Math.floor((f-r-t*(d-1))/d));return e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:`repeat(${d}, ${p}px)`,gridAutoRows:`${p}px`,gap:`${t}px`,justifyContent:"center",justifyItems:"center",padding:8,boxSizing:"border-box"},children:b.map((M,z)=>{const ce=y===z&&x==="guess"&&!T;return e.jsx("div",{style:{...n.gmCard,width:`${p}px`,height:`${p}px`,padding:j?8:10,boxSizing:"border-box",...Q==="correct"&&y===z?n.gmCorrect:{},...Q==="wrong"&&y===z?n.gmWrong:{}},children:!ce&&e.jsx("img",{src:M.src,alt:M.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},z)})})})(),e.jsxs("div",{style:{marginTop:16,height:80},children:[x==="guess"&&!T&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:L,onChange:t=>K(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:re,disabled:D,children:D?"...":"Check"})]}),T&&e.jsx("button",{type:"button",style:n.gmButton,onClick:le,children:"Next round"})]})]})]})})})}exports.Game=we;exports.themes=U;
|