@mblinkov/whats-missing 20.0.7 → 20.0.9
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 +27 -4
- package/dist/whats-missing.es.js +51 -28
- package/package.json +1 -1
- package/src/Game.tsx +27 -4
|
@@ -4,15 +4,38 @@
|
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
5
5
|
}
|
|
6
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:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...le}},de=()=>{const r=document.createElement("style");r.textContent=`
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
html, body {
|
|
8
|
+
margin: 0;
|
|
9
|
+
padding: 0;
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
overflow-x: hidden;
|
|
13
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
14
|
+
background-repeat: no-repeat;
|
|
15
|
+
background-attachment: fixed;
|
|
16
|
+
background-size: cover;
|
|
10
17
|
}
|
|
11
18
|
|
|
12
19
|
#whats-missing-root {
|
|
20
|
+
all: unset;
|
|
21
|
+
display: block;
|
|
22
|
+
position: relative;
|
|
23
|
+
left: 0;
|
|
24
|
+
top: 0;
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
width: 100%;
|
|
27
|
+
min-height: 100vh;
|
|
28
|
+
margin: 0;
|
|
29
|
+
padding: 0;
|
|
13
30
|
color: #1f2937;
|
|
14
31
|
text-align: center;
|
|
15
32
|
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
33
|
+
background-size: cover;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
#whats-missing-root, #whats-missing-root * {
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
16
39
|
}
|
|
17
40
|
|
|
18
41
|
#whats-missing-root img {
|
|
@@ -26,4 +49,4 @@
|
|
|
26
49
|
from { transform: rotate(0deg); }
|
|
27
50
|
to { transform: rotate(360deg); }
|
|
28
51
|
}
|
|
29
|
-
`,document.head.appendChild(r)},ce=(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 me(){n.useEffect(()=>{de()},[]);const[r,c]=n.useState(null),[a,o]=n.useState([]),[l,_]=n.useState(4),[h,L]=n.useState(!1),[
|
|
52
|
+
`,document.head.appendChild(r)},ce=(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 me(){n.useEffect(()=>{de()},[]);const[r,c]=n.useState(null),[a,o]=n.useState([]),[l,_]=n.useState(4),[h,L]=n.useState(!1),[x,W]=n.useState(1),[u,$]=n.useState(null),[m,y]=n.useState("ready"),[E,G]=n.useState(3),[S,v]=n.useState(7),[C,F]=n.useState(20),[K,T]=n.useState(0),[b,z]=n.useState(!1),[w,D]=n.useState(""),[p,R]=n.useState(!1),[I,q]=n.useState(!1),[P,f]=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),T(0),A([]),U([]),O(t,[],!0)},O=(t=a,i=J,g=!1)=>{const d=Y(t.length?t:B[r]);let k=Math.floor(Math.random()*d.length),H=d[k].name,V=0;for(;i.includes(H)&&V<20;)k=Math.floor(Math.random()*d.length),H=d[k].name,V++;o(d),$(k),U([...i,H]),R(!1),D(""),F(20),f(null),g?(y("ready"),G(3),v(7)):(y("memorize"),v(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(S<=0)y("guess");else{const t=setTimeout(()=>v(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="guess"){if(C<=0){R(!0),f("wrong");const i=a[u].name;A(g=>[...g,{round:x,answer:w,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}}},[m,E,S,C,h,b,p,a,u,x,w]);const X=()=>{if(u===null||I)return;const t=a[u].name,i=w.toLowerCase().trim();let g="wrong";i===t?(T(d=>d+1),f("correct"),g="correct"):ce(i,t)===1?(T(d=>d+.5),f("almost"),g="almost"):(f("wrong"),g="wrong"),A(d=>[...d,{round:x,answer:i,correct:t,result:g}]),q(!0),setTimeout(()=>{q(!1),R(!0)},600)},ee=()=>x<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.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.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 (",S,")"]}),m==="guess"&&!p&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",C,"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=me;exports.themes=B;
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -238,15 +238,38 @@ const ge = {
|
|
|
238
238
|
}, pe = () => {
|
|
239
239
|
const r = document.createElement("style");
|
|
240
240
|
r.textContent = `
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
241
|
+
html, body {
|
|
242
|
+
margin: 0;
|
|
243
|
+
padding: 0;
|
|
244
|
+
width: 100%;
|
|
245
|
+
height: 100%;
|
|
246
|
+
overflow-x: hidden;
|
|
247
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
248
|
+
background-repeat: no-repeat;
|
|
249
|
+
background-attachment: fixed;
|
|
250
|
+
background-size: cover;
|
|
244
251
|
}
|
|
245
252
|
|
|
246
253
|
#whats-missing-root {
|
|
254
|
+
all: unset;
|
|
255
|
+
display: block;
|
|
256
|
+
position: relative;
|
|
257
|
+
left: 0;
|
|
258
|
+
top: 0;
|
|
259
|
+
overflow: hidden;
|
|
260
|
+
width: 100%;
|
|
261
|
+
min-height: 100vh;
|
|
262
|
+
margin: 0;
|
|
263
|
+
padding: 0;
|
|
247
264
|
color: #1f2937;
|
|
248
265
|
text-align: center;
|
|
249
266
|
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
267
|
+
background-size: cover;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
#whats-missing-root, #whats-missing-root * {
|
|
271
|
+
box-sizing: border-box;
|
|
272
|
+
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
250
273
|
}
|
|
251
274
|
|
|
252
275
|
#whats-missing-root img {
|
|
@@ -261,7 +284,7 @@ const ge = {
|
|
|
261
284
|
to { transform: rotate(360deg); }
|
|
262
285
|
}
|
|
263
286
|
`, document.head.appendChild(r);
|
|
264
|
-
},
|
|
287
|
+
}, he = (r, m) => {
|
|
265
288
|
const a = Array.from({ length: r.length + 1 }, () => Array(m.length + 1).fill(0));
|
|
266
289
|
for (let n = 0; n <= r.length; n++) a[n][0] = n;
|
|
267
290
|
for (let n = 0; n <= m.length; n++) a[0][n] = n;
|
|
@@ -274,7 +297,7 @@ function ye() {
|
|
|
274
297
|
L(() => {
|
|
275
298
|
pe();
|
|
276
299
|
}, []);
|
|
277
|
-
const [r, m] = l(null), [a, n] = l([]), [d, O] = l(4), [f, j] = l(!1), [x, E] = l(1), [
|
|
300
|
+
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), [T, 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([]), [v, ee] = l(!1);
|
|
278
301
|
L(() => {
|
|
279
302
|
const e = () => ee(window.innerWidth < 768);
|
|
280
303
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
@@ -285,13 +308,13 @@ function ye() {
|
|
|
285
308
|
n(e), j(!0), I(!1), E(1), R(0), M([]), P([]), $(e, [], !0);
|
|
286
309
|
}, $ = (e = a, i = X, p = !1) => {
|
|
287
310
|
const c = V(e.length ? e : K[r]);
|
|
288
|
-
let
|
|
311
|
+
let C = Math.floor(Math.random() * c.length), B = c[C].name, q = 0;
|
|
289
312
|
for (; i.includes(B) && q < 20; )
|
|
290
|
-
|
|
291
|
-
n(c), Z(
|
|
313
|
+
C = Math.floor(Math.random() * c.length), B = c[C].name, q++;
|
|
314
|
+
n(c), Z(C), P([...i, B]), A(!1), U(""), D(20), y(null), p ? (b("ready"), F(3), S(7)) : (b("memorize"), S(7));
|
|
292
315
|
};
|
|
293
316
|
L(() => {
|
|
294
|
-
if (!(!f || w ||
|
|
317
|
+
if (!(!f || w || u)) {
|
|
295
318
|
if (g === "ready")
|
|
296
319
|
if (G <= 0)
|
|
297
320
|
b("memorize");
|
|
@@ -300,7 +323,7 @@ function ye() {
|
|
|
300
323
|
return () => clearTimeout(e);
|
|
301
324
|
}
|
|
302
325
|
if (g === "memorize")
|
|
303
|
-
if (
|
|
326
|
+
if (T <= 0)
|
|
304
327
|
b("guess");
|
|
305
328
|
else {
|
|
306
329
|
const e = setTimeout(() => S((i) => i - 1), 1e3);
|
|
@@ -309,7 +332,7 @@ function ye() {
|
|
|
309
332
|
if (g === "guess") {
|
|
310
333
|
if (z <= 0) {
|
|
311
334
|
A(!0), y("wrong");
|
|
312
|
-
const i = a[
|
|
335
|
+
const i = a[h].name;
|
|
313
336
|
M((p) => [
|
|
314
337
|
...p,
|
|
315
338
|
{ round: x, answer: k, correct: i, result: "wrong" }
|
|
@@ -323,21 +346,21 @@ function ye() {
|
|
|
323
346
|
}, [
|
|
324
347
|
g,
|
|
325
348
|
G,
|
|
326
|
-
|
|
349
|
+
T,
|
|
327
350
|
z,
|
|
328
351
|
f,
|
|
329
352
|
w,
|
|
330
|
-
h,
|
|
331
|
-
a,
|
|
332
353
|
u,
|
|
354
|
+
a,
|
|
355
|
+
h,
|
|
333
356
|
x,
|
|
334
357
|
k
|
|
335
358
|
]);
|
|
336
359
|
const te = () => {
|
|
337
|
-
if (
|
|
338
|
-
const e = a[
|
|
360
|
+
if (h === null || H) return;
|
|
361
|
+
const e = a[h].name, i = k.toLowerCase().trim();
|
|
339
362
|
let p = "wrong";
|
|
340
|
-
i === e ? (R((c) => c + 1), y("correct"), p = "correct") :
|
|
363
|
+
i === e ? (R((c) => c + 1), y("correct"), p = "correct") : he(i, e) === 1 ? (R((c) => c + 0.5), y("almost"), p = "almost") : (y("wrong"), p = "wrong"), M((c) => [
|
|
341
364
|
...c,
|
|
342
365
|
{ round: x, answer: i, correct: e, result: p }
|
|
343
366
|
]), Y(!0), setTimeout(() => {
|
|
@@ -367,7 +390,7 @@ function ye() {
|
|
|
367
390
|
[]
|
|
368
391
|
);
|
|
369
392
|
return /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
|
|
370
|
-
!
|
|
393
|
+
!v && re,
|
|
371
394
|
!r && !f && /* @__PURE__ */ s("div", { style: t.gmCenterScreen, children: [
|
|
372
395
|
/* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
373
396
|
/* @__PURE__ */ o("p", { style: t.gmBodyM, children: "Select a theme:" }),
|
|
@@ -444,10 +467,10 @@ function ye() {
|
|
|
444
467
|
] }),
|
|
445
468
|
g === "memorize" && /* @__PURE__ */ s("p", { style: { ...t.gmBodyM, color: "#10b981" }, children: [
|
|
446
469
|
"MEMORIZE (",
|
|
447
|
-
|
|
470
|
+
T,
|
|
448
471
|
")"
|
|
449
472
|
] }),
|
|
450
|
-
g === "guess" && !
|
|
473
|
+
g === "guess" && !u && /* @__PURE__ */ s("p", { style: t.gmBodyM, children: [
|
|
451
474
|
"⏳ Time left: ",
|
|
452
475
|
z,
|
|
453
476
|
"s"
|
|
@@ -460,9 +483,9 @@ function ye() {
|
|
|
460
483
|
{
|
|
461
484
|
style: {
|
|
462
485
|
...t.gmGrid,
|
|
463
|
-
gridTemplateColumns:
|
|
464
|
-
gridAutoRows:
|
|
465
|
-
gap:
|
|
486
|
+
gridTemplateColumns: v ? "repeat(2, 1fr)" : "repeat(3, 210px)",
|
|
487
|
+
gridAutoRows: v ? "150px" : "210px",
|
|
488
|
+
gap: v ? "12px" : "20px",
|
|
466
489
|
justifyItems: "center",
|
|
467
490
|
...window.innerWidth > 2e3 ? {
|
|
468
491
|
gridTemplateColumns: "repeat(3, 260px)",
|
|
@@ -476,14 +499,14 @@ function ye() {
|
|
|
476
499
|
} : {}
|
|
477
500
|
},
|
|
478
501
|
children: a.map((e, i) => {
|
|
479
|
-
const p =
|
|
502
|
+
const p = h === i && g === "guess" && !u;
|
|
480
503
|
return /* @__PURE__ */ o(
|
|
481
504
|
"div",
|
|
482
505
|
{
|
|
483
506
|
style: {
|
|
484
507
|
...t.gmCard,
|
|
485
|
-
...N === "correct" &&
|
|
486
|
-
...N === "wrong" &&
|
|
508
|
+
...N === "correct" && h === i ? t.gmCorrect : {},
|
|
509
|
+
...N === "wrong" && h === i ? t.gmWrong : {}
|
|
487
510
|
},
|
|
488
511
|
children: !p && /* @__PURE__ */ o(
|
|
489
512
|
"img",
|
|
@@ -504,7 +527,7 @@ function ye() {
|
|
|
504
527
|
}
|
|
505
528
|
),
|
|
506
529
|
/* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
507
|
-
g === "guess" && !
|
|
530
|
+
g === "guess" && !u && /* @__PURE__ */ s("div", { children: [
|
|
508
531
|
/* @__PURE__ */ o(
|
|
509
532
|
"input",
|
|
510
533
|
{
|
|
@@ -525,7 +548,7 @@ function ye() {
|
|
|
525
548
|
}
|
|
526
549
|
)
|
|
527
550
|
] }),
|
|
528
|
-
|
|
551
|
+
u && /* @__PURE__ */ o("button", { style: t.gmButton, onClick: oe, children: "Next round" })
|
|
529
552
|
] })
|
|
530
553
|
] })
|
|
531
554
|
] });
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -11,19 +11,42 @@ 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
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
html, body {
|
|
19
|
+
margin: 0;
|
|
20
|
+
padding: 0;
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: 100%;
|
|
23
|
+
overflow-x: hidden;
|
|
24
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
25
|
+
background-repeat: no-repeat;
|
|
26
|
+
background-attachment: fixed;
|
|
27
|
+
background-size: cover;
|
|
21
28
|
}
|
|
22
29
|
|
|
23
30
|
#whats-missing-root {
|
|
31
|
+
all: unset;
|
|
32
|
+
display: block;
|
|
33
|
+
position: relative;
|
|
34
|
+
left: 0;
|
|
35
|
+
top: 0;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
width: 100%;
|
|
38
|
+
min-height: 100vh;
|
|
39
|
+
margin: 0;
|
|
40
|
+
padding: 0;
|
|
24
41
|
color: #1f2937;
|
|
25
42
|
text-align: center;
|
|
26
43
|
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
44
|
+
background-size: cover;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
#whats-missing-root, #whats-missing-root * {
|
|
48
|
+
box-sizing: border-box;
|
|
49
|
+
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
27
50
|
}
|
|
28
51
|
|
|
29
52
|
#whats-missing-root img {
|