@mblinkov/whats-missing 20.0.41 → 20.0.43
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 +19 -30
- package/dist/whats-missing.es.js +103 -114
- package/package.json +1 -1
- package/src/Game.tsx +31 -29
|
@@ -1,45 +1,34 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),pe=require("react-dom"),ye=window.origin+"/cloud/speakid/games/whatsmissing/",
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),pe=require("react-dom"),ye=window.origin+"/cloud/speakid/games/whatsmissing/",P=(d,m)=>d.map(([r,i])=>({src:`${ye}${m}/${i.replace(/\s/g,"%20")}.png`,name:i})),xe=[["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"]],we=[["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"]],be=[["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"]],Y={food:P(xe,"food"),animals:P(we,"animals"),toys:P(be,"toys")},je=`
|
|
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 d=document.createElement("style");d.id="spin-keyframes",d.innerHTML=je,document.head.appendChild(d)}const Se={animation:"spin 1.4s linear infinite"},o={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",...Se}},ve=(d,m)=>{const r=Array.from({length:d.length+1},()=>Array(m.length+1).fill(0));for(let i=0;i<=d.length;i++)r[i][0]=i;for(let i=0;i<=m.length;i++)r[0][i]=i;for(let i=1;i<=d.length;i++)for(let g=1;g<=m.length;g++)r[i][g]=d[i-1]===m[g-1]?r[i-1][g-1]:Math.min(r[i-1][g-1],r[i][g-1],r[i-1][g])+1;return r[d.length][m.length]};function ze(d,m={minDesktopWidth:1200,forceResize:!1}){const r=s.useRef(null),i=m.minDesktopWidth??1200,g=!!m.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!d||!d.current)return;const c=d.current,T=()=>{try{const
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const d=document.createElement("style");d.id="spin-keyframes",d.innerHTML=je,document.head.appendChild(d)}const Se={animation:"spin 1.4s linear infinite"},o={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",...Se}},ve=(d,m)=>{const r=Array.from({length:d.length+1},()=>Array(m.length+1).fill(0));for(let i=0;i<=d.length;i++)r[i][0]=i;for(let i=0;i<=m.length;i++)r[0][i]=i;for(let i=1;i<=d.length;i++)for(let g=1;g<=m.length;g++)r[i][g]=d[i-1]===m[g-1]?r[i-1][g-1]:Math.min(r[i-1][g-1],r[i][g-1],r[i-1][g])+1;return r[d.length][m.length]};function ze(d,m={minDesktopWidth:1200,forceResize:!1}){const r=s.useRef(null),i=m.minDesktopWidth??1200,g=!!m.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!d||!d.current)return;const c=d.current,T=()=>{try{const l=document.body,y=getComputedStyle(l),w=parseFloat(l.style&&l.style.zoom||"");if(w&&!isNaN(w)&&w>0)return w;const z=parseFloat(y.zoom||"");if(z&&!isNaN(z)&&z>0)return z;const u=document.createElement("div");u.style.position="absolute",u.style.left="0",u.style.top="0",u.style.width="100px",u.style.height="1px",u.style.visibility="hidden",document.documentElement.appendChild(u);const C=u.getBoundingClientRect();if(document.documentElement.removeChild(u),C&&C.width>0){const j=C.width/100;if(!isNaN(j)&&j>0)return j}}catch{}return 1},B=()=>{if(i&&window.innerWidth<i){R();return}const l=T();if(!l||l===1){R();return}r.current||(r.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 y=1/l;g&&(c.style.width=`${l*100}%`,c.style.height=`${l*100}%`),c.style.transformOrigin="50% 50%",c.style.transform=`scale(${y})`,c.style.willChange="transform"},R=()=>{if(!r.current)return;const l=r.current;c.style.transform=l.transform??"",c.style.transformOrigin=l.transformOrigin??"",c.style.width=l.width??"",c.style.height=l.height??"",c.style.willChange=l.willChange??"",r.current=null};let v=0;const p=()=>{cancelAnimationFrame(v),v=requestAnimationFrame(B)},M=new MutationObserver(l=>{for(const y of l)if(y.type==="attributes"&&(y.attributeName==="style"||y.attributeName==="class")){p();break}});return M.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",p),p(),()=>{cancelAnimationFrame(v),M.disconnect(),window.removeEventListener("resize",p),R()}},[d,i,g])}function Ce({gameCubeSize:d,screenHeight:m,screenWidth:r}){const i=s.useRef(null),g=s.useRef(null),[c,T]=s.useState(null),[B,R]=s.useState(null);ze(i,{minDesktopWidth:1024,forceResize:!1}),s.useLayoutEffect(()=>{const e=i.current;if(!e)return;let n=e.shadowRoot;n||(n=e.attachShadow({mode:"open"})),e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.width="100vw",e.style.height="100vh",e.style.zIndex="9999",e.style.background="linear-gradient(to bottom, #fff8f8, #f9fafb)",e.style.margin="0",e.style.padding="0",e.style.transform="none",e.style.zoom="1",n.innerHTML="";const a=document.createElement("style");a.textContent=`
|
|
7
7
|
:host {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
height: 100vh !important;
|
|
13
|
-
z-index: 100 !important;
|
|
14
|
-
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%) !important;
|
|
15
|
-
overflow: hidden !important;
|
|
16
|
-
margin: 0 !important;
|
|
17
|
-
padding: 0 !important;
|
|
18
|
-
transform: none !important;
|
|
19
|
-
zoom: 1 !important;
|
|
20
|
-
scale: 1 !important;
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
align-items: center;
|
|
11
|
+
overflow: hidden;
|
|
21
12
|
}
|
|
22
13
|
|
|
23
14
|
#whats-missing-root, #whats-missing-root * {
|
|
24
|
-
box-sizing: border-box
|
|
15
|
+
box-sizing: border-box;
|
|
25
16
|
}
|
|
26
17
|
|
|
27
18
|
#whats-missing-root img {
|
|
28
|
-
max-width: 100
|
|
29
|
-
height: auto
|
|
30
|
-
display: block
|
|
31
|
-
user-select: none
|
|
19
|
+
max-width: 100%;
|
|
20
|
+
height: auto;
|
|
21
|
+
display: block;
|
|
22
|
+
user-select: none;
|
|
32
23
|
}
|
|
33
24
|
|
|
34
25
|
#whats-missing-root {
|
|
35
|
-
position: relative
|
|
36
|
-
width: 100
|
|
37
|
-
height: 100
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
zoom: 1 !important;
|
|
43
|
-
scale: 1 !important;
|
|
26
|
+
position: relative;
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: 100%;
|
|
29
|
+
max-width: 1200px;
|
|
30
|
+
display: flex;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
align-items: center;
|
|
44
33
|
}
|
|
45
|
-
`,n.appendChild(
|
|
34
|
+
`,n.appendChild(a),R(n)},[]),s.useEffect(()=>{const e=document.body,n=document.documentElement,a=e.style.zoom,h=e.style.transform,b=n.style.zoom,I=n.style.transform;return e.style.zoom="1",e.style.transform="none",n.style.zoom="1",n.style.transform="none",()=>{e.style.zoom=a,e.style.transform=h,n.style.zoom=b,n.style.transform=I}},[]);const v=s.useMemo(()=>{const e=d??Math.min(r??1e3,m??1e3),n=r??(typeof window<"u"?window.innerWidth:1e3);return e<600&&n>768?600:n<=768?Math.min(e,n-20):e},[d,r,m]);s.useEffect(()=>()=>{document.body.style.overflow=""},[]);const[p,M]=s.useState(null),[l,y]=s.useState([]),[w,z]=s.useState(4),[u,C]=s.useState(!1),[j,Z]=s.useState(1),[S,re]=s.useState(null),[x,E]=s.useState("ready"),[U,V]=s.useState(3),[W,F]=s.useState(10),[G,_]=s.useState(20),[le,N]=s.useState(0),[L,D]=s.useState(!1),[A,K]=s.useState(""),[k,O]=s.useState(!1),[$,J]=s.useState(!1),[Q,H]=s.useState(null),[ae,q]=s.useState([]),[de,X]=s.useState([]),[f,ce]=s.useState(!1);s.useEffect(()=>{if(typeof window>"u")return;const e=()=>{const n=r??window.innerWidth,a=window.matchMedia&&window.matchMedia("(pointer: coarse)").matches;ce(n<=768||a)};return e(),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}},[r]),s.useLayoutEffect(()=>{const e=g.current;if(!e||typeof window>"u")return;let n=null;try{n=new ResizeObserver(a=>{for(const h of a){const b=h.contentRect;T(Math.round(Math.min(b.width,b.height)))}}),n.observe(e),T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}catch{T(Math.round(Math.min(e.clientWidth,e.clientHeight)))}return()=>n?.disconnect()},[f]);const ee=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),te=()=>{if(!p)return;const e=ee(Y[p]);y(e),C(!0),D(!1),Z(1),N(0),q([]),X([]),ne(e,[],!0)},ne=(e=l,n=de,a=!1)=>{const h=ee(e.length?e:Y[p]);let b=Math.floor(Math.random()*h.length),I=h[b].name,ie=0;for(;n.includes(I)&&ie<20;)b=Math.floor(Math.random()*h.length),I=h[b].name,ie++;y(h),re(b),X([...n,I]),O(!1),K(""),_(20),H(null),a?(E("ready"),V(3),F(10)):(E("memorize"),F(10))};s.useEffect(()=>{if(!(!u||L||k)){if(x==="ready")if(U<=0)E("memorize");else{const e=setTimeout(()=>V(n=>n-1),1e3);return()=>clearTimeout(e)}if(x==="memorize")if(W<=0)E("guess");else{const e=setTimeout(()=>F(n=>n-1),1e3);return()=>clearTimeout(e)}if(x==="guess"){if(G<=0){O(!0),H("wrong");const n=l[S].name;q(a=>[...a,{round:j,answer:A,correct:n,result:"wrong"}]);return}const e=setTimeout(()=>_(n=>n-1),1e3);return()=>clearTimeout(e)}}},[x,U,W,G,u,L,k,l,S,j,A]);const me=()=>{if(S===null||$)return;const e=l[S].name,n=A.toLowerCase().trim();let a="wrong";n===e?(N(h=>h+1),H("correct"),a="correct"):ve(n,e)===1?(N(h=>h+.5),H("almost"),a="almost"):(H("wrong"),a="wrong"),q(h=>[...h,{round:j,answer:n,correct:e,result:a}]),J(!0),setTimeout(()=>{J(!1),O(!0)},600)},ue=()=>j<w?(Z(e=>e+1),ne()):D(!0),he=()=>{C(!1),D(!1),M(null)},ge=s.useMemo(()=>t.jsx("div",{style:{...o.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},children:t.jsxs("picture",{children:[t.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),t.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:o.gmLogoImg,loading:"lazy"})]})}),[]),oe=1200,se=700,fe=s.useMemo(()=>{const e=r??(typeof window<"u"?window.innerWidth:oe),n=m??(typeof window<"u"?window.innerHeight:se),a=Math.min(e/oe,n/se);return Math.min(1.35,Math.max(1,a))},[r,m,f]);return t.jsx("div",{ref:i,style:{width:"100%",height:"100%"},children:B&&pe.createPortal(t.jsx("div",{id:"whats-missing-root",style:{all:"unset"},children:t.jsx("div",{ref:g,style:{width:f?"100%":`${v}px`,height:f?"100%":`${v}px`,borderRadius:f?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",position:"relative",overflow:"hidden",boxShadow:f?"none":"0 0 40px rgba(0,0,0,0.08)",display:"flex",justifyContent:"center",alignItems:"center"},children:t.jsxs("div",{style:{transform:`scale(${fe})`,transformOrigin:"center center",transition:"transform 0.2s ease-out",width:"100%",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[!f&&ge,!p&&!u&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"WHAT'S MISSING?"}),t.jsx("p",{style:o.gmBodyM,children:"Select a theme:"}),t.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(e=>t.jsx("button",{style:o.gmButton,onClick:()=>M(e),children:e==="animals"?"🐶 Animals":e==="food"?"🍎 Food":"🧸 Toys"},e))}),t.jsxs("div",{style:{marginTop:24},children:[t.jsx("p",{style:o.gmBodyS,children:"Choose number of rounds:"}),t.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(e=>t.jsx("button",{style:{...o.gmButton,...w===e?o.gmButtonActive:{}},onClick:()=>z(e),children:e},e))})]})]}),p&&!u&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsxs("h1",{style:o.gmHeadline1,children:["Theme selected: ",p]}),t.jsxs("p",{style:o.gmBodyM,children:["Rounds: ",w]}),t.jsx("button",{style:o.gmButton,onClick:te,children:"▶ Start game"})]}),L&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"Results"}),t.jsxs("h2",{style:o.gmHeadline3,children:["Your score: ",le," / ",w]}),t.jsx("p",{style:{...o.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),t.jsxs("table",{style:o.gmTable,children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Round"}),t.jsx("th",{children:"Your Answer"}),t.jsx("th",{children:"Correct"}),t.jsx("th",{children:"Result"})]})}),t.jsx("tbody",{children:ae.map((e,n)=>t.jsxs("tr",{children:[t.jsx("td",{style:o.gmTableCell,children:e.round}),t.jsx("td",{style:o.gmTableCell,children:e.answer||"—"}),t.jsx("td",{style:o.gmTableCell,children:e.correct}),t.jsx("td",{style:o.gmTableCell,children:e.result==="correct"?"✔ Correct":e.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},n))})]}),t.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[t.jsx("button",{style:o.gmButton,onClick:te,children:"🔁 Play again"}),t.jsx("button",{style:o.gmButton,onClick:he,children:"⬅️ Choose theme"})]})]}),u&&!L&&t.jsxs("div",{style:o.gmGameLayout,children:[t.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[x==="ready"&&t.jsxs(t.Fragment,{children:[t.jsx("h1",{style:{...o.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),t.jsx("div",{style:o.gmHourglass,children:"⏳"})]}),x==="memorize"&&t.jsxs("p",{style:{...o.gmBodyM,color:"#10b981"},children:["MEMORIZE (",W,")"]}),x==="guess"&&!k&&t.jsxs("p",{style:o.gmBodyM,children:["⏳ Time left: ",G,"s"]})]}),x!=="ready"&&t.jsx("div",{style:{...o.gmGrid,display:"grid",gridTemplateColumns:`repeat(${f?2:3}, 1fr)`,gridTemplateRows:`repeat(${f?3:2}, 1fr)`,gap:f?12:20,justifyContent:"center",alignContent:"center",padding:f?8:16,width:"100%",height:"100%",maxWidth:f?"100%":600,maxHeight:f?"100%":400,boxSizing:"border-box"},children:l.map((e,n)=>{const a=S===n&&x==="guess"&&!k;return t.jsx("div",{style:{...o.gmCard,width:"100%",height:"100%",...Q==="correct"&&S===n?o.gmCorrect:{},...Q==="wrong"&&S===n?o.gmWrong:{}},children:!a&&t.jsx("img",{src:e.src,alt:e.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},n)})}),t.jsxs("div",{style:{marginTop:16,height:80},children:[x==="guess"&&!k&&t.jsxs("div",{children:[t.jsx("input",{type:"text",placeholder:"Type the missing word",value:A,onChange:e=>K(e.target.value),style:o.gmInput}),t.jsx("button",{style:{...o.gmButton,marginLeft:8},onClick:me,disabled:$,children:$?"...":"Check"})]}),k&&t.jsx("button",{type:"button",style:o.gmButton,onClick:ue,children:"Next round"})]})]})]})})}),B)})}exports.Game=Ce;exports.themes=Y;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as n, jsxs as d, Fragment as ve } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as
|
|
2
|
+
import { useRef as V, useState as a, useLayoutEffect as _, useEffect as F, useMemo as Z } from "react";
|
|
3
3
|
import { createPortal as ze } from "react-dom";
|
|
4
|
-
const Ce = window.origin + "/cloud/speakid/games/whatsmissing/",
|
|
4
|
+
const Ce = window.origin + "/cloud/speakid/games/whatsmissing/", U = (c, h) => c.map(([r, i]) => ({
|
|
5
5
|
src: `${Ce}${h}/${i.replace(/\s/g, "%20")}.png`,
|
|
6
6
|
name: i
|
|
7
7
|
})), ke = [
|
|
@@ -70,10 +70,10 @@ const Ce = window.origin + "/cloud/speakid/games/whatsmissing/", V = (c, h) => c
|
|
|
70
70
|
["teddy_bear", "teddy bear"],
|
|
71
71
|
["yo-yo", "yo-yo"],
|
|
72
72
|
["crayons", "crayons"]
|
|
73
|
-
],
|
|
74
|
-
food:
|
|
75
|
-
animals:
|
|
76
|
-
toys:
|
|
73
|
+
], ce = {
|
|
74
|
+
food: U(ke, "food"),
|
|
75
|
+
animals: U(Se, "animals"),
|
|
76
|
+
toys: U(Te, "toys")
|
|
77
77
|
}, Re = `
|
|
78
78
|
@keyframes spin {
|
|
79
79
|
from { transform: rotate(0deg); }
|
|
@@ -247,13 +247,13 @@ const Me = {
|
|
|
247
247
|
for (let i = 0; i <= c.length; i++) r[i][0] = i;
|
|
248
248
|
for (let i = 0; i <= h.length; i++) r[0][i] = i;
|
|
249
249
|
for (let i = 1; i <= c.length; i++)
|
|
250
|
-
for (let
|
|
251
|
-
r[i][
|
|
250
|
+
for (let f = 1; f <= h.length; f++)
|
|
251
|
+
r[i][f] = c[i - 1] === h[f - 1] ? r[i - 1][f - 1] : Math.min(r[i - 1][f - 1], r[i][f - 1], r[i - 1][f]) + 1;
|
|
252
252
|
return r[c.length][h.length];
|
|
253
253
|
};
|
|
254
254
|
function Ie(c, h = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
255
|
-
const r =
|
|
256
|
-
|
|
255
|
+
const r = V(null), i = h.minDesktopWidth ?? 1200, f = !!h.forceResize;
|
|
256
|
+
_(() => {
|
|
257
257
|
if (typeof window > "u" || !c || !c.current) return;
|
|
258
258
|
const m = c.current, M = () => {
|
|
259
259
|
try {
|
|
@@ -289,7 +289,7 @@ function Ie(c, h = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
289
289
|
willChange: m.style.willChange || null
|
|
290
290
|
});
|
|
291
291
|
const w = 1 / s;
|
|
292
|
-
|
|
292
|
+
f && (m.style.width = `${s * 100}%`, m.style.height = `${s * 100}%`), m.style.transformOrigin = "50% 50%", m.style.transform = `scale(${w})`, m.style.willChange = "transform";
|
|
293
293
|
}, H = () => {
|
|
294
294
|
if (!r.current) return;
|
|
295
295
|
const s = r.current;
|
|
@@ -308,90 +308,79 @@ function Ie(c, h = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
308
308
|
return I.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", y), y(), () => {
|
|
309
309
|
cancelAnimationFrame(k), I.disconnect(), window.removeEventListener("resize", y), H();
|
|
310
310
|
};
|
|
311
|
-
}, [c, i,
|
|
311
|
+
}, [c, i, f]);
|
|
312
312
|
}
|
|
313
313
|
function Ee({
|
|
314
314
|
gameCubeSize: c,
|
|
315
315
|
screenHeight: h,
|
|
316
316
|
screenWidth: r
|
|
317
317
|
}) {
|
|
318
|
-
const i =
|
|
319
|
-
Ie(i, { minDesktopWidth: 1024, forceResize: !1 }),
|
|
318
|
+
const i = V(null), f = V(null), [m, M] = a(null), [A, H] = a(null);
|
|
319
|
+
Ie(i, { minDesktopWidth: 1024, forceResize: !1 }), _(() => {
|
|
320
320
|
const e = i.current;
|
|
321
321
|
if (!e) return;
|
|
322
322
|
let t = e.shadowRoot;
|
|
323
|
-
t || (t = e.attachShadow({ mode: "open" })), t.innerHTML = "";
|
|
324
|
-
const
|
|
325
|
-
|
|
323
|
+
t || (t = e.attachShadow({ mode: "open" })), e.style.position = "fixed", e.style.top = "0", e.style.left = "0", e.style.width = "100vw", e.style.height = "100vh", e.style.zIndex = "9999", e.style.background = "linear-gradient(to bottom, #fff8f8, #f9fafb)", e.style.margin = "0", e.style.padding = "0", e.style.transform = "none", e.style.zoom = "1", t.innerHTML = "";
|
|
324
|
+
const l = document.createElement("style");
|
|
325
|
+
l.textContent = `
|
|
326
326
|
:host {
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
height: 100vh !important;
|
|
332
|
-
z-index: 100 !important;
|
|
333
|
-
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%) !important;
|
|
334
|
-
overflow: hidden !important;
|
|
335
|
-
margin: 0 !important;
|
|
336
|
-
padding: 0 !important;
|
|
337
|
-
transform: none !important;
|
|
338
|
-
zoom: 1 !important;
|
|
339
|
-
scale: 1 !important;
|
|
327
|
+
display: flex;
|
|
328
|
+
justify-content: center;
|
|
329
|
+
align-items: center;
|
|
330
|
+
overflow: hidden;
|
|
340
331
|
}
|
|
341
332
|
|
|
342
333
|
#whats-missing-root, #whats-missing-root * {
|
|
343
|
-
box-sizing: border-box
|
|
334
|
+
box-sizing: border-box;
|
|
344
335
|
}
|
|
345
336
|
|
|
346
337
|
#whats-missing-root img {
|
|
347
|
-
max-width: 100
|
|
348
|
-
height: auto
|
|
349
|
-
display: block
|
|
350
|
-
user-select: none
|
|
338
|
+
max-width: 100%;
|
|
339
|
+
height: auto;
|
|
340
|
+
display: block;
|
|
341
|
+
user-select: none;
|
|
351
342
|
}
|
|
352
343
|
|
|
353
344
|
#whats-missing-root {
|
|
354
|
-
position: relative
|
|
355
|
-
width: 100
|
|
356
|
-
height: 100
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
zoom: 1 !important;
|
|
362
|
-
scale: 1 !important;
|
|
345
|
+
position: relative;
|
|
346
|
+
width: 100%;
|
|
347
|
+
height: 100%;
|
|
348
|
+
max-width: 1200px;
|
|
349
|
+
display: flex;
|
|
350
|
+
justify-content: center;
|
|
351
|
+
align-items: center;
|
|
363
352
|
}
|
|
364
|
-
`, t.appendChild(
|
|
353
|
+
`, t.appendChild(l), H(t);
|
|
365
354
|
}, []), F(() => {
|
|
366
|
-
const e = document.body, t = document.documentElement,
|
|
355
|
+
const e = document.body, t = document.documentElement, l = e.style.zoom, g = e.style.transform, v = t.style.zoom, L = t.style.transform;
|
|
367
356
|
return e.style.zoom = "1", e.style.transform = "none", t.style.zoom = "1", t.style.transform = "none", () => {
|
|
368
|
-
e.style.zoom =
|
|
357
|
+
e.style.zoom = l, e.style.transform = g, t.style.zoom = v, t.style.transform = L;
|
|
369
358
|
};
|
|
370
359
|
}, []);
|
|
371
|
-
const k =
|
|
360
|
+
const k = Z(() => {
|
|
372
361
|
const e = c ?? Math.min(r ?? 1e3, h ?? 1e3), t = r ?? (typeof window < "u" ? window.innerWidth : 1e3);
|
|
373
362
|
return e < 600 && t > 768 ? 600 : t <= 768 ? Math.min(e, t - 20) : e;
|
|
374
363
|
}, [c, r, h]);
|
|
375
364
|
F(() => () => {
|
|
376
365
|
document.body.style.overflow = "";
|
|
377
366
|
}, []);
|
|
378
|
-
const [y, I] =
|
|
367
|
+
const [y, I] = a(null), [s, w] = a([]), [x, S] = a(4), [u, T] = a(!1), [z, K] = a(1), [C, me] = a(null), [b, E] = a("ready"), [J, Q] = a(3), [G, N] = a(10), [$, X] = a(20), [he, D] = a(0), [W, O] = a(!1), [j, ee] = a(""), [R, q] = a(!1), [Y, te] = a(!1), [ne, B] = a(null), [ue, P] = a([]), [ge, oe] = a([]), [p, fe] = a(!1);
|
|
379
368
|
F(() => {
|
|
380
369
|
if (typeof window > "u") return;
|
|
381
370
|
const e = () => {
|
|
382
|
-
const t = r ?? window.innerWidth,
|
|
383
|
-
fe(t <= 768 ||
|
|
371
|
+
const t = r ?? window.innerWidth, l = window.matchMedia && window.matchMedia("(pointer: coarse)").matches;
|
|
372
|
+
fe(t <= 768 || l);
|
|
384
373
|
};
|
|
385
374
|
return e(), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
|
|
386
375
|
window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
|
|
387
376
|
};
|
|
388
|
-
}, [r]),
|
|
389
|
-
const e =
|
|
377
|
+
}, [r]), _(() => {
|
|
378
|
+
const e = f.current;
|
|
390
379
|
if (!e || typeof window > "u") return;
|
|
391
380
|
let t = null;
|
|
392
381
|
try {
|
|
393
|
-
t = new ResizeObserver((
|
|
394
|
-
for (const g of
|
|
382
|
+
t = new ResizeObserver((l) => {
|
|
383
|
+
for (const g of l) {
|
|
395
384
|
const v = g.contentRect;
|
|
396
385
|
M(Math.round(Math.min(v.width, v.height)));
|
|
397
386
|
}
|
|
@@ -400,57 +389,57 @@ function Ee({
|
|
|
400
389
|
M(Math.round(Math.min(e.clientWidth, e.clientHeight)));
|
|
401
390
|
}
|
|
402
391
|
return () => t?.disconnect();
|
|
403
|
-
}, [
|
|
404
|
-
const
|
|
392
|
+
}, [p]);
|
|
393
|
+
const ie = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), re = () => {
|
|
405
394
|
if (!y) return;
|
|
406
|
-
const e =
|
|
407
|
-
w(e), T(!0), O(!1),
|
|
408
|
-
},
|
|
409
|
-
const g =
|
|
410
|
-
let v = Math.floor(Math.random() * g.length), L = g[v].name,
|
|
411
|
-
for (; t.includes(L) &&
|
|
412
|
-
v = Math.floor(Math.random() * g.length), L = g[v].name,
|
|
413
|
-
w(g),
|
|
395
|
+
const e = ie(ce[y]);
|
|
396
|
+
w(e), T(!0), O(!1), K(1), D(0), P([]), oe([]), se(e, [], !0);
|
|
397
|
+
}, se = (e = s, t = ge, l = !1) => {
|
|
398
|
+
const g = ie(e.length ? e : ce[y]);
|
|
399
|
+
let v = Math.floor(Math.random() * g.length), L = g[v].name, de = 0;
|
|
400
|
+
for (; t.includes(L) && de < 20; )
|
|
401
|
+
v = Math.floor(Math.random() * g.length), L = g[v].name, de++;
|
|
402
|
+
w(g), me(v), oe([...t, L]), q(!1), ee(""), X(20), B(null), l ? (E("ready"), Q(3), N(10)) : (E("memorize"), N(10));
|
|
414
403
|
};
|
|
415
404
|
F(() => {
|
|
416
405
|
if (!(!u || W || R)) {
|
|
417
406
|
if (b === "ready")
|
|
418
|
-
if (
|
|
407
|
+
if (J <= 0) E("memorize");
|
|
419
408
|
else {
|
|
420
|
-
const e = setTimeout(() =>
|
|
409
|
+
const e = setTimeout(() => Q((t) => t - 1), 1e3);
|
|
421
410
|
return () => clearTimeout(e);
|
|
422
411
|
}
|
|
423
412
|
if (b === "memorize")
|
|
424
|
-
if (
|
|
413
|
+
if (G <= 0) E("guess");
|
|
425
414
|
else {
|
|
426
|
-
const e = setTimeout(() =>
|
|
415
|
+
const e = setTimeout(() => N((t) => t - 1), 1e3);
|
|
427
416
|
return () => clearTimeout(e);
|
|
428
417
|
}
|
|
429
418
|
if (b === "guess") {
|
|
430
|
-
if (
|
|
419
|
+
if ($ <= 0) {
|
|
431
420
|
q(!0), B("wrong");
|
|
432
421
|
const t = s[C].name;
|
|
433
|
-
P((
|
|
434
|
-
...
|
|
422
|
+
P((l) => [
|
|
423
|
+
...l,
|
|
435
424
|
{ round: z, answer: j, correct: t, result: "wrong" }
|
|
436
425
|
]);
|
|
437
426
|
return;
|
|
438
427
|
}
|
|
439
|
-
const e = setTimeout(() =>
|
|
428
|
+
const e = setTimeout(() => X((t) => t - 1), 1e3);
|
|
440
429
|
return () => clearTimeout(e);
|
|
441
430
|
}
|
|
442
431
|
}
|
|
443
|
-
}, [b,
|
|
444
|
-
const
|
|
432
|
+
}, [b, J, G, $, u, W, R, s, C, z, j]);
|
|
433
|
+
const pe = () => {
|
|
445
434
|
if (C === null || Y) return;
|
|
446
435
|
const e = s[C].name, t = j.toLowerCase().trim();
|
|
447
|
-
let
|
|
448
|
-
t === e ? (D((g) => g + 1), B("correct"),
|
|
449
|
-
|
|
436
|
+
let l = "wrong";
|
|
437
|
+
t === e ? (D((g) => g + 1), B("correct"), l = "correct") : He(t, e) === 1 ? (D((g) => g + 0.5), B("almost"), l = "almost") : (B("wrong"), l = "wrong"), P((g) => [...g, { round: z, answer: t, correct: e, result: l }]), te(!0), setTimeout(() => {
|
|
438
|
+
te(!1), q(!0);
|
|
450
439
|
}, 600);
|
|
451
|
-
},
|
|
440
|
+
}, ye = () => z < x ? (K((e) => e + 1), se()) : O(!0), we = () => {
|
|
452
441
|
T(!1), O(!1), I(null);
|
|
453
|
-
},
|
|
442
|
+
}, be = Z(
|
|
454
443
|
() => /* @__PURE__ */ n("div", { style: { ...o.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ d("picture", { children: [
|
|
455
444
|
/* @__PURE__ */ n(
|
|
456
445
|
"source",
|
|
@@ -470,10 +459,10 @@ function Ee({
|
|
|
470
459
|
)
|
|
471
460
|
] }) }),
|
|
472
461
|
[]
|
|
473
|
-
), le = 1200,
|
|
474
|
-
const e = r ?? (typeof window < "u" ? window.innerWidth : le), t = h ?? (typeof window < "u" ? window.innerHeight :
|
|
475
|
-
return Math.min(1.35, Math.max(1,
|
|
476
|
-
}, [r, h,
|
|
462
|
+
), le = 1200, ae = 700, xe = Z(() => {
|
|
463
|
+
const e = r ?? (typeof window < "u" ? window.innerWidth : le), t = h ?? (typeof window < "u" ? window.innerHeight : ae), l = Math.min(e / le, t / ae);
|
|
464
|
+
return Math.min(1.35, Math.max(1, l));
|
|
465
|
+
}, [r, h, p]);
|
|
477
466
|
return /* @__PURE__ */ n("div", { ref: i, style: { width: "100%", height: "100%" }, children: A && ze(
|
|
478
467
|
/* @__PURE__ */ n(
|
|
479
468
|
"div",
|
|
@@ -483,15 +472,15 @@ function Ee({
|
|
|
483
472
|
children: /* @__PURE__ */ n(
|
|
484
473
|
"div",
|
|
485
474
|
{
|
|
486
|
-
ref:
|
|
475
|
+
ref: f,
|
|
487
476
|
style: {
|
|
488
|
-
width:
|
|
489
|
-
height:
|
|
490
|
-
borderRadius:
|
|
477
|
+
width: p ? "100%" : `${k}px`,
|
|
478
|
+
height: p ? "100%" : `${k}px`,
|
|
479
|
+
borderRadius: p ? 0 : "20px",
|
|
491
480
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
492
481
|
position: "relative",
|
|
493
482
|
overflow: "hidden",
|
|
494
|
-
boxShadow:
|
|
483
|
+
boxShadow: p ? "none" : "0 0 40px rgba(0,0,0,0.08)",
|
|
495
484
|
display: "flex",
|
|
496
485
|
justifyContent: "center",
|
|
497
486
|
alignItems: "center"
|
|
@@ -500,18 +489,18 @@ function Ee({
|
|
|
500
489
|
"div",
|
|
501
490
|
{
|
|
502
491
|
style: {
|
|
503
|
-
transform: `scale(${
|
|
492
|
+
transform: `scale(${xe})`,
|
|
504
493
|
transformOrigin: "center center",
|
|
505
494
|
transition: "transform 0.2s ease-out",
|
|
506
|
-
width:
|
|
507
|
-
height:
|
|
495
|
+
width: "100%",
|
|
496
|
+
height: "100%",
|
|
508
497
|
display: "flex",
|
|
509
498
|
flexDirection: "column",
|
|
510
499
|
justifyContent: "center",
|
|
511
500
|
alignItems: "center"
|
|
512
501
|
},
|
|
513
502
|
children: [
|
|
514
|
-
!
|
|
503
|
+
!p && be,
|
|
515
504
|
!y && !u && /* @__PURE__ */ d("div", { style: o.gmCenterScreen, children: [
|
|
516
505
|
/* @__PURE__ */ n("h1", { style: o.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
517
506
|
/* @__PURE__ */ n("p", { style: o.gmBodyM, children: "Select a theme:" }),
|
|
@@ -541,13 +530,13 @@ function Ee({
|
|
|
541
530
|
"Rounds: ",
|
|
542
531
|
x
|
|
543
532
|
] }),
|
|
544
|
-
/* @__PURE__ */ n("button", { style: o.gmButton, onClick:
|
|
533
|
+
/* @__PURE__ */ n("button", { style: o.gmButton, onClick: re, children: "▶ Start game" })
|
|
545
534
|
] }),
|
|
546
535
|
W && /* @__PURE__ */ d("div", { style: o.gmCenterScreen, children: [
|
|
547
536
|
/* @__PURE__ */ n("h1", { style: o.gmHeadline1, children: "Results" }),
|
|
548
537
|
/* @__PURE__ */ d("h2", { style: o.gmHeadline3, children: [
|
|
549
538
|
"Your score: ",
|
|
550
|
-
|
|
539
|
+
he,
|
|
551
540
|
" / ",
|
|
552
541
|
x
|
|
553
542
|
] }),
|
|
@@ -559,7 +548,7 @@ function Ee({
|
|
|
559
548
|
/* @__PURE__ */ n("th", { children: "Correct" }),
|
|
560
549
|
/* @__PURE__ */ n("th", { children: "Result" })
|
|
561
550
|
] }) }),
|
|
562
|
-
/* @__PURE__ */ n("tbody", { children:
|
|
551
|
+
/* @__PURE__ */ n("tbody", { children: ue.map((e, t) => /* @__PURE__ */ d("tr", { children: [
|
|
563
552
|
/* @__PURE__ */ n("td", { style: o.gmTableCell, children: e.round }),
|
|
564
553
|
/* @__PURE__ */ n("td", { style: o.gmTableCell, children: e.answer || "—" }),
|
|
565
554
|
/* @__PURE__ */ n("td", { style: o.gmTableCell, children: e.correct }),
|
|
@@ -567,8 +556,8 @@ function Ee({
|
|
|
567
556
|
] }, t)) })
|
|
568
557
|
] }),
|
|
569
558
|
/* @__PURE__ */ d("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
570
|
-
/* @__PURE__ */ n("button", { style: o.gmButton, onClick:
|
|
571
|
-
/* @__PURE__ */ n("button", { style: o.gmButton, onClick:
|
|
559
|
+
/* @__PURE__ */ n("button", { style: o.gmButton, onClick: re, children: "🔁 Play again" }),
|
|
560
|
+
/* @__PURE__ */ n("button", { style: o.gmButton, onClick: we, children: "⬅️ Choose theme" })
|
|
572
561
|
] })
|
|
573
562
|
] }),
|
|
574
563
|
u && !W && /* @__PURE__ */ d("div", { style: o.gmGameLayout, children: [
|
|
@@ -589,12 +578,12 @@ function Ee({
|
|
|
589
578
|
] }),
|
|
590
579
|
b === "memorize" && /* @__PURE__ */ d("p", { style: { ...o.gmBodyM, color: "#10b981" }, children: [
|
|
591
580
|
"MEMORIZE (",
|
|
592
|
-
|
|
581
|
+
G,
|
|
593
582
|
")"
|
|
594
583
|
] }),
|
|
595
584
|
b === "guess" && !R && /* @__PURE__ */ d("p", { style: o.gmBodyM, children: [
|
|
596
585
|
"⏳ Time left: ",
|
|
597
|
-
|
|
586
|
+
$,
|
|
598
587
|
"s"
|
|
599
588
|
] })
|
|
600
589
|
]
|
|
@@ -606,20 +595,20 @@ function Ee({
|
|
|
606
595
|
style: {
|
|
607
596
|
...o.gmGrid,
|
|
608
597
|
display: "grid",
|
|
609
|
-
gridTemplateColumns: `repeat(${
|
|
610
|
-
gridTemplateRows: `repeat(${
|
|
611
|
-
gap:
|
|
598
|
+
gridTemplateColumns: `repeat(${p ? 2 : 3}, 1fr)`,
|
|
599
|
+
gridTemplateRows: `repeat(${p ? 3 : 2}, 1fr)`,
|
|
600
|
+
gap: p ? 12 : 20,
|
|
612
601
|
justifyContent: "center",
|
|
613
602
|
alignContent: "center",
|
|
614
|
-
padding:
|
|
603
|
+
padding: p ? 8 : 16,
|
|
615
604
|
width: "100%",
|
|
616
605
|
height: "100%",
|
|
617
|
-
maxWidth:
|
|
618
|
-
maxHeight:
|
|
606
|
+
maxWidth: p ? "100%" : 600,
|
|
607
|
+
maxHeight: p ? "100%" : 400,
|
|
619
608
|
boxSizing: "border-box"
|
|
620
609
|
},
|
|
621
610
|
children: s.map((e, t) => {
|
|
622
|
-
const
|
|
611
|
+
const l = C === t && b === "guess" && !R;
|
|
623
612
|
return /* @__PURE__ */ n(
|
|
624
613
|
"div",
|
|
625
614
|
{
|
|
@@ -627,10 +616,10 @@ function Ee({
|
|
|
627
616
|
...o.gmCard,
|
|
628
617
|
width: "100%",
|
|
629
618
|
height: "100%",
|
|
630
|
-
...
|
|
631
|
-
...
|
|
619
|
+
...ne === "correct" && C === t ? o.gmCorrect : {},
|
|
620
|
+
...ne === "wrong" && C === t ? o.gmWrong : {}
|
|
632
621
|
},
|
|
633
|
-
children: !
|
|
622
|
+
children: !l && /* @__PURE__ */ n(
|
|
634
623
|
"img",
|
|
635
624
|
{
|
|
636
625
|
src: e.src,
|
|
@@ -657,7 +646,7 @@ function Ee({
|
|
|
657
646
|
type: "text",
|
|
658
647
|
placeholder: "Type the missing word",
|
|
659
648
|
value: j,
|
|
660
|
-
onChange: (e) =>
|
|
649
|
+
onChange: (e) => ee(e.target.value),
|
|
661
650
|
style: o.gmInput
|
|
662
651
|
}
|
|
663
652
|
),
|
|
@@ -665,13 +654,13 @@ function Ee({
|
|
|
665
654
|
"button",
|
|
666
655
|
{
|
|
667
656
|
style: { ...o.gmButton, marginLeft: 8 },
|
|
668
|
-
onClick:
|
|
657
|
+
onClick: pe,
|
|
669
658
|
disabled: Y,
|
|
670
659
|
children: Y ? "..." : "Check"
|
|
671
660
|
}
|
|
672
661
|
)
|
|
673
662
|
] }),
|
|
674
|
-
R && /* @__PURE__ */ n("button", { type: "button", style: o.gmButton, onClick:
|
|
663
|
+
R && /* @__PURE__ */ n("button", { type: "button", style: o.gmButton, onClick: ye, children: "Next round" })
|
|
675
664
|
] })
|
|
676
665
|
] })
|
|
677
666
|
]
|
|
@@ -686,5 +675,5 @@ function Ee({
|
|
|
686
675
|
}
|
|
687
676
|
export {
|
|
688
677
|
Ee as Game,
|
|
689
|
-
|
|
678
|
+
ce as themes
|
|
690
679
|
};
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -165,6 +165,19 @@ export default function Game({
|
|
|
165
165
|
root = container.attachShadow({ mode: 'open' });
|
|
166
166
|
}
|
|
167
167
|
|
|
168
|
+
// Растягиваем хост-элемент на весь экран
|
|
169
|
+
container.style.position = 'fixed';
|
|
170
|
+
container.style.top = '0';
|
|
171
|
+
container.style.left = '0';
|
|
172
|
+
container.style.width = '100vw';
|
|
173
|
+
container.style.height = '100vh';
|
|
174
|
+
container.style.zIndex = '9999';
|
|
175
|
+
container.style.background = 'linear-gradient(to bottom, #fff8f8, #f9fafb)';
|
|
176
|
+
container.style.margin = '0';
|
|
177
|
+
container.style.padding = '0';
|
|
178
|
+
container.style.transform = 'none';
|
|
179
|
+
container.style.zoom = '1';
|
|
180
|
+
|
|
168
181
|
// Очищаем содержимое shadow root
|
|
169
182
|
root.innerHTML = '';
|
|
170
183
|
|
|
@@ -172,42 +185,31 @@ export default function Game({
|
|
|
172
185
|
const style = document.createElement('style');
|
|
173
186
|
style.textContent = `
|
|
174
187
|
:host {
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
height: 100vh !important;
|
|
180
|
-
z-index: 100 !important;
|
|
181
|
-
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%) !important;
|
|
182
|
-
overflow: hidden !important;
|
|
183
|
-
margin: 0 !important;
|
|
184
|
-
padding: 0 !important;
|
|
185
|
-
transform: none !important;
|
|
186
|
-
zoom: 1 !important;
|
|
187
|
-
scale: 1 !important;
|
|
188
|
+
display: flex;
|
|
189
|
+
justify-content: center;
|
|
190
|
+
align-items: center;
|
|
191
|
+
overflow: hidden;
|
|
188
192
|
}
|
|
189
193
|
|
|
190
194
|
#whats-missing-root, #whats-missing-root * {
|
|
191
|
-
box-sizing: border-box
|
|
195
|
+
box-sizing: border-box;
|
|
192
196
|
}
|
|
193
197
|
|
|
194
198
|
#whats-missing-root img {
|
|
195
|
-
max-width: 100
|
|
196
|
-
height: auto
|
|
197
|
-
display: block
|
|
198
|
-
user-select: none
|
|
199
|
+
max-width: 100%;
|
|
200
|
+
height: auto;
|
|
201
|
+
display: block;
|
|
202
|
+
user-select: none;
|
|
199
203
|
}
|
|
200
204
|
|
|
201
205
|
#whats-missing-root {
|
|
202
|
-
position: relative
|
|
203
|
-
width: 100
|
|
204
|
-
height: 100
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
zoom: 1 !important;
|
|
210
|
-
scale: 1 !important;
|
|
206
|
+
position: relative;
|
|
207
|
+
width: 100%;
|
|
208
|
+
height: 100%;
|
|
209
|
+
max-width: 1200px;
|
|
210
|
+
display: flex;
|
|
211
|
+
justify-content: center;
|
|
212
|
+
align-items: center;
|
|
211
213
|
}
|
|
212
214
|
`;
|
|
213
215
|
|
|
@@ -491,8 +493,8 @@ export default function Game({
|
|
|
491
493
|
transform: `scale(${scale})`,
|
|
492
494
|
transformOrigin: "center center",
|
|
493
495
|
transition: "transform 0.2s ease-out",
|
|
494
|
-
width:
|
|
495
|
-
height:
|
|
496
|
+
width: "100%",
|
|
497
|
+
height: "100%",
|
|
496
498
|
display: "flex",
|
|
497
499
|
flexDirection: "column",
|
|
498
500
|
justifyContent: "center",
|