@mblinkov/whats-missing 0.0.5 → 0.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.css +1 -1
- package/dist/whats-missing.es.js +155 -217
- package/dist/whats-missing.umd.js +1 -1
- package/package.json +5 -2
package/dist/whats-missing.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
{--font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";--text: #1f2937;--muted: #6b7280;--bg: #ffffff;--card: #f9f9f9;--border: #e5e7eb;--accent: #ec4c44;--accent-contrast: #ffffff;--progress: #10b981;--success: #10b981;--error: #ec4c44;--card-size: 210px;--gap: 20px}._gmCenterScreen_skj5s_19,._gmGameLayout_skj5s_19{position:relative;z-index:1;height:100vh;padding:16px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--text);font-family:var(--font-sans)}._gmHeadline1_skj5s_34{font-weight:700;font-size:clamp(28px,4.2vw,40px);line-height:110%}._gmHeadline2_skj5s_35{font-weight:600;font-size:24px;line-height:110%}._gmHeadline3_skj5s_36{font-weight:600;font-size:18px;line-height:120%}._gmBodyL_skj5s_38{font-weight:400;font-size:18px;line-height:140%}._gmBodyM_skj5s_39{font-weight:400;font-size:16px;line-height:140%}._gmBodyS_skj5s_40{font-weight:400;font-size:14px;line-height:140%;color:var(--muted)}._gmButton_skj5s_43{font:600 16px/100% var(--font-sans);padding:10px 16px;border-radius:12px;border:1px solid var(--border);background:var(--accent);color:var(--accent-contrast);cursor:pointer;box-shadow:0 6px 18px #ec4c442e;transition:transform .06s ease,box-shadow .2s ease,background .2s ease,opacity .2s ease}._gmButton_skj5s_43:hover{transform:translateY(-1px);box-shadow:0 10px 24px #ec4c4438}._gmButton_skj5s_43:active{transform:translateY(0);box-shadow:0 4px 12px #ec4c442e}._gmButton_skj5s_43:disabled{opacity:.7;cursor:default}._gmActive_skj5s_58{background:#333!important;color:#fff!important}._gmLogoFixed_skj5s_64{position:fixed;top:16px;left:20px;z-index:1000}._gmLogoFixed_skj5s_64 img{height:clamp(28px,5vw,40px);width:auto}._gmProgressContainer_skj5s_76{width:min(80%,900px);height:10px;background:#eee;border-radius:999px;overflow:hidden;margin-bottom:16px}._gmProgressBar_skj5s_84{height:100%;background:var(--progress);transition:width .3s ease}._gmGrid_skj5s_91{width:100%;max-width:calc(var(--card-size)*3 + var(--gap)*2);margin:0 auto;display:grid;grid-template-columns:repeat(3,var(--card-size));grid-auto-rows:var(--card-size);gap:var(--gap)}._gmCard_skj5s_102{border:1px solid var(--border);border-radius:16px;background:var(--card);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}._gmCard_skj5s_102 img{width:100%;height:100%;object-fit:cover}@keyframes _gmHop_skj5s_121{0%{transform:translateY(0)}30%{transform:translateY(-18px)}60%{transform:translateY(-6px)}to{transform:translateY(0)}}._gmHop_skj5s_121{animation:_gmHop_skj5s_121 .6s ease}._gmCorrect_skj5s_123{border:2px solid var(--success);box-shadow:0 0 18px #10b98173;background:#ecfdf5}._gmWrong_skj5s_128{border:2px solid var(--error);box-shadow:0 0 18px #ec4c4459;background:#fef2f2}@keyframes _gmFadeIn_skj5s_1{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}._gmFade_skj5s_139{animation:_gmFadeIn_skj5s_1 .6s ease}@keyframes _gmPulse_skj5s_145{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}._gmPulse_skj5s_145{animation:_gmPulse_skj5s_145 1s ease-in-out infinite}._gmTable_skj5s_148{margin-top:20px;border-collapse:collapse;width:100%;max-width:480px}._gmTable_skj5s_148 th,._gmTable_skj5s_148 td{padding:6px 12px;text-align:left}._gmCorrect_skj5s_123 td{color:green}._gmAlmost_skj5s_159 td{color:orange}._gmWrong_skj5s_128 td{color:red}._gmInput_skj5s_163{padding:6px 12px;border-radius:6px;border:1px solid #ccc;font-size:16px}@media (max-width: 900px){{--card-size: 180px;--gap: 16px}}@media (max-width: 640px){._gmGrid_skj5s_91{max-width:314px;grid-template-columns:repeat(2,150px);grid-auto-rows:150px;gap:14px}._gmButton_skj5s_43{font-size:14px;padding:9px 14px;border-radius:10px}._gmLogoFixed_skj5s_64{display:none!important}}
|
package/dist/whats-missing.es.js
CHANGED
|
@@ -1,6 +1,31 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
const
|
|
1
|
+
import { jsxs as a, Fragment as rs, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useState as n, useEffect as X } from "react";
|
|
3
|
+
const ns = "_gmCenterScreen_skj5s_19", as = "_gmGameLayout_skj5s_19", cs = "_gmHeadline1_skj5s_34", gs = "_gmHeadline2_skj5s_35", is = "_gmHeadline3_skj5s_36", ls = "_gmBodyL_skj5s_38", ms = "_gmBodyM_skj5s_39", ds = "_gmBodyS_skj5s_40", hs = "_gmButton_skj5s_43", ps = "_gmActive_skj5s_58", js = "_gmLogoFixed_skj5s_64", us = "_gmProgressContainer_skj5s_76", As = "_gmProgressBar_skj5s_84", ks = "_gmGrid_skj5s_91", ws = "_gmCard_skj5s_102", ys = "_gmHop_skj5s_121", Cs = "_gmCorrect_skj5s_123", fs = "_gmWrong_skj5s_128", Es = "_gmFade_skj5s_139", Ts = "_gmFadeIn_skj5s_1", Bs = "_gmPulse_skj5s_145", Fs = "_gmTable_skj5s_148", Rs = "_gmAlmost_skj5s_159", Ss = "_gmInput_skj5s_163", t = {
|
|
4
|
+
gmCenterScreen: ns,
|
|
5
|
+
gmGameLayout: as,
|
|
6
|
+
gmHeadline1: cs,
|
|
7
|
+
gmHeadline2: gs,
|
|
8
|
+
gmHeadline3: is,
|
|
9
|
+
gmBodyL: ls,
|
|
10
|
+
gmBodyM: ms,
|
|
11
|
+
gmBodyS: ds,
|
|
12
|
+
gmButton: hs,
|
|
13
|
+
gmActive: ps,
|
|
14
|
+
gmLogoFixed: js,
|
|
15
|
+
gmProgressContainer: us,
|
|
16
|
+
gmProgressBar: As,
|
|
17
|
+
gmGrid: ks,
|
|
18
|
+
gmCard: ws,
|
|
19
|
+
gmHop: ys,
|
|
20
|
+
gmCorrect: Cs,
|
|
21
|
+
gmWrong: fs,
|
|
22
|
+
gmFade: Es,
|
|
23
|
+
gmFadeIn: Ts,
|
|
24
|
+
gmPulse: Bs,
|
|
25
|
+
gmTable: Fs,
|
|
26
|
+
gmAlmost: Rs,
|
|
27
|
+
gmInput: Ss
|
|
28
|
+
}, Ls = "data:image/png;base64,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", V = {
|
|
4
29
|
animals: [
|
|
5
30
|
"src/assets/Animals/bear.jpg",
|
|
6
31
|
"src/assets/Animals/cat.png",
|
|
@@ -72,133 +97,111 @@ const os = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZEAAABFCAYAAACL+dvaAA
|
|
|
72
97
|
"src/assets/Toys/crayons.jpg",
|
|
73
98
|
"src/assets/Toys/yo-yo.jpg"
|
|
74
99
|
]
|
|
75
|
-
},
|
|
76
|
-
const
|
|
100
|
+
}, W = (c) => (c.split("/").pop() || "").replace(/\.(jpg|png|jpeg|webp)$/i, "").toLowerCase(), Us = (c, l) => {
|
|
101
|
+
const g = Array.from(
|
|
77
102
|
{ length: c.length + 1 },
|
|
78
|
-
() => Array(
|
|
103
|
+
() => Array(l.length + 1).fill(0)
|
|
79
104
|
);
|
|
80
|
-
for (let
|
|
81
|
-
for (let
|
|
82
|
-
for (let
|
|
83
|
-
for (let
|
|
84
|
-
|
|
85
|
-
return
|
|
105
|
+
for (let r = 0; r <= c.length; r++) g[r][0] = r;
|
|
106
|
+
for (let r = 0; r <= l.length; r++) g[0][r] = r;
|
|
107
|
+
for (let r = 1; r <= c.length; r++)
|
|
108
|
+
for (let i = 1; i <= l.length; i++)
|
|
109
|
+
g[r][i] = c[r - 1] === l[i - 1] ? g[r - 1][i - 1] : Math.min(g[r - 1][i - 1], g[r][i - 1], g[r - 1][i]) + 1;
|
|
110
|
+
return g[c.length][l.length];
|
|
86
111
|
};
|
|
87
|
-
function
|
|
88
|
-
const [c,
|
|
112
|
+
function Is() {
|
|
113
|
+
const [c, l] = n(null), [g, r] = n([]), [i, K] = n(4), [u, U] = n(!1), [p, b] = n(1), [h, _] = n(null), [j, w] = n("ready"), [v, x] = n(3), [I, y] = n(7), [N, T] = n(0), [C, B] = n(!1), [D, H] = n(20), [f, P] = n(""), [A, F] = n(!1), [R, Q] = n(!1), [J, k] = n(
|
|
89
114
|
null
|
|
90
|
-
), [Z,
|
|
91
|
-
|
|
92
|
-
const s = () =>
|
|
115
|
+
), [Z, S] = n([]), [q, G] = n([]), [$, ss] = n(!1);
|
|
116
|
+
X(() => {
|
|
117
|
+
const s = () => ss(window.innerWidth < 768);
|
|
93
118
|
return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
|
|
94
119
|
}, []);
|
|
95
|
-
const
|
|
120
|
+
const Y = (s) => [...s].sort(() => Math.random() - 0.5).slice(0, 6), M = () => {
|
|
96
121
|
if (!c) return;
|
|
97
|
-
const s =
|
|
98
|
-
|
|
99
|
-
},
|
|
100
|
-
const
|
|
101
|
-
let
|
|
102
|
-
for (;
|
|
103
|
-
|
|
104
|
-
|
|
122
|
+
const s = Y(V[c]);
|
|
123
|
+
r(s), U(!0), B(!1), b(1), T(0), S([]), G([]), O(s, [], !0);
|
|
124
|
+
}, O = (s = g, o = q, d = !1) => {
|
|
125
|
+
const m = Y(s.length ? s : V[c]);
|
|
126
|
+
let E = Math.floor(Math.random() * m.length), L = m[E], z = 0;
|
|
127
|
+
for (; o.includes(L) && z < 20; )
|
|
128
|
+
E = Math.floor(Math.random() * m.length), L = m[E], z++;
|
|
129
|
+
r(m), _(E), G([...o, L]), F(!1), P(""), H(20), k(null), d ? (w("ready"), x(3), y(7)) : (w("memorize"), y(7));
|
|
105
130
|
};
|
|
106
|
-
|
|
107
|
-
if (!(!
|
|
108
|
-
if (
|
|
109
|
-
if (
|
|
110
|
-
|
|
131
|
+
X(() => {
|
|
132
|
+
if (!(!u || C || A)) {
|
|
133
|
+
if (j === "ready")
|
|
134
|
+
if (v <= 0)
|
|
135
|
+
w("memorize"), y(7);
|
|
111
136
|
else {
|
|
112
|
-
const s = setTimeout(() =>
|
|
137
|
+
const s = setTimeout(() => x((o) => o - 1), 1e3);
|
|
113
138
|
return () => clearTimeout(s);
|
|
114
139
|
}
|
|
115
|
-
if (
|
|
116
|
-
if (
|
|
117
|
-
|
|
140
|
+
if (j === "memorize")
|
|
141
|
+
if (I <= 0)
|
|
142
|
+
w("guess");
|
|
118
143
|
else {
|
|
119
|
-
const s = setTimeout(() =>
|
|
144
|
+
const s = setTimeout(() => y((o) => o - 1), 1e3);
|
|
120
145
|
return () => clearTimeout(s);
|
|
121
146
|
}
|
|
122
|
-
if (
|
|
123
|
-
if (
|
|
124
|
-
|
|
125
|
-
const
|
|
126
|
-
|
|
127
|
-
...
|
|
128
|
-
{ round:
|
|
147
|
+
if (j === "guess") {
|
|
148
|
+
if (D <= 0) {
|
|
149
|
+
F(!0), k("wrong");
|
|
150
|
+
const o = W(g[h]);
|
|
151
|
+
S((d) => [
|
|
152
|
+
...d,
|
|
153
|
+
{ round: p, answer: f, correct: o, result: "wrong" }
|
|
129
154
|
]);
|
|
130
155
|
return;
|
|
131
156
|
}
|
|
132
|
-
const s = setTimeout(() =>
|
|
157
|
+
const s = setTimeout(() => H((o) => o - 1), 1e3);
|
|
133
158
|
return () => clearTimeout(s);
|
|
134
159
|
}
|
|
135
160
|
}
|
|
136
161
|
}, [
|
|
137
|
-
i,
|
|
138
|
-
F,
|
|
139
|
-
b,
|
|
140
|
-
R,
|
|
141
162
|
j,
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
h,
|
|
163
|
+
v,
|
|
164
|
+
I,
|
|
165
|
+
D,
|
|
146
166
|
u,
|
|
147
|
-
|
|
167
|
+
C,
|
|
168
|
+
A,
|
|
169
|
+
g,
|
|
170
|
+
h,
|
|
171
|
+
p,
|
|
172
|
+
f
|
|
148
173
|
]);
|
|
149
|
-
const
|
|
150
|
-
if (h === null ||
|
|
151
|
-
const s =
|
|
152
|
-
let
|
|
153
|
-
|
|
154
|
-
...
|
|
155
|
-
{ round:
|
|
156
|
-
]),
|
|
157
|
-
|
|
174
|
+
const es = () => {
|
|
175
|
+
if (h === null || R) return;
|
|
176
|
+
const s = W(g[h]), o = f.toLowerCase().trim();
|
|
177
|
+
let d = "wrong";
|
|
178
|
+
o === s ? (T((m) => m + 1), k("correct"), d = "correct") : Us(o, s) === 1 ? (T((m) => m + 0.5), k("almost"), d = "almost") : (k("wrong"), d = "wrong"), S((m) => [
|
|
179
|
+
...m,
|
|
180
|
+
{ round: p, answer: o, correct: s, result: d }
|
|
181
|
+
]), Q(!0), setTimeout(() => {
|
|
182
|
+
Q(!1), F(!0);
|
|
158
183
|
}, 600);
|
|
159
|
-
}, es = () => {
|
|
160
|
-
u < n ? (S((s) => s + 1), G()) : C(!0);
|
|
161
184
|
}, ts = () => {
|
|
162
|
-
|
|
185
|
+
p < i ? (b((s) => s + 1), O()) : B(!0);
|
|
186
|
+
}, os = () => {
|
|
187
|
+
U(!1), B(!1), l(null);
|
|
163
188
|
};
|
|
164
|
-
return /* @__PURE__ */
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
{
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
},
|
|
174
|
-
children: /* @__PURE__ */ e(
|
|
175
|
-
"img",
|
|
176
|
-
{
|
|
177
|
-
src: os,
|
|
178
|
-
alt: "SPEAKID Logo",
|
|
179
|
-
style: { height: "clamp(28px, 5vw, 40px)", width: "auto" }
|
|
180
|
-
}
|
|
181
|
-
)
|
|
182
|
-
}
|
|
183
|
-
), {}),
|
|
184
|
-
!c && !j && /* @__PURE__ */ t("div", { className: "centerScreen fade", children: [
|
|
185
|
-
/* @__PURE__ */ e("h1", { className: "headline1", children: "WHAT'S MISSING?" }),
|
|
186
|
-
/* @__PURE__ */ e("p", { className: "bodyM", children: "Select a theme:" }),
|
|
187
|
-
/* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: [
|
|
188
|
-
/* @__PURE__ */ e("button", { className: "button", onClick: () => d("animals"), children: "🐶 Animals" }),
|
|
189
|
-
/* @__PURE__ */ e("button", { className: "button", onClick: () => d("food"), children: "🍎 Food" }),
|
|
190
|
-
/* @__PURE__ */ e("button", { className: "button", onClick: () => d("toys"), children: "🧸 Toys" })
|
|
189
|
+
return /* @__PURE__ */ a(rs, { children: [
|
|
190
|
+
!$ && /* @__PURE__ */ e(() => /* @__PURE__ */ e("div", { className: t.gmLogoFixed, children: /* @__PURE__ */ e("img", { src: Ls, alt: "SPEAKID Logo" }) }), {}),
|
|
191
|
+
!c && !u && /* @__PURE__ */ a("div", { className: t.gmCenterScreen, children: [
|
|
192
|
+
/* @__PURE__ */ e("h1", { className: t.gmHeadline1, children: "WHAT'S MISSING?" }),
|
|
193
|
+
/* @__PURE__ */ e("p", { className: t.gmBodyM, children: "Select a theme:" }),
|
|
194
|
+
/* @__PURE__ */ a("div", { style: { display: "flex", gap: 16 }, children: [
|
|
195
|
+
/* @__PURE__ */ e("button", { className: t.gmButton, onClick: () => l("animals"), children: "🐶 Animals" }),
|
|
196
|
+
/* @__PURE__ */ e("button", { className: t.gmButton, onClick: () => l("food"), children: "🍎 Food" }),
|
|
197
|
+
/* @__PURE__ */ e("button", { className: t.gmButton, onClick: () => l("toys"), children: "🧸 Toys" })
|
|
191
198
|
] }),
|
|
192
|
-
/* @__PURE__ */
|
|
193
|
-
/* @__PURE__ */ e("p", { className:
|
|
199
|
+
/* @__PURE__ */ a("div", { style: { marginTop: 24 }, children: [
|
|
200
|
+
/* @__PURE__ */ e("p", { className: t.gmBodyS, children: "Choose number of rounds:" }),
|
|
194
201
|
/* @__PURE__ */ e("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((s) => /* @__PURE__ */ e(
|
|
195
202
|
"button",
|
|
196
203
|
{
|
|
197
|
-
className:
|
|
198
|
-
style: {
|
|
199
|
-
background: n === s ? "#333" : void 0,
|
|
200
|
-
color: n === s ? "#fff" : void 0
|
|
201
|
-
},
|
|
204
|
+
className: `${t.gmButton} ${i === s ? t.gmActive : ""}`,
|
|
202
205
|
onClick: () => K(s),
|
|
203
206
|
children: s
|
|
204
207
|
},
|
|
@@ -206,161 +209,96 @@ function gs() {
|
|
|
206
209
|
)) })
|
|
207
210
|
] })
|
|
208
211
|
] }),
|
|
209
|
-
c && !
|
|
210
|
-
/* @__PURE__ */
|
|
212
|
+
c && !u && /* @__PURE__ */ a("div", { className: t.gmCenterScreen, children: [
|
|
213
|
+
/* @__PURE__ */ a("h1", { className: t.gmHeadline1, children: [
|
|
211
214
|
"Theme selected: ",
|
|
212
215
|
c
|
|
213
216
|
] }),
|
|
214
|
-
/* @__PURE__ */
|
|
215
|
-
"Rounds: ",
|
|
216
|
-
n
|
|
217
|
-
] }),
|
|
218
|
-
/* @__PURE__ */ e("button", { className: "button", onClick: P, children: "▶ Start game" })
|
|
217
|
+
/* @__PURE__ */ e("button", { className: t.gmButton, onClick: M, children: "▶ Start game" })
|
|
219
218
|
] }),
|
|
220
|
-
|
|
221
|
-
/* @__PURE__ */ e("h1", { className:
|
|
222
|
-
/* @__PURE__ */
|
|
219
|
+
C && /* @__PURE__ */ a("div", { className: t.gmCenterScreen, children: [
|
|
220
|
+
/* @__PURE__ */ e("h1", { className: t.gmHeadline1, children: "Results" }),
|
|
221
|
+
/* @__PURE__ */ a("h2", { className: t.gmHeadline3, children: [
|
|
223
222
|
"Your score: ",
|
|
224
|
-
|
|
223
|
+
N,
|
|
225
224
|
" / ",
|
|
226
|
-
|
|
225
|
+
i
|
|
227
226
|
] }),
|
|
228
|
-
/* @__PURE__ */
|
|
229
|
-
/* @__PURE__ */ e("thead", { children: /* @__PURE__ */
|
|
230
|
-
/* @__PURE__ */ e("th", {
|
|
231
|
-
/* @__PURE__ */ e("th", {
|
|
232
|
-
/* @__PURE__ */ e("th", {
|
|
233
|
-
/* @__PURE__ */ e("th", {
|
|
227
|
+
/* @__PURE__ */ a("table", { className: t.gmTable, children: [
|
|
228
|
+
/* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { children: [
|
|
229
|
+
/* @__PURE__ */ e("th", { children: "Round" }),
|
|
230
|
+
/* @__PURE__ */ e("th", { children: "Your Answer" }),
|
|
231
|
+
/* @__PURE__ */ e("th", { children: "Correct" }),
|
|
232
|
+
/* @__PURE__ */ e("th", { children: "Result" })
|
|
234
233
|
] }) }),
|
|
235
|
-
/* @__PURE__ */ e("tbody", { children: Z.map((s,
|
|
236
|
-
/* @__PURE__ */ e("td", {
|
|
237
|
-
/* @__PURE__ */ e("td", {
|
|
238
|
-
/* @__PURE__ */ e("td", {
|
|
239
|
-
/* @__PURE__ */
|
|
240
|
-
|
|
241
|
-
s.result === "almost" && /* @__PURE__ */ e("span", { style: { color: "orange" }, children: "◐ Almost (0.5)" }),
|
|
242
|
-
s.result === "wrong" && /* @__PURE__ */ e("span", { style: { color: "red" }, children: "✘ Wrong" })
|
|
243
|
-
] })
|
|
244
|
-
] }, r)) })
|
|
234
|
+
/* @__PURE__ */ e("tbody", { children: Z.map((s, o) => /* @__PURE__ */ a("tr", { children: [
|
|
235
|
+
/* @__PURE__ */ e("td", { children: s.round }),
|
|
236
|
+
/* @__PURE__ */ e("td", { children: s.answer || "—" }),
|
|
237
|
+
/* @__PURE__ */ e("td", { children: s.correct }),
|
|
238
|
+
/* @__PURE__ */ e("td", { className: t[`gm${s.result.charAt(0).toUpperCase() + s.result.slice(1)}`], children: s.result })
|
|
239
|
+
] }, o)) })
|
|
245
240
|
] }),
|
|
246
|
-
/* @__PURE__ */
|
|
247
|
-
/* @__PURE__ */ e("button", { className:
|
|
248
|
-
/* @__PURE__ */ e("button", { className:
|
|
241
|
+
/* @__PURE__ */ a("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
|
|
242
|
+
/* @__PURE__ */ e("button", { className: t.gmButton, onClick: M, children: "🔁 Play again" }),
|
|
243
|
+
/* @__PURE__ */ e("button", { className: t.gmButton, onClick: os, children: "⬅️ Choose theme" })
|
|
249
244
|
] })
|
|
250
245
|
] }),
|
|
251
|
-
|
|
252
|
-
/* @__PURE__ */ t(
|
|
246
|
+
u && !C && /* @__PURE__ */ a("div", { className: t.gmGameLayout, children: [
|
|
247
|
+
/* @__PURE__ */ e("div", { className: t.gmProgressContainer, children: /* @__PURE__ */ e(
|
|
253
248
|
"div",
|
|
254
249
|
{
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
display: "flex",
|
|
258
|
-
flexDirection: "column",
|
|
259
|
-
alignItems: "center"
|
|
260
|
-
},
|
|
261
|
-
children: [
|
|
262
|
-
/* @__PURE__ */ e("div", { className: "progressContainer", children: /* @__PURE__ */ e(
|
|
263
|
-
"div",
|
|
264
|
-
{
|
|
265
|
-
className: "progressBar",
|
|
266
|
-
style: { width: `${u / n * 100}%` }
|
|
267
|
-
}
|
|
268
|
-
) }),
|
|
269
|
-
/* @__PURE__ */ t(
|
|
270
|
-
"div",
|
|
271
|
-
{
|
|
272
|
-
style: {
|
|
273
|
-
minHeight: 52,
|
|
274
|
-
display: "flex",
|
|
275
|
-
alignItems: "center"
|
|
276
|
-
},
|
|
277
|
-
children: [
|
|
278
|
-
i === "ready" && /* @__PURE__ */ e("h1", { className: "headline1", style: { color: "#ec4c44" }, children: "GET READY" }),
|
|
279
|
-
(i === "memorize" || i === "guess") && /* @__PURE__ */ t("h2", { className: "headline3", children: [
|
|
280
|
-
"Round ",
|
|
281
|
-
u,
|
|
282
|
-
" of ",
|
|
283
|
-
n,
|
|
284
|
-
" — Score: ",
|
|
285
|
-
L
|
|
286
|
-
] })
|
|
287
|
-
]
|
|
288
|
-
}
|
|
289
|
-
),
|
|
290
|
-
/* @__PURE__ */ t(
|
|
291
|
-
"div",
|
|
292
|
-
{
|
|
293
|
-
style: {
|
|
294
|
-
minHeight: 28,
|
|
295
|
-
display: "flex",
|
|
296
|
-
alignItems: "center"
|
|
297
|
-
},
|
|
298
|
-
children: [
|
|
299
|
-
i === "ready" && /* @__PURE__ */ e("div", { className: "spin", style: { fontSize: 36 }, children: "⏳" }),
|
|
300
|
-
i === "memorize" && /* @__PURE__ */ t("p", { className: "bodyM", style: { color: "#10b981" }, children: [
|
|
301
|
-
"MEMORIZE ",
|
|
302
|
-
/* @__PURE__ */ t("span", { className: "pulse", children: [
|
|
303
|
-
"(",
|
|
304
|
-
b,
|
|
305
|
-
")"
|
|
306
|
-
] })
|
|
307
|
-
] }),
|
|
308
|
-
i === "guess" && !m && /* @__PURE__ */ t("p", { className: "bodyM", children: [
|
|
309
|
-
"⏳ Time left: ",
|
|
310
|
-
R,
|
|
311
|
-
"s"
|
|
312
|
-
] })
|
|
313
|
-
]
|
|
314
|
-
}
|
|
315
|
-
)
|
|
316
|
-
]
|
|
250
|
+
className: t.gmProgressBar,
|
|
251
|
+
style: { width: `${p / i * 100}%` }
|
|
317
252
|
}
|
|
318
|
-
),
|
|
319
|
-
|
|
320
|
-
|
|
253
|
+
) }),
|
|
254
|
+
/* @__PURE__ */ a("h2", { className: t.gmHeadline3, children: [
|
|
255
|
+
"Round ",
|
|
256
|
+
p,
|
|
257
|
+
" of ",
|
|
258
|
+
i,
|
|
259
|
+
" — Score: ",
|
|
260
|
+
N
|
|
261
|
+
] }),
|
|
262
|
+
/* @__PURE__ */ e("div", { className: t.gmGrid, children: g.map((s, o) => {
|
|
263
|
+
const d = h === o && j === "guess" && !A;
|
|
321
264
|
return /* @__PURE__ */ e(
|
|
322
265
|
"div",
|
|
323
266
|
{
|
|
324
|
-
className:
|
|
325
|
-
children:
|
|
267
|
+
className: `${t.gmCard} ${J === "correct" && h === o ? t.gmCorrect : ""} ${J === "wrong" && h === o ? t.gmWrong : ""}`,
|
|
268
|
+
children: !d && /* @__PURE__ */ e("img", { src: s, alt: `img-${o}` })
|
|
326
269
|
},
|
|
327
|
-
|
|
270
|
+
o
|
|
328
271
|
);
|
|
329
272
|
}) }),
|
|
330
|
-
/* @__PURE__ */
|
|
331
|
-
|
|
273
|
+
/* @__PURE__ */ a("div", { style: { marginTop: 16, height: 80 }, children: [
|
|
274
|
+
j === "guess" && !A && /* @__PURE__ */ a("div", { children: [
|
|
332
275
|
/* @__PURE__ */ e(
|
|
333
276
|
"input",
|
|
334
277
|
{
|
|
335
278
|
type: "text",
|
|
336
279
|
placeholder: "Type the missing word",
|
|
337
|
-
value:
|
|
338
|
-
onChange: (s) =>
|
|
339
|
-
className:
|
|
340
|
-
style: {
|
|
341
|
-
padding: "6px 12px",
|
|
342
|
-
borderRadius: 6,
|
|
343
|
-
border: "1px solid #ccc"
|
|
344
|
-
}
|
|
280
|
+
value: f,
|
|
281
|
+
onChange: (s) => P(s.target.value),
|
|
282
|
+
className: t.gmInput
|
|
345
283
|
}
|
|
346
284
|
),
|
|
347
285
|
/* @__PURE__ */ e(
|
|
348
286
|
"button",
|
|
349
287
|
{
|
|
350
|
-
className:
|
|
351
|
-
onClick:
|
|
352
|
-
disabled:
|
|
288
|
+
className: t.gmButton,
|
|
289
|
+
onClick: es,
|
|
290
|
+
disabled: R,
|
|
353
291
|
style: { marginLeft: 8 },
|
|
354
|
-
children:
|
|
292
|
+
children: R ? "..." : "Check"
|
|
355
293
|
}
|
|
356
294
|
)
|
|
357
295
|
] }),
|
|
358
|
-
|
|
296
|
+
A && /* @__PURE__ */ e("button", { className: t.gmButton, onClick: ts, children: "Next round" })
|
|
359
297
|
] })
|
|
360
298
|
] })
|
|
361
299
|
] });
|
|
362
300
|
}
|
|
363
301
|
export {
|
|
364
|
-
|
|
365
|
-
|
|
302
|
+
Is as Game,
|
|
303
|
+
V as themes
|
|
366
304
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(p,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],s):(p=typeof globalThis<"u"?globalThis:p||self,s(p.WhatsMissing={},p.jsxRuntime,p.React))})(this,(function(p,s,o){"use strict";const K="data:image/png;base64,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",T={animals:["src/assets/Animals/bear.jpg","src/assets/Animals/cat.png","src/assets/Animals/crocodile.jpg","src/assets/Animals/dolphin.jpg","src/assets/Animals/elephant.jpg","src/assets/Animals/fox.jpg","src/assets/Animals/giraffe.jpg","src/assets/Animals/horse.jpg","src/assets/Animals/kangaroo.jpg","src/assets/Animals/lion.jpg","src/assets/Animals/monkey.jpg","src/assets/Animals/owl.jpg","src/assets/Animals/panda.jpg","src/assets/Animals/penguin.jpg","src/assets/Animals/rabbit.jpg","src/assets/Animals/squirrel.jpg","src/assets/Animals/tiger.png","src/assets/Animals/tortoise.jpg","src/assets/Animals/wolf.png","src/assets/Animals/zebra.jpg"],food:["src/assets/Food/apple.jpg","src/assets/Food/banana.jpg","src/assets/Food/bread.jpg","src/assets/Food/carrot.jpg","src/assets/Food/cake.jpg","src/assets/Food/pizza.jpg","src/assets/Food/rice.jpg","src/assets/Food/burger.jpg","src/assets/Food/cheese.jpg","src/assets/Food/chocolate.jpg","src/assets/Food/strawberry.jpg","src/assets/Food/orange.jpg","src/assets/Food/pear.jpg","src/assets/Food/watermelon.jpg","src/assets/Food/ice cream.jpg","src/assets/Food/soup.jpg","src/assets/Food/chicken.jpg","src/assets/Food/fish.jpg","src/assets/Food/fries.jpg","src/assets/Food/tomato.jpg","src/assets/Food/milk.jpg","src/assets/Food/grapes.jpg","src/assets/Food/corn.jpg","src/assets/Food/donut.jpg","src/assets/Food/sandwich.jpg"],toys:["src/assets/Toys/ball.jpg","src/assets/Toys/balloon.jpg","src/assets/Toys/blocks.jpg","src/assets/Toys/car.jpg","src/assets/Toys/doll.jpg","src/assets/Toys/drum.jpg","src/assets/Toys/guitar.jpg","src/assets/Toys/jump rope.jpg","src/assets/Toys/kite.jpg","src/assets/Toys/paints.jpg","src/assets/Toys/plane.jpg","src/assets/Toys/puzzle.jpg","src/assets/Toys/scooter.jpg","src/assets/Toys/rocket.jpg","src/assets/Toys/skateboard.jpg","src/assets/Toys/slide.jpg","src/assets/Toys/teddy bear.jpg","src/assets/Toys/train.jpg","src/assets/Toys/crayons.jpg","src/assets/Toys/yo-yo.jpg"]},D=l=>(l.split("/").pop()||"").replace(/\.(jpg|png|jpeg|webp)$/i,"").toLowerCase(),W=(l,d)=>{const n=Array.from({length:l.length+1},()=>Array(d.length+1).fill(0));for(let r=0;r<=l.length;r++)n[r][0]=r;for(let r=0;r<=d.length;r++)n[0][r]=r;for(let r=1;r<=l.length;r++)for(let a=1;a<=d.length;a++)n[r][a]=l[r-1]===d[a-1]?n[r-1][a-1]:Math.min(n[r-1][a-1],n[r][a-1],n[r-1][a])+1;return n[l.length][d.length]};function q(){const[l,d]=o.useState(null),[n,r]=o.useState([]),[a,Z]=o.useState(4),[A,I]=o.useState(!1),[y,L]=o.useState(1),[h,R]=o.useState(null),[c,u]=o.useState("ready"),[Q,J]=o.useState(3),[b,m]=o.useState(7),[M,k]=o.useState(0),[w,C]=o.useState(!1),[v,Y]=o.useState(20),[E,B]=o.useState(""),[j,N]=o.useState(!1),[x,P]=o.useState(!1),[G,f]=o.useState(null),[$,U]=o.useState([]),[_,H]=o.useState([]),[ss,es]=o.useState(!1);o.useEffect(()=>{const e=()=>es(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const O=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),z=()=>{if(!l)return;const e=O(T[l]);r(e),I(!0),C(!1),L(1),k(0),U([]),H([]),X(e,[],!0)},X=(e=n,t=_,i=!1)=>{const g=O(e.length?e:T[l]);let S=Math.floor(Math.random()*g.length),F=g[S],V=0;for(;t.includes(F)&&V<20;)S=Math.floor(Math.random()*g.length),F=g[S],V++;r(g),R(S),H([...t,F]),N(!1),B(""),Y(20),f(null),i?(u("ready"),J(3),m(7)):(u("memorize"),m(7))};o.useEffect(()=>{if(!(!A||w||j)){if(c==="ready")if(Q<=0)u("memorize"),m(7);else{const e=setTimeout(()=>J(t=>t-1),1e3);return()=>clearTimeout(e)}if(c==="memorize")if(b<=0)u("guess");else{const e=setTimeout(()=>m(t=>t-1),1e3);return()=>clearTimeout(e)}if(c==="guess"){if(v<=0){N(!0),f("wrong");const t=D(n[h]);U(i=>[...i,{round:y,answer:E,correct:t,result:"wrong"}]);return}const e=setTimeout(()=>Y(t=>t-1),1e3);return()=>clearTimeout(e)}}},[c,Q,b,v,A,w,j,n,h,y,E]);const ts=()=>{if(h===null||x)return;const e=D(n[h]),t=E.toLowerCase().trim();let i="wrong";t===e?(k(g=>g+1),f("correct"),i="correct"):W(t,e)===1?(k(g=>g+.5),f("almost"),i="almost"):(f("wrong"),i="wrong"),U(g=>[...g,{round:y,answer:t,correct:e,result:i}]),P(!0),setTimeout(()=>{P(!1),N(!0)},600)},os=()=>{y<a?(L(e=>e+1),X()):C(!0)},rs=()=>{I(!1),C(!1),d(null)},as=52,ls=28,ns=()=>s.jsx("div",{style:{position:"fixed",top:16,left:20,zIndex:1e3},children:s.jsx("img",{src:K,alt:"SPEAKID Logo",style:{height:"clamp(28px, 5vw, 40px)",width:"auto"}})});return s.jsxs(s.Fragment,{children:[!ss&&s.jsx(ns,{}),!l&&!A&&s.jsxs("div",{className:"centerScreen fade",children:[s.jsx("h1",{className:"headline1",children:"WHAT'S MISSING?"}),s.jsx("p",{className:"bodyM",children:"Select a theme:"}),s.jsxs("div",{style:{display:"flex",gap:16},children:[s.jsx("button",{className:"button",onClick:()=>d("animals"),children:"🐶 Animals"}),s.jsx("button",{className:"button",onClick:()=>d("food"),children:"🍎 Food"}),s.jsx("button",{className:"button",onClick:()=>d("toys"),children:"🧸 Toys"})]}),s.jsxs("div",{style:{marginTop:24},children:[s.jsx("p",{className:"bodyS",children:"Choose number of rounds:"}),s.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(e=>s.jsx("button",{className:"button button--ghost",style:{background:a===e?"#333":void 0,color:a===e?"#fff":void 0},onClick:()=>Z(e),children:e},e))})]})]}),l&&!A&&s.jsxs("div",{className:"centerScreen fade",children:[s.jsxs("h1",{className:"headline1",children:["Theme selected: ",l]}),s.jsxs("p",{className:"bodyM",children:["Rounds: ",a]}),s.jsx("button",{className:"button",onClick:z,children:"▶ Start game"})]}),w&&s.jsxs("div",{className:"centerScreen fade",children:[s.jsx("h1",{className:"headline1",children:"Results"}),s.jsxs("h2",{className:"headline3",children:["Your score: ",M," / ",a]}),s.jsxs("table",{style:{marginTop:20,borderCollapse:"collapse"},children:[s.jsx("thead",{children:s.jsxs("tr",{className:"bodyM",style:{textAlign:"left"},children:[s.jsx("th",{style:{padding:"6px 12px"},children:"Round"}),s.jsx("th",{style:{padding:"6px 12px"},children:"Your Answer"}),s.jsx("th",{style:{padding:"6px 12px"},children:"Correct"}),s.jsx("th",{style:{padding:"6px 12px"},children:"Result"})]})}),s.jsx("tbody",{children:$.map((e,t)=>s.jsxs("tr",{children:[s.jsx("td",{style:{padding:"6px 12px"},children:e.round}),s.jsx("td",{style:{padding:"6px 12px"},children:e.answer||"—"}),s.jsx("td",{style:{padding:"6px 12px"},children:e.correct}),s.jsxs("td",{style:{padding:"6px 12px"},children:[e.result==="correct"&&s.jsx("span",{style:{color:"green"},children:"✔ Correct"}),e.result==="almost"&&s.jsx("span",{style:{color:"orange"},children:"◐ Almost (0.5)"}),e.result==="wrong"&&s.jsx("span",{style:{color:"red"},children:"✘ Wrong"})]})]},t))})]}),s.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[s.jsx("button",{className:"button",onClick:z,children:"🔁 Play again"}),s.jsx("button",{className:"button",onClick:rs,children:"⬅️ Choose theme"})]})]}),A&&!w&&s.jsxs("div",{className:"gameLayout fade",children:[s.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",alignItems:"center"},children:[s.jsx("div",{className:"progressContainer",children:s.jsx("div",{className:"progressBar",style:{width:`${y/a*100}%`}})}),s.jsxs("div",{style:{minHeight:as,display:"flex",alignItems:"center"},children:[c==="ready"&&s.jsx("h1",{className:"headline1",style:{color:"#ec4c44"},children:"GET READY"}),(c==="memorize"||c==="guess")&&s.jsxs("h2",{className:"headline3",children:["Round ",y," of ",a," — Score: ",M]})]}),s.jsxs("div",{style:{minHeight:ls,display:"flex",alignItems:"center"},children:[c==="ready"&&s.jsx("div",{className:"spin",style:{fontSize:36},children:"⏳"}),c==="memorize"&&s.jsxs("p",{className:"bodyM",style:{color:"#10b981"},children:["MEMORIZE ",s.jsxs("span",{className:"pulse",children:["(",b,")"]})]}),c==="guess"&&!j&&s.jsxs("p",{className:"bodyM",children:["⏳ Time left: ",v,"s"]})]})]}),c!=="ready"&&s.jsx("div",{className:"grid",children:n.map((e,t)=>{const i=h===t&&c==="guess"&&!j;return s.jsx("div",{className:`card ${i&&x?"hop":""} ${G==="correct"&&h===t?"correct":""} ${G==="wrong"&&h===t?"wrong":""}`,children:(!i||j)&&s.jsx("img",{src:e,alt:`img-${t}`})},t)})}),s.jsxs("div",{style:{marginTop:16,height:80},children:[c==="guess"&&!j&&s.jsxs("div",{children:[s.jsx("input",{type:"text",placeholder:"Type the missing word",value:E,onChange:e=>B(e.target.value),className:"bodyM",style:{padding:"6px 12px",borderRadius:6,border:"1px solid #ccc"}}),s.jsx("button",{className:"button",onClick:ts,disabled:x,style:{marginLeft:8},children:x?"...":"Check"})]}),j&&s.jsx("div",{children:s.jsx("button",{className:"button",onClick:os,children:"Next round"})})]})]})]})}p.Game=q,p.themes=T,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(m,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],s):(m=typeof globalThis<"u"?globalThis:m||self,s(m.WhatsMissing={},m.jsxRuntime,m.React))})(this,(function(m,s,r){"use strict";const t={gmCenterScreen:"_gmCenterScreen_skj5s_19",gmGameLayout:"_gmGameLayout_skj5s_19",gmHeadline1:"_gmHeadline1_skj5s_34",gmHeadline2:"_gmHeadline2_skj5s_35",gmHeadline3:"_gmHeadline3_skj5s_36",gmBodyL:"_gmBodyL_skj5s_38",gmBodyM:"_gmBodyM_skj5s_39",gmBodyS:"_gmBodyS_skj5s_40",gmButton:"_gmButton_skj5s_43",gmActive:"_gmActive_skj5s_58",gmLogoFixed:"_gmLogoFixed_skj5s_64",gmProgressContainer:"_gmProgressContainer_skj5s_76",gmProgressBar:"_gmProgressBar_skj5s_84",gmGrid:"_gmGrid_skj5s_91",gmCard:"_gmCard_skj5s_102",gmHop:"_gmHop_skj5s_121",gmCorrect:"_gmCorrect_skj5s_123",gmWrong:"_gmWrong_skj5s_128",gmFade:"_gmFade_skj5s_139",gmFadeIn:"_gmFadeIn_skj5s_1",gmPulse:"_gmPulse_skj5s_145",gmTable:"_gmTable_skj5s_148",gmAlmost:"_gmAlmost_skj5s_159",gmInput:"_gmInput_skj5s_163"},K="data:image/png;base64,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",E={animals:["src/assets/Animals/bear.jpg","src/assets/Animals/cat.png","src/assets/Animals/crocodile.jpg","src/assets/Animals/dolphin.jpg","src/assets/Animals/elephant.jpg","src/assets/Animals/fox.jpg","src/assets/Animals/giraffe.jpg","src/assets/Animals/horse.jpg","src/assets/Animals/kangaroo.jpg","src/assets/Animals/lion.jpg","src/assets/Animals/monkey.jpg","src/assets/Animals/owl.jpg","src/assets/Animals/panda.jpg","src/assets/Animals/penguin.jpg","src/assets/Animals/rabbit.jpg","src/assets/Animals/squirrel.jpg","src/assets/Animals/tiger.png","src/assets/Animals/tortoise.jpg","src/assets/Animals/wolf.png","src/assets/Animals/zebra.jpg"],food:["src/assets/Food/apple.jpg","src/assets/Food/banana.jpg","src/assets/Food/bread.jpg","src/assets/Food/carrot.jpg","src/assets/Food/cake.jpg","src/assets/Food/pizza.jpg","src/assets/Food/rice.jpg","src/assets/Food/burger.jpg","src/assets/Food/cheese.jpg","src/assets/Food/chocolate.jpg","src/assets/Food/strawberry.jpg","src/assets/Food/orange.jpg","src/assets/Food/pear.jpg","src/assets/Food/watermelon.jpg","src/assets/Food/ice cream.jpg","src/assets/Food/soup.jpg","src/assets/Food/chicken.jpg","src/assets/Food/fish.jpg","src/assets/Food/fries.jpg","src/assets/Food/tomato.jpg","src/assets/Food/milk.jpg","src/assets/Food/grapes.jpg","src/assets/Food/corn.jpg","src/assets/Food/donut.jpg","src/assets/Food/sandwich.jpg"],toys:["src/assets/Toys/ball.jpg","src/assets/Toys/balloon.jpg","src/assets/Toys/blocks.jpg","src/assets/Toys/car.jpg","src/assets/Toys/doll.jpg","src/assets/Toys/drum.jpg","src/assets/Toys/guitar.jpg","src/assets/Toys/jump rope.jpg","src/assets/Toys/kite.jpg","src/assets/Toys/paints.jpg","src/assets/Toys/plane.jpg","src/assets/Toys/puzzle.jpg","src/assets/Toys/scooter.jpg","src/assets/Toys/rocket.jpg","src/assets/Toys/skateboard.jpg","src/assets/Toys/slide.jpg","src/assets/Toys/teddy bear.jpg","src/assets/Toys/train.jpg","src/assets/Toys/crayons.jpg","src/assets/Toys/yo-yo.jpg"]},v=n=>(n.split("/").pop()||"").replace(/\.(jpg|png|jpeg|webp)$/i,"").toLowerCase(),_=(n,l)=>{const g=Array.from({length:n.length+1},()=>Array(l.length+1).fill(0));for(let a=0;a<=n.length;a++)g[a][0]=a;for(let a=0;a<=l.length;a++)g[0][a]=a;for(let a=1;a<=n.length;a++)for(let c=1;c<=l.length;c++)g[a][c]=n[a-1]===l[c-1]?g[a-1][c-1]:Math.min(g[a-1][c-1],g[a][c-1],g[a-1][c])+1;return g[n.length][l.length]};function R(){const[n,l]=r.useState(null),[g,a]=r.useState([]),[c,q]=r.useState(4),[u,x]=r.useState(!1),[p,I]=r.useState(1),[h,Z]=r.useState(null),[j,k]=r.useState("ready"),[H,N]=r.useState(3),[P,f]=r.useState(7),[D,T]=r.useState(0),[w,B]=r.useState(!1),[Q,G]=r.useState(20),[C,J]=r.useState(""),[A,F]=r.useState(!1),[L,Y]=r.useState(!1),[M,y]=r.useState(null),[$,b]=r.useState([]),[ss,O]=r.useState([]),[es,ts]=r.useState(!1);r.useEffect(()=>{const e=()=>ts(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const z=e=>[...e].sort(()=>Math.random()-.5).slice(0,6),X=()=>{if(!n)return;const e=z(E[n]);a(e),x(!0),B(!1),I(1),T(0),b([]),O([]),V(e,[],!0)},V=(e=g,o=ss,i=!1)=>{const d=z(e.length?e:E[n]);let S=Math.floor(Math.random()*d.length),U=d[S],W=0;for(;o.includes(U)&&W<20;)S=Math.floor(Math.random()*d.length),U=d[S],W++;a(d),Z(S),O([...o,U]),F(!1),J(""),G(20),y(null),i?(k("ready"),N(3),f(7)):(k("memorize"),f(7))};r.useEffect(()=>{if(!(!u||w||A)){if(j==="ready")if(H<=0)k("memorize"),f(7);else{const e=setTimeout(()=>N(o=>o-1),1e3);return()=>clearTimeout(e)}if(j==="memorize")if(P<=0)k("guess");else{const e=setTimeout(()=>f(o=>o-1),1e3);return()=>clearTimeout(e)}if(j==="guess"){if(Q<=0){F(!0),y("wrong");const o=v(g[h]);b(i=>[...i,{round:p,answer:C,correct:o,result:"wrong"}]);return}const e=setTimeout(()=>G(o=>o-1),1e3);return()=>clearTimeout(e)}}},[j,H,P,Q,u,w,A,g,h,p,C]);const os=()=>{if(h===null||L)return;const e=v(g[h]),o=C.toLowerCase().trim();let i="wrong";o===e?(T(d=>d+1),y("correct"),i="correct"):_(o,e)===1?(T(d=>d+.5),y("almost"),i="almost"):(y("wrong"),i="wrong"),b(d=>[...d,{round:p,answer:o,correct:e,result:i}]),Y(!0),setTimeout(()=>{Y(!1),F(!0)},600)},rs=()=>{p<c?(I(e=>e+1),V()):B(!0)},as=()=>{x(!1),B(!1),l(null)},ns=()=>s.jsx("div",{className:t.gmLogoFixed,children:s.jsx("img",{src:K,alt:"SPEAKID Logo"})});return s.jsxs(s.Fragment,{children:[!es&&s.jsx(ns,{}),!n&&!u&&s.jsxs("div",{className:t.gmCenterScreen,children:[s.jsx("h1",{className:t.gmHeadline1,children:"WHAT'S MISSING?"}),s.jsx("p",{className:t.gmBodyM,children:"Select a theme:"}),s.jsxs("div",{style:{display:"flex",gap:16},children:[s.jsx("button",{className:t.gmButton,onClick:()=>l("animals"),children:"🐶 Animals"}),s.jsx("button",{className:t.gmButton,onClick:()=>l("food"),children:"🍎 Food"}),s.jsx("button",{className:t.gmButton,onClick:()=>l("toys"),children:"🧸 Toys"})]}),s.jsxs("div",{style:{marginTop:24},children:[s.jsx("p",{className:t.gmBodyS,children:"Choose number of rounds:"}),s.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(e=>s.jsx("button",{className:`${t.gmButton} ${c===e?t.gmActive:""}`,onClick:()=>q(e),children:e},e))})]})]}),n&&!u&&s.jsxs("div",{className:t.gmCenterScreen,children:[s.jsxs("h1",{className:t.gmHeadline1,children:["Theme selected: ",n]}),s.jsx("button",{className:t.gmButton,onClick:X,children:"▶ Start game"})]}),w&&s.jsxs("div",{className:t.gmCenterScreen,children:[s.jsx("h1",{className:t.gmHeadline1,children:"Results"}),s.jsxs("h2",{className:t.gmHeadline3,children:["Your score: ",D," / ",c]}),s.jsxs("table",{className:t.gmTable,children:[s.jsx("thead",{children:s.jsxs("tr",{children:[s.jsx("th",{children:"Round"}),s.jsx("th",{children:"Your Answer"}),s.jsx("th",{children:"Correct"}),s.jsx("th",{children:"Result"})]})}),s.jsx("tbody",{children:$.map((e,o)=>s.jsxs("tr",{children:[s.jsx("td",{children:e.round}),s.jsx("td",{children:e.answer||"—"}),s.jsx("td",{children:e.correct}),s.jsx("td",{className:t[`gm${e.result.charAt(0).toUpperCase()+e.result.slice(1)}`],children:e.result})]},o))})]}),s.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[s.jsx("button",{className:t.gmButton,onClick:X,children:"🔁 Play again"}),s.jsx("button",{className:t.gmButton,onClick:as,children:"⬅️ Choose theme"})]})]}),u&&!w&&s.jsxs("div",{className:t.gmGameLayout,children:[s.jsx("div",{className:t.gmProgressContainer,children:s.jsx("div",{className:t.gmProgressBar,style:{width:`${p/c*100}%`}})}),s.jsxs("h2",{className:t.gmHeadline3,children:["Round ",p," of ",c," — Score: ",D]}),s.jsx("div",{className:t.gmGrid,children:g.map((e,o)=>{const i=h===o&&j==="guess"&&!A;return s.jsx("div",{className:`${t.gmCard} ${M==="correct"&&h===o?t.gmCorrect:""} ${M==="wrong"&&h===o?t.gmWrong:""}`,children:!i&&s.jsx("img",{src:e,alt:`img-${o}`})},o)})}),s.jsxs("div",{style:{marginTop:16,height:80},children:[j==="guess"&&!A&&s.jsxs("div",{children:[s.jsx("input",{type:"text",placeholder:"Type the missing word",value:C,onChange:e=>J(e.target.value),className:t.gmInput}),s.jsx("button",{className:t.gmButton,onClick:os,disabled:L,style:{marginLeft:8},children:L?"...":"Check"})]}),A&&s.jsx("button",{className:t.gmButton,onClick:rs,children:"Next round"})]})]})]})}m.Game=R,m.themes=E,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mblinkov/whats-missing",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/whats-missing.umd.js",
|
|
6
6
|
"module": "dist/whats-missing.es.js",
|
|
@@ -45,5 +45,8 @@
|
|
|
45
45
|
"speakid"
|
|
46
46
|
],
|
|
47
47
|
"author": "Mikhail Blinkov",
|
|
48
|
-
"license": "MIT"
|
|
48
|
+
"license": "MIT",
|
|
49
|
+
"publishConfig": {
|
|
50
|
+
"access": "public"
|
|
51
|
+
}
|
|
49
52
|
}
|