@mblinkov/whats-missing 20.0.4 → 20.0.6
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 +11 -18
- package/dist/whats-missing.es.js +61 -61
- package/package.json +1 -1
- package/src/Game.styles.ts +8 -1
- package/src/Game.tsx +11 -18
|
@@ -1,36 +1,29 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),oe=window.origin+"/cloud/speakid/games/whatsmissing/",M=(r,c)=>r.map(([a,o])=>({src:`${oe}${c}/${o.replace(/\s/g,"%20")}.png`,name:o})),ne=[["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"]],re=[["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"]],ie=[["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"]],B={food:M(ne,"food"),animals:M(re,"animals"),toys:M(ie,"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 r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=
|
|
7
|
-
|
|
8
|
-
margin: 0;
|
|
9
|
-
padding: 0;
|
|
10
|
-
height: 100%;
|
|
11
|
-
}
|
|
12
|
-
*, *::before, *::after {
|
|
6
|
+
`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=ae,document.head.appendChild(r)}const le={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:"crisp-edges",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...le}},de=window.origin+"/cloud/speakid/games/whatsmissing/logo.png",ce=()=>{const r=document.createElement("style");r.textContent=`
|
|
7
|
+
#whats-missing-root, #whats-missing-root * {
|
|
13
8
|
box-sizing: border-box;
|
|
14
|
-
}
|
|
15
|
-
body {
|
|
16
9
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#whats-missing-root {
|
|
17
13
|
background-color: #fff;
|
|
18
14
|
color: #1f2937;
|
|
15
|
+
text-align: center;
|
|
19
16
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
outline: none;
|
|
23
|
-
border: none;
|
|
24
|
-
background: none;
|
|
25
|
-
}
|
|
26
|
-
img {
|
|
17
|
+
|
|
18
|
+
#whats-missing-root img {
|
|
27
19
|
max-width: 100%;
|
|
28
20
|
height: auto;
|
|
29
21
|
display: block;
|
|
30
22
|
user-select: none;
|
|
31
23
|
}
|
|
24
|
+
|
|
32
25
|
@keyframes spin {
|
|
33
26
|
from { transform: rotate(0deg); }
|
|
34
27
|
to { transform: rotate(360deg); }
|
|
35
28
|
}
|
|
36
|
-
`,document.head.appendChild(r)},me=(r,c)=>{const
|
|
29
|
+
`,document.head.appendChild(r)},me=(r,c)=>{const a=Array.from({length:r.length+1},()=>Array(c.length+1).fill(0));for(let o=0;o<=r.length;o++)a[o][0]=o;for(let o=0;o<=c.length;o++)a[0][o]=o;for(let o=1;o<=r.length;o++)for(let l=1;l<=c.length;l++)a[o][l]=r[o-1]===c[l-1]?a[o-1][l-1]:Math.min(a[o-1][l-1],a[o][l-1],a[o-1][l])+1;return a[r.length][c.length]};function ge(){n.useEffect(()=>{ce()},[]);const[r,c]=n.useState(null),[a,o]=n.useState([]),[l,_]=n.useState(4),[h,L]=n.useState(!1),[f,W]=n.useState(1),[u,$]=n.useState(null),[m,y]=n.useState("ready"),[E,G]=n.useState(3),[k,C]=n.useState(7),[T,F]=n.useState(20),[K,v]=n.useState(0),[b,z]=n.useState(!1),[w,D]=n.useState(""),[p,R]=n.useState(!1),[I,q]=n.useState(!1),[P,x]=n.useState(null),[Z,A]=n.useState([]),[J,U]=n.useState([]),[j,Q]=n.useState(!1);n.useEffect(()=>{const t=()=>Q(window.innerWidth<768);return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const Y=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),N=()=>{if(!r)return;const t=Y(B[r]);o(t),L(!0),z(!1),W(1),v(0),A([]),U([]),O(t,[],!0)},O=(t=a,i=J,g=!1)=>{const d=Y(t.length?t:B[r]);let S=Math.floor(Math.random()*d.length),H=d[S].name,V=0;for(;i.includes(H)&&V<20;)S=Math.floor(Math.random()*d.length),H=d[S].name,V++;o(d),$(S),U([...i,H]),R(!1),D(""),F(20),x(null),g?(y("ready"),G(3),C(7)):(y("memorize"),C(7))};n.useEffect(()=>{if(!(!h||b||p)){if(m==="ready")if(E<=0)y("memorize");else{const t=setTimeout(()=>G(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="memorize")if(k<=0)y("guess");else{const t=setTimeout(()=>C(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="guess"){if(T<=0){R(!0),x("wrong");const i=a[u].name;A(g=>[...g,{round:f,answer:w,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}}},[m,E,k,T,h,b,p,a,u,f,w]);const X=()=>{if(u===null||I)return;const t=a[u].name,i=w.toLowerCase().trim();let g="wrong";i===t?(v(d=>d+1),x("correct"),g="correct"):me(i,t)===1?(v(d=>d+.5),x("almost"),g="almost"):(x("wrong"),g="wrong"),A(d=>[...d,{round:f,answer:i,correct:t,result:g}]),q(!0),setTimeout(()=>{q(!1),R(!0)},600)},ee=()=>f<l?(W(t=>t+1),O()):z(!0),te=()=>{L(!1),z(!1),c(null)},se=n.useMemo(()=>e.jsx("div",{style:s.gmLogoFixed,children:e.jsx("img",{src:de,alt:"SPEAKID Logo",style:s.gmLogoImg})}),[]);return e.jsxs("div",{id:"whats-missing-root",children:[!j&&se,!r&&!h&&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:()=>c(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,...l===t?s.gmButtonActive:{}},onClick:()=>_(t),children:t},t))})]})]}),r&&!h&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsxs("h1",{style:s.gmHeadline1,children:["Theme selected: ",r]}),e.jsxs("p",{style:s.gmBodyM,children:["Rounds: ",l]}),e.jsx("button",{style:s.gmButton,onClick:N,children:"▶ Start game"})]}),b&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",K," / ",l]}),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:Z.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:te,children:"⬅️ Choose theme"})]})]}),h&&!b&&e.jsxs("div",{style:s.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:{...s.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:s.gmHourglass,children:"⏳"})]}),m==="memorize"&&e.jsxs("p",{style:{...s.gmBodyM,color:"#10b981"},children:["MEMORIZE (",k,")"]}),m==="guess"&&!p&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",T,"s"]})]}),m!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:j?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:j?"150px":"210px",gap:j?"12px":"20px",justifyItems:"center",...window.innerWidth>2e3?{gridTemplateColumns:"repeat(3, 260px)",gridAutoRows:"260px",gap:"28px"}:{},...window.innerWidth>2560?{gridTemplateColumns:"repeat(3, 300px)",gridAutoRows:"300px",gap:"32px"}:{}},children:a.map((t,i)=>{const g=u===i&&m==="guess"&&!p;return e.jsx("div",{style:{...s.gmCard,...P==="correct"&&u===i?s.gmCorrect:{},...P==="wrong"&&u===i?s.gmWrong:{}},children:!g&&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:[m==="guess"&&!p&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:w,onChange:t=>D(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:X,disabled:I,children:I?"...":"Check"})]}),p&&e.jsx("button",{style:s.gmButton,onClick:ee,children:"Next round"})]})]})]})}exports.Game=ge;exports.themes=B;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as o, jsxs as s, Fragment as
|
|
1
|
+
import { jsx as o, jsxs as s, Fragment as ie } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect as L, useState as l, useMemo as se } from "react";
|
|
3
3
|
const le = window.origin + "/cloud/speakid/games/whatsmissing/", W = (r, m) => r.map(([a, n]) => ({
|
|
4
4
|
src: `${le}${m}/${n.replace(/\s/g, "%20")}.png`,
|
|
@@ -69,7 +69,7 @@ const le = window.origin + "/cloud/speakid/games/whatsmissing/", W = (r, m) => r
|
|
|
69
69
|
["teddy_bear", "teddy bear"],
|
|
70
70
|
["yo-yo", "yo-yo"],
|
|
71
71
|
["crayons", "crayons"]
|
|
72
|
-
],
|
|
72
|
+
], K = {
|
|
73
73
|
food: W(ae, "food"),
|
|
74
74
|
animals: W(de, "animals"),
|
|
75
75
|
toys: W(ce, "toys")
|
|
@@ -209,7 +209,7 @@ const ge = {
|
|
|
209
209
|
overflow: "hidden",
|
|
210
210
|
textOverflow: "ellipsis"
|
|
211
211
|
},
|
|
212
|
-
// ✅
|
|
212
|
+
// ✅ Обновлено только для качества логотипа
|
|
213
213
|
gmLogoFixed: {
|
|
214
214
|
position: "absolute",
|
|
215
215
|
top: "16px",
|
|
@@ -217,51 +217,51 @@ const ge = {
|
|
|
217
217
|
width: "120px",
|
|
218
218
|
zIndex: 10,
|
|
219
219
|
pointerEvents: "none",
|
|
220
|
-
background: "transparent"
|
|
220
|
+
background: "transparent",
|
|
221
|
+
transform: "none",
|
|
222
|
+
willChange: "auto"
|
|
221
223
|
},
|
|
222
224
|
gmLogoImg: {
|
|
223
225
|
height: "clamp(28px, 5vw, 40px)",
|
|
224
226
|
width: "auto",
|
|
225
|
-
background: "transparent"
|
|
227
|
+
background: "transparent",
|
|
228
|
+
objectFit: "contain",
|
|
229
|
+
imageRendering: "crisp-edges",
|
|
230
|
+
transform: "translateZ(0)",
|
|
231
|
+
backfaceVisibility: "hidden",
|
|
232
|
+
WebkitFontSmoothing: "antialiased"
|
|
226
233
|
},
|
|
227
234
|
gmHourglass: {
|
|
228
235
|
fontSize: "42px",
|
|
229
236
|
...ge
|
|
230
237
|
}
|
|
231
|
-
}, pe = window.origin + "/cloud/speakid/games/whatsmissing/logo.png",
|
|
238
|
+
}, pe = window.origin + "/cloud/speakid/games/whatsmissing/logo.png", he = () => {
|
|
232
239
|
const r = document.createElement("style");
|
|
233
240
|
r.textContent = `
|
|
234
|
-
|
|
235
|
-
margin: 0;
|
|
236
|
-
padding: 0;
|
|
237
|
-
height: 100%;
|
|
238
|
-
}
|
|
239
|
-
*, *::before, *::after {
|
|
241
|
+
#whats-missing-root, #whats-missing-root * {
|
|
240
242
|
box-sizing: border-box;
|
|
241
|
-
}
|
|
242
|
-
body {
|
|
243
243
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
#whats-missing-root {
|
|
244
247
|
background-color: #fff;
|
|
245
248
|
color: #1f2937;
|
|
249
|
+
text-align: center;
|
|
246
250
|
}
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
outline: none;
|
|
250
|
-
border: none;
|
|
251
|
-
background: none;
|
|
252
|
-
}
|
|
253
|
-
img {
|
|
251
|
+
|
|
252
|
+
#whats-missing-root img {
|
|
254
253
|
max-width: 100%;
|
|
255
254
|
height: auto;
|
|
256
255
|
display: block;
|
|
257
256
|
user-select: none;
|
|
258
257
|
}
|
|
258
|
+
|
|
259
259
|
@keyframes spin {
|
|
260
260
|
from { transform: rotate(0deg); }
|
|
261
261
|
to { transform: rotate(360deg); }
|
|
262
262
|
}
|
|
263
263
|
`, document.head.appendChild(r);
|
|
264
|
-
},
|
|
264
|
+
}, ue = (r, m) => {
|
|
265
265
|
const a = Array.from({ length: r.length + 1 }, () => Array(m.length + 1).fill(0));
|
|
266
266
|
for (let n = 0; n <= r.length; n++) a[n][0] = n;
|
|
267
267
|
for (let n = 0; n <= m.length; n++) a[0][n] = n;
|
|
@@ -272,26 +272,26 @@ const ge = {
|
|
|
272
272
|
};
|
|
273
273
|
function xe() {
|
|
274
274
|
L(() => {
|
|
275
|
-
|
|
275
|
+
he();
|
|
276
276
|
}, []);
|
|
277
|
-
const [r, m] = l(null), [a, n] = l([]), [d,
|
|
277
|
+
const [r, m] = l(null), [a, n] = l([]), [d, O] = l(4), [f, j] = l(!1), [x, E] = l(1), [h, Z] = l(null), [g, b] = l("ready"), [G, F] = l(3), [v, S] = l(7), [z, D] = l(20), [J, R] = l(0), [w, I] = l(!1), [k, U] = l(""), [u, A] = l(!1), [H, Y] = l(!1), [N, y] = l(null), [Q, M] = l([]), [X, P] = l([]), [C, ee] = l(!1);
|
|
278
278
|
L(() => {
|
|
279
|
-
const e = () =>
|
|
279
|
+
const e = () => ee(window.innerWidth < 768);
|
|
280
280
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
281
281
|
}, []);
|
|
282
|
-
const
|
|
282
|
+
const V = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), _ = () => {
|
|
283
283
|
if (!r) return;
|
|
284
|
-
const e =
|
|
285
|
-
n(e), j(!0), I(!1), E(1), R(0), M([]), P([]),
|
|
286
|
-
},
|
|
287
|
-
const c =
|
|
288
|
-
let T = Math.floor(Math.random() * c.length), B = c[T].name,
|
|
289
|
-
for (; i.includes(B) &&
|
|
290
|
-
T = Math.floor(Math.random() * c.length), B = c[T].name,
|
|
291
|
-
n(c),
|
|
284
|
+
const e = V(K[r]);
|
|
285
|
+
n(e), j(!0), I(!1), E(1), R(0), M([]), P([]), $(e, [], !0);
|
|
286
|
+
}, $ = (e = a, i = X, p = !1) => {
|
|
287
|
+
const c = V(e.length ? e : K[r]);
|
|
288
|
+
let T = Math.floor(Math.random() * c.length), B = c[T].name, q = 0;
|
|
289
|
+
for (; i.includes(B) && q < 20; )
|
|
290
|
+
T = Math.floor(Math.random() * c.length), B = c[T].name, q++;
|
|
291
|
+
n(c), Z(T), P([...i, B]), A(!1), U(""), D(20), y(null), p ? (b("ready"), F(3), S(7)) : (b("memorize"), S(7));
|
|
292
292
|
};
|
|
293
293
|
L(() => {
|
|
294
|
-
if (!(!f || w ||
|
|
294
|
+
if (!(!f || w || u)) {
|
|
295
295
|
if (g === "ready")
|
|
296
296
|
if (G <= 0)
|
|
297
297
|
b("memorize");
|
|
@@ -309,7 +309,7 @@ function xe() {
|
|
|
309
309
|
if (g === "guess") {
|
|
310
310
|
if (z <= 0) {
|
|
311
311
|
A(!0), y("wrong");
|
|
312
|
-
const i = a[
|
|
312
|
+
const i = a[h].name;
|
|
313
313
|
M((p) => [
|
|
314
314
|
...p,
|
|
315
315
|
{ round: x, answer: k, correct: i, result: "wrong" }
|
|
@@ -327,30 +327,30 @@ function xe() {
|
|
|
327
327
|
z,
|
|
328
328
|
f,
|
|
329
329
|
w,
|
|
330
|
-
h,
|
|
331
|
-
a,
|
|
332
330
|
u,
|
|
331
|
+
a,
|
|
332
|
+
h,
|
|
333
333
|
x,
|
|
334
334
|
k
|
|
335
335
|
]);
|
|
336
|
-
const
|
|
337
|
-
if (
|
|
338
|
-
const e = a[
|
|
336
|
+
const te = () => {
|
|
337
|
+
if (h === null || H) return;
|
|
338
|
+
const e = a[h].name, i = k.toLowerCase().trim();
|
|
339
339
|
let p = "wrong";
|
|
340
|
-
i === e ? (R((c) => c + 1), y("correct"), p = "correct") :
|
|
340
|
+
i === e ? (R((c) => c + 1), y("correct"), p = "correct") : ue(i, e) === 1 ? (R((c) => c + 0.5), y("almost"), p = "almost") : (y("wrong"), p = "wrong"), M((c) => [
|
|
341
341
|
...c,
|
|
342
342
|
{ round: x, answer: i, correct: e, result: p }
|
|
343
343
|
]), Y(!0), setTimeout(() => {
|
|
344
344
|
Y(!1), A(!0);
|
|
345
345
|
}, 600);
|
|
346
|
-
},
|
|
346
|
+
}, oe = () => x < d ? (E((e) => e + 1), $()) : I(!0), ne = () => {
|
|
347
347
|
j(!1), I(!1), m(null);
|
|
348
|
-
},
|
|
348
|
+
}, re = se(
|
|
349
349
|
() => /* @__PURE__ */ o("div", { style: t.gmLogoFixed, children: /* @__PURE__ */ o("img", { src: pe, alt: "SPEAKID Logo", style: t.gmLogoImg }) }),
|
|
350
350
|
[]
|
|
351
351
|
);
|
|
352
|
-
return /* @__PURE__ */ s(
|
|
353
|
-
!C &&
|
|
352
|
+
return /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
|
|
353
|
+
!C && re,
|
|
354
354
|
!r && !f && /* @__PURE__ */ s("div", { style: t.gmCenterScreen, children: [
|
|
355
355
|
/* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
356
356
|
/* @__PURE__ */ o("p", { style: t.gmBodyM, children: "Select a theme:" }),
|
|
@@ -364,7 +364,7 @@ function xe() {
|
|
|
364
364
|
...t.gmButton,
|
|
365
365
|
...d === e ? t.gmButtonActive : {}
|
|
366
366
|
},
|
|
367
|
-
onClick: () =>
|
|
367
|
+
onClick: () => O(e),
|
|
368
368
|
children: e
|
|
369
369
|
},
|
|
370
370
|
e
|
|
@@ -380,13 +380,13 @@ function xe() {
|
|
|
380
380
|
"Rounds: ",
|
|
381
381
|
d
|
|
382
382
|
] }),
|
|
383
|
-
/* @__PURE__ */ o("button", { style: t.gmButton, onClick:
|
|
383
|
+
/* @__PURE__ */ o("button", { style: t.gmButton, onClick: _, children: "▶ Start game" })
|
|
384
384
|
] }),
|
|
385
385
|
w && /* @__PURE__ */ s("div", { style: t.gmCenterScreen, children: [
|
|
386
386
|
/* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "Results" }),
|
|
387
387
|
/* @__PURE__ */ s("h2", { style: t.gmHeadline3, children: [
|
|
388
388
|
"Your score: ",
|
|
389
|
-
|
|
389
|
+
J,
|
|
390
390
|
" / ",
|
|
391
391
|
d
|
|
392
392
|
] }),
|
|
@@ -397,7 +397,7 @@ function xe() {
|
|
|
397
397
|
/* @__PURE__ */ o("th", { children: "Correct" }),
|
|
398
398
|
/* @__PURE__ */ o("th", { children: "Result" })
|
|
399
399
|
] }) }),
|
|
400
|
-
/* @__PURE__ */ o("tbody", { children:
|
|
400
|
+
/* @__PURE__ */ o("tbody", { children: Q.map((e, i) => /* @__PURE__ */ s("tr", { children: [
|
|
401
401
|
/* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.round }),
|
|
402
402
|
/* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.answer || "—" }),
|
|
403
403
|
/* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.correct }),
|
|
@@ -405,8 +405,8 @@ function xe() {
|
|
|
405
405
|
] }, i)) })
|
|
406
406
|
] }),
|
|
407
407
|
/* @__PURE__ */ s("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
408
|
-
/* @__PURE__ */ o("button", { style: t.gmButton, onClick:
|
|
409
|
-
/* @__PURE__ */ o("button", { style: t.gmButton, onClick:
|
|
408
|
+
/* @__PURE__ */ o("button", { style: t.gmButton, onClick: _, children: "🔁 Play again" }),
|
|
409
|
+
/* @__PURE__ */ o("button", { style: t.gmButton, onClick: ne, children: "⬅️ Choose theme" })
|
|
410
410
|
] })
|
|
411
411
|
] }),
|
|
412
412
|
f && !w && /* @__PURE__ */ s("div", { style: t.gmGameLayout, children: [
|
|
@@ -421,7 +421,7 @@ function xe() {
|
|
|
421
421
|
alignItems: "center"
|
|
422
422
|
},
|
|
423
423
|
children: [
|
|
424
|
-
g === "ready" && /* @__PURE__ */ s(
|
|
424
|
+
g === "ready" && /* @__PURE__ */ s(ie, { children: [
|
|
425
425
|
/* @__PURE__ */ o("h1", { style: { ...t.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
|
|
426
426
|
/* @__PURE__ */ o("div", { style: t.gmHourglass, children: "⏳" })
|
|
427
427
|
] }),
|
|
@@ -430,7 +430,7 @@ function xe() {
|
|
|
430
430
|
v,
|
|
431
431
|
")"
|
|
432
432
|
] }),
|
|
433
|
-
g === "guess" && !
|
|
433
|
+
g === "guess" && !u && /* @__PURE__ */ s("p", { style: t.gmBodyM, children: [
|
|
434
434
|
"⏳ Time left: ",
|
|
435
435
|
z,
|
|
436
436
|
"s"
|
|
@@ -459,14 +459,14 @@ function xe() {
|
|
|
459
459
|
} : {}
|
|
460
460
|
},
|
|
461
461
|
children: a.map((e, i) => {
|
|
462
|
-
const p =
|
|
462
|
+
const p = h === i && g === "guess" && !u;
|
|
463
463
|
return /* @__PURE__ */ o(
|
|
464
464
|
"div",
|
|
465
465
|
{
|
|
466
466
|
style: {
|
|
467
467
|
...t.gmCard,
|
|
468
|
-
...N === "correct" &&
|
|
469
|
-
...N === "wrong" &&
|
|
468
|
+
...N === "correct" && h === i ? t.gmCorrect : {},
|
|
469
|
+
...N === "wrong" && h === i ? t.gmWrong : {}
|
|
470
470
|
},
|
|
471
471
|
children: !p && /* @__PURE__ */ o(
|
|
472
472
|
"img",
|
|
@@ -487,7 +487,7 @@ function xe() {
|
|
|
487
487
|
}
|
|
488
488
|
),
|
|
489
489
|
/* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
490
|
-
g === "guess" && !
|
|
490
|
+
g === "guess" && !u && /* @__PURE__ */ s("div", { children: [
|
|
491
491
|
/* @__PURE__ */ o(
|
|
492
492
|
"input",
|
|
493
493
|
{
|
|
@@ -502,18 +502,18 @@ function xe() {
|
|
|
502
502
|
"button",
|
|
503
503
|
{
|
|
504
504
|
style: { ...t.gmButton, marginLeft: 8 },
|
|
505
|
-
onClick:
|
|
505
|
+
onClick: te,
|
|
506
506
|
disabled: H,
|
|
507
507
|
children: H ? "..." : "Check"
|
|
508
508
|
}
|
|
509
509
|
)
|
|
510
510
|
] }),
|
|
511
|
-
|
|
511
|
+
u && /* @__PURE__ */ o("button", { style: t.gmButton, onClick: oe, children: "Next round" })
|
|
512
512
|
] })
|
|
513
513
|
] })
|
|
514
514
|
] });
|
|
515
515
|
}
|
|
516
516
|
export {
|
|
517
517
|
xe as Game,
|
|
518
|
-
|
|
518
|
+
K as themes
|
|
519
519
|
};
|
package/package.json
CHANGED
package/src/Game.styles.ts
CHANGED
|
@@ -174,7 +174,7 @@ export const styles: Record<string, CSSProperties> = {
|
|
|
174
174
|
textOverflow: "ellipsis",
|
|
175
175
|
},
|
|
176
176
|
|
|
177
|
-
// ✅
|
|
177
|
+
// ✅ Обновлено только для качества логотипа
|
|
178
178
|
gmLogoFixed: {
|
|
179
179
|
position: "absolute",
|
|
180
180
|
top: "16px",
|
|
@@ -183,12 +183,19 @@ export const styles: Record<string, CSSProperties> = {
|
|
|
183
183
|
zIndex: 10,
|
|
184
184
|
pointerEvents: "none",
|
|
185
185
|
background: "transparent",
|
|
186
|
+
transform: "none",
|
|
187
|
+
willChange: "auto",
|
|
186
188
|
},
|
|
187
189
|
|
|
188
190
|
gmLogoImg: {
|
|
189
191
|
height: "clamp(28px, 5vw, 40px)",
|
|
190
192
|
width: "auto",
|
|
191
193
|
background: "transparent",
|
|
194
|
+
objectFit: "contain",
|
|
195
|
+
imageRendering: "crisp-edges",
|
|
196
|
+
transform: "translateZ(0)",
|
|
197
|
+
backfaceVisibility: "hidden",
|
|
198
|
+
WebkitFontSmoothing: "antialiased",
|
|
192
199
|
},
|
|
193
200
|
|
|
194
201
|
gmReadyWrapper: {
|
package/src/Game.tsx
CHANGED
|
@@ -13,34 +13,28 @@ type RoundResult = {
|
|
|
13
13
|
result: "correct" | "almost" | "wrong";
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
+
// ✅ только изоляция, всё остальное без изменений
|
|
16
17
|
const globalReset = () => {
|
|
17
18
|
const style = document.createElement("style");
|
|
18
19
|
style.textContent = `
|
|
19
|
-
|
|
20
|
-
margin: 0;
|
|
21
|
-
padding: 0;
|
|
22
|
-
height: 100%;
|
|
23
|
-
}
|
|
24
|
-
*, *::before, *::after {
|
|
20
|
+
#whats-missing-root, #whats-missing-root * {
|
|
25
21
|
box-sizing: border-box;
|
|
26
|
-
}
|
|
27
|
-
body {
|
|
28
22
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
#whats-missing-root {
|
|
29
26
|
background-color: #fff;
|
|
30
27
|
color: #1f2937;
|
|
28
|
+
text-align: center;
|
|
31
29
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
outline: none;
|
|
35
|
-
border: none;
|
|
36
|
-
background: none;
|
|
37
|
-
}
|
|
38
|
-
img {
|
|
30
|
+
|
|
31
|
+
#whats-missing-root img {
|
|
39
32
|
max-width: 100%;
|
|
40
33
|
height: auto;
|
|
41
34
|
display: block;
|
|
42
35
|
user-select: none;
|
|
43
36
|
}
|
|
37
|
+
|
|
44
38
|
@keyframes spin {
|
|
45
39
|
from { transform: rotate(0deg); }
|
|
46
40
|
to { transform: rotate(360deg); }
|
|
@@ -224,7 +218,6 @@ export default function Game() {
|
|
|
224
218
|
setTheme(null);
|
|
225
219
|
};
|
|
226
220
|
|
|
227
|
-
// ✅ мемоизированный логотип (больше не мигает)
|
|
228
221
|
const MemoizedLogo = useMemo(
|
|
229
222
|
() => (
|
|
230
223
|
<div style={styles.gmLogoFixed}>
|
|
@@ -235,7 +228,7 @@ export default function Game() {
|
|
|
235
228
|
);
|
|
236
229
|
|
|
237
230
|
return (
|
|
238
|
-
|
|
231
|
+
<div id="whats-missing-root">
|
|
239
232
|
{!isMobile && MemoizedLogo}
|
|
240
233
|
|
|
241
234
|
{!theme && !started && (
|
|
@@ -433,6 +426,6 @@ export default function Game() {
|
|
|
433
426
|
</div>
|
|
434
427
|
</div>
|
|
435
428
|
)}
|
|
436
|
-
|
|
429
|
+
</div>
|
|
437
430
|
);
|
|
438
431
|
}
|