@mblinkov/whats-missing 20.0.13 → 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 -3
- package/dist/whats-missing.es.js +137 -131
- package/package.json +1 -1
- package/src/Game.tsx +52 -42
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),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 r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=
|
|
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=`
|
|
7
7
|
#whats-missing-root, #whats-missing-root * {
|
|
8
8
|
box-sizing: border-box;
|
|
9
9
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
@@ -14,4 +14,5 @@
|
|
|
14
14
|
display: block;
|
|
15
15
|
user-select: none;
|
|
16
16
|
}
|
|
17
|
-
|
|
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,9 +233,9 @@ 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
241
|
#whats-missing-root, #whats-missing-root * {
|
|
@@ -248,58 +248,67 @@ const pe = {
|
|
|
248
248
|
display: block;
|
|
249
249
|
user-select: none;
|
|
250
250
|
}
|
|
251
|
+
html, body { margin: 0; padding: 0; }
|
|
251
252
|
`, document.head.appendChild(l);
|
|
252
|
-
},
|
|
253
|
+
}, be = (l, a) => {
|
|
253
254
|
const d = Array.from({ length: l.length + 1 }, () => Array(a.length + 1).fill(0));
|
|
254
|
-
for (let
|
|
255
|
-
for (let
|
|
256
|
-
for (let
|
|
257
|
-
for (let
|
|
258
|
-
d[
|
|
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;
|
|
259
260
|
return d[l.length][a.length];
|
|
260
261
|
};
|
|
261
|
-
function
|
|
262
|
-
const l =
|
|
263
|
-
|
|
262
|
+
function ke() {
|
|
263
|
+
const l = de(null);
|
|
264
|
+
W(() => (ye(), () => {
|
|
264
265
|
document.body.style.overflow = "";
|
|
265
266
|
}), []);
|
|
266
|
-
const [a, d] = s(null), [
|
|
267
|
-
|
|
268
|
-
const e = () =>
|
|
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
|
+
};
|
|
269
278
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
270
279
|
}, []);
|
|
271
|
-
const
|
|
280
|
+
const V = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), _ = () => {
|
|
272
281
|
if (!a) return;
|
|
273
|
-
const e =
|
|
274
|
-
|
|
275
|
-
}, q = (e =
|
|
276
|
-
const
|
|
277
|
-
let
|
|
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;
|
|
278
287
|
for (; i.includes(L) && K < 20; )
|
|
279
|
-
|
|
280
|
-
c
|
|
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));
|
|
281
290
|
};
|
|
282
|
-
|
|
283
|
-
if (!(!
|
|
284
|
-
if (
|
|
285
|
-
if (F <= 0)
|
|
291
|
+
W(() => {
|
|
292
|
+
if (!(!b || C || f)) {
|
|
293
|
+
if (h === "ready")
|
|
294
|
+
if (F <= 0) v("memorize");
|
|
286
295
|
else {
|
|
287
296
|
const e = setTimeout(() => D((i) => i - 1), 1e3);
|
|
288
297
|
return () => clearTimeout(e);
|
|
289
298
|
}
|
|
290
|
-
if (
|
|
291
|
-
if (S <= 0)
|
|
299
|
+
if (h === "memorize")
|
|
300
|
+
if (S <= 0) v("guess");
|
|
292
301
|
else {
|
|
293
302
|
const e = setTimeout(() => z((i) => i - 1), 1e3);
|
|
294
303
|
return () => clearTimeout(e);
|
|
295
304
|
}
|
|
296
|
-
if (
|
|
305
|
+
if (h === "guess") {
|
|
297
306
|
if (R <= 0) {
|
|
298
|
-
M(!0),
|
|
299
|
-
const i =
|
|
300
|
-
B((
|
|
301
|
-
...
|
|
302
|
-
{ round:
|
|
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" }
|
|
303
312
|
]);
|
|
304
313
|
return;
|
|
305
314
|
}
|
|
@@ -307,110 +316,115 @@ function be() {
|
|
|
307
316
|
return () => clearTimeout(e);
|
|
308
317
|
}
|
|
309
318
|
}
|
|
310
|
-
}, [
|
|
311
|
-
const
|
|
312
|
-
if (
|
|
313
|
-
const e =
|
|
314
|
-
let
|
|
315
|
-
i === e ? (I((
|
|
316
|
-
|
|
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);
|
|
317
326
|
}, 600);
|
|
318
|
-
},
|
|
327
|
+
}, re = () => k < w ? (G((e) => e + 1), q()) : H(!0), se = () => {
|
|
319
328
|
E(!1), H(!1), d(null);
|
|
320
|
-
},
|
|
321
|
-
() => /* @__PURE__ */
|
|
322
|
-
/* @__PURE__ */
|
|
323
|
-
/* @__PURE__ */
|
|
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" })
|
|
324
333
|
] }) }),
|
|
325
334
|
[]
|
|
326
335
|
);
|
|
327
|
-
return /* @__PURE__ */
|
|
336
|
+
return /* @__PURE__ */ o(
|
|
328
337
|
"div",
|
|
329
338
|
{
|
|
330
339
|
ref: l,
|
|
331
340
|
style: {
|
|
341
|
+
width: "100%",
|
|
342
|
+
height: "100vh",
|
|
332
343
|
display: "flex",
|
|
333
344
|
justifyContent: "center",
|
|
334
345
|
alignItems: "center",
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
overflow: "hidden"
|
|
346
|
+
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
347
|
+
transition: "background 0.3s ease"
|
|
338
348
|
},
|
|
339
|
-
children: /* @__PURE__ */
|
|
349
|
+
children: /* @__PURE__ */ o(
|
|
340
350
|
"div",
|
|
341
351
|
{
|
|
342
352
|
style: {
|
|
343
|
-
width:
|
|
344
|
-
height:
|
|
353
|
+
width: p ? "100vw" : 1440,
|
|
354
|
+
height: p ? "100vh" : 768,
|
|
355
|
+
transform: p ? "none" : `scale(${ne})`,
|
|
356
|
+
transformOrigin: "top center",
|
|
345
357
|
display: "flex",
|
|
358
|
+
flexDirection: "column",
|
|
346
359
|
justifyContent: "center",
|
|
347
360
|
alignItems: "center",
|
|
348
|
-
|
|
349
|
-
borderRadius: "20px",
|
|
350
|
-
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)"
|
|
361
|
+
overflow: "hidden",
|
|
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)"
|
|
351
365
|
},
|
|
352
366
|
children: /* @__PURE__ */ r("div", { id: "whats-missing-root", children: [
|
|
353
|
-
!
|
|
354
|
-
!a && !
|
|
355
|
-
/* @__PURE__ */
|
|
356
|
-
/* @__PURE__ */
|
|
357
|
-
/* @__PURE__ */
|
|
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)) }),
|
|
358
372
|
/* @__PURE__ */ r("div", { style: { marginTop: 24 }, children: [
|
|
359
|
-
/* @__PURE__ */
|
|
360
|
-
/* @__PURE__ */
|
|
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(
|
|
361
375
|
"button",
|
|
362
376
|
{
|
|
363
377
|
style: {
|
|
364
378
|
...t.gmButton,
|
|
365
|
-
...
|
|
379
|
+
...w === e ? t.gmButtonActive : {}
|
|
366
380
|
},
|
|
367
|
-
onClick: () =>
|
|
381
|
+
onClick: () => J(e),
|
|
368
382
|
children: e
|
|
369
383
|
},
|
|
370
384
|
e
|
|
371
385
|
)) })
|
|
372
386
|
] })
|
|
373
387
|
] }),
|
|
374
|
-
a && !
|
|
388
|
+
a && !b && /* @__PURE__ */ r("div", { style: t.gmCenterScreen, children: [
|
|
375
389
|
/* @__PURE__ */ r("h1", { style: t.gmHeadline1, children: [
|
|
376
390
|
"Theme selected: ",
|
|
377
391
|
a
|
|
378
392
|
] }),
|
|
379
393
|
/* @__PURE__ */ r("p", { style: t.gmBodyM, children: [
|
|
380
394
|
"Rounds: ",
|
|
381
|
-
|
|
395
|
+
w
|
|
382
396
|
] }),
|
|
383
|
-
/* @__PURE__ */
|
|
397
|
+
/* @__PURE__ */ o("button", { style: t.gmButton, onClick: _, children: "▶ Start game" })
|
|
384
398
|
] }),
|
|
385
|
-
|
|
386
|
-
/* @__PURE__ */
|
|
399
|
+
C && /* @__PURE__ */ r("div", { style: t.gmCenterScreen, children: [
|
|
400
|
+
/* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "Results" }),
|
|
387
401
|
/* @__PURE__ */ r("h2", { style: t.gmHeadline3, children: [
|
|
388
402
|
"Your score: ",
|
|
389
|
-
|
|
403
|
+
X,
|
|
390
404
|
" / ",
|
|
391
|
-
|
|
405
|
+
w
|
|
392
406
|
] }),
|
|
393
|
-
/* @__PURE__ */
|
|
407
|
+
/* @__PURE__ */ o("p", { style: { ...t.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
|
|
394
408
|
/* @__PURE__ */ r("table", { style: t.gmTable, children: [
|
|
395
|
-
/* @__PURE__ */
|
|
396
|
-
/* @__PURE__ */
|
|
397
|
-
/* @__PURE__ */
|
|
398
|
-
/* @__PURE__ */
|
|
399
|
-
/* @__PURE__ */
|
|
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" })
|
|
400
414
|
] }) }),
|
|
401
|
-
/* @__PURE__ */
|
|
402
|
-
/* @__PURE__ */
|
|
403
|
-
/* @__PURE__ */
|
|
404
|
-
/* @__PURE__ */
|
|
405
|
-
/* @__PURE__ */
|
|
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" })
|
|
406
420
|
] }, i)) })
|
|
407
421
|
] }),
|
|
408
422
|
/* @__PURE__ */ r("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
409
|
-
/* @__PURE__ */
|
|
410
|
-
/* @__PURE__ */
|
|
423
|
+
/* @__PURE__ */ o("button", { style: t.gmButton, onClick: _, children: "🔁 Play again" }),
|
|
424
|
+
/* @__PURE__ */ o("button", { style: t.gmButton, onClick: se, children: "⬅️ Choose theme" })
|
|
411
425
|
] })
|
|
412
426
|
] }),
|
|
413
|
-
|
|
427
|
+
b && !C && /* @__PURE__ */ r("div", { style: t.gmGameLayout, children: [
|
|
414
428
|
/* @__PURE__ */ r(
|
|
415
429
|
"div",
|
|
416
430
|
{
|
|
@@ -422,16 +436,16 @@ function be() {
|
|
|
422
436
|
alignItems: "center"
|
|
423
437
|
},
|
|
424
438
|
children: [
|
|
425
|
-
|
|
426
|
-
/* @__PURE__ */
|
|
427
|
-
/* @__PURE__ */
|
|
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: "⏳" })
|
|
428
442
|
] }),
|
|
429
|
-
|
|
443
|
+
h === "memorize" && /* @__PURE__ */ r("p", { style: { ...t.gmBodyM, color: "#10b981" }, children: [
|
|
430
444
|
"MEMORIZE (",
|
|
431
445
|
S,
|
|
432
446
|
")"
|
|
433
447
|
] }),
|
|
434
|
-
|
|
448
|
+
h === "guess" && !f && /* @__PURE__ */ r("p", { style: t.gmBodyM, children: [
|
|
435
449
|
"⏳ Time left: ",
|
|
436
450
|
R,
|
|
437
451
|
"s"
|
|
@@ -439,27 +453,27 @@ function be() {
|
|
|
439
453
|
]
|
|
440
454
|
}
|
|
441
455
|
),
|
|
442
|
-
|
|
456
|
+
h !== "ready" && /* @__PURE__ */ o(
|
|
443
457
|
"div",
|
|
444
458
|
{
|
|
445
459
|
style: {
|
|
446
460
|
...t.gmGrid,
|
|
447
|
-
gridTemplateColumns:
|
|
448
|
-
gridAutoRows:
|
|
449
|
-
gap:
|
|
461
|
+
gridTemplateColumns: p ? "repeat(2, 1fr)" : "repeat(3, 210px)",
|
|
462
|
+
gridAutoRows: p ? "150px" : "210px",
|
|
463
|
+
gap: p ? "12px" : "20px",
|
|
450
464
|
justifyItems: "center"
|
|
451
465
|
},
|
|
452
|
-
children:
|
|
453
|
-
const
|
|
454
|
-
return /* @__PURE__ */
|
|
466
|
+
children: n.map((e, i) => {
|
|
467
|
+
const g = u === i && h === "guess" && !f;
|
|
468
|
+
return /* @__PURE__ */ o(
|
|
455
469
|
"div",
|
|
456
470
|
{
|
|
457
471
|
style: {
|
|
458
472
|
...t.gmCard,
|
|
459
|
-
...
|
|
460
|
-
...
|
|
473
|
+
...N === "correct" && u === i ? t.gmCorrect : {},
|
|
474
|
+
...N === "wrong" && u === i ? t.gmWrong : {}
|
|
461
475
|
},
|
|
462
|
-
children: !
|
|
476
|
+
children: !g && /* @__PURE__ */ o(
|
|
463
477
|
"img",
|
|
464
478
|
{
|
|
465
479
|
src: e.src,
|
|
@@ -478,28 +492,20 @@ function be() {
|
|
|
478
492
|
}
|
|
479
493
|
),
|
|
480
494
|
/* @__PURE__ */ r("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
481
|
-
|
|
482
|
-
/* @__PURE__ */
|
|
495
|
+
h === "guess" && !f && /* @__PURE__ */ r("div", { children: [
|
|
496
|
+
/* @__PURE__ */ o(
|
|
483
497
|
"input",
|
|
484
498
|
{
|
|
485
499
|
type: "text",
|
|
486
500
|
placeholder: "Type the missing word",
|
|
487
|
-
value:
|
|
501
|
+
value: T,
|
|
488
502
|
onChange: (e) => U(e.target.value),
|
|
489
503
|
style: t.gmInput
|
|
490
504
|
}
|
|
491
505
|
),
|
|
492
|
-
/* @__PURE__ */
|
|
493
|
-
"button",
|
|
494
|
-
{
|
|
495
|
-
style: { ...t.gmButton, marginLeft: 8 },
|
|
496
|
-
onClick: ne,
|
|
497
|
-
disabled: A,
|
|
498
|
-
children: A ? "..." : "Check"
|
|
499
|
-
}
|
|
500
|
-
)
|
|
506
|
+
/* @__PURE__ */ o("button", { style: { ...t.gmButton, marginLeft: 8 }, onClick: ie, disabled: A, children: A ? "..." : "Check" })
|
|
501
507
|
] }),
|
|
502
|
-
|
|
508
|
+
f && /* @__PURE__ */ o("button", { style: t.gmButton, onClick: re, children: "Next round" })
|
|
503
509
|
] })
|
|
504
510
|
] })
|
|
505
511
|
] })
|
|
@@ -509,6 +515,6 @@ function be() {
|
|
|
509
515
|
);
|
|
510
516
|
}
|
|
511
517
|
export {
|
|
512
|
-
|
|
513
|
-
|
|
518
|
+
ke as Game,
|
|
519
|
+
Z as themes
|
|
514
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,7 +12,7 @@ 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 = `
|
|
@@ -25,10 +26,12 @@ const globalReset = () => {
|
|
|
25
26
|
display: block;
|
|
26
27
|
user-select: none;
|
|
27
28
|
}
|
|
29
|
+
html, body { margin: 0; padding: 0; }
|
|
28
30
|
`;
|
|
29
31
|
document.head.appendChild(style);
|
|
30
32
|
};
|
|
31
33
|
|
|
34
|
+
// простая функция сравнения
|
|
32
35
|
const levenshtein = (a: string, b: string) => {
|
|
33
36
|
const dp = Array.from({ length: a.length + 1 }, () => Array(b.length + 1).fill(0));
|
|
34
37
|
for (let i = 0; i <= a.length; i++) dp[i][0] = i;
|
|
@@ -73,14 +76,32 @@ export default function Game() {
|
|
|
73
76
|
const [resultsTable, setResultsTable] = useState<RoundResult[]>([]);
|
|
74
77
|
const [usedHidden, setUsedHidden] = useState<string[]>([]);
|
|
75
78
|
const [isMobile, setIsMobile] = useState(false);
|
|
79
|
+
const [scale, setScale] = useState(1);
|
|
76
80
|
|
|
81
|
+
// ✅ адаптив под мобилки и десктоп
|
|
77
82
|
useEffect(() => {
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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);
|
|
82
100
|
}, []);
|
|
83
101
|
|
|
102
|
+
// =============================
|
|
103
|
+
// GAME LOGIC
|
|
104
|
+
// =============================
|
|
84
105
|
const getRandomSix = (arr: ImageItem[]) =>
|
|
85
106
|
[...arr].sort(() => Math.random() - 0.5).slice(0, 6);
|
|
86
107
|
|
|
@@ -190,6 +211,7 @@ export default function Game() {
|
|
|
190
211
|
setTheme(null);
|
|
191
212
|
};
|
|
192
213
|
|
|
214
|
+
// логотип
|
|
193
215
|
const MemoizedLogo = useMemo(
|
|
194
216
|
() => (
|
|
195
217
|
<div style={styles.gmLogoFixed}>
|
|
@@ -202,34 +224,43 @@ export default function Game() {
|
|
|
202
224
|
[]
|
|
203
225
|
);
|
|
204
226
|
|
|
205
|
-
//
|
|
227
|
+
// =============================
|
|
228
|
+
// RENDER
|
|
229
|
+
// =============================
|
|
206
230
|
return (
|
|
207
231
|
<div
|
|
208
232
|
ref={containerRef}
|
|
209
233
|
style={{
|
|
234
|
+
width: "100%",
|
|
235
|
+
height: "100vh",
|
|
210
236
|
display: "flex",
|
|
211
237
|
justifyContent: "center",
|
|
212
238
|
alignItems: "center",
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
overflow: "hidden",
|
|
239
|
+
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
240
|
+
transition: "background 0.3s ease",
|
|
216
241
|
}}
|
|
217
242
|
>
|
|
243
|
+
{/* Внутренний canvas (виртуальное игровое окно 1440x768) */}
|
|
218
244
|
<div
|
|
219
245
|
style={{
|
|
220
|
-
width:
|
|
221
|
-
height:
|
|
246
|
+
width: isMobile ? "100vw" : 1440,
|
|
247
|
+
height: isMobile ? "100vh" : 768,
|
|
248
|
+
transform: isMobile ? "none" : `scale(${scale})`,
|
|
249
|
+
transformOrigin: "top center",
|
|
222
250
|
display: "flex",
|
|
251
|
+
flexDirection: "column",
|
|
223
252
|
justifyContent: "center",
|
|
224
253
|
alignItems: "center",
|
|
225
|
-
|
|
226
|
-
borderRadius: "20px",
|
|
254
|
+
overflow: "hidden",
|
|
255
|
+
borderRadius: isMobile ? 0 : "20px",
|
|
227
256
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
257
|
+
boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.1)",
|
|
228
258
|
}}
|
|
229
259
|
>
|
|
230
260
|
<div id="whats-missing-root">
|
|
231
261
|
{!isMobile && MemoizedLogo}
|
|
232
262
|
|
|
263
|
+
{/* ====== ИГРОВАЯ ЛОГИКА ====== */}
|
|
233
264
|
{!theme && !started && (
|
|
234
265
|
<div style={styles.gmCenterScreen}>
|
|
235
266
|
<h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
|
|
@@ -277,9 +308,7 @@ export default function Game() {
|
|
|
277
308
|
<h2 style={styles.gmHeadline3}>
|
|
278
309
|
Your score: {score} / {rounds}
|
|
279
310
|
</h2>
|
|
280
|
-
<p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>
|
|
281
|
-
Yahoo! You did it! 🍬✨
|
|
282
|
-
</p>
|
|
311
|
+
<p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>Yahoo! You did it! 🍬✨</p>
|
|
283
312
|
<table style={styles.gmTable}>
|
|
284
313
|
<thead>
|
|
285
314
|
<tr>
|
|
@@ -334,14 +363,8 @@ export default function Game() {
|
|
|
334
363
|
<div style={styles.gmHourglass}>⏳</div>
|
|
335
364
|
</>
|
|
336
365
|
)}
|
|
337
|
-
{phase === "memorize" && (
|
|
338
|
-
|
|
339
|
-
MEMORIZE ({memorizeTime})
|
|
340
|
-
</p>
|
|
341
|
-
)}
|
|
342
|
-
{phase === "guess" && !answered && (
|
|
343
|
-
<p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
|
|
344
|
-
)}
|
|
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>}
|
|
345
368
|
</div>
|
|
346
369
|
|
|
347
370
|
{phase !== "ready" && (
|
|
@@ -355,19 +378,14 @@ export default function Game() {
|
|
|
355
378
|
}}
|
|
356
379
|
>
|
|
357
380
|
{files.map((file, i) => {
|
|
358
|
-
const isHidden =
|
|
359
|
-
hiddenIndex === i && phase === "guess" && !answered;
|
|
381
|
+
const isHidden = hiddenIndex === i && phase === "guess" && !answered;
|
|
360
382
|
return (
|
|
361
383
|
<div
|
|
362
384
|
key={i}
|
|
363
385
|
style={{
|
|
364
386
|
...styles.gmCard,
|
|
365
|
-
...(result === "correct" && hiddenIndex === i
|
|
366
|
-
|
|
367
|
-
: {}),
|
|
368
|
-
...(result === "wrong" && hiddenIndex === i
|
|
369
|
-
? styles.gmWrong
|
|
370
|
-
: {}),
|
|
387
|
+
...(result === "correct" && hiddenIndex === i ? styles.gmCorrect : {}),
|
|
388
|
+
...(result === "wrong" && hiddenIndex === i ? styles.gmWrong : {}),
|
|
371
389
|
}}
|
|
372
390
|
>
|
|
373
391
|
{!isHidden && (
|
|
@@ -397,20 +415,12 @@ export default function Game() {
|
|
|
397
415
|
onChange={(e) => setInputValue(e.target.value)}
|
|
398
416
|
style={styles.gmInput}
|
|
399
417
|
/>
|
|
400
|
-
<button
|
|
401
|
-
style={{ ...styles.gmButton, marginLeft: 8 }}
|
|
402
|
-
onClick={checkAnswer}
|
|
403
|
-
disabled={animating}
|
|
404
|
-
>
|
|
418
|
+
<button style={{ ...styles.gmButton, marginLeft: 8 }} onClick={checkAnswer} disabled={animating}>
|
|
405
419
|
{animating ? "..." : "Check"}
|
|
406
420
|
</button>
|
|
407
421
|
</div>
|
|
408
422
|
)}
|
|
409
|
-
{answered &&
|
|
410
|
-
<button style={styles.gmButton} onClick={nextRound}>
|
|
411
|
-
Next round
|
|
412
|
-
</button>
|
|
413
|
-
)}
|
|
423
|
+
{answered && <button style={styles.gmButton} onClick={nextRound}>Next round</button>}
|
|
414
424
|
</div>
|
|
415
425
|
</div>
|
|
416
426
|
)}
|