@mblinkov/whats-missing 20.0.25 → 20.0.26
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 +2 -2
- package/dist/whats-missing.es.js +74 -74
- package/package.json +1 -1
- package/src/Game.tsx +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),ce=window.origin+"/cloud/speakid/games/whatsmissing/",Y=(i,
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),ce=window.origin+"/cloud/speakid/games/whatsmissing/",Y=(i,h)=>i.map(([a,s])=>({src:`${ce}${h}/${s.replace(/\s/g,"%20")}.png`,name:s})),me=[["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"]],ue=[["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"]],ge=[["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"]],P={food:Y(me,"food"),animals:Y(ue,"animals"),toys:Y(ge,"toys")},he=`
|
|
2
2
|
@keyframes spin {
|
|
3
3
|
from { transform: rotate(0deg); }
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const i=document.createElement("style");i.id="spin-keyframes",i.innerHTML=he,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}},fe=()=>{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,h)=>{const a=Array.from({length:i.length+1},()=>Array(h.length+1).fill(0));for(let s=0;s<=i.length;s++)a[s][0]=s;for(let s=0;s<=h.length;s++)a[0][s]=s;for(let s=1;s<=i.length;s++)for(let m=1;m<=h.length;m++)a[s][m]=i[s-1]===h[m-1]?a[s-1][m-1]:Math.min(a[s-1][m-1],a[s][m-1],a[s-1][m])+1;return a[i.length][h.length]};function ye(i,h={minDesktopWidth:1200,forceResize:!1}){const a=o.useRef(null),s=h.minDesktopWidth??1200,m=!!h.forceResize;o.useLayoutEffect(()=>{if(typeof window>"u"||!i||!i.current)return;const d=i.current,I=()=>{try{const l=document.body,u=getComputedStyle(l),C=parseFloat(l.style&&l.style.zoom||"");if(C&&!isNaN(C)&&C>0)return C;const w=parseFloat(u.zoom||"");if(w&&!isNaN(w)&&w>0)return w;const g=document.createElement("div");g.style.position="absolute",g.style.left="0",g.style.top="0",g.style.width="100px",g.style.height="1px",g.style.visibility="hidden",g.style.pointerEvents="none",document.documentElement.appendChild(g);const x=g.getBoundingClientRect();if(document.documentElement.removeChild(g),x&&x.width>0){const H=x.width/100;if(!isNaN(H)&&H>0)return H}}catch{}return 1},S=()=>{if(s&&window.innerWidth<s){R();return}const l=I();if(!l||l===1){R();return}a.current||(a.current={transform:d.style.transform||null,transformOrigin:d.style.transformOrigin||null,width:d.style.width||null,height:d.style.height||null,willChange:d.style.willChange||null});const u=1/l;m&&(d.style.width=`${l*100}%`,d.style.height=`${l*100}%`),d.style.transformOrigin="50% 50%",d.style.transform=`scale(${u})`,d.style.willChange="transform"},R=()=>{if(!a.current)return;const l=a.current;d.style.transform=l.transform??"",d.style.transformOrigin=l.transformOrigin??"",d.style.width=l.width??"",d.style.height=l.height??"",d.style.willChange=l.willChange??"",a.current=null};let b=0;const v=()=>{cancelAnimationFrame(b),b=requestAnimationFrame(S)},k=new MutationObserver(l=>{for(const u of l)if(u.type==="attributes"&&(u.attributeName==="style"||u.attributeName==="class")){v();break}});return k.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",v),v(),()=>{cancelAnimationFrame(b),k.disconnect(),window.removeEventListener("resize",v),R()}},[i,s,m])}function be({gameCubeSize:i,screenHeight:h,screenWidth:a}){const s=o.useRef(null),m=o.useRef(null),[d,I]=o.useState(null);ye(s,{minDesktopWidth:1200,forceResize:!1}),o.useEffect(()=>(fe(),()=>{document.body.style.overflow=""}),[]);const[S,R]=o.useState(null),[b,v]=o.useState([]),[k,l]=o.useState(4),[u,C]=o.useState(!1),[w,g]=o.useState(1),[x,H]=o.useState(null),[y,A]=o.useState("ready"),[U,V]=o.useState(3),[L,F]=o.useState(10),[$,Z]=o.useState(20),[ne,G]=o.useState(0),[W,N]=o.useState(!1),[E,_]=o.useState(""),[T,O]=o.useState(!1),[D,K]=o.useState(!1),[J,B]=o.useState(null),[se,q]=o.useState([]),[oe,Q]=o.useState([]),[j,we]=o.useState(!1);o.useLayoutEffect(()=>{const t=m.current;if(!t||typeof window>"u")return;let r=null;try{r=new ResizeObserver(p=>{for(const c of p){const f=c.contentRect;I(Math.round(Math.min(f.width,f.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 X=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!S)return;const t=X(P[S]);v(t),C(!0),N(!1),g(1),G(0),q([]),Q([]),te(t,[],!0)},te=(t=b,r=oe,p=!1)=>{const c=X(t.length?t:P[S]);let f=Math.floor(Math.random()*c.length),M=c[f].name,z=0;for(;r.includes(M)&&z<20;)f=Math.floor(Math.random()*c.length),M=c[f].name,z++;v(c),H(f),Q([...r,M]),O(!1),_(""),Z(20),B(null),p?(A("ready"),V(3),F(10)):(A("memorize"),F(10))};o.useEffect(()=>{if(!(!u||W||T)){if(y==="ready")if(U<=0)A("memorize");else{const t=setTimeout(()=>V(r=>r-1),1e3);return()=>clearTimeout(t)}if(y==="memorize")if(L<=0)A("guess");else{const t=setTimeout(()=>F(r=>r-1),1e3);return()=>clearTimeout(t)}if(y==="guess"){if($<=0){O(!0),B("wrong");const r=b[x].name;q(p=>[...p,{round:w,answer:E,correct:r,result:"wrong"}]);return}const t=setTimeout(()=>Z(r=>r-1),1e3);return()=>clearTimeout(t)}}},[y,U,L,$,u,W,T,b,x,w,E]);const ie=()=>{if(x===null||D)return;const t=b[x].name,r=E.toLowerCase().trim();let p="wrong";r===t?(G(c=>c+1),B("correct"),p="correct"):xe(r,t)===1?(G(c=>c+.5),B("almost"),p="almost"):(B("wrong"),p="wrong"),q(c=>[...c,{round:w,answer:r,correct:t,result:p}]),K(!0),setTimeout(()=>{K(!1),O(!0)},600)},re=()=>w<k?(g(t=>t+1),te()):N(!0),le=()=>{C(!1),N(!1),R(null)},ae=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"})]})}),[]);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%)",transition:"background 0.3s ease",overflow:"hidden",zIndex:1,pointerEvents:"auto"},children:e.jsx("div",{ref:m,style:{width:i?`${i}px`:j?"100%":"1000px",height:i?`${i}px`:j?"100%":"1000px",maxWidth:"calc(100vw - 24px)",maxHeight:"calc(100vh - 20px)",display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:j?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:j?"none":"0 0 40px rgba(0,0,0,0.08)",position:"relative"},children:e.jsx("div",{style:{transform:"none",transformOrigin:"50% 50%",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!j&&ae,!S&&!u&&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,...k===t?n.gmButtonActive:{}},onClick:()=>l(t),children:t},t))})]})]}),S&&!u&&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: ",k]}),e.jsx("button",{style:n.gmButton,onClick:ee,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: ",ne," / ",k]}),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:se.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:ee,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:le,children:"⬅️ Choose theme"})]})]}),u&&!W&&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 (",L,")"]}),y==="guess"&&!T&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",$,"s"]})]}),y!=="ready"&&(()=>{const t=j?12:20,r=32,p=Math.min(i??1e3,d??1e3,h??1e3,a??1e3),c=j?2:3,f=Math.max(90,Math.floor((p-r-t*(c-1))/c));return e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:`repeat(${c}, ${f}px)`,gridAutoRows:`${f}px`,gap:`${t}px`,justifyContent:"center",justifyItems:"center",padding:8,boxSizing:"border-box"},children:b.map((M,z)=>{const de=x===z&&y==="guess"&&!T;return e.jsx("div",{style:{...n.gmCard,width:`${f}px`,height:`${f}px`,padding:j?8:10,boxSizing:"border-box",...J==="correct"&&x===z?n.gmCorrect:{},...J==="wrong"&&x===z?n.gmWrong:{}},children:!de&&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:[y==="guess"&&!T&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:E,onChange:t=>_(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:ie,disabled:D,children:D?"...":"Check"})]}),T&&e.jsx("button",{type:"button",style:n.gmButton,onClick:re,children:"Next round"})]})]})]})})})})}exports.Game=be;exports.themes=P;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as t, jsxs as s, Fragment as he } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as U, useState as l, useEffect as oe, useLayoutEffect as re, useMemo as pe } from "react";
|
|
3
|
-
const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i,
|
|
4
|
-
src: `${fe}${
|
|
3
|
+
const fe = window.origin + "/cloud/speakid/games/whatsmissing/", P = (i, p) => i.map(([d, o]) => ({
|
|
4
|
+
src: `${fe}${p}/${o.replace(/\s/g, "%20")}.png`,
|
|
5
5
|
name: o
|
|
6
6
|
})), ye = [
|
|
7
7
|
["apple", "apple"],
|
|
@@ -244,25 +244,25 @@ const ve = {
|
|
|
244
244
|
#whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
|
|
245
245
|
#whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
|
|
246
246
|
`, document.head.appendChild(i);
|
|
247
|
-
}, Ce = (i,
|
|
248
|
-
const
|
|
249
|
-
for (let o = 0; o <= i.length; o++)
|
|
250
|
-
for (let o = 0; o <=
|
|
247
|
+
}, Ce = (i, p) => {
|
|
248
|
+
const d = Array.from({ length: i.length + 1 }, () => Array(p.length + 1).fill(0));
|
|
249
|
+
for (let o = 0; o <= i.length; o++) d[o][0] = o;
|
|
250
|
+
for (let o = 0; o <= p.length; o++) d[0][o] = o;
|
|
251
251
|
for (let o = 1; o <= i.length; o++)
|
|
252
|
-
for (let g = 1; g <=
|
|
253
|
-
|
|
254
|
-
return
|
|
252
|
+
for (let g = 1; g <= p.length; g++)
|
|
253
|
+
d[o][g] = i[o - 1] === p[g - 1] ? d[o - 1][g - 1] : Math.min(d[o - 1][g - 1], d[o][g - 1], d[o - 1][g]) + 1;
|
|
254
|
+
return d[i.length][p.length];
|
|
255
255
|
};
|
|
256
|
-
function ze(i,
|
|
257
|
-
const
|
|
256
|
+
function ze(i, p = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
257
|
+
const d = U(null), o = p.minDesktopWidth ?? 1200, g = !!p.forceResize;
|
|
258
258
|
re(() => {
|
|
259
259
|
if (typeof window > "u" || !i || !i.current) return;
|
|
260
|
-
const
|
|
260
|
+
const c = i.current, B = () => {
|
|
261
261
|
try {
|
|
262
262
|
const a = document.body, u = getComputedStyle(a), T = parseFloat(a.style && a.style.zoom || "");
|
|
263
263
|
if (T && !isNaN(T) && T > 0) return T;
|
|
264
|
-
const
|
|
265
|
-
if (
|
|
264
|
+
const v = parseFloat(u.zoom || "");
|
|
265
|
+
if (v && !isNaN(v) && v > 0) return v;
|
|
266
266
|
const h = document.createElement("div");
|
|
267
267
|
h.style.position = "absolute", h.style.left = "0", h.style.top = "0", h.style.width = "100px", h.style.height = "1px", h.style.visibility = "hidden", h.style.pointerEvents = "none", document.documentElement.appendChild(h);
|
|
268
268
|
const x = h.getBoundingClientRect();
|
|
@@ -275,31 +275,31 @@ function ze(i, y = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
275
275
|
return 1;
|
|
276
276
|
}, C = () => {
|
|
277
277
|
if (o && window.innerWidth < o) {
|
|
278
|
-
|
|
278
|
+
M();
|
|
279
279
|
return;
|
|
280
280
|
}
|
|
281
281
|
const a = B();
|
|
282
282
|
if (!a || a === 1) {
|
|
283
|
-
|
|
283
|
+
M();
|
|
284
284
|
return;
|
|
285
285
|
}
|
|
286
|
-
|
|
287
|
-
transform:
|
|
288
|
-
transformOrigin:
|
|
289
|
-
width:
|
|
290
|
-
height:
|
|
291
|
-
willChange:
|
|
286
|
+
d.current || (d.current = {
|
|
287
|
+
transform: c.style.transform || null,
|
|
288
|
+
transformOrigin: c.style.transformOrigin || null,
|
|
289
|
+
width: c.style.width || null,
|
|
290
|
+
height: c.style.height || null,
|
|
291
|
+
willChange: c.style.willChange || null
|
|
292
292
|
});
|
|
293
293
|
const u = 1 / a;
|
|
294
|
-
g && (
|
|
295
|
-
},
|
|
296
|
-
if (!
|
|
297
|
-
const a =
|
|
298
|
-
|
|
294
|
+
g && (c.style.width = `${a * 100}%`, c.style.height = `${a * 100}%`), c.style.transformOrigin = "50% 50%", c.style.transform = `scale(${u})`, c.style.willChange = "transform";
|
|
295
|
+
}, M = () => {
|
|
296
|
+
if (!d.current) return;
|
|
297
|
+
const a = d.current;
|
|
298
|
+
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 ?? "", d.current = null;
|
|
299
299
|
};
|
|
300
|
-
let
|
|
300
|
+
let w = 0;
|
|
301
301
|
const z = () => {
|
|
302
|
-
cancelAnimationFrame(
|
|
302
|
+
cancelAnimationFrame(w), w = requestAnimationFrame(C);
|
|
303
303
|
}, S = new MutationObserver((a) => {
|
|
304
304
|
for (const u of a)
|
|
305
305
|
if (u.type === "attributes" && (u.attributeName === "style" || u.attributeName === "class")) {
|
|
@@ -308,49 +308,49 @@ function ze(i, y = { minDesktopWidth: 1200, forceResize: !1 }) {
|
|
|
308
308
|
}
|
|
309
309
|
});
|
|
310
310
|
return S.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", z), z(), () => {
|
|
311
|
-
cancelAnimationFrame(
|
|
311
|
+
cancelAnimationFrame(w), S.disconnect(), window.removeEventListener("resize", z), M();
|
|
312
312
|
};
|
|
313
313
|
}, [i, o, g]);
|
|
314
314
|
}
|
|
315
|
-
function
|
|
315
|
+
function Me({
|
|
316
316
|
gameCubeSize: i,
|
|
317
|
-
screenHeight:
|
|
318
|
-
screenWidth:
|
|
317
|
+
screenHeight: p,
|
|
318
|
+
screenWidth: d
|
|
319
319
|
}) {
|
|
320
|
-
const o = U(null), g = U(null), [
|
|
320
|
+
const o = U(null), g = U(null), [c, B] = l(null);
|
|
321
321
|
ze(o, { minDesktopWidth: 1200, forceResize: !1 }), oe(() => (ke(), () => {
|
|
322
322
|
document.body.style.overflow = "";
|
|
323
323
|
}), []);
|
|
324
|
-
const [C,
|
|
324
|
+
const [C, M] = l(null), [w, z] = l([]), [S, a] = l(4), [u, T] = l(!1), [v, h] = l(1), [x, A] = l(null), [b, L] = l("ready"), [V, Z] = l(3), [F, $] = l(10), [G, _] = l(20), [se, N] = l(0), [j, O] = l(!1), [E, K] = l(""), [I, D] = l(!1), [q, J] = l(!1), [Q, W] = l(null), [le, Y] = l([]), [ae, X] = l([]), [k, Se] = l(!1);
|
|
325
325
|
re(() => {
|
|
326
326
|
const e = g.current;
|
|
327
327
|
if (!e || typeof window > "u") return;
|
|
328
328
|
let r = null;
|
|
329
329
|
try {
|
|
330
|
-
r = new ResizeObserver((
|
|
331
|
-
for (const
|
|
332
|
-
const
|
|
333
|
-
B(Math.round(Math.min(
|
|
330
|
+
r = new ResizeObserver((f) => {
|
|
331
|
+
for (const m of f) {
|
|
332
|
+
const y = m.contentRect;
|
|
333
|
+
B(Math.round(Math.min(y.width, y.height)));
|
|
334
334
|
}
|
|
335
335
|
}), r.observe(e), B(Math.round(Math.min(e.clientWidth, e.clientHeight)));
|
|
336
336
|
} catch {
|
|
337
337
|
B(Math.round(Math.min(e.clientWidth, e.clientHeight)));
|
|
338
338
|
}
|
|
339
339
|
return () => r?.disconnect();
|
|
340
|
-
}, [
|
|
340
|
+
}, [k]);
|
|
341
341
|
const ee = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), te = () => {
|
|
342
342
|
if (!C) return;
|
|
343
343
|
const e = ee(ie[C]);
|
|
344
344
|
z(e), T(!0), O(!1), h(1), N(0), Y([]), X([]), ne(e, [], !0);
|
|
345
|
-
}, ne = (e =
|
|
346
|
-
const
|
|
347
|
-
let
|
|
345
|
+
}, ne = (e = w, r = ae, f = !1) => {
|
|
346
|
+
const m = ee(e.length ? e : ie[C]);
|
|
347
|
+
let y = Math.floor(Math.random() * m.length), H = m[y].name, R = 0;
|
|
348
348
|
for (; r.includes(H) && R < 20; )
|
|
349
|
-
|
|
350
|
-
z(
|
|
349
|
+
y = Math.floor(Math.random() * m.length), H = m[y].name, R++;
|
|
350
|
+
z(m), A(y), X([...r, H]), D(!1), K(""), _(20), W(null), f ? (L("ready"), Z(3), $(10)) : (L("memorize"), $(10));
|
|
351
351
|
};
|
|
352
352
|
oe(() => {
|
|
353
|
-
if (!(!u || j ||
|
|
353
|
+
if (!(!u || j || I)) {
|
|
354
354
|
if (b === "ready")
|
|
355
355
|
if (V <= 0) L("memorize");
|
|
356
356
|
else {
|
|
@@ -366,24 +366,24 @@ function Ie({
|
|
|
366
366
|
if (b === "guess") {
|
|
367
367
|
if (G <= 0) {
|
|
368
368
|
D(!0), W("wrong");
|
|
369
|
-
const r =
|
|
370
|
-
Y((
|
|
369
|
+
const r = w[x].name;
|
|
370
|
+
Y((f) => [...f, { round: v, answer: E, correct: r, result: "wrong" }]);
|
|
371
371
|
return;
|
|
372
372
|
}
|
|
373
373
|
const e = setTimeout(() => _((r) => r - 1), 1e3);
|
|
374
374
|
return () => clearTimeout(e);
|
|
375
375
|
}
|
|
376
376
|
}
|
|
377
|
-
}, [b, V, F, G, u, j,
|
|
377
|
+
}, [b, V, F, G, u, j, I, w, x, v, E]);
|
|
378
378
|
const de = () => {
|
|
379
379
|
if (x === null || q) return;
|
|
380
|
-
const e =
|
|
381
|
-
let
|
|
382
|
-
r === e ? (N((
|
|
380
|
+
const e = w[x].name, r = E.toLowerCase().trim();
|
|
381
|
+
let f = "wrong";
|
|
382
|
+
r === e ? (N((m) => m + 1), W("correct"), f = "correct") : Ce(r, e) === 1 ? (N((m) => m + 0.5), W("almost"), f = "almost") : (W("wrong"), f = "wrong"), Y((m) => [...m, { round: v, answer: r, correct: e, result: f }]), J(!0), setTimeout(() => {
|
|
383
383
|
J(!1), D(!0);
|
|
384
384
|
}, 600);
|
|
385
|
-
}, ce = () =>
|
|
386
|
-
T(!1), O(!1),
|
|
385
|
+
}, ce = () => v < S ? (h((e) => e + 1), ne()) : O(!0), me = () => {
|
|
386
|
+
T(!1), O(!1), M(null);
|
|
387
387
|
}, ge = pe(
|
|
388
388
|
() => /* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ s("picture", { children: [
|
|
389
389
|
/* @__PURE__ */ t("source", { srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg", type: "image/svg+xml" }),
|
|
@@ -404,7 +404,7 @@ function Ie({
|
|
|
404
404
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
405
405
|
transition: "background 0.3s ease",
|
|
406
406
|
overflow: "hidden",
|
|
407
|
-
zIndex:
|
|
407
|
+
zIndex: 1,
|
|
408
408
|
pointerEvents: "auto"
|
|
409
409
|
},
|
|
410
410
|
children: /* @__PURE__ */ t(
|
|
@@ -412,17 +412,17 @@ function Ie({
|
|
|
412
412
|
{
|
|
413
413
|
ref: g,
|
|
414
414
|
style: {
|
|
415
|
-
width: i ? `${i}px` :
|
|
416
|
-
height: i ? `${i}px` :
|
|
415
|
+
width: i ? `${i}px` : k ? "100%" : "1000px",
|
|
416
|
+
height: i ? `${i}px` : k ? "100%" : "1000px",
|
|
417
417
|
maxWidth: "calc(100vw - 24px)",
|
|
418
418
|
maxHeight: "calc(100vh - 20px)",
|
|
419
419
|
display: "flex",
|
|
420
420
|
justifyContent: "center",
|
|
421
421
|
alignItems: "center",
|
|
422
422
|
overflow: "hidden",
|
|
423
|
-
borderRadius:
|
|
423
|
+
borderRadius: k ? 0 : "20px",
|
|
424
424
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
425
|
-
boxShadow:
|
|
425
|
+
boxShadow: k ? "none" : "0 0 40px rgba(0,0,0,0.08)",
|
|
426
426
|
position: "relative"
|
|
427
427
|
},
|
|
428
428
|
children: /* @__PURE__ */ t(
|
|
@@ -438,11 +438,11 @@ function Ie({
|
|
|
438
438
|
alignItems: "center"
|
|
439
439
|
},
|
|
440
440
|
children: /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
|
|
441
|
-
!
|
|
441
|
+
!k && ge,
|
|
442
442
|
!C && !u && /* @__PURE__ */ s("div", { style: n.gmCenterScreen, children: [
|
|
443
443
|
/* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
444
444
|
/* @__PURE__ */ t("p", { style: n.gmBodyM, children: "Select a theme:" }),
|
|
445
|
-
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t("button", { style: n.gmButton, onClick: () =>
|
|
445
|
+
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t("button", { style: n.gmButton, onClick: () => M(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
|
|
446
446
|
/* @__PURE__ */ s("div", { style: { marginTop: 24 }, children: [
|
|
447
447
|
/* @__PURE__ */ t("p", { style: n.gmBodyS, children: "Choose number of rounds:" }),
|
|
448
448
|
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ t(
|
|
@@ -519,7 +519,7 @@ function Ie({
|
|
|
519
519
|
F,
|
|
520
520
|
")"
|
|
521
521
|
] }),
|
|
522
|
-
b === "guess" && !
|
|
522
|
+
b === "guess" && !I && /* @__PURE__ */ s("p", { style: n.gmBodyM, children: [
|
|
523
523
|
"⏳ Time left: ",
|
|
524
524
|
G,
|
|
525
525
|
"s"
|
|
@@ -528,33 +528,33 @@ function Ie({
|
|
|
528
528
|
}
|
|
529
529
|
),
|
|
530
530
|
b !== "ready" && (() => {
|
|
531
|
-
const e =
|
|
531
|
+
const e = k ? 12 : 20, r = 32, f = Math.min(i ?? 1e3, c ?? 1e3, p ?? 1e3, d ?? 1e3), m = k ? 2 : 3, y = Math.max(
|
|
532
532
|
90,
|
|
533
|
-
Math.floor((
|
|
533
|
+
Math.floor((f - r - e * (m - 1)) / m)
|
|
534
534
|
);
|
|
535
535
|
return /* @__PURE__ */ t(
|
|
536
536
|
"div",
|
|
537
537
|
{
|
|
538
538
|
style: {
|
|
539
539
|
...n.gmGrid,
|
|
540
|
-
gridTemplateColumns: `repeat(${
|
|
541
|
-
gridAutoRows: `${
|
|
540
|
+
gridTemplateColumns: `repeat(${m}, ${y}px)`,
|
|
541
|
+
gridAutoRows: `${y}px`,
|
|
542
542
|
gap: `${e}px`,
|
|
543
543
|
justifyContent: "center",
|
|
544
544
|
justifyItems: "center",
|
|
545
545
|
padding: 8,
|
|
546
546
|
boxSizing: "border-box"
|
|
547
547
|
},
|
|
548
|
-
children:
|
|
549
|
-
const ue = x === R && b === "guess" && !
|
|
548
|
+
children: w.map((H, R) => {
|
|
549
|
+
const ue = x === R && b === "guess" && !I;
|
|
550
550
|
return /* @__PURE__ */ t(
|
|
551
551
|
"div",
|
|
552
552
|
{
|
|
553
553
|
style: {
|
|
554
554
|
...n.gmCard,
|
|
555
|
-
width: `${
|
|
556
|
-
height: `${
|
|
557
|
-
padding:
|
|
555
|
+
width: `${y}px`,
|
|
556
|
+
height: `${y}px`,
|
|
557
|
+
padding: k ? 8 : 10,
|
|
558
558
|
boxSizing: "border-box",
|
|
559
559
|
...Q === "correct" && x === R ? n.gmCorrect : {},
|
|
560
560
|
...Q === "wrong" && x === R ? n.gmWrong : {}
|
|
@@ -575,7 +575,7 @@ function Ie({
|
|
|
575
575
|
);
|
|
576
576
|
})(),
|
|
577
577
|
/* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
578
|
-
b === "guess" && !
|
|
578
|
+
b === "guess" && !I && /* @__PURE__ */ s("div", { children: [
|
|
579
579
|
/* @__PURE__ */ t(
|
|
580
580
|
"input",
|
|
581
581
|
{
|
|
@@ -596,7 +596,7 @@ function Ie({
|
|
|
596
596
|
}
|
|
597
597
|
)
|
|
598
598
|
] }),
|
|
599
|
-
|
|
599
|
+
I && /* @__PURE__ */ t("button", { type: "button", style: n.gmButton, onClick: ce, children: "Next round" })
|
|
600
600
|
] })
|
|
601
601
|
] })
|
|
602
602
|
] })
|
|
@@ -608,6 +608,6 @@ function Ie({
|
|
|
608
608
|
);
|
|
609
609
|
}
|
|
610
610
|
export {
|
|
611
|
-
|
|
611
|
+
Me as Game,
|
|
612
612
|
ie as themes
|
|
613
613
|
};
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -335,7 +335,7 @@ export default function Game({
|
|
|
335
335
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
336
336
|
transition: "background 0.3s ease",
|
|
337
337
|
overflow: "hidden",
|
|
338
|
-
zIndex:
|
|
338
|
+
zIndex: 1,
|
|
339
339
|
pointerEvents: "auto",
|
|
340
340
|
}}
|
|
341
341
|
>
|
|
@@ -490,7 +490,7 @@ export default function Game({
|
|
|
490
490
|
{phase !== "ready" && (() => {
|
|
491
491
|
const gap = isMobile ? 12 : 20;
|
|
492
492
|
const innerGutters = 32;
|
|
493
|
-
const effective = gameCubeSize ?? squareSize ??
|
|
493
|
+
const effective = Math.min(gameCubeSize ?? 1000, squareSize ?? 1000, screenHeight ?? 1000, screenWidth ?? 1000);
|
|
494
494
|
const columns = isMobile ? 2 : 3;
|
|
495
495
|
const cardSize = Math.max(
|
|
496
496
|
90,
|