@mblinkov/whats-missing 20.0.8 → 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 +13 -5
- package/dist/whats-missing.es.js +20 -12
- package/package.json +1 -1
- package/src/Game.tsx +14 -5
|
@@ -9,20 +9,28 @@
|
|
|
9
9
|
padding: 0;
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
|
-
|
|
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;
|
|
13
17
|
}
|
|
14
18
|
|
|
15
19
|
#whats-missing-root {
|
|
16
20
|
all: unset;
|
|
17
21
|
display: block;
|
|
18
|
-
|
|
22
|
+
position: relative;
|
|
23
|
+
left: 0;
|
|
24
|
+
top: 0;
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
width: 100%;
|
|
19
27
|
min-height: 100vh;
|
|
20
28
|
margin: 0;
|
|
21
29
|
padding: 0;
|
|
22
|
-
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
23
|
-
background-attachment: fixed;
|
|
24
30
|
color: #1f2937;
|
|
25
31
|
text-align: center;
|
|
32
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
33
|
+
background-size: cover;
|
|
26
34
|
}
|
|
27
35
|
|
|
28
36
|
#whats-missing-root, #whats-missing-root * {
|
|
@@ -41,4 +49,4 @@
|
|
|
41
49
|
from { transform: rotate(0deg); }
|
|
42
50
|
to { transform: rotate(360deg); }
|
|
43
51
|
}
|
|
44
|
-
`,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),[
|
|
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
|
@@ -243,20 +243,28 @@ const ge = {
|
|
|
243
243
|
padding: 0;
|
|
244
244
|
width: 100%;
|
|
245
245
|
height: 100%;
|
|
246
|
-
|
|
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;
|
|
247
251
|
}
|
|
248
252
|
|
|
249
253
|
#whats-missing-root {
|
|
250
254
|
all: unset;
|
|
251
255
|
display: block;
|
|
252
|
-
|
|
256
|
+
position: relative;
|
|
257
|
+
left: 0;
|
|
258
|
+
top: 0;
|
|
259
|
+
overflow: hidden;
|
|
260
|
+
width: 100%;
|
|
253
261
|
min-height: 100vh;
|
|
254
262
|
margin: 0;
|
|
255
263
|
padding: 0;
|
|
256
|
-
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
257
|
-
background-attachment: fixed;
|
|
258
264
|
color: #1f2937;
|
|
259
265
|
text-align: center;
|
|
266
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
267
|
+
background-size: cover;
|
|
260
268
|
}
|
|
261
269
|
|
|
262
270
|
#whats-missing-root, #whats-missing-root * {
|
|
@@ -289,7 +297,7 @@ function ye() {
|
|
|
289
297
|
L(() => {
|
|
290
298
|
pe();
|
|
291
299
|
}, []);
|
|
292
|
-
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([]), [
|
|
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);
|
|
293
301
|
L(() => {
|
|
294
302
|
const e = () => ee(window.innerWidth < 768);
|
|
295
303
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
@@ -300,10 +308,10 @@ function ye() {
|
|
|
300
308
|
n(e), j(!0), I(!1), E(1), R(0), M([]), P([]), $(e, [], !0);
|
|
301
309
|
}, $ = (e = a, i = X, p = !1) => {
|
|
302
310
|
const c = V(e.length ? e : K[r]);
|
|
303
|
-
let
|
|
311
|
+
let C = Math.floor(Math.random() * c.length), B = c[C].name, q = 0;
|
|
304
312
|
for (; i.includes(B) && q < 20; )
|
|
305
|
-
|
|
306
|
-
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));
|
|
307
315
|
};
|
|
308
316
|
L(() => {
|
|
309
317
|
if (!(!f || w || u)) {
|
|
@@ -382,7 +390,7 @@ function ye() {
|
|
|
382
390
|
[]
|
|
383
391
|
);
|
|
384
392
|
return /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
|
|
385
|
-
!
|
|
393
|
+
!v && re,
|
|
386
394
|
!r && !f && /* @__PURE__ */ s("div", { style: t.gmCenterScreen, children: [
|
|
387
395
|
/* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
388
396
|
/* @__PURE__ */ o("p", { style: t.gmBodyM, children: "Select a theme:" }),
|
|
@@ -475,9 +483,9 @@ function ye() {
|
|
|
475
483
|
{
|
|
476
484
|
style: {
|
|
477
485
|
...t.gmGrid,
|
|
478
|
-
gridTemplateColumns:
|
|
479
|
-
gridAutoRows:
|
|
480
|
-
gap:
|
|
486
|
+
gridTemplateColumns: v ? "repeat(2, 1fr)" : "repeat(3, 210px)",
|
|
487
|
+
gridAutoRows: v ? "150px" : "210px",
|
|
488
|
+
gap: v ? "12px" : "20px",
|
|
481
489
|
justifyItems: "center",
|
|
482
490
|
...window.innerWidth > 2e3 ? {
|
|
483
491
|
gridTemplateColumns: "repeat(3, 260px)",
|
package/package.json
CHANGED
package/src/Game.tsx
CHANGED
|
@@ -10,7 +10,8 @@ type RoundResult = {
|
|
|
10
10
|
correct: string;
|
|
11
11
|
result: "correct" | "almost" | "wrong";
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
|
|
14
|
+
// ✅ Финальный reset без смещений и цветовых различий
|
|
14
15
|
const globalReset = () => {
|
|
15
16
|
const style = document.createElement("style");
|
|
16
17
|
style.textContent = `
|
|
@@ -19,20 +20,28 @@ const globalReset = () => {
|
|
|
19
20
|
padding: 0;
|
|
20
21
|
width: 100%;
|
|
21
22
|
height: 100%;
|
|
22
|
-
|
|
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;
|
|
23
28
|
}
|
|
24
29
|
|
|
25
30
|
#whats-missing-root {
|
|
26
31
|
all: unset;
|
|
27
32
|
display: block;
|
|
28
|
-
|
|
33
|
+
position: relative;
|
|
34
|
+
left: 0;
|
|
35
|
+
top: 0;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
width: 100%;
|
|
29
38
|
min-height: 100vh;
|
|
30
39
|
margin: 0;
|
|
31
40
|
padding: 0;
|
|
32
|
-
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
33
|
-
background-attachment: fixed;
|
|
34
41
|
color: #1f2937;
|
|
35
42
|
text-align: center;
|
|
43
|
+
background: linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%);
|
|
44
|
+
background-size: cover;
|
|
36
45
|
}
|
|
37
46
|
|
|
38
47
|
#whats-missing-root, #whats-missing-root * {
|