@mblinkov/whats-missing 20.0.12 → 20.0.14
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 +17 -3
- package/dist/whats-missing.es.js +160 -60
- package/package.json +1 -1
- package/src/Game.tsx +124 -27
|
@@ -1,17 +1,31 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),oe=window.origin+"/cloud/speakid/games/whatsmissing/",B=(
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),oe=window.origin+"/cloud/speakid/games/whatsmissing/",B=(i,l)=>i.map(([a,s])=>({src:`${oe}${l}/${s.replace(/\s/g,"%20")}.png`,name:s})),re=[["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"]],ie=[["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"]],le=[["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(re,"food"),animals:B(ie,"animals"),toys:B(le,"toys")},ae=`
|
|
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
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const i=document.createElement("style");i.id="spin-keyframes",i.innerHTML=ae,document.head.appendChild(i)}const de={animation:"spin 1.4s linear infinite"},n={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",...de}},ce=()=>{const i=document.createElement("style");i.textContent=`
|
|
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
|
+
|
|
7
19
|
#whats-missing-root, #whats-missing-root * {
|
|
8
20
|
box-sizing: border-box;
|
|
9
21
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
22
|
+
transform: none !important;
|
|
10
23
|
}
|
|
24
|
+
|
|
11
25
|
#whats-missing-root img {
|
|
12
26
|
max-width: 100%;
|
|
13
27
|
height: auto;
|
|
14
28
|
display: block;
|
|
15
29
|
user-select: none;
|
|
16
30
|
}
|
|
17
|
-
`,document.head.appendChild(
|
|
31
|
+
`,document.head.appendChild(i)},me=(i,l)=>{const a=Array.from({length:i.length+1},()=>Array(l.length+1).fill(0));for(let s=0;s<=i.length;s++)a[s][0]=s;for(let s=0;s<=l.length;s++)a[0][s]=s;for(let s=1;s<=i.length;s++)for(let d=1;d<=l.length;d++)a[s][d]=i[s-1]===l[d-1]?a[s-1][d-1]:Math.min(a[s-1][d-1],a[s][d-1],a[s-1][d])+1;return a[i.length][l.length]};function ge(){const i=o.useRef(null);o.useEffect(()=>(ce(),()=>{document.body.style.overflow=""}),[]);const[l,a]=o.useState(null),[s,d]=o.useState([]),[x,$]=o.useState(4),[p,W]=o.useState(!1),[y,E]=o.useState(1),[u,K]=o.useState(null),[m,b]=o.useState("ready"),[G,F]=o.useState(3),[v,C]=o.useState(10),[T,D]=o.useState(20),[Z,z]=o.useState(0),[w,R]=o.useState(!1),[j,Y]=o.useState(""),[h,I]=o.useState(!1),[H,q]=o.useState(!1),[P,f]=o.useState(null),[J,M]=o.useState([]),[Q,U]=o.useState([]),[S,X]=o.useState(!1);o.useEffect(()=>{const t=()=>X(window.innerWidth<768);return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const N=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),O=()=>{if(!l)return;const t=N(L[l]);d(t),W(!0),R(!1),E(1),z(0),M([]),U([]),V(t,[],!0)},V=(t=s,r=Q,g=!1)=>{const c=N(t.length?t:L[l]);let k=Math.floor(Math.random()*c.length),A=c[k].name,_=0;for(;r.includes(A)&&_<20;)k=Math.floor(Math.random()*c.length),A=c[k].name,_++;d(c),K(k),U([...r,A]),I(!1),Y(""),D(20),f(null),g?(b("ready"),F(3),C(10)):(b("memorize"),C(10))};o.useEffect(()=>{if(!(!p||w||h)){if(m==="ready")if(G<=0)b("memorize");else{const t=setTimeout(()=>F(r=>r-1),1e3);return()=>clearTimeout(t)}if(m==="memorize")if(v<=0)b("guess");else{const t=setTimeout(()=>C(r=>r-1),1e3);return()=>clearTimeout(t)}if(m==="guess"){if(T<=0){I(!0),f("wrong");const r=s[u].name;M(g=>[...g,{round:y,answer:j,correct:r,result:"wrong"}]);return}const t=setTimeout(()=>D(r=>r-1),1e3);return()=>clearTimeout(t)}}},[m,G,v,T,p,w,h,s,u,y,j]);const ee=()=>{if(u===null||H)return;const t=s[u].name,r=j.toLowerCase().trim();let g="wrong";r===t?(z(c=>c+1),f("correct"),g="correct"):me(r,t)===1?(z(c=>c+.5),f("almost"),g="almost"):(f("wrong"),g="wrong"),M(c=>[...c,{round:y,answer:r,correct:t,result:g}]),q(!0),setTimeout(()=>{q(!1),I(!0)},600)},te=()=>y<x?(E(t=>t+1),V()):R(!0),ne=()=>{W(!1),R(!1),a(null)},se=o.useMemo(()=>e.jsx("div",{style:n.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:n.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:i,style:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},children:e.jsx("div",{style:{width:window.innerWidth>window.innerHeight?"90vh":"90vw",height:window.innerWidth>window.innerHeight?"90vh":"90vw",display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",overflow:"hidden",borderRadius:"20px",background:"radial-gradient(circle at center, #fff8f8 0%, #fdfdfd 80%, #ffffff 100%)",boxShadow:"0 0 40px rgba(0,0,0,0.08)"},children:e.jsxs("div",{id:"whats-missing-root",children:[!S&&se,!l&&!p&&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:()=>a(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,...x===t?n.gmButtonActive:{}},onClick:()=>$(t),children:t},t))})]})]}),l&&!p&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",l]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",x]}),e.jsx("button",{style:n.gmButton,onClick:O,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: ",Z," / ",x]}),e.jsx("p",{style:{...n.gmBodyM,color:"#10b981",marginTop:12},children:"Great job! 🎉 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:J.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:O,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:ne,children:"⬅️ Choose theme"})]})]}),p&&!w&&e.jsxs("div",{style:n.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[m==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),m==="memorize"&&e.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",v,")"]}),m==="guess"&&!h&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",T,"s"]})]}),m!=="ready"&&e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:S?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:S?"150px":"210px",gap:S?"12px":"20px",justifyItems:"center"},children:s.map((t,r)=>{const g=u===r&&m==="guess"&&!h;return e.jsx("div",{style:{...n.gmCard,...P==="correct"&&u===r?n.gmCorrect:{},...P==="wrong"&&u===r?n.gmWrong:{}},children:!g&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},r)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[m==="guess"&&!h&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:j,onChange:t=>Y(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:ee,disabled:H,children:H?"...":"Check"})]}),h&&e.jsx("button",{style:n.gmButton,onClick:te,children:"Next round"})]})]})]})})})}exports.Game=ge;exports.themes=L;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as n, jsxs as
|
|
1
|
+
import { jsx as n, jsxs as i, Fragment as se } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as le, useEffect as j, useState as s, useMemo as ae } from "react";
|
|
3
3
|
const de = window.origin + "/cloud/speakid/games/whatsmissing/", W = (l, a) => l.map(([d, o]) => ({
|
|
4
4
|
src: `${de}${a}/${o.replace(/\s/g, "%20")}.png`,
|
|
@@ -238,10 +238,24 @@ const pe = {
|
|
|
238
238
|
}, ue = () => {
|
|
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
|
+
|
|
241
253
|
#whats-missing-root, #whats-missing-root * {
|
|
242
254
|
box-sizing: border-box;
|
|
243
255
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
256
|
+
transform: none !important;
|
|
244
257
|
}
|
|
258
|
+
|
|
245
259
|
#whats-missing-root img {
|
|
246
260
|
max-width: 100%;
|
|
247
261
|
height: auto;
|
|
@@ -250,7 +264,10 @@ const pe = {
|
|
|
250
264
|
}
|
|
251
265
|
`, document.head.appendChild(l);
|
|
252
266
|
}, fe = (l, a) => {
|
|
253
|
-
const d = Array.from(
|
|
267
|
+
const d = Array.from(
|
|
268
|
+
{ length: l.length + 1 },
|
|
269
|
+
() => Array(a.length + 1).fill(0)
|
|
270
|
+
);
|
|
254
271
|
for (let o = 0; o <= l.length; o++) d[o][0] = o;
|
|
255
272
|
for (let o = 0; o <= a.length; o++) d[0][o] = o;
|
|
256
273
|
for (let o = 1; o <= l.length; o++)
|
|
@@ -263,7 +280,9 @@ function be() {
|
|
|
263
280
|
j(() => (ue(), () => {
|
|
264
281
|
document.body.style.overflow = "";
|
|
265
282
|
}), []);
|
|
266
|
-
const [a, d] = s(null), [o, c] = s([]), [x, Z] = s(4), [f,
|
|
283
|
+
const [a, d] = s(null), [o, c] = s([]), [x, Z] = s(4), [f, G] = s(!1), [b, E] = s(1), [p, J] = s(null), [g, w] = s("ready"), [F, D] = s(3), [S, z] = s(10), [R, Y] = s(20), [Q, I] = s(0), [k, H] = s(!1), [v, U] = s(""), [u, M] = s(!1), [A, N] = s(!1), [P, y] = s(
|
|
284
|
+
null
|
|
285
|
+
), [X, B] = s([]), [ee, V] = s([]), [C, te] = s(!1);
|
|
267
286
|
j(() => {
|
|
268
287
|
const e = () => te(window.innerWidth < 768);
|
|
269
288
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
@@ -271,56 +290,90 @@ function be() {
|
|
|
271
290
|
const _ = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), $ = () => {
|
|
272
291
|
if (!a) return;
|
|
273
292
|
const e = _(O[a]);
|
|
274
|
-
c(e),
|
|
275
|
-
}, q = (e = o,
|
|
293
|
+
c(e), G(!0), H(!1), E(1), I(0), B([]), V([]), q(e, [], !0);
|
|
294
|
+
}, q = (e = o, r = ee, h = !1) => {
|
|
276
295
|
const m = _(e.length ? e : O[a]);
|
|
277
296
|
let T = Math.floor(Math.random() * m.length), L = m[T].name, K = 0;
|
|
278
|
-
for (;
|
|
297
|
+
for (; r.includes(L) && K < 20; )
|
|
279
298
|
T = Math.floor(Math.random() * m.length), L = m[T].name, K++;
|
|
280
|
-
c(m), J(T), V([...
|
|
299
|
+
c(m), J(T), V([...r, L]), M(!1), U(""), Y(20), y(null), h ? (w("ready"), D(3), z(10)) : (w("memorize"), z(10));
|
|
281
300
|
};
|
|
282
301
|
j(() => {
|
|
283
302
|
if (!(!f || k || u)) {
|
|
284
303
|
if (g === "ready")
|
|
285
304
|
if (F <= 0) w("memorize");
|
|
286
305
|
else {
|
|
287
|
-
const e = setTimeout(() => D((
|
|
306
|
+
const e = setTimeout(() => D((r) => r - 1), 1e3);
|
|
288
307
|
return () => clearTimeout(e);
|
|
289
308
|
}
|
|
290
309
|
if (g === "memorize")
|
|
291
310
|
if (S <= 0) w("guess");
|
|
292
311
|
else {
|
|
293
|
-
const e = setTimeout(() => z((
|
|
312
|
+
const e = setTimeout(() => z((r) => r - 1), 1e3);
|
|
294
313
|
return () => clearTimeout(e);
|
|
295
314
|
}
|
|
296
315
|
if (g === "guess") {
|
|
297
316
|
if (R <= 0) {
|
|
298
317
|
M(!0), y("wrong");
|
|
299
|
-
const
|
|
318
|
+
const r = o[p].name;
|
|
300
319
|
B((h) => [
|
|
301
320
|
...h,
|
|
302
|
-
{
|
|
321
|
+
{
|
|
322
|
+
round: b,
|
|
323
|
+
answer: v,
|
|
324
|
+
correct: r,
|
|
325
|
+
result: "wrong"
|
|
326
|
+
}
|
|
303
327
|
]);
|
|
304
328
|
return;
|
|
305
329
|
}
|
|
306
|
-
const e = setTimeout(() => Y((
|
|
330
|
+
const e = setTimeout(() => Y((r) => r - 1), 1e3);
|
|
307
331
|
return () => clearTimeout(e);
|
|
308
332
|
}
|
|
309
333
|
}
|
|
310
|
-
}, [
|
|
334
|
+
}, [
|
|
335
|
+
g,
|
|
336
|
+
F,
|
|
337
|
+
S,
|
|
338
|
+
R,
|
|
339
|
+
f,
|
|
340
|
+
k,
|
|
341
|
+
u,
|
|
342
|
+
o,
|
|
343
|
+
p,
|
|
344
|
+
b,
|
|
345
|
+
v
|
|
346
|
+
]);
|
|
311
347
|
const ne = () => {
|
|
312
348
|
if (p === null || A) return;
|
|
313
|
-
const e = o[p].name,
|
|
349
|
+
const e = o[p].name, r = v.toLowerCase().trim();
|
|
314
350
|
let h = "wrong";
|
|
315
|
-
|
|
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(() => {
|
|
316
355
|
N(!1), M(!0);
|
|
317
356
|
}, 600);
|
|
318
|
-
}, oe = () => b < x ? (
|
|
319
|
-
|
|
320
|
-
},
|
|
321
|
-
() => /* @__PURE__ */ n("div", { style: t.gmLogoFixed, children: /* @__PURE__ */
|
|
322
|
-
/* @__PURE__ */ n(
|
|
323
|
-
|
|
357
|
+
}, oe = () => b < x ? (E((e) => e + 1), q()) : H(!0), re = () => {
|
|
358
|
+
G(!1), H(!1), d(null);
|
|
359
|
+
}, ie = ae(
|
|
360
|
+
() => /* @__PURE__ */ n("div", { style: t.gmLogoFixed, children: /* @__PURE__ */ i("picture", { children: [
|
|
361
|
+
/* @__PURE__ */ n(
|
|
362
|
+
"source",
|
|
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
|
+
)
|
|
324
377
|
] }) }),
|
|
325
378
|
[]
|
|
326
379
|
);
|
|
@@ -333,8 +386,7 @@ function be() {
|
|
|
333
386
|
justifyContent: "center",
|
|
334
387
|
alignItems: "center",
|
|
335
388
|
width: "100%",
|
|
336
|
-
height: "100%"
|
|
337
|
-
overflow: "hidden"
|
|
389
|
+
height: "100%"
|
|
338
390
|
},
|
|
339
391
|
children: /* @__PURE__ */ n(
|
|
340
392
|
"div",
|
|
@@ -346,16 +398,26 @@ function be() {
|
|
|
346
398
|
justifyContent: "center",
|
|
347
399
|
alignItems: "center",
|
|
348
400
|
flexDirection: "column",
|
|
401
|
+
overflow: "hidden",
|
|
349
402
|
borderRadius: "20px",
|
|
350
|
-
background: "
|
|
403
|
+
background: "radial-gradient(circle at center, #fff8f8 0%, #fdfdfd 80%, #ffffff 100%)",
|
|
404
|
+
boxShadow: "0 0 40px rgba(0,0,0,0.08)"
|
|
351
405
|
},
|
|
352
|
-
children: /* @__PURE__ */
|
|
353
|
-
!C &&
|
|
354
|
-
!a && !f && /* @__PURE__ */
|
|
406
|
+
children: /* @__PURE__ */ i("div", { id: "whats-missing-root", children: [
|
|
407
|
+
!C && ie,
|
|
408
|
+
!a && !f && /* @__PURE__ */ i("div", { style: t.gmCenterScreen, children: [
|
|
355
409
|
/* @__PURE__ */ n("h1", { style: t.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
356
410
|
/* @__PURE__ */ n("p", { style: t.gmBodyM, children: "Select a theme:" }),
|
|
357
|
-
/* @__PURE__ */ n("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ n(
|
|
358
|
-
|
|
411
|
+
/* @__PURE__ */ n("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ n(
|
|
412
|
+
"button",
|
|
413
|
+
{
|
|
414
|
+
style: t.gmButton,
|
|
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: [
|
|
359
421
|
/* @__PURE__ */ n("p", { style: t.gmBodyS, children: "Choose number of rounds:" }),
|
|
360
422
|
/* @__PURE__ */ n("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ n(
|
|
361
423
|
"button",
|
|
@@ -371,47 +433,57 @@ function be() {
|
|
|
371
433
|
)) })
|
|
372
434
|
] })
|
|
373
435
|
] }),
|
|
374
|
-
a && !f && /* @__PURE__ */
|
|
375
|
-
/* @__PURE__ */
|
|
436
|
+
a && !f && /* @__PURE__ */ i("div", { style: t.gmCenterScreen, children: [
|
|
437
|
+
/* @__PURE__ */ i("h1", { style: t.gmHeadline1, children: [
|
|
376
438
|
"Theme selected: ",
|
|
377
439
|
a
|
|
378
440
|
] }),
|
|
379
|
-
/* @__PURE__ */
|
|
441
|
+
/* @__PURE__ */ i("p", { style: t.gmBodyM, children: [
|
|
380
442
|
"Rounds: ",
|
|
381
443
|
x
|
|
382
444
|
] }),
|
|
383
445
|
/* @__PURE__ */ n("button", { style: t.gmButton, onClick: $, children: "▶ Start game" })
|
|
384
446
|
] }),
|
|
385
|
-
k && /* @__PURE__ */
|
|
447
|
+
k && /* @__PURE__ */ i("div", { style: t.gmCenterScreen, children: [
|
|
386
448
|
/* @__PURE__ */ n("h1", { style: t.gmHeadline1, children: "Results" }),
|
|
387
|
-
/* @__PURE__ */
|
|
449
|
+
/* @__PURE__ */ i("h2", { style: t.gmHeadline3, children: [
|
|
388
450
|
"Your score: ",
|
|
389
451
|
Q,
|
|
390
452
|
" / ",
|
|
391
453
|
x
|
|
392
454
|
] }),
|
|
393
|
-
/* @__PURE__ */ n(
|
|
394
|
-
|
|
395
|
-
|
|
455
|
+
/* @__PURE__ */ n(
|
|
456
|
+
"p",
|
|
457
|
+
{
|
|
458
|
+
style: {
|
|
459
|
+
...t.gmBodyM,
|
|
460
|
+
color: "#10b981",
|
|
461
|
+
marginTop: 12
|
|
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: [
|
|
396
468
|
/* @__PURE__ */ n("th", { children: "Round" }),
|
|
397
469
|
/* @__PURE__ */ n("th", { children: "Your Answer" }),
|
|
398
470
|
/* @__PURE__ */ n("th", { children: "Correct" }),
|
|
399
471
|
/* @__PURE__ */ n("th", { children: "Result" })
|
|
400
472
|
] }) }),
|
|
401
|
-
/* @__PURE__ */ n("tbody", { children: X.map((e,
|
|
473
|
+
/* @__PURE__ */ n("tbody", { children: X.map((e, r) => /* @__PURE__ */ i("tr", { children: [
|
|
402
474
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.round }),
|
|
403
475
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.answer || "—" }),
|
|
404
476
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.correct }),
|
|
405
477
|
/* @__PURE__ */ n("td", { style: t.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
|
|
406
|
-
] },
|
|
478
|
+
] }, r)) })
|
|
407
479
|
] }),
|
|
408
|
-
/* @__PURE__ */
|
|
480
|
+
/* @__PURE__ */ i("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
409
481
|
/* @__PURE__ */ n("button", { style: t.gmButton, onClick: $, children: "🔁 Play again" }),
|
|
410
|
-
/* @__PURE__ */ n("button", { style: t.gmButton, onClick:
|
|
482
|
+
/* @__PURE__ */ n("button", { style: t.gmButton, onClick: re, children: "⬅️ Choose theme" })
|
|
411
483
|
] })
|
|
412
484
|
] }),
|
|
413
|
-
f && !k && /* @__PURE__ */
|
|
414
|
-
/* @__PURE__ */
|
|
485
|
+
f && !k && /* @__PURE__ */ i("div", { style: t.gmGameLayout, children: [
|
|
486
|
+
/* @__PURE__ */ i(
|
|
415
487
|
"div",
|
|
416
488
|
{
|
|
417
489
|
style: {
|
|
@@ -422,16 +494,34 @@ function be() {
|
|
|
422
494
|
alignItems: "center"
|
|
423
495
|
},
|
|
424
496
|
children: [
|
|
425
|
-
g === "ready" && /* @__PURE__ */
|
|
426
|
-
/* @__PURE__ */ n(
|
|
497
|
+
g === "ready" && /* @__PURE__ */ i(se, { children: [
|
|
498
|
+
/* @__PURE__ */ n(
|
|
499
|
+
"h1",
|
|
500
|
+
{
|
|
501
|
+
style: {
|
|
502
|
+
...t.gmHeadline1,
|
|
503
|
+
color: "#ec4c44"
|
|
504
|
+
},
|
|
505
|
+
children: "GET READY"
|
|
506
|
+
}
|
|
507
|
+
),
|
|
427
508
|
/* @__PURE__ */ n("div", { style: t.gmHourglass, children: "⏳" })
|
|
428
509
|
] }),
|
|
429
|
-
g === "memorize" && /* @__PURE__ */
|
|
430
|
-
"
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
510
|
+
g === "memorize" && /* @__PURE__ */ i(
|
|
511
|
+
"p",
|
|
512
|
+
{
|
|
513
|
+
style: {
|
|
514
|
+
...t.gmBodyM,
|
|
515
|
+
color: "#10b981"
|
|
516
|
+
},
|
|
517
|
+
children: [
|
|
518
|
+
"MEMORIZE (",
|
|
519
|
+
S,
|
|
520
|
+
")"
|
|
521
|
+
]
|
|
522
|
+
}
|
|
523
|
+
),
|
|
524
|
+
g === "guess" && !u && /* @__PURE__ */ i("p", { style: t.gmBodyM, children: [
|
|
435
525
|
"⏳ Time left: ",
|
|
436
526
|
R,
|
|
437
527
|
"s"
|
|
@@ -449,15 +539,15 @@ function be() {
|
|
|
449
539
|
gap: C ? "12px" : "20px",
|
|
450
540
|
justifyItems: "center"
|
|
451
541
|
},
|
|
452
|
-
children: o.map((e,
|
|
453
|
-
const h = p ===
|
|
542
|
+
children: o.map((e, r) => {
|
|
543
|
+
const h = p === r && g === "guess" && !u;
|
|
454
544
|
return /* @__PURE__ */ n(
|
|
455
545
|
"div",
|
|
456
546
|
{
|
|
457
547
|
style: {
|
|
458
548
|
...t.gmCard,
|
|
459
|
-
...P === "correct" && p ===
|
|
460
|
-
...P === "wrong" && p ===
|
|
549
|
+
...P === "correct" && p === r ? t.gmCorrect : {},
|
|
550
|
+
...P === "wrong" && p === r ? t.gmWrong : {}
|
|
461
551
|
},
|
|
462
552
|
children: !h && /* @__PURE__ */ n(
|
|
463
553
|
"img",
|
|
@@ -472,13 +562,13 @@ function be() {
|
|
|
472
562
|
}
|
|
473
563
|
)
|
|
474
564
|
},
|
|
475
|
-
|
|
565
|
+
r
|
|
476
566
|
);
|
|
477
567
|
})
|
|
478
568
|
}
|
|
479
569
|
),
|
|
480
|
-
/* @__PURE__ */
|
|
481
|
-
g === "guess" && !u && /* @__PURE__ */
|
|
570
|
+
/* @__PURE__ */ i("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
571
|
+
g === "guess" && !u && /* @__PURE__ */ i("div", { children: [
|
|
482
572
|
/* @__PURE__ */ n(
|
|
483
573
|
"input",
|
|
484
574
|
{
|
|
@@ -492,14 +582,24 @@ function be() {
|
|
|
492
582
|
/* @__PURE__ */ n(
|
|
493
583
|
"button",
|
|
494
584
|
{
|
|
495
|
-
style: {
|
|
585
|
+
style: {
|
|
586
|
+
...t.gmButton,
|
|
587
|
+
marginLeft: 8
|
|
588
|
+
},
|
|
496
589
|
onClick: ne,
|
|
497
590
|
disabled: A,
|
|
498
591
|
children: A ? "..." : "Check"
|
|
499
592
|
}
|
|
500
593
|
)
|
|
501
594
|
] }),
|
|
502
|
-
u && /* @__PURE__ */ n(
|
|
595
|
+
u && /* @__PURE__ */ n(
|
|
596
|
+
"button",
|
|
597
|
+
{
|
|
598
|
+
style: t.gmButton,
|
|
599
|
+
onClick: oe,
|
|
600
|
+
children: "Next round"
|
|
601
|
+
}
|
|
602
|
+
)
|
|
503
603
|
] })
|
|
504
604
|
] })
|
|
505
605
|
] })
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -11,14 +11,28 @@ type RoundResult = {
|
|
|
11
11
|
result: "correct" | "almost" | "wrong";
|
|
12
12
|
};
|
|
13
13
|
|
|
14
|
-
// ✅
|
|
14
|
+
// ✅ Финальный reset — исправляет фон, убирает скроллы, изолирует зум
|
|
15
15
|
const globalReset = () => {
|
|
16
16
|
const style = document.createElement("style");
|
|
17
17
|
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
|
+
|
|
18
30
|
#whats-missing-root, #whats-missing-root * {
|
|
19
31
|
box-sizing: border-box;
|
|
20
32
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
33
|
+
transform: none !important;
|
|
21
34
|
}
|
|
35
|
+
|
|
22
36
|
#whats-missing-root img {
|
|
23
37
|
max-width: 100%;
|
|
24
38
|
height: auto;
|
|
@@ -30,7 +44,9 @@ const globalReset = () => {
|
|
|
30
44
|
};
|
|
31
45
|
|
|
32
46
|
const levenshtein = (a: string, b: string) => {
|
|
33
|
-
const dp = Array.from({ length: a.length + 1 }, () =>
|
|
47
|
+
const dp = Array.from({ length: a.length + 1 }, () =>
|
|
48
|
+
Array(b.length + 1).fill(0)
|
|
49
|
+
);
|
|
34
50
|
for (let i = 0; i <= a.length; i++) dp[i][0] = i;
|
|
35
51
|
for (let j = 0; j <= b.length; j++) dp[0][j] = j;
|
|
36
52
|
for (let i = 1; i <= a.length; i++) {
|
|
@@ -69,7 +85,9 @@ export default function Game() {
|
|
|
69
85
|
const [inputValue, setInputValue] = useState("");
|
|
70
86
|
const [answered, setAnswered] = useState(false);
|
|
71
87
|
const [animating, setAnimating] = useState(false);
|
|
72
|
-
const [result, setResult] = useState<"correct" | "almost" | "wrong" | null>(
|
|
88
|
+
const [result, setResult] = useState<"correct" | "almost" | "wrong" | null>(
|
|
89
|
+
null
|
|
90
|
+
);
|
|
73
91
|
const [resultsTable, setResultsTable] = useState<RoundResult[]>([]);
|
|
74
92
|
const [usedHidden, setUsedHidden] = useState<string[]>([]);
|
|
75
93
|
const [isMobile, setIsMobile] = useState(false);
|
|
@@ -97,7 +115,11 @@ export default function Game() {
|
|
|
97
115
|
startRound(selected, [], true);
|
|
98
116
|
};
|
|
99
117
|
|
|
100
|
-
const startRound = (
|
|
118
|
+
const startRound = (
|
|
119
|
+
images = files,
|
|
120
|
+
used: string[] = usedHidden,
|
|
121
|
+
isFirst = false
|
|
122
|
+
) => {
|
|
101
123
|
const roundSet = getRandomSix(images.length ? images : themes[theme!]);
|
|
102
124
|
let idx = Math.floor(Math.random() * roundSet.length);
|
|
103
125
|
let candidate = roundSet[idx].name;
|
|
@@ -147,14 +169,31 @@ export default function Game() {
|
|
|
147
169
|
const correct = files[hiddenIndex!].name;
|
|
148
170
|
setResultsTable((prev) => [
|
|
149
171
|
...prev,
|
|
150
|
-
{
|
|
172
|
+
{
|
|
173
|
+
round: currentRound,
|
|
174
|
+
answer: inputValue,
|
|
175
|
+
correct,
|
|
176
|
+
result: "wrong",
|
|
177
|
+
},
|
|
151
178
|
]);
|
|
152
179
|
return;
|
|
153
180
|
}
|
|
154
181
|
const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);
|
|
155
182
|
return () => clearTimeout(t);
|
|
156
183
|
}
|
|
157
|
-
}, [
|
|
184
|
+
}, [
|
|
185
|
+
phase,
|
|
186
|
+
readyTime,
|
|
187
|
+
memorizeTime,
|
|
188
|
+
timeLeft,
|
|
189
|
+
started,
|
|
190
|
+
finished,
|
|
191
|
+
answered,
|
|
192
|
+
files,
|
|
193
|
+
hiddenIndex,
|
|
194
|
+
currentRound,
|
|
195
|
+
inputValue,
|
|
196
|
+
]);
|
|
158
197
|
|
|
159
198
|
const checkAnswer = () => {
|
|
160
199
|
if (hiddenIndex === null || animating) return;
|
|
@@ -173,7 +212,10 @@ export default function Game() {
|
|
|
173
212
|
setResult("wrong");
|
|
174
213
|
roundResult = "wrong";
|
|
175
214
|
}
|
|
176
|
-
setResultsTable((prev) => [
|
|
215
|
+
setResultsTable((prev) => [
|
|
216
|
+
...prev,
|
|
217
|
+
{ round: currentRound, answer: userAnswer, correct, result: roundResult },
|
|
218
|
+
]);
|
|
177
219
|
setAnimating(true);
|
|
178
220
|
setTimeout(() => {
|
|
179
221
|
setAnimating(false);
|
|
@@ -182,7 +224,9 @@ export default function Game() {
|
|
|
182
224
|
};
|
|
183
225
|
|
|
184
226
|
const nextRound = () =>
|
|
185
|
-
currentRound < rounds
|
|
227
|
+
currentRound < rounds
|
|
228
|
+
? (setCurrentRound((r) => r + 1), startRound())
|
|
229
|
+
: setFinished(true);
|
|
186
230
|
|
|
187
231
|
const exitGame = () => {
|
|
188
232
|
setStarted(false);
|
|
@@ -194,15 +238,24 @@ export default function Game() {
|
|
|
194
238
|
() => (
|
|
195
239
|
<div style={styles.gmLogoFixed}>
|
|
196
240
|
<picture>
|
|
197
|
-
<source
|
|
198
|
-
|
|
241
|
+
<source
|
|
242
|
+
srcSet={
|
|
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
|
+
/>
|
|
199
253
|
</picture>
|
|
200
254
|
</div>
|
|
201
255
|
),
|
|
202
256
|
[]
|
|
203
257
|
);
|
|
204
258
|
|
|
205
|
-
// ✅ Новый контейнер для защиты от zoom
|
|
206
259
|
return (
|
|
207
260
|
<div
|
|
208
261
|
ref={containerRef}
|
|
@@ -212,7 +265,6 @@ export default function Game() {
|
|
|
212
265
|
alignItems: "center",
|
|
213
266
|
width: "100%",
|
|
214
267
|
height: "100%",
|
|
215
|
-
overflow: "hidden",
|
|
216
268
|
}}
|
|
217
269
|
>
|
|
218
270
|
<div
|
|
@@ -223,8 +275,11 @@ export default function Game() {
|
|
|
223
275
|
justifyContent: "center",
|
|
224
276
|
alignItems: "center",
|
|
225
277
|
flexDirection: "column",
|
|
278
|
+
overflow: "hidden",
|
|
226
279
|
borderRadius: "20px",
|
|
227
|
-
background:
|
|
280
|
+
background:
|
|
281
|
+
"radial-gradient(circle at center, #fff8f8 0%, #fdfdfd 80%, #ffffff 100%)",
|
|
282
|
+
boxShadow: "0 0 40px rgba(0,0,0,0.08)",
|
|
228
283
|
}}
|
|
229
284
|
>
|
|
230
285
|
<div id="whats-missing-root">
|
|
@@ -236,8 +291,16 @@ export default function Game() {
|
|
|
236
291
|
<p style={styles.gmBodyM}>Select a theme:</p>
|
|
237
292
|
<div style={{ display: "flex", gap: 16 }}>
|
|
238
293
|
{["animals", "food", "toys"].map((t) => (
|
|
239
|
-
<button
|
|
240
|
-
{t
|
|
294
|
+
<button
|
|
295
|
+
key={t}
|
|
296
|
+
style={styles.gmButton}
|
|
297
|
+
onClick={() => setTheme(t as Theme)}
|
|
298
|
+
>
|
|
299
|
+
{t === "animals"
|
|
300
|
+
? "🐶 Animals"
|
|
301
|
+
: t === "food"
|
|
302
|
+
? "🍎 Food"
|
|
303
|
+
: "🧸 Toys"}
|
|
241
304
|
</button>
|
|
242
305
|
))}
|
|
243
306
|
</div>
|
|
@@ -277,8 +340,14 @@ export default function Game() {
|
|
|
277
340
|
<h2 style={styles.gmHeadline3}>
|
|
278
341
|
Your score: {score} / {rounds}
|
|
279
342
|
</h2>
|
|
280
|
-
<p
|
|
281
|
-
|
|
343
|
+
<p
|
|
344
|
+
style={{
|
|
345
|
+
...styles.gmBodyM,
|
|
346
|
+
color: "#10b981",
|
|
347
|
+
marginTop: 12,
|
|
348
|
+
}}
|
|
349
|
+
>
|
|
350
|
+
Great job! 🎉 You did it!
|
|
282
351
|
</p>
|
|
283
352
|
<table style={styles.gmTable}>
|
|
284
353
|
<thead>
|
|
@@ -293,7 +362,9 @@ export default function Game() {
|
|
|
293
362
|
{resultsTable.map((r, i) => (
|
|
294
363
|
<tr key={i}>
|
|
295
364
|
<td style={styles.gmTableCell}>{r.round}</td>
|
|
296
|
-
<td style={styles.gmTableCell}>
|
|
365
|
+
<td style={styles.gmTableCell}>
|
|
366
|
+
{r.answer || "—"}
|
|
367
|
+
</td>
|
|
297
368
|
<td style={styles.gmTableCell}>{r.correct}</td>
|
|
298
369
|
<td style={styles.gmTableCell}>
|
|
299
370
|
{r.result === "correct"
|
|
@@ -330,12 +401,24 @@ export default function Game() {
|
|
|
330
401
|
>
|
|
331
402
|
{phase === "ready" && (
|
|
332
403
|
<>
|
|
333
|
-
<h1
|
|
404
|
+
<h1
|
|
405
|
+
style={{
|
|
406
|
+
...styles.gmHeadline1,
|
|
407
|
+
color: "#ec4c44",
|
|
408
|
+
}}
|
|
409
|
+
>
|
|
410
|
+
GET READY
|
|
411
|
+
</h1>
|
|
334
412
|
<div style={styles.gmHourglass}>⏳</div>
|
|
335
413
|
</>
|
|
336
414
|
)}
|
|
337
415
|
{phase === "memorize" && (
|
|
338
|
-
<p
|
|
416
|
+
<p
|
|
417
|
+
style={{
|
|
418
|
+
...styles.gmBodyM,
|
|
419
|
+
color: "#10b981",
|
|
420
|
+
}}
|
|
421
|
+
>
|
|
339
422
|
MEMORIZE ({memorizeTime})
|
|
340
423
|
</p>
|
|
341
424
|
)}
|
|
@@ -348,7 +431,9 @@ export default function Game() {
|
|
|
348
431
|
<div
|
|
349
432
|
style={{
|
|
350
433
|
...styles.gmGrid,
|
|
351
|
-
gridTemplateColumns: isMobile
|
|
434
|
+
gridTemplateColumns: isMobile
|
|
435
|
+
? "repeat(2, 1fr)"
|
|
436
|
+
: "repeat(3, 210px)",
|
|
352
437
|
gridAutoRows: isMobile ? "150px" : "210px",
|
|
353
438
|
gap: isMobile ? "12px" : "20px",
|
|
354
439
|
justifyItems: "center",
|
|
@@ -356,16 +441,20 @@ export default function Game() {
|
|
|
356
441
|
>
|
|
357
442
|
{files.map((file, i) => {
|
|
358
443
|
const isHidden =
|
|
359
|
-
hiddenIndex === i &&
|
|
444
|
+
hiddenIndex === i &&
|
|
445
|
+
phase === "guess" &&
|
|
446
|
+
!answered;
|
|
360
447
|
return (
|
|
361
448
|
<div
|
|
362
449
|
key={i}
|
|
363
450
|
style={{
|
|
364
451
|
...styles.gmCard,
|
|
365
|
-
...(result === "correct" &&
|
|
452
|
+
...(result === "correct" &&
|
|
453
|
+
hiddenIndex === i
|
|
366
454
|
? styles.gmCorrect
|
|
367
455
|
: {}),
|
|
368
|
-
...(result === "wrong" &&
|
|
456
|
+
...(result === "wrong" &&
|
|
457
|
+
hiddenIndex === i
|
|
369
458
|
? styles.gmWrong
|
|
370
459
|
: {}),
|
|
371
460
|
}}
|
|
@@ -394,11 +483,16 @@ export default function Game() {
|
|
|
394
483
|
type="text"
|
|
395
484
|
placeholder="Type the missing word"
|
|
396
485
|
value={inputValue}
|
|
397
|
-
onChange={(e) =>
|
|
486
|
+
onChange={(e) =>
|
|
487
|
+
setInputValue(e.target.value)
|
|
488
|
+
}
|
|
398
489
|
style={styles.gmInput}
|
|
399
490
|
/>
|
|
400
491
|
<button
|
|
401
|
-
style={{
|
|
492
|
+
style={{
|
|
493
|
+
...styles.gmButton,
|
|
494
|
+
marginLeft: 8,
|
|
495
|
+
}}
|
|
402
496
|
onClick={checkAnswer}
|
|
403
497
|
disabled={animating}
|
|
404
498
|
>
|
|
@@ -407,7 +501,10 @@ export default function Game() {
|
|
|
407
501
|
</div>
|
|
408
502
|
)}
|
|
409
503
|
{answered && (
|
|
410
|
-
<button
|
|
504
|
+
<button
|
|
505
|
+
style={styles.gmButton}
|
|
506
|
+
onClick={nextRound}
|
|
507
|
+
>
|
|
411
508
|
Next round
|
|
412
509
|
</button>
|
|
413
510
|
)}
|