@mblinkov/whats-missing 20.0.14 → 20.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/whats-missing.cjs.js +4 -17
- package/dist/whats-missing.es.js +157 -251
- package/package.json +1 -1
- package/src/Game.tsx +67 -154
|
@@ -1,31 +1,18 @@
|
|
|
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"),re=window.origin+"/cloud/speakid/games/whatsmissing/",B=(r,a)=>r.map(([l,n])=>({src:`${re}${a}/${n.replace(/\s/g,"%20")}.png`,name:n})),ae=[["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"]],le=[["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"]],de=[["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"]],L={food:B(ae,"food"),animals:B(le,"animals"),toys:B(de,"toys")},ce=`
|
|
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
|
|
7
|
-
html, body {
|
|
8
|
-
margin: 0;
|
|
9
|
-
padding: 0;
|
|
10
|
-
width: 100%;
|
|
11
|
-
height: 100%;
|
|
12
|
-
overflow: hidden;
|
|
13
|
-
background: radial-gradient(circle at center, #fff8f8 0%, #fdfdfd 80%, #ffffff 100%);
|
|
14
|
-
background-repeat: no-repeat;
|
|
15
|
-
background-size: cover;
|
|
16
|
-
transform-origin: center;
|
|
17
|
-
}
|
|
18
|
-
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=ce,document.head.appendChild(r)}const me={animation:"spin 1.4s linear infinite"},s={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100vh",width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",color:"#1f2937",padding:"24px 16px",boxSizing:"border-box",transform:"translateY(20px)"},gmHeadline1:{fontWeight:700,fontSize:"clamp(28px, 4vw, 40px)",lineHeight:"110%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},gmBodyM:{fontWeight:400,fontSize:"16px",lineHeight:"140%"},gmBodyS:{fontWeight:400,fontSize:"14px",lineHeight:"140%",color:"#6b7280"},gmButton:{fontFamily:'"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',fontWeight:600,fontSize:"16px",padding:"10px 16px",borderRadius:"12px",border:"1px solid #e5e7eb",background:"#ec4c44",color:"#ffffff",cursor:"pointer",boxShadow:"0 6px 18px rgba(236, 76, 68, .18)",transition:"transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"600px",minHeight:"100vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"calc(210px * 3 + 20px * 2)",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...me}},ge=()=>{const r=document.createElement("style");r.textContent=`
|
|
19
7
|
#whats-missing-root, #whats-missing-root * {
|
|
20
8
|
box-sizing: border-box;
|
|
21
9
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
22
|
-
transform: none !important;
|
|
23
10
|
}
|
|
24
|
-
|
|
25
11
|
#whats-missing-root img {
|
|
26
12
|
max-width: 100%;
|
|
27
13
|
height: auto;
|
|
28
14
|
display: block;
|
|
29
15
|
user-select: none;
|
|
30
16
|
}
|
|
31
|
-
|
|
17
|
+
html, body { margin: 0; padding: 0; }
|
|
18
|
+
`,document.head.appendChild(r)},ue=(r,a)=>{const l=Array.from({length:r.length+1},()=>Array(a.length+1).fill(0));for(let n=0;n<=r.length;n++)l[n][0]=n;for(let n=0;n<=a.length;n++)l[0][n]=n;for(let n=1;n<=r.length;n++)for(let c=1;c<=a.length;c++)l[n][c]=r[n-1]===a[c-1]?l[n-1][c-1]:Math.min(l[n-1][c-1],l[n][c-1],l[n-1][c])+1;return l[r.length][a.length]};function he(){const r=o.useRef(null);o.useEffect(()=>(ge(),()=>{document.body.style.overflow=""}),[]);const[a,l]=o.useState(null),[n,c]=o.useState([]),[b,K]=o.useState(4),[x,W]=o.useState(!1),[w,E]=o.useState(1),[h,Z]=o.useState(null),[g,j]=o.useState("ready"),[G,F]=o.useState(3),[v,C]=o.useState(10),[T,D]=o.useState(20),[J,z]=o.useState(0),[S,R]=o.useState(!1),[k,Y]=o.useState(""),[p,I]=o.useState(!1),[H,q]=o.useState(!1),[O,y]=o.useState(null),[Q,M]=o.useState([]),[X,P]=o.useState([]),[u,ee]=o.useState(!1),[te,U]=o.useState(1);o.useEffect(()=>{const t=()=>{const i=window.innerWidth<768;if(ee(i),i)U(1);else{const f=Math.min(window.innerWidth/1440,window.innerHeight/768);U(f)}};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const $=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),N=()=>{if(!a)return;const t=$(L[a]);c(t),W(!0),R(!1),E(1),z(0),M([]),P([]),V(t,[],!0)},V=(t=n,i=X,m=!1)=>{const d=$(t.length?t:L[a]);let f=Math.floor(Math.random()*d.length),A=d[f].name,_=0;for(;i.includes(A)&&_<20;)f=Math.floor(Math.random()*d.length),A=d[f].name,_++;c(d),Z(f),P([...i,A]),I(!1),Y(""),D(20),y(null),m?(j("ready"),F(3),C(10)):(j("memorize"),C(10))};o.useEffect(()=>{if(!(!x||S||p)){if(g==="ready")if(G<=0)j("memorize");else{const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}if(g==="memorize")if(v<=0)j("guess");else{const t=setTimeout(()=>C(i=>i-1),1e3);return()=>clearTimeout(t)}if(g==="guess"){if(T<=0){I(!0),y("wrong");const i=n[h].name;M(m=>[...m,{round:w,answer:k,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>D(i=>i-1),1e3);return()=>clearTimeout(t)}}},[g,G,v,T,x,S,p,n,h,w,k]);const se=()=>{if(h===null||H)return;const t=n[h].name,i=k.toLowerCase().trim();let m="wrong";i===t?(z(d=>d+1),y("correct"),m="correct"):ue(i,t)===1?(z(d=>d+.5),y("almost"),m="almost"):(y("wrong"),m="wrong"),M(d=>[...d,{round:w,answer:i,correct:t,result:m}]),q(!0),setTimeout(()=>{q(!1),I(!0)},600)},ne=()=>w<b?(E(t=>t+1),V()):R(!0),oe=()=>{W(!1),R(!1),l(null)},ie=o.useMemo(()=>e.jsx("div",{style:s.gmLogoFixed,children:e.jsxs("picture",{children:[e.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),e.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:s.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:r,style:{width:"100%",height:"100vh",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease"},children:e.jsx("div",{style:{width:u?"100vw":1440,height:u?"100vh":768,transform:u?"none":`scale(${te})`,transformOrigin:"top center",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:u?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:u?"none":"0 0 40px rgba(0,0,0,0.1)"},children:e.jsxs("div",{id:"whats-missing-root",children:[!u&&ie,!a&&!x&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:s.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:s.gmButton,onClick:()=>l(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:s.gmBodyS,children:"Choose number of rounds:"}),e.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>e.jsx("button",{style:{...s.gmButton,...b===t?s.gmButtonActive:{}},onClick:()=>K(t),children:t},t))})]})]}),a&&!x&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsxs("h1",{style:s.gmHeadline1,children:["Theme selected: ",a]}),e.jsxs("p",{style:s.gmBodyM,children:["Rounds: ",b]}),e.jsx("button",{style:s.gmButton,onClick:N,children:"▶ Start game"})]}),S&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",J," / ",b]}),e.jsx("p",{style:{...s.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:s.gmTable,children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Round"}),e.jsx("th",{children:"Your Answer"}),e.jsx("th",{children:"Correct"}),e.jsx("th",{children:"Result"})]})}),e.jsx("tbody",{children:Q.map((t,i)=>e.jsxs("tr",{children:[e.jsx("td",{style:s.gmTableCell,children:t.round}),e.jsx("td",{style:s.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:s.gmTableCell,children:t.correct}),e.jsx("td",{style:s.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},i))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:s.gmButton,onClick:N,children:"🔁 Play again"}),e.jsx("button",{style:s.gmButton,onClick:oe,children:"⬅️ Choose theme"})]})]}),x&&!S&&e.jsxs("div",{style:s.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[g==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...s.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:s.gmHourglass,children:"⏳"})]}),g==="memorize"&&e.jsxs("p",{style:{...s.gmBodyM,color:"#10b981"},children:["MEMORIZE (",v,")"]}),g==="guess"&&!p&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",T,"s"]})]}),g!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:u?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:u?"150px":"210px",gap:u?"12px":"20px",justifyItems:"center"},children:n.map((t,i)=>{const m=h===i&&g==="guess"&&!p;return e.jsx("div",{style:{...s.gmCard,...O==="correct"&&h===i?s.gmCorrect:{},...O==="wrong"&&h===i?s.gmWrong:{}},children:!m&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},i)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[g==="guess"&&!p&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:k,onChange:t=>Y(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:se,disabled:H,children:H?"...":"Check"})]}),p&&e.jsx("button",{style:s.gmButton,onClick:ne,children:"Next round"})]})]})]})})})}exports.Game=he;exports.themes=L;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useRef as
|
|
3
|
-
const
|
|
4
|
-
src: `${
|
|
5
|
-
name:
|
|
6
|
-
})),
|
|
1
|
+
import { jsx as o, jsxs as r, Fragment as ae } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as de, useEffect as W, useState as s, useMemo as ce } from "react";
|
|
3
|
+
const me = window.origin + "/cloud/speakid/games/whatsmissing/", j = (l, a) => l.map(([d, n]) => ({
|
|
4
|
+
src: `${me}${a}/${n.replace(/\s/g, "%20")}.png`,
|
|
5
|
+
name: n
|
|
6
|
+
})), ge = [
|
|
7
7
|
["apple", "apple"],
|
|
8
8
|
["banana", "banana"],
|
|
9
9
|
["bread", "bread"],
|
|
@@ -29,7 +29,7 @@ const de = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l
|
|
|
29
29
|
["strawberry", "strawberry"],
|
|
30
30
|
["tomato", "tomato"],
|
|
31
31
|
["watermelon", "watermelon"]
|
|
32
|
-
],
|
|
32
|
+
], he = [
|
|
33
33
|
["bear", "bear"],
|
|
34
34
|
["cat", "cat"],
|
|
35
35
|
["crocodile", "crocodile"],
|
|
@@ -49,7 +49,7 @@ const de = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l
|
|
|
49
49
|
["tortoise", "tortoise"],
|
|
50
50
|
["wolf", "wolf"],
|
|
51
51
|
["zebra", "zebra"]
|
|
52
|
-
],
|
|
52
|
+
], pe = [
|
|
53
53
|
["ball", "ball"],
|
|
54
54
|
["balloon", "balloon"],
|
|
55
55
|
["blocks", "blocks"],
|
|
@@ -69,11 +69,11 @@ const de = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l
|
|
|
69
69
|
["teddy_bear", "teddy bear"],
|
|
70
70
|
["yo-yo", "yo-yo"],
|
|
71
71
|
["crayons", "crayons"]
|
|
72
|
-
],
|
|
73
|
-
food:
|
|
74
|
-
animals:
|
|
75
|
-
toys:
|
|
76
|
-
},
|
|
72
|
+
], Z = {
|
|
73
|
+
food: j(ge, "food"),
|
|
74
|
+
animals: j(he, "animals"),
|
|
75
|
+
toys: j(pe, "toys")
|
|
76
|
+
}, ue = `
|
|
77
77
|
@keyframes spin {
|
|
78
78
|
from { transform: rotate(0deg); }
|
|
79
79
|
to { transform: rotate(360deg); }
|
|
@@ -81,9 +81,9 @@ const de = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l
|
|
|
81
81
|
`;
|
|
82
82
|
if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
|
|
83
83
|
const l = document.createElement("style");
|
|
84
|
-
l.id = "spin-keyframes", l.innerHTML =
|
|
84
|
+
l.id = "spin-keyframes", l.innerHTML = ue, document.head.appendChild(l);
|
|
85
85
|
}
|
|
86
|
-
const
|
|
86
|
+
const fe = {
|
|
87
87
|
animation: "spin 1.4s linear infinite"
|
|
88
88
|
}, t = {
|
|
89
89
|
gmCenterScreen: {
|
|
@@ -233,257 +233,199 @@ const pe = {
|
|
|
233
233
|
},
|
|
234
234
|
gmHourglass: {
|
|
235
235
|
fontSize: "42px",
|
|
236
|
-
...
|
|
236
|
+
...fe
|
|
237
237
|
}
|
|
238
|
-
},
|
|
238
|
+
}, ye = () => {
|
|
239
239
|
const l = document.createElement("style");
|
|
240
240
|
l.textContent = `
|
|
241
|
-
html, body {
|
|
242
|
-
margin: 0;
|
|
243
|
-
padding: 0;
|
|
244
|
-
width: 100%;
|
|
245
|
-
height: 100%;
|
|
246
|
-
overflow: hidden;
|
|
247
|
-
background: radial-gradient(circle at center, #fff8f8 0%, #fdfdfd 80%, #ffffff 100%);
|
|
248
|
-
background-repeat: no-repeat;
|
|
249
|
-
background-size: cover;
|
|
250
|
-
transform-origin: center;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
241
|
#whats-missing-root, #whats-missing-root * {
|
|
254
242
|
box-sizing: border-box;
|
|
255
243
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
256
|
-
transform: none !important;
|
|
257
244
|
}
|
|
258
|
-
|
|
259
245
|
#whats-missing-root img {
|
|
260
246
|
max-width: 100%;
|
|
261
247
|
height: auto;
|
|
262
248
|
display: block;
|
|
263
249
|
user-select: none;
|
|
264
250
|
}
|
|
251
|
+
html, body { margin: 0; padding: 0; }
|
|
265
252
|
`, document.head.appendChild(l);
|
|
266
|
-
},
|
|
267
|
-
const d = Array.from(
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
)
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
for (let o = 1; o <= l.length; o++)
|
|
274
|
-
for (let c = 1; c <= a.length; c++)
|
|
275
|
-
d[o][c] = l[o - 1] === a[c - 1] ? d[o - 1][c - 1] : Math.min(d[o - 1][c - 1], d[o][c - 1], d[o - 1][c]) + 1;
|
|
253
|
+
}, be = (l, a) => {
|
|
254
|
+
const d = Array.from({ length: l.length + 1 }, () => Array(a.length + 1).fill(0));
|
|
255
|
+
for (let n = 0; n <= l.length; n++) d[n][0] = n;
|
|
256
|
+
for (let n = 0; n <= a.length; n++) d[0][n] = n;
|
|
257
|
+
for (let n = 1; n <= l.length; n++)
|
|
258
|
+
for (let m = 1; m <= a.length; m++)
|
|
259
|
+
d[n][m] = l[n - 1] === a[m - 1] ? d[n - 1][m - 1] : Math.min(d[n - 1][m - 1], d[n][m - 1], d[n - 1][m]) + 1;
|
|
276
260
|
return d[l.length][a.length];
|
|
277
261
|
};
|
|
278
|
-
function
|
|
279
|
-
const l =
|
|
280
|
-
|
|
262
|
+
function ke() {
|
|
263
|
+
const l = de(null);
|
|
264
|
+
W(() => (ye(), () => {
|
|
281
265
|
document.body.style.overflow = "";
|
|
282
266
|
}), []);
|
|
283
|
-
const [a, d] = s(null), [
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
267
|
+
const [a, d] = s(null), [n, m] = s([]), [w, J] = s(4), [b, E] = s(!1), [k, G] = s(1), [u, Q] = s(null), [h, v] = s("ready"), [F, D] = s(3), [S, z] = s(10), [R, Y] = s(20), [X, I] = s(0), [C, H] = s(!1), [T, U] = s(""), [f, M] = s(!1), [A, $] = s(!1), [N, x] = s(null), [ee, B] = s([]), [te, O] = s([]), [p, oe] = s(!1), [ne, P] = s(1);
|
|
268
|
+
W(() => {
|
|
269
|
+
const e = () => {
|
|
270
|
+
const i = window.innerWidth < 768;
|
|
271
|
+
if (oe(i), i)
|
|
272
|
+
P(1);
|
|
273
|
+
else {
|
|
274
|
+
const y = Math.min(window.innerWidth / 1440, window.innerHeight / 768);
|
|
275
|
+
P(y);
|
|
276
|
+
}
|
|
277
|
+
};
|
|
288
278
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
289
279
|
}, []);
|
|
290
|
-
const
|
|
280
|
+
const V = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), _ = () => {
|
|
291
281
|
if (!a) return;
|
|
292
|
-
const e =
|
|
293
|
-
|
|
294
|
-
}, q = (e =
|
|
295
|
-
const
|
|
296
|
-
let
|
|
297
|
-
for (;
|
|
298
|
-
|
|
299
|
-
c
|
|
282
|
+
const e = V(Z[a]);
|
|
283
|
+
m(e), E(!0), H(!1), G(1), I(0), B([]), O([]), q(e, [], !0);
|
|
284
|
+
}, q = (e = n, i = te, g = !1) => {
|
|
285
|
+
const c = V(e.length ? e : Z[a]);
|
|
286
|
+
let y = Math.floor(Math.random() * c.length), L = c[y].name, K = 0;
|
|
287
|
+
for (; i.includes(L) && K < 20; )
|
|
288
|
+
y = Math.floor(Math.random() * c.length), L = c[y].name, K++;
|
|
289
|
+
m(c), Q(y), O([...i, L]), M(!1), U(""), Y(20), x(null), g ? (v("ready"), D(3), z(10)) : (v("memorize"), z(10));
|
|
300
290
|
};
|
|
301
|
-
|
|
302
|
-
if (!(!
|
|
303
|
-
if (
|
|
304
|
-
if (F <= 0)
|
|
291
|
+
W(() => {
|
|
292
|
+
if (!(!b || C || f)) {
|
|
293
|
+
if (h === "ready")
|
|
294
|
+
if (F <= 0) v("memorize");
|
|
305
295
|
else {
|
|
306
|
-
const e = setTimeout(() => D((
|
|
296
|
+
const e = setTimeout(() => D((i) => i - 1), 1e3);
|
|
307
297
|
return () => clearTimeout(e);
|
|
308
298
|
}
|
|
309
|
-
if (
|
|
310
|
-
if (S <= 0)
|
|
299
|
+
if (h === "memorize")
|
|
300
|
+
if (S <= 0) v("guess");
|
|
311
301
|
else {
|
|
312
|
-
const e = setTimeout(() => z((
|
|
302
|
+
const e = setTimeout(() => z((i) => i - 1), 1e3);
|
|
313
303
|
return () => clearTimeout(e);
|
|
314
304
|
}
|
|
315
|
-
if (
|
|
305
|
+
if (h === "guess") {
|
|
316
306
|
if (R <= 0) {
|
|
317
|
-
M(!0),
|
|
318
|
-
const
|
|
319
|
-
B((
|
|
320
|
-
...
|
|
321
|
-
{
|
|
322
|
-
round: b,
|
|
323
|
-
answer: v,
|
|
324
|
-
correct: r,
|
|
325
|
-
result: "wrong"
|
|
326
|
-
}
|
|
307
|
+
M(!0), x("wrong");
|
|
308
|
+
const i = n[u].name;
|
|
309
|
+
B((g) => [
|
|
310
|
+
...g,
|
|
311
|
+
{ round: k, answer: T, correct: i, result: "wrong" }
|
|
327
312
|
]);
|
|
328
313
|
return;
|
|
329
314
|
}
|
|
330
|
-
const e = setTimeout(() => Y((
|
|
315
|
+
const e = setTimeout(() => Y((i) => i - 1), 1e3);
|
|
331
316
|
return () => clearTimeout(e);
|
|
332
317
|
}
|
|
333
318
|
}
|
|
334
|
-
}, [
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
u,
|
|
342
|
-
o,
|
|
343
|
-
p,
|
|
344
|
-
b,
|
|
345
|
-
v
|
|
346
|
-
]);
|
|
347
|
-
const ne = () => {
|
|
348
|
-
if (p === null || A) return;
|
|
349
|
-
const e = o[p].name, r = v.toLowerCase().trim();
|
|
350
|
-
let h = "wrong";
|
|
351
|
-
r === e ? (I((m) => m + 1), y("correct"), h = "correct") : fe(r, e) === 1 ? (I((m) => m + 0.5), y("almost"), h = "almost") : (y("wrong"), h = "wrong"), B((m) => [
|
|
352
|
-
...m,
|
|
353
|
-
{ round: b, answer: r, correct: e, result: h }
|
|
354
|
-
]), N(!0), setTimeout(() => {
|
|
355
|
-
N(!1), M(!0);
|
|
319
|
+
}, [h, F, S, R, b, C, f, n, u, k, T]);
|
|
320
|
+
const ie = () => {
|
|
321
|
+
if (u === null || A) return;
|
|
322
|
+
const e = n[u].name, i = T.toLowerCase().trim();
|
|
323
|
+
let g = "wrong";
|
|
324
|
+
i === e ? (I((c) => c + 1), x("correct"), g = "correct") : be(i, e) === 1 ? (I((c) => c + 0.5), x("almost"), g = "almost") : (x("wrong"), g = "wrong"), B((c) => [...c, { round: k, answer: i, correct: e, result: g }]), $(!0), setTimeout(() => {
|
|
325
|
+
$(!1), M(!0);
|
|
356
326
|
}, 600);
|
|
357
|
-
},
|
|
358
|
-
|
|
359
|
-
},
|
|
360
|
-
() => /* @__PURE__ */
|
|
361
|
-
/* @__PURE__ */
|
|
362
|
-
|
|
363
|
-
{
|
|
364
|
-
srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg",
|
|
365
|
-
type: "image/svg+xml"
|
|
366
|
-
}
|
|
367
|
-
),
|
|
368
|
-
/* @__PURE__ */ n(
|
|
369
|
-
"img",
|
|
370
|
-
{
|
|
371
|
-
src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png",
|
|
372
|
-
alt: "SPEAKID Logo",
|
|
373
|
-
style: t.gmLogoImg,
|
|
374
|
-
loading: "lazy"
|
|
375
|
-
}
|
|
376
|
-
)
|
|
327
|
+
}, re = () => k < w ? (G((e) => e + 1), q()) : H(!0), se = () => {
|
|
328
|
+
E(!1), H(!1), d(null);
|
|
329
|
+
}, le = ce(
|
|
330
|
+
() => /* @__PURE__ */ o("div", { style: t.gmLogoFixed, children: /* @__PURE__ */ r("picture", { children: [
|
|
331
|
+
/* @__PURE__ */ o("source", { srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg", type: "image/svg+xml" }),
|
|
332
|
+
/* @__PURE__ */ o("img", { src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png", alt: "SPEAKID Logo", style: t.gmLogoImg, loading: "lazy" })
|
|
377
333
|
] }) }),
|
|
378
334
|
[]
|
|
379
335
|
);
|
|
380
|
-
return /* @__PURE__ */
|
|
336
|
+
return /* @__PURE__ */ o(
|
|
381
337
|
"div",
|
|
382
338
|
{
|
|
383
339
|
ref: l,
|
|
384
340
|
style: {
|
|
341
|
+
width: "100%",
|
|
342
|
+
height: "100vh",
|
|
385
343
|
display: "flex",
|
|
386
344
|
justifyContent: "center",
|
|
387
345
|
alignItems: "center",
|
|
388
|
-
|
|
389
|
-
|
|
346
|
+
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
347
|
+
transition: "background 0.3s ease"
|
|
390
348
|
},
|
|
391
|
-
children: /* @__PURE__ */
|
|
349
|
+
children: /* @__PURE__ */ o(
|
|
392
350
|
"div",
|
|
393
351
|
{
|
|
394
352
|
style: {
|
|
395
|
-
width:
|
|
396
|
-
height:
|
|
353
|
+
width: p ? "100vw" : 1440,
|
|
354
|
+
height: p ? "100vh" : 768,
|
|
355
|
+
transform: p ? "none" : `scale(${ne})`,
|
|
356
|
+
transformOrigin: "top center",
|
|
397
357
|
display: "flex",
|
|
358
|
+
flexDirection: "column",
|
|
398
359
|
justifyContent: "center",
|
|
399
360
|
alignItems: "center",
|
|
400
|
-
flexDirection: "column",
|
|
401
361
|
overflow: "hidden",
|
|
402
|
-
borderRadius: "20px",
|
|
403
|
-
background: "
|
|
404
|
-
boxShadow: "0 0 40px rgba(0,0,0,0.
|
|
362
|
+
borderRadius: p ? 0 : "20px",
|
|
363
|
+
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
364
|
+
boxShadow: p ? "none" : "0 0 40px rgba(0,0,0,0.1)"
|
|
405
365
|
},
|
|
406
|
-
children: /* @__PURE__ */
|
|
407
|
-
!
|
|
408
|
-
!a && !
|
|
409
|
-
/* @__PURE__ */
|
|
410
|
-
/* @__PURE__ */
|
|
411
|
-
/* @__PURE__ */
|
|
412
|
-
|
|
413
|
-
{
|
|
414
|
-
|
|
415
|
-
onClick: () => d(e),
|
|
416
|
-
children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys"
|
|
417
|
-
},
|
|
418
|
-
e
|
|
419
|
-
)) }),
|
|
420
|
-
/* @__PURE__ */ i("div", { style: { marginTop: 24 }, children: [
|
|
421
|
-
/* @__PURE__ */ n("p", { style: t.gmBodyS, children: "Choose number of rounds:" }),
|
|
422
|
-
/* @__PURE__ */ n("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ n(
|
|
366
|
+
children: /* @__PURE__ */ r("div", { id: "whats-missing-root", children: [
|
|
367
|
+
!p && le,
|
|
368
|
+
!a && !b && /* @__PURE__ */ r("div", { style: t.gmCenterScreen, children: [
|
|
369
|
+
/* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
370
|
+
/* @__PURE__ */ o("p", { style: t.gmBodyM, children: "Select a theme:" }),
|
|
371
|
+
/* @__PURE__ */ o("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ o("button", { style: t.gmButton, onClick: () => d(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
|
|
372
|
+
/* @__PURE__ */ r("div", { style: { marginTop: 24 }, children: [
|
|
373
|
+
/* @__PURE__ */ o("p", { style: t.gmBodyS, children: "Choose number of rounds:" }),
|
|
374
|
+
/* @__PURE__ */ o("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ o(
|
|
423
375
|
"button",
|
|
424
376
|
{
|
|
425
377
|
style: {
|
|
426
378
|
...t.gmButton,
|
|
427
|
-
...
|
|
379
|
+
...w === e ? t.gmButtonActive : {}
|
|
428
380
|
},
|
|
429
|
-
onClick: () =>
|
|
381
|
+
onClick: () => J(e),
|
|
430
382
|
children: e
|
|
431
383
|
},
|
|
432
384
|
e
|
|
433
385
|
)) })
|
|
434
386
|
] })
|
|
435
387
|
] }),
|
|
436
|
-
a && !
|
|
437
|
-
/* @__PURE__ */
|
|
388
|
+
a && !b && /* @__PURE__ */ r("div", { style: t.gmCenterScreen, children: [
|
|
389
|
+
/* @__PURE__ */ r("h1", { style: t.gmHeadline1, children: [
|
|
438
390
|
"Theme selected: ",
|
|
439
391
|
a
|
|
440
392
|
] }),
|
|
441
|
-
/* @__PURE__ */
|
|
393
|
+
/* @__PURE__ */ r("p", { style: t.gmBodyM, children: [
|
|
442
394
|
"Rounds: ",
|
|
443
|
-
|
|
395
|
+
w
|
|
444
396
|
] }),
|
|
445
|
-
/* @__PURE__ */
|
|
397
|
+
/* @__PURE__ */ o("button", { style: t.gmButton, onClick: _, children: "▶ Start game" })
|
|
446
398
|
] }),
|
|
447
|
-
|
|
448
|
-
/* @__PURE__ */
|
|
449
|
-
/* @__PURE__ */
|
|
399
|
+
C && /* @__PURE__ */ r("div", { style: t.gmCenterScreen, children: [
|
|
400
|
+
/* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "Results" }),
|
|
401
|
+
/* @__PURE__ */ r("h2", { style: t.gmHeadline3, children: [
|
|
450
402
|
"Your score: ",
|
|
451
|
-
|
|
403
|
+
X,
|
|
452
404
|
" / ",
|
|
453
|
-
|
|
405
|
+
w
|
|
454
406
|
] }),
|
|
455
|
-
/* @__PURE__ */
|
|
456
|
-
|
|
457
|
-
{
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
},
|
|
463
|
-
children: "Great job! 🎉 You did it!"
|
|
464
|
-
}
|
|
465
|
-
),
|
|
466
|
-
/* @__PURE__ */ i("table", { style: t.gmTable, children: [
|
|
467
|
-
/* @__PURE__ */ n("thead", { children: /* @__PURE__ */ i("tr", { children: [
|
|
468
|
-
/* @__PURE__ */ n("th", { children: "Round" }),
|
|
469
|
-
/* @__PURE__ */ n("th", { children: "Your Answer" }),
|
|
470
|
-
/* @__PURE__ */ n("th", { children: "Correct" }),
|
|
471
|
-
/* @__PURE__ */ n("th", { children: "Result" })
|
|
407
|
+
/* @__PURE__ */ o("p", { style: { ...t.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
|
|
408
|
+
/* @__PURE__ */ r("table", { style: t.gmTable, children: [
|
|
409
|
+
/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ r("tr", { children: [
|
|
410
|
+
/* @__PURE__ */ o("th", { children: "Round" }),
|
|
411
|
+
/* @__PURE__ */ o("th", { children: "Your Answer" }),
|
|
412
|
+
/* @__PURE__ */ o("th", { children: "Correct" }),
|
|
413
|
+
/* @__PURE__ */ o("th", { children: "Result" })
|
|
472
414
|
] }) }),
|
|
473
|
-
/* @__PURE__ */
|
|
474
|
-
/* @__PURE__ */
|
|
475
|
-
/* @__PURE__ */
|
|
476
|
-
/* @__PURE__ */
|
|
477
|
-
/* @__PURE__ */
|
|
478
|
-
] },
|
|
415
|
+
/* @__PURE__ */ o("tbody", { children: ee.map((e, i) => /* @__PURE__ */ r("tr", { children: [
|
|
416
|
+
/* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.round }),
|
|
417
|
+
/* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.answer || "—" }),
|
|
418
|
+
/* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.correct }),
|
|
419
|
+
/* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
|
|
420
|
+
] }, i)) })
|
|
479
421
|
] }),
|
|
480
|
-
/* @__PURE__ */
|
|
481
|
-
/* @__PURE__ */
|
|
482
|
-
/* @__PURE__ */
|
|
422
|
+
/* @__PURE__ */ r("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
423
|
+
/* @__PURE__ */ o("button", { style: t.gmButton, onClick: _, children: "🔁 Play again" }),
|
|
424
|
+
/* @__PURE__ */ o("button", { style: t.gmButton, onClick: se, children: "⬅️ Choose theme" })
|
|
483
425
|
] })
|
|
484
426
|
] }),
|
|
485
|
-
|
|
486
|
-
/* @__PURE__ */
|
|
427
|
+
b && !C && /* @__PURE__ */ r("div", { style: t.gmGameLayout, children: [
|
|
428
|
+
/* @__PURE__ */ r(
|
|
487
429
|
"div",
|
|
488
430
|
{
|
|
489
431
|
style: {
|
|
@@ -494,34 +436,16 @@ function be() {
|
|
|
494
436
|
alignItems: "center"
|
|
495
437
|
},
|
|
496
438
|
children: [
|
|
497
|
-
|
|
498
|
-
/* @__PURE__ */
|
|
499
|
-
|
|
500
|
-
{
|
|
501
|
-
style: {
|
|
502
|
-
...t.gmHeadline1,
|
|
503
|
-
color: "#ec4c44"
|
|
504
|
-
},
|
|
505
|
-
children: "GET READY"
|
|
506
|
-
}
|
|
507
|
-
),
|
|
508
|
-
/* @__PURE__ */ n("div", { style: t.gmHourglass, children: "⏳" })
|
|
439
|
+
h === "ready" && /* @__PURE__ */ r(ae, { children: [
|
|
440
|
+
/* @__PURE__ */ o("h1", { style: { ...t.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
|
|
441
|
+
/* @__PURE__ */ o("div", { style: t.gmHourglass, children: "⏳" })
|
|
509
442
|
] }),
|
|
510
|
-
|
|
511
|
-
"
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
},
|
|
517
|
-
children: [
|
|
518
|
-
"MEMORIZE (",
|
|
519
|
-
S,
|
|
520
|
-
")"
|
|
521
|
-
]
|
|
522
|
-
}
|
|
523
|
-
),
|
|
524
|
-
g === "guess" && !u && /* @__PURE__ */ i("p", { style: t.gmBodyM, children: [
|
|
443
|
+
h === "memorize" && /* @__PURE__ */ r("p", { style: { ...t.gmBodyM, color: "#10b981" }, children: [
|
|
444
|
+
"MEMORIZE (",
|
|
445
|
+
S,
|
|
446
|
+
")"
|
|
447
|
+
] }),
|
|
448
|
+
h === "guess" && !f && /* @__PURE__ */ r("p", { style: t.gmBodyM, children: [
|
|
525
449
|
"⏳ Time left: ",
|
|
526
450
|
R,
|
|
527
451
|
"s"
|
|
@@ -529,27 +453,27 @@ function be() {
|
|
|
529
453
|
]
|
|
530
454
|
}
|
|
531
455
|
),
|
|
532
|
-
|
|
456
|
+
h !== "ready" && /* @__PURE__ */ o(
|
|
533
457
|
"div",
|
|
534
458
|
{
|
|
535
459
|
style: {
|
|
536
460
|
...t.gmGrid,
|
|
537
|
-
gridTemplateColumns:
|
|
538
|
-
gridAutoRows:
|
|
539
|
-
gap:
|
|
461
|
+
gridTemplateColumns: p ? "repeat(2, 1fr)" : "repeat(3, 210px)",
|
|
462
|
+
gridAutoRows: p ? "150px" : "210px",
|
|
463
|
+
gap: p ? "12px" : "20px",
|
|
540
464
|
justifyItems: "center"
|
|
541
465
|
},
|
|
542
|
-
children:
|
|
543
|
-
const
|
|
544
|
-
return /* @__PURE__ */
|
|
466
|
+
children: n.map((e, i) => {
|
|
467
|
+
const g = u === i && h === "guess" && !f;
|
|
468
|
+
return /* @__PURE__ */ o(
|
|
545
469
|
"div",
|
|
546
470
|
{
|
|
547
471
|
style: {
|
|
548
472
|
...t.gmCard,
|
|
549
|
-
...
|
|
550
|
-
...
|
|
473
|
+
...N === "correct" && u === i ? t.gmCorrect : {},
|
|
474
|
+
...N === "wrong" && u === i ? t.gmWrong : {}
|
|
551
475
|
},
|
|
552
|
-
children: !
|
|
476
|
+
children: !g && /* @__PURE__ */ o(
|
|
553
477
|
"img",
|
|
554
478
|
{
|
|
555
479
|
src: e.src,
|
|
@@ -562,44 +486,26 @@ function be() {
|
|
|
562
486
|
}
|
|
563
487
|
)
|
|
564
488
|
},
|
|
565
|
-
|
|
489
|
+
i
|
|
566
490
|
);
|
|
567
491
|
})
|
|
568
492
|
}
|
|
569
493
|
),
|
|
570
|
-
/* @__PURE__ */
|
|
571
|
-
|
|
572
|
-
/* @__PURE__ */
|
|
494
|
+
/* @__PURE__ */ r("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
495
|
+
h === "guess" && !f && /* @__PURE__ */ r("div", { children: [
|
|
496
|
+
/* @__PURE__ */ o(
|
|
573
497
|
"input",
|
|
574
498
|
{
|
|
575
499
|
type: "text",
|
|
576
500
|
placeholder: "Type the missing word",
|
|
577
|
-
value:
|
|
501
|
+
value: T,
|
|
578
502
|
onChange: (e) => U(e.target.value),
|
|
579
503
|
style: t.gmInput
|
|
580
504
|
}
|
|
581
505
|
),
|
|
582
|
-
/* @__PURE__ */
|
|
583
|
-
"button",
|
|
584
|
-
{
|
|
585
|
-
style: {
|
|
586
|
-
...t.gmButton,
|
|
587
|
-
marginLeft: 8
|
|
588
|
-
},
|
|
589
|
-
onClick: ne,
|
|
590
|
-
disabled: A,
|
|
591
|
-
children: A ? "..." : "Check"
|
|
592
|
-
}
|
|
593
|
-
)
|
|
506
|
+
/* @__PURE__ */ o("button", { style: { ...t.gmButton, marginLeft: 8 }, onClick: ie, disabled: A, children: A ? "..." : "Check" })
|
|
594
507
|
] }),
|
|
595
|
-
|
|
596
|
-
"button",
|
|
597
|
-
{
|
|
598
|
-
style: t.gmButton,
|
|
599
|
-
onClick: oe,
|
|
600
|
-
children: "Next round"
|
|
601
|
-
}
|
|
602
|
-
)
|
|
508
|
+
f && /* @__PURE__ */ o("button", { style: t.gmButton, onClick: re, children: "Next round" })
|
|
603
509
|
] })
|
|
604
510
|
] })
|
|
605
511
|
] })
|
|
@@ -609,6 +515,6 @@ function be() {
|
|
|
609
515
|
);
|
|
610
516
|
}
|
|
611
517
|
export {
|
|
612
|
-
|
|
613
|
-
|
|
518
|
+
ke as Game,
|
|
519
|
+
Z as themes
|
|
614
520
|
};
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
|
|
1
2
|
import { useState, useEffect, useMemo, useRef } from "react";
|
|
2
3
|
import { themes } from "./themes";
|
|
3
4
|
import { styles } from "./Game.styles";
|
|
@@ -11,42 +12,28 @@ type RoundResult = {
|
|
|
11
12
|
result: "correct" | "almost" | "wrong";
|
|
12
13
|
};
|
|
13
14
|
|
|
14
|
-
// ✅
|
|
15
|
+
// ✅ базовый reset
|
|
15
16
|
const globalReset = () => {
|
|
16
17
|
const style = document.createElement("style");
|
|
17
18
|
style.textContent = `
|
|
18
|
-
html, body {
|
|
19
|
-
margin: 0;
|
|
20
|
-
padding: 0;
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: 100%;
|
|
23
|
-
overflow: hidden;
|
|
24
|
-
background: radial-gradient(circle at center, #fff8f8 0%, #fdfdfd 80%, #ffffff 100%);
|
|
25
|
-
background-repeat: no-repeat;
|
|
26
|
-
background-size: cover;
|
|
27
|
-
transform-origin: center;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
19
|
#whats-missing-root, #whats-missing-root * {
|
|
31
20
|
box-sizing: border-box;
|
|
32
21
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
33
|
-
transform: none !important;
|
|
34
22
|
}
|
|
35
|
-
|
|
36
23
|
#whats-missing-root img {
|
|
37
24
|
max-width: 100%;
|
|
38
25
|
height: auto;
|
|
39
26
|
display: block;
|
|
40
27
|
user-select: none;
|
|
41
28
|
}
|
|
29
|
+
html, body { margin: 0; padding: 0; }
|
|
42
30
|
`;
|
|
43
31
|
document.head.appendChild(style);
|
|
44
32
|
};
|
|
45
33
|
|
|
34
|
+
// простая функция сравнения
|
|
46
35
|
const levenshtein = (a: string, b: string) => {
|
|
47
|
-
const dp = Array.from({ length: a.length + 1 }, () =>
|
|
48
|
-
Array(b.length + 1).fill(0)
|
|
49
|
-
);
|
|
36
|
+
const dp = Array.from({ length: a.length + 1 }, () => Array(b.length + 1).fill(0));
|
|
50
37
|
for (let i = 0; i <= a.length; i++) dp[i][0] = i;
|
|
51
38
|
for (let j = 0; j <= b.length; j++) dp[0][j] = j;
|
|
52
39
|
for (let i = 1; i <= a.length; i++) {
|
|
@@ -85,20 +72,36 @@ export default function Game() {
|
|
|
85
72
|
const [inputValue, setInputValue] = useState("");
|
|
86
73
|
const [answered, setAnswered] = useState(false);
|
|
87
74
|
const [animating, setAnimating] = useState(false);
|
|
88
|
-
const [result, setResult] = useState<"correct" | "almost" | "wrong" | null>(
|
|
89
|
-
null
|
|
90
|
-
);
|
|
75
|
+
const [result, setResult] = useState<"correct" | "almost" | "wrong" | null>(null);
|
|
91
76
|
const [resultsTable, setResultsTable] = useState<RoundResult[]>([]);
|
|
92
77
|
const [usedHidden, setUsedHidden] = useState<string[]>([]);
|
|
93
78
|
const [isMobile, setIsMobile] = useState(false);
|
|
79
|
+
const [scale, setScale] = useState(1);
|
|
94
80
|
|
|
81
|
+
// ✅ адаптив под мобилки и десктоп
|
|
95
82
|
useEffect(() => {
|
|
96
|
-
const
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
83
|
+
const resize = () => {
|
|
84
|
+
const mobile = window.innerWidth < 768;
|
|
85
|
+
setIsMobile(mobile);
|
|
86
|
+
|
|
87
|
+
if (!mobile) {
|
|
88
|
+
// виртуальный размер игры (1440x768)
|
|
89
|
+
const baseW = 1440;
|
|
90
|
+
const baseH = 768;
|
|
91
|
+
const ratio = Math.min(window.innerWidth / baseW, window.innerHeight / baseH);
|
|
92
|
+
setScale(ratio);
|
|
93
|
+
} else {
|
|
94
|
+
setScale(1);
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
resize();
|
|
98
|
+
window.addEventListener("resize", resize);
|
|
99
|
+
return () => window.removeEventListener("resize", resize);
|
|
100
100
|
}, []);
|
|
101
101
|
|
|
102
|
+
// =============================
|
|
103
|
+
// GAME LOGIC
|
|
104
|
+
// =============================
|
|
102
105
|
const getRandomSix = (arr: ImageItem[]) =>
|
|
103
106
|
[...arr].sort(() => Math.random() - 0.5).slice(0, 6);
|
|
104
107
|
|
|
@@ -115,11 +118,7 @@ export default function Game() {
|
|
|
115
118
|
startRound(selected, [], true);
|
|
116
119
|
};
|
|
117
120
|
|
|
118
|
-
const startRound = (
|
|
119
|
-
images = files,
|
|
120
|
-
used: string[] = usedHidden,
|
|
121
|
-
isFirst = false
|
|
122
|
-
) => {
|
|
121
|
+
const startRound = (images = files, used: string[] = usedHidden, isFirst = false) => {
|
|
123
122
|
const roundSet = getRandomSix(images.length ? images : themes[theme!]);
|
|
124
123
|
let idx = Math.floor(Math.random() * roundSet.length);
|
|
125
124
|
let candidate = roundSet[idx].name;
|
|
@@ -169,31 +168,14 @@ export default function Game() {
|
|
|
169
168
|
const correct = files[hiddenIndex!].name;
|
|
170
169
|
setResultsTable((prev) => [
|
|
171
170
|
...prev,
|
|
172
|
-
{
|
|
173
|
-
round: currentRound,
|
|
174
|
-
answer: inputValue,
|
|
175
|
-
correct,
|
|
176
|
-
result: "wrong",
|
|
177
|
-
},
|
|
171
|
+
{ round: currentRound, answer: inputValue, correct, result: "wrong" },
|
|
178
172
|
]);
|
|
179
173
|
return;
|
|
180
174
|
}
|
|
181
175
|
const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);
|
|
182
176
|
return () => clearTimeout(t);
|
|
183
177
|
}
|
|
184
|
-
}, [
|
|
185
|
-
phase,
|
|
186
|
-
readyTime,
|
|
187
|
-
memorizeTime,
|
|
188
|
-
timeLeft,
|
|
189
|
-
started,
|
|
190
|
-
finished,
|
|
191
|
-
answered,
|
|
192
|
-
files,
|
|
193
|
-
hiddenIndex,
|
|
194
|
-
currentRound,
|
|
195
|
-
inputValue,
|
|
196
|
-
]);
|
|
178
|
+
}, [phase, readyTime, memorizeTime, timeLeft, started, finished, answered, files, hiddenIndex, currentRound, inputValue]);
|
|
197
179
|
|
|
198
180
|
const checkAnswer = () => {
|
|
199
181
|
if (hiddenIndex === null || animating) return;
|
|
@@ -212,10 +194,7 @@ export default function Game() {
|
|
|
212
194
|
setResult("wrong");
|
|
213
195
|
roundResult = "wrong";
|
|
214
196
|
}
|
|
215
|
-
setResultsTable((prev) => [
|
|
216
|
-
...prev,
|
|
217
|
-
{ round: currentRound, answer: userAnswer, correct, result: roundResult },
|
|
218
|
-
]);
|
|
197
|
+
setResultsTable((prev) => [...prev, { round: currentRound, answer: userAnswer, correct, result: roundResult }]);
|
|
219
198
|
setAnimating(true);
|
|
220
199
|
setTimeout(() => {
|
|
221
200
|
setAnimating(false);
|
|
@@ -224,9 +203,7 @@ export default function Game() {
|
|
|
224
203
|
};
|
|
225
204
|
|
|
226
205
|
const nextRound = () =>
|
|
227
|
-
currentRound < rounds
|
|
228
|
-
? (setCurrentRound((r) => r + 1), startRound())
|
|
229
|
-
: setFinished(true);
|
|
206
|
+
currentRound < rounds ? (setCurrentRound((r) => r + 1), startRound()) : setFinished(true);
|
|
230
207
|
|
|
231
208
|
const exitGame = () => {
|
|
232
209
|
setStarted(false);
|
|
@@ -234,73 +211,64 @@ export default function Game() {
|
|
|
234
211
|
setTheme(null);
|
|
235
212
|
};
|
|
236
213
|
|
|
214
|
+
// логотип
|
|
237
215
|
const MemoizedLogo = useMemo(
|
|
238
216
|
() => (
|
|
239
217
|
<div style={styles.gmLogoFixed}>
|
|
240
218
|
<picture>
|
|
241
|
-
<source
|
|
242
|
-
|
|
243
|
-
window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"
|
|
244
|
-
}
|
|
245
|
-
type="image/svg+xml"
|
|
246
|
-
/>
|
|
247
|
-
<img
|
|
248
|
-
src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"}
|
|
249
|
-
alt="SPEAKID Logo"
|
|
250
|
-
style={styles.gmLogoImg}
|
|
251
|
-
loading="lazy"
|
|
252
|
-
/>
|
|
219
|
+
<source srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"} type="image/svg+xml" />
|
|
220
|
+
<img src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"} alt="SPEAKID Logo" style={styles.gmLogoImg} loading="lazy" />
|
|
253
221
|
</picture>
|
|
254
222
|
</div>
|
|
255
223
|
),
|
|
256
224
|
[]
|
|
257
225
|
);
|
|
258
226
|
|
|
227
|
+
// =============================
|
|
228
|
+
// RENDER
|
|
229
|
+
// =============================
|
|
259
230
|
return (
|
|
260
231
|
<div
|
|
261
232
|
ref={containerRef}
|
|
262
233
|
style={{
|
|
234
|
+
width: "100%",
|
|
235
|
+
height: "100vh",
|
|
263
236
|
display: "flex",
|
|
264
237
|
justifyContent: "center",
|
|
265
238
|
alignItems: "center",
|
|
266
|
-
|
|
267
|
-
|
|
239
|
+
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
240
|
+
transition: "background 0.3s ease",
|
|
268
241
|
}}
|
|
269
242
|
>
|
|
243
|
+
{/* Внутренний canvas (виртуальное игровое окно 1440x768) */}
|
|
270
244
|
<div
|
|
271
245
|
style={{
|
|
272
|
-
width:
|
|
273
|
-
height:
|
|
246
|
+
width: isMobile ? "100vw" : 1440,
|
|
247
|
+
height: isMobile ? "100vh" : 768,
|
|
248
|
+
transform: isMobile ? "none" : `scale(${scale})`,
|
|
249
|
+
transformOrigin: "top center",
|
|
274
250
|
display: "flex",
|
|
251
|
+
flexDirection: "column",
|
|
275
252
|
justifyContent: "center",
|
|
276
253
|
alignItems: "center",
|
|
277
|
-
flexDirection: "column",
|
|
278
254
|
overflow: "hidden",
|
|
279
|
-
borderRadius: "20px",
|
|
280
|
-
background:
|
|
281
|
-
|
|
282
|
-
boxShadow: "0 0 40px rgba(0,0,0,0.08)",
|
|
255
|
+
borderRadius: isMobile ? 0 : "20px",
|
|
256
|
+
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
257
|
+
boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.1)",
|
|
283
258
|
}}
|
|
284
259
|
>
|
|
285
260
|
<div id="whats-missing-root">
|
|
286
261
|
{!isMobile && MemoizedLogo}
|
|
287
262
|
|
|
263
|
+
{/* ====== ИГРОВАЯ ЛОГИКА ====== */}
|
|
288
264
|
{!theme && !started && (
|
|
289
265
|
<div style={styles.gmCenterScreen}>
|
|
290
266
|
<h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
|
|
291
267
|
<p style={styles.gmBodyM}>Select a theme:</p>
|
|
292
268
|
<div style={{ display: "flex", gap: 16 }}>
|
|
293
269
|
{["animals", "food", "toys"].map((t) => (
|
|
294
|
-
<button
|
|
295
|
-
|
|
296
|
-
style={styles.gmButton}
|
|
297
|
-
onClick={() => setTheme(t as Theme)}
|
|
298
|
-
>
|
|
299
|
-
{t === "animals"
|
|
300
|
-
? "🐶 Animals"
|
|
301
|
-
: t === "food"
|
|
302
|
-
? "🍎 Food"
|
|
303
|
-
: "🧸 Toys"}
|
|
270
|
+
<button key={t} style={styles.gmButton} onClick={() => setTheme(t as Theme)}>
|
|
271
|
+
{t === "animals" ? "🐶 Animals" : t === "food" ? "🍎 Food" : "🧸 Toys"}
|
|
304
272
|
</button>
|
|
305
273
|
))}
|
|
306
274
|
</div>
|
|
@@ -340,15 +308,7 @@ export default function Game() {
|
|
|
340
308
|
<h2 style={styles.gmHeadline3}>
|
|
341
309
|
Your score: {score} / {rounds}
|
|
342
310
|
</h2>
|
|
343
|
-
<p
|
|
344
|
-
style={{
|
|
345
|
-
...styles.gmBodyM,
|
|
346
|
-
color: "#10b981",
|
|
347
|
-
marginTop: 12,
|
|
348
|
-
}}
|
|
349
|
-
>
|
|
350
|
-
Great job! 🎉 You did it!
|
|
351
|
-
</p>
|
|
311
|
+
<p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>Yahoo! You did it! 🍬✨</p>
|
|
352
312
|
<table style={styles.gmTable}>
|
|
353
313
|
<thead>
|
|
354
314
|
<tr>
|
|
@@ -362,9 +322,7 @@ export default function Game() {
|
|
|
362
322
|
{resultsTable.map((r, i) => (
|
|
363
323
|
<tr key={i}>
|
|
364
324
|
<td style={styles.gmTableCell}>{r.round}</td>
|
|
365
|
-
<td style={styles.gmTableCell}>
|
|
366
|
-
{r.answer || "—"}
|
|
367
|
-
</td>
|
|
325
|
+
<td style={styles.gmTableCell}>{r.answer || "—"}</td>
|
|
368
326
|
<td style={styles.gmTableCell}>{r.correct}</td>
|
|
369
327
|
<td style={styles.gmTableCell}>
|
|
370
328
|
{r.result === "correct"
|
|
@@ -401,62 +359,33 @@ export default function Game() {
|
|
|
401
359
|
>
|
|
402
360
|
{phase === "ready" && (
|
|
403
361
|
<>
|
|
404
|
-
<h1
|
|
405
|
-
style={{
|
|
406
|
-
...styles.gmHeadline1,
|
|
407
|
-
color: "#ec4c44",
|
|
408
|
-
}}
|
|
409
|
-
>
|
|
410
|
-
GET READY
|
|
411
|
-
</h1>
|
|
362
|
+
<h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1>
|
|
412
363
|
<div style={styles.gmHourglass}>⏳</div>
|
|
413
364
|
</>
|
|
414
365
|
)}
|
|
415
|
-
{phase === "memorize" && (
|
|
416
|
-
|
|
417
|
-
style={{
|
|
418
|
-
...styles.gmBodyM,
|
|
419
|
-
color: "#10b981",
|
|
420
|
-
}}
|
|
421
|
-
>
|
|
422
|
-
MEMORIZE ({memorizeTime})
|
|
423
|
-
</p>
|
|
424
|
-
)}
|
|
425
|
-
{phase === "guess" && !answered && (
|
|
426
|
-
<p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
|
|
427
|
-
)}
|
|
366
|
+
{phase === "memorize" && <p style={{ ...styles.gmBodyM, color: "#10b981" }}>MEMORIZE ({memorizeTime})</p>}
|
|
367
|
+
{phase === "guess" && !answered && <p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>}
|
|
428
368
|
</div>
|
|
429
369
|
|
|
430
370
|
{phase !== "ready" && (
|
|
431
371
|
<div
|
|
432
372
|
style={{
|
|
433
373
|
...styles.gmGrid,
|
|
434
|
-
gridTemplateColumns: isMobile
|
|
435
|
-
? "repeat(2, 1fr)"
|
|
436
|
-
: "repeat(3, 210px)",
|
|
374
|
+
gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(3, 210px)",
|
|
437
375
|
gridAutoRows: isMobile ? "150px" : "210px",
|
|
438
376
|
gap: isMobile ? "12px" : "20px",
|
|
439
377
|
justifyItems: "center",
|
|
440
378
|
}}
|
|
441
379
|
>
|
|
442
380
|
{files.map((file, i) => {
|
|
443
|
-
const isHidden =
|
|
444
|
-
hiddenIndex === i &&
|
|
445
|
-
phase === "guess" &&
|
|
446
|
-
!answered;
|
|
381
|
+
const isHidden = hiddenIndex === i && phase === "guess" && !answered;
|
|
447
382
|
return (
|
|
448
383
|
<div
|
|
449
384
|
key={i}
|
|
450
385
|
style={{
|
|
451
386
|
...styles.gmCard,
|
|
452
|
-
...(result === "correct" &&
|
|
453
|
-
hiddenIndex === i
|
|
454
|
-
? styles.gmCorrect
|
|
455
|
-
: {}),
|
|
456
|
-
...(result === "wrong" &&
|
|
457
|
-
hiddenIndex === i
|
|
458
|
-
? styles.gmWrong
|
|
459
|
-
: {}),
|
|
387
|
+
...(result === "correct" && hiddenIndex === i ? styles.gmCorrect : {}),
|
|
388
|
+
...(result === "wrong" && hiddenIndex === i ? styles.gmWrong : {}),
|
|
460
389
|
}}
|
|
461
390
|
>
|
|
462
391
|
{!isHidden && (
|
|
@@ -483,31 +412,15 @@ export default function Game() {
|
|
|
483
412
|
type="text"
|
|
484
413
|
placeholder="Type the missing word"
|
|
485
414
|
value={inputValue}
|
|
486
|
-
onChange={(e) =>
|
|
487
|
-
setInputValue(e.target.value)
|
|
488
|
-
}
|
|
415
|
+
onChange={(e) => setInputValue(e.target.value)}
|
|
489
416
|
style={styles.gmInput}
|
|
490
417
|
/>
|
|
491
|
-
<button
|
|
492
|
-
style={{
|
|
493
|
-
...styles.gmButton,
|
|
494
|
-
marginLeft: 8,
|
|
495
|
-
}}
|
|
496
|
-
onClick={checkAnswer}
|
|
497
|
-
disabled={animating}
|
|
498
|
-
>
|
|
418
|
+
<button style={{ ...styles.gmButton, marginLeft: 8 }} onClick={checkAnswer} disabled={animating}>
|
|
499
419
|
{animating ? "..." : "Check"}
|
|
500
420
|
</button>
|
|
501
421
|
</div>
|
|
502
422
|
)}
|
|
503
|
-
{answered &&
|
|
504
|
-
<button
|
|
505
|
-
style={styles.gmButton}
|
|
506
|
-
onClick={nextRound}
|
|
507
|
-
>
|
|
508
|
-
Next round
|
|
509
|
-
</button>
|
|
510
|
-
)}
|
|
423
|
+
{answered && <button style={styles.gmButton} onClick={nextRound}>Next round</button>}
|
|
511
424
|
</div>
|
|
512
425
|
</div>
|
|
513
426
|
)}
|