speakid-build-a-sentence 1.0.18 → 1.0.20
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/Game.d.ts +0 -1
- package/dist/Game.d.ts.map +1 -1
- package/dist/Game.styles.d.ts.map +1 -1
- package/dist/speakid-build-a-sentence.cjs.js +10 -10
- package/dist/speakid-build-a-sentence.cjs.js.map +1 -1
- package/dist/speakid-build-a-sentence.es.js +415 -376
- package/dist/speakid-build-a-sentence.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as p, useCallback as
|
|
3
|
-
const
|
|
4
|
-
@keyframes
|
|
1
|
+
import { jsx as l, jsxs as y } from "react/jsx-runtime";
|
|
2
|
+
import { useState as p, useCallback as we, useRef as Z, useEffect as J, Component as sn } from "react";
|
|
3
|
+
const dn = `
|
|
4
|
+
@keyframes spin {
|
|
5
5
|
from { transform: rotate(0deg); }
|
|
6
6
|
to { transform: rotate(360deg); }
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
@keyframes
|
|
9
|
+
@keyframes pulse {
|
|
10
10
|
0%, 100% { transform: scale(1); }
|
|
11
11
|
50% { transform: scale(1.05); }
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
@keyframes
|
|
14
|
+
@keyframes shake {
|
|
15
15
|
0%, 100% { transform: translateX(0); }
|
|
16
16
|
25% { transform: translateX(-5px); }
|
|
17
17
|
75% { transform: translateX(5px); }
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
@keyframes
|
|
20
|
+
@keyframes slideIn {
|
|
21
21
|
from { transform: translateY(-20px); opacity: 0; }
|
|
22
22
|
to { transform: translateY(0); opacity: 1; }
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
@keyframes
|
|
25
|
+
@keyframes bounce {
|
|
26
26
|
0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
|
|
27
27
|
40%, 43% { transform: translate3d(0, -8px, 0); }
|
|
28
28
|
70% { transform: translate3d(0, -4px, 0); }
|
|
29
29
|
90% { transform: translate3d(0, -2px, 0); }
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
@keyframes
|
|
32
|
+
@keyframes glow {
|
|
33
33
|
0%, 100% { box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
|
|
34
34
|
50% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.8), 0 0 30px rgba(76, 175, 80, 0.6); }
|
|
35
35
|
}
|
|
36
36
|
`;
|
|
37
|
-
if (typeof document < "u" && !document.getElementById("
|
|
38
|
-
const
|
|
39
|
-
|
|
37
|
+
if (typeof document < "u" && !document.getElementById("game-keyframes")) {
|
|
38
|
+
const w = document.createElement("style");
|
|
39
|
+
w.id = "game-keyframes", w.innerHTML = dn, document.head.appendChild(w);
|
|
40
40
|
}
|
|
41
|
-
const
|
|
41
|
+
const Te = {
|
|
42
42
|
spin: {
|
|
43
|
-
animation: "
|
|
43
|
+
animation: "spin 1.4s linear infinite"
|
|
44
44
|
},
|
|
45
45
|
pulse: {
|
|
46
|
-
animation: "
|
|
46
|
+
animation: "pulse 0.6s ease-in-out"
|
|
47
47
|
},
|
|
48
48
|
shake: {
|
|
49
|
-
animation: "
|
|
49
|
+
animation: "shake 0.4s ease-in-out"
|
|
50
50
|
},
|
|
51
51
|
slideIn: {
|
|
52
|
-
animation: "
|
|
52
|
+
animation: "slideIn 0.3s ease-out"
|
|
53
53
|
},
|
|
54
54
|
bounce: {
|
|
55
|
-
animation: "
|
|
55
|
+
animation: "bounce 0.6s ease-in-out"
|
|
56
56
|
},
|
|
57
57
|
glow: {
|
|
58
|
-
animation: "
|
|
58
|
+
animation: "glow 1s ease-in-out infinite"
|
|
59
59
|
}
|
|
60
60
|
}, g = {
|
|
61
61
|
gmCenterScreen: {
|
|
@@ -134,31 +134,28 @@ const Se = {
|
|
|
134
134
|
fontFamily: '"Geist", system-ui',
|
|
135
135
|
width: "160px"
|
|
136
136
|
},
|
|
137
|
-
// ✅ Обновлено
|
|
137
|
+
// ✅ Обновлено только для качества логотипа (размер как в whats-missing)
|
|
138
138
|
gmLogoFixed: {
|
|
139
139
|
position: "absolute",
|
|
140
140
|
top: "16px",
|
|
141
141
|
left: "16px",
|
|
142
|
-
width: "
|
|
143
|
-
zIndex:
|
|
142
|
+
width: "auto",
|
|
143
|
+
zIndex: 10,
|
|
144
144
|
pointerEvents: "none",
|
|
145
145
|
background: "transparent",
|
|
146
146
|
transform: "none",
|
|
147
147
|
willChange: "auto"
|
|
148
148
|
},
|
|
149
149
|
gmLogoImg: {
|
|
150
|
-
height: "
|
|
150
|
+
height: "28px",
|
|
151
151
|
width: "auto",
|
|
152
152
|
background: "transparent",
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
backgroundRepeat: "no-repeat",
|
|
156
|
-
backgroundPosition: "center",
|
|
153
|
+
objectFit: "contain",
|
|
154
|
+
imageRendering: "auto",
|
|
157
155
|
transform: "translateZ(0)",
|
|
158
156
|
backfaceVisibility: "hidden",
|
|
159
157
|
WebkitFontSmoothing: "antialiased",
|
|
160
|
-
|
|
161
|
-
imageRendering: "auto"
|
|
158
|
+
display: "block"
|
|
162
159
|
},
|
|
163
160
|
gmReadyWrapper: {
|
|
164
161
|
display: "flex",
|
|
@@ -171,64 +168,62 @@ const Se = {
|
|
|
171
168
|
},
|
|
172
169
|
gmHourglass: {
|
|
173
170
|
fontSize: "42px",
|
|
174
|
-
...
|
|
171
|
+
...Te.spin
|
|
175
172
|
},
|
|
176
173
|
// ===== Анимационные стили =====
|
|
177
|
-
...
|
|
178
|
-
},
|
|
179
|
-
const [
|
|
180
|
-
const
|
|
181
|
-
|
|
174
|
+
...Te
|
|
175
|
+
}, an = () => {
|
|
176
|
+
const [w, s] = p([]), v = we((D, R, f) => {
|
|
177
|
+
const b = [];
|
|
178
|
+
D.trim() || b.push({
|
|
182
179
|
type: "empty",
|
|
183
180
|
message: "Sentence cannot be empty"
|
|
184
|
-
}),
|
|
181
|
+
}), D.length > 41 && b.push({
|
|
185
182
|
type: "length",
|
|
186
|
-
message: `Sentence is too long (${
|
|
187
|
-
}),
|
|
183
|
+
message: `Sentence is too long (${D.length}/41 characters)`
|
|
184
|
+
}), D && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(D) && b.push({
|
|
188
185
|
type: "characters",
|
|
189
186
|
message: "Only Latin characters, numbers, spaces and punctuation are allowed"
|
|
190
187
|
});
|
|
191
|
-
const
|
|
192
|
-
return
|
|
188
|
+
const k = f.findIndex((z, _) => _ !== R && z.toLowerCase().trim() === D.toLowerCase().trim());
|
|
189
|
+
return k !== -1 && b.push({
|
|
193
190
|
type: "duplicate",
|
|
194
|
-
message: `Duplicate sentence (same as sentence ${
|
|
195
|
-
}),
|
|
196
|
-
isValid:
|
|
197
|
-
errors:
|
|
191
|
+
message: `Duplicate sentence (same as sentence ${k + 1})`
|
|
192
|
+
}), s(b), {
|
|
193
|
+
isValid: b.length === 0,
|
|
194
|
+
errors: b
|
|
198
195
|
};
|
|
199
|
-
}, []),
|
|
200
|
-
const
|
|
201
|
-
return
|
|
202
|
-
const
|
|
203
|
-
|
|
204
|
-
...
|
|
205
|
-
message: `Sentence ${
|
|
196
|
+
}, []), de = we((D) => {
|
|
197
|
+
const R = [];
|
|
198
|
+
return D.forEach((f, b) => {
|
|
199
|
+
const x = v(f, b, D);
|
|
200
|
+
R.push(...x.errors.map((k) => ({
|
|
201
|
+
...k,
|
|
202
|
+
message: `Sentence ${b + 1}: ${k.message}`
|
|
206
203
|
})));
|
|
207
204
|
}), {
|
|
208
|
-
isValid:
|
|
209
|
-
errors:
|
|
205
|
+
isValid: R.length === 0,
|
|
206
|
+
errors: R
|
|
210
207
|
};
|
|
211
|
-
}, [
|
|
212
|
-
|
|
208
|
+
}, [v]), ae = we(() => {
|
|
209
|
+
s([]);
|
|
213
210
|
}, []);
|
|
214
211
|
return {
|
|
215
|
-
errors:
|
|
216
|
-
validateSentence:
|
|
217
|
-
validateAllSentences:
|
|
218
|
-
clearErrors:
|
|
212
|
+
errors: w,
|
|
213
|
+
validateSentence: v,
|
|
214
|
+
validateAllSentences: de,
|
|
215
|
+
clearErrors: ae
|
|
219
216
|
};
|
|
220
|
-
},
|
|
221
|
-
|
|
222
|
-
},
|
|
223
|
-
const
|
|
224
|
-
|
|
225
|
-
document.body.removeChild(
|
|
217
|
+
}, ln = (w, s, v) => s && v ? `${w} word "${s}" ${v}` : s ? `${w} word "${s}"` : w, cn = (w, s, v = ["Enter", " "]) => {
|
|
218
|
+
v.includes(w.key) && (w.preventDefault(), s());
|
|
219
|
+
}, L = (w) => {
|
|
220
|
+
const s = document.createElement("div");
|
|
221
|
+
s.setAttribute("aria-live", "polite"), s.setAttribute("aria-atomic", "true"), s.style.position = "absolute", s.style.left = "-10000px", s.style.width = "1px", s.style.height = "1px", s.style.overflow = "hidden", document.body.appendChild(s), s.textContent = w, setTimeout(() => {
|
|
222
|
+
document.body.removeChild(s);
|
|
226
223
|
}, 1e3);
|
|
227
|
-
},
|
|
228
|
-
const
|
|
229
|
-
|
|
230
|
-
const r = document.getElementById("magic-sentence-reset");
|
|
231
|
-
r && r.remove(), h.textContent = `
|
|
224
|
+
}, hn = () => {
|
|
225
|
+
const w = document.createElement("style");
|
|
226
|
+
w.id = "magic-sentence-reset", w.textContent = `
|
|
232
227
|
#magic-sentence-root, #magic-sentence-root * {
|
|
233
228
|
box-sizing: border-box;
|
|
234
229
|
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
|
@@ -245,7 +240,7 @@ const Se = {
|
|
|
245
240
|
width: 100% !important;
|
|
246
241
|
height: 100% !important;
|
|
247
242
|
overflow: hidden !important;
|
|
248
|
-
zoom: 1 !important;
|
|
243
|
+
zoom: 1 !important; /* ✅ защита от подзума */
|
|
249
244
|
}
|
|
250
245
|
#root {
|
|
251
246
|
margin: 0 !important;
|
|
@@ -254,11 +249,13 @@ const Se = {
|
|
|
254
249
|
height: 100% !important;
|
|
255
250
|
overflow: hidden !important;
|
|
256
251
|
}
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
252
|
+
`;
|
|
253
|
+
const s = document.getElementById("magic-sentence-reset");
|
|
254
|
+
s && s.remove(), document.head.appendChild(w);
|
|
255
|
+
}, pn = (w) => [...w].sort(() => Math.random() - 0.5);
|
|
256
|
+
function xn(w = {}) {
|
|
257
|
+
const { logoUrl: s, showLogo: v = !0 } = w, de = Z(null), { validateAllSentences: ae, errors: D } = an(), R = () => c || window.innerWidth < 768, f = () => c || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, b = (e = "medium") => {
|
|
258
|
+
if (!f())
|
|
262
259
|
return {
|
|
263
260
|
padding: "12px 24px",
|
|
264
261
|
fontSize: "16px",
|
|
@@ -285,114 +282,146 @@ function ln(h = {}) {
|
|
|
285
282
|
};
|
|
286
283
|
}
|
|
287
284
|
};
|
|
288
|
-
|
|
285
|
+
J(() => (hn(), () => {
|
|
289
286
|
document.documentElement.style.overflow = "", document.body.style.overflow = "";
|
|
290
287
|
const e = document.getElementById("magic-sentence-reset");
|
|
291
288
|
e && e.remove();
|
|
292
289
|
}), []);
|
|
293
|
-
const [
|
|
290
|
+
const [x, k] = p("select"), [z, _] = p(null), [fe, me] = p(null), [I, Q] = p([]), [E, xe] = p(0), [le, ye] = p([]), [W, ce] = p([]), [$, be] = p(20), [U, M] = p(0), [gn, We] = p(null), [A, C] = p(null), [a, ee] = p(!1), [ne, te] = p(!1), [he, De] = p(
|
|
294
291
|
Number(localStorage.getItem("magicSentenceBest")) || 0
|
|
295
|
-
),
|
|
296
|
-
|
|
292
|
+
), Y = Z(null), Re = Z(null), Se = Z(0), [m, B] = p({ list: null, id: null, side: null }), [c, ze] = p(!1), [Ee, ie] = p(1), [ke, re] = p(null), [Pe, Be] = p(!1), [O, Le] = p(!1), [N, Me] = p(!1), [G, Ae] = p(!1), [X, $e] = p(!1), [j, Oe] = p(!1), [F, Ne] = p(!1), [q, Ge] = p(!1), [V, Xe] = p(!1), [un, je] = p(!1), [wn, Fe] = p(!1);
|
|
293
|
+
J(() => {
|
|
297
294
|
const e = () => {
|
|
298
|
-
const t = window.innerWidth, n = window.innerHeight, i = t < 768 || t === 926 && n === 428 || t === 932 && n === 430,
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
295
|
+
const t = window.innerWidth, n = window.innerHeight, i = t < 768 || t === 926 && n === 428 || t === 932 && n === 430, r = n < 700, h = t / n > 1.8, u = t === 768 && n === 1024, o = t === 1024 && n === 768, d = t === 820 && n === 1180, T = t === 1180 && n === 820, H = t === 540 && n === 720, se = t === 720 && n === 540, He = t === 1024 && n === 1366, Ie = t === 1366 && n === 1024, Ce = t >= 1200 && n >= 600 && !i;
|
|
296
|
+
Be(Ce), Le(u), Me(o), Ae(d), $e(T), Oe(H), Ne(se), Ge(He), Xe(Ie), Fe(h);
|
|
297
|
+
const on = i && t > n || i || // ✅ ВСЕ мобильные устройства (включая portrait)
|
|
298
|
+
n < 700 || h || // ✅ Широкие экраны
|
|
299
|
+
t === 1366 && n === 766 || t === 1366 && n === 768 || t === 1280 && n === 720 || t === 1440 && n === 900 || u || o || d || T || H || se || He || Ie || Ce;
|
|
300
|
+
if (je(on), ze(i), i)
|
|
301
|
+
re(null), ie(1);
|
|
302
|
+
else if (r)
|
|
303
|
+
re(null), ie(1);
|
|
304
|
+
else if (h) {
|
|
305
|
+
const ue = Math.min(1e3, Math.min(t, n) * 0.9);
|
|
306
|
+
re(ue), ie(0.85);
|
|
307
|
+
} else {
|
|
308
|
+
const ue = Math.min(1e3, Math.min(t, n) * 0.9);
|
|
309
|
+
re(ue), ie(1);
|
|
306
310
|
}
|
|
307
311
|
};
|
|
308
312
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
309
313
|
}, []);
|
|
310
|
-
const
|
|
311
|
-
if (
|
|
312
|
-
let
|
|
313
|
-
const
|
|
314
|
-
if (
|
|
315
|
-
const [
|
|
316
|
-
let
|
|
317
|
-
e === t &&
|
|
318
|
-
},
|
|
319
|
-
if (e.preventDefault(),
|
|
320
|
-
|
|
314
|
+
const oe = (e, t, n, i) => {
|
|
315
|
+
if (a) return;
|
|
316
|
+
let r = [...le], h = [...W];
|
|
317
|
+
const u = e === "bank" ? r : h, o = t === "bank" ? r : h, d = u.findIndex((se) => se.id === n);
|
|
318
|
+
if (d === -1) return;
|
|
319
|
+
const [T] = u.splice(d, 1);
|
|
320
|
+
let H = i;
|
|
321
|
+
e === t && H !== null && H !== void 0 && H > d && (H = H - 1), H == null || H < 0 || H > o.length ? o.push(T) : o.splice(H, 0, T), e === "bank" ? r = u : h = u, t === "bank" ? r = o : h = o, ye(r), ce(h);
|
|
322
|
+
}, K = (e, t, n) => {
|
|
323
|
+
if (e.preventDefault(), a) {
|
|
324
|
+
B({ list: null, id: null, side: null });
|
|
321
325
|
return;
|
|
322
326
|
}
|
|
323
327
|
const i = e.dataTransfer.getData("application/x-token") || (() => {
|
|
324
|
-
const
|
|
325
|
-
if (!
|
|
326
|
-
const
|
|
327
|
-
return
|
|
328
|
+
const r = e.dataTransfer.getData("text/plain");
|
|
329
|
+
if (!r) return "";
|
|
330
|
+
const h = le.some((d) => d.id === r), u = W.some((d) => d.id === r), o = h ? "bank" : u ? "selected" : null;
|
|
331
|
+
return o ? JSON.stringify({ from: o, id: r }) : "";
|
|
328
332
|
})();
|
|
329
333
|
if (i) {
|
|
330
334
|
try {
|
|
331
|
-
const
|
|
332
|
-
if (!
|
|
333
|
-
|
|
335
|
+
const r = JSON.parse(i);
|
|
336
|
+
if (!r || !r.id || !r.from) return;
|
|
337
|
+
oe(r.from, t, r.id, n);
|
|
334
338
|
} catch {
|
|
335
339
|
}
|
|
336
|
-
|
|
340
|
+
B({ list: null, id: null, side: null });
|
|
337
341
|
}
|
|
338
|
-
},
|
|
339
|
-
|
|
340
|
-
},
|
|
341
|
-
|
|
342
|
-
},
|
|
342
|
+
}, qe = (e) => {
|
|
343
|
+
_(e), Re.current = e, Q(Array(e).fill("")), k("time");
|
|
344
|
+
}, Ve = (e) => {
|
|
345
|
+
me(e), k("type");
|
|
346
|
+
}, Je = (e, t) => {
|
|
343
347
|
if (t.length > 41 || t && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(t))
|
|
344
348
|
return;
|
|
345
|
-
const i = [...
|
|
346
|
-
i[e] = t,
|
|
347
|
-
const
|
|
348
|
-
|
|
349
|
-
},
|
|
350
|
-
|
|
349
|
+
const i = [...I];
|
|
350
|
+
i[e] = t, Q(i);
|
|
351
|
+
const r = ae(i);
|
|
352
|
+
r.isValid || console.warn("Validation errors:", r.errors);
|
|
353
|
+
}, Ue = (e) => e.trim().replace(/\s+/g, " "), ve = (e) => e <= 3 ? 20 : e <= 5 ? 18 : e <= 7 ? 16 : e <= 9 ? 14 : 12, Ye = () => {
|
|
354
|
+
I.some((t) => t.trim().length === 0) || (Q((t) => t.map((n) => Ue(n))), M(0), xe(0), Se.current = 0, We(null), k("getready"));
|
|
351
355
|
};
|
|
352
|
-
|
|
353
|
-
if (
|
|
354
|
-
const e = setTimeout(() =>
|
|
356
|
+
J(() => {
|
|
357
|
+
if (x === "getready") {
|
|
358
|
+
const e = setTimeout(() => pe(0), 3e3);
|
|
355
359
|
return () => clearTimeout(e);
|
|
356
360
|
}
|
|
357
|
-
}, [
|
|
358
|
-
const
|
|
359
|
-
const t =
|
|
361
|
+
}, [x]);
|
|
362
|
+
const pe = (e) => {
|
|
363
|
+
const t = I[e];
|
|
360
364
|
if (!t) return;
|
|
361
|
-
const i =
|
|
365
|
+
const i = pn(
|
|
362
366
|
t.trim().split(/\s+/).filter(Boolean)
|
|
363
|
-
).map((
|
|
364
|
-
id: `${Date.now()}-${e}-${
|
|
365
|
-
text:
|
|
367
|
+
).map((r, h) => ({
|
|
368
|
+
id: `${Date.now()}-${e}-${h}-${Math.random().toString(36).slice(2)}`,
|
|
369
|
+
text: r
|
|
366
370
|
}));
|
|
367
|
-
|
|
368
|
-
};
|
|
369
|
-
|
|
370
|
-
if (
|
|
371
|
-
|
|
372
|
-
|
|
371
|
+
ye(i), ce([]), xe(e), Se.current = e, be(fe || 20), C(null), ee(!1), te(!1), k("play");
|
|
372
|
+
}, S = Z(null);
|
|
373
|
+
J(() => {
|
|
374
|
+
if (x !== "play" || a) {
|
|
375
|
+
S.current !== null && (window.clearTimeout(S.current), S.current = null);
|
|
376
|
+
return;
|
|
377
|
+
}
|
|
378
|
+
const e = I[E];
|
|
379
|
+
if (!e) {
|
|
380
|
+
C(null), S.current !== null && (window.clearTimeout(S.current), S.current = null);
|
|
381
|
+
return;
|
|
382
|
+
}
|
|
383
|
+
if (W.length === 0) {
|
|
384
|
+
C(null), S.current !== null && (window.clearTimeout(S.current), S.current = null);
|
|
385
|
+
return;
|
|
386
|
+
}
|
|
387
|
+
const t = e.trim().split(/\s+/), n = W.map((r) => r.text);
|
|
388
|
+
if (n.length === t.length && n.every((r, h) => r === t[h]))
|
|
389
|
+
C("correct"), ne || (te(!0), M((r) => r + 1), P("correct"), L("Correct! Well done!"));
|
|
390
|
+
else {
|
|
391
|
+
S.current !== null && (window.clearTimeout(S.current), S.current = null);
|
|
392
|
+
const r = t.filter((d) => !n.includes(d)).length, h = n.filter((d) => !t.includes(d)).length, u = t.filter((d, T) => d !== n[T]).length, o = r + h + u;
|
|
393
|
+
C(o === 1 ? "almost" : "wrong"), ne && (te(!1), M((d) => Math.max(0, d - 1)));
|
|
394
|
+
}
|
|
395
|
+
return () => {
|
|
396
|
+
S.current !== null && (window.clearTimeout(S.current), S.current = null);
|
|
397
|
+
};
|
|
398
|
+
}, [x, W, I, E, a, A, ne, z]), J(() => {
|
|
399
|
+
if (x === "play" && !a)
|
|
400
|
+
if (Y.current !== null && window.clearTimeout(Y.current), $ > 0)
|
|
401
|
+
Y.current = window.setTimeout(() => be((e) => e - 1), 1e3);
|
|
373
402
|
else {
|
|
374
|
-
|
|
375
|
-
const t =
|
|
376
|
-
|
|
403
|
+
ee(!0);
|
|
404
|
+
const t = I[E].trim().split(/\s+/), n = W.map((o) => o.text), i = t.filter((o) => !n.includes(o)).length, r = n.filter((o) => !t.includes(o)).length, h = t.filter((o, d) => o !== n[d]).length, u = i + r + h;
|
|
405
|
+
u === 0 ? (C("correct"), ne || (te(!0), M((o) => o + 1)), P("correct"), L("Correct! Well done!")) : u === 1 ? (C("almost"), P("half"), L("Almost correct! Just one mistake.")) : (C("wrong"), P("wrong"), L("Not quite right. Keep trying!"));
|
|
377
406
|
}
|
|
378
407
|
return () => {
|
|
379
|
-
|
|
408
|
+
Y.current !== null && window.clearTimeout(Y.current);
|
|
380
409
|
};
|
|
381
|
-
}, [
|
|
382
|
-
const
|
|
383
|
-
if (
|
|
384
|
-
|
|
410
|
+
}, [x, $, a, I, E, W]);
|
|
411
|
+
const Ke = (e = !0) => {
|
|
412
|
+
if (a && e) {
|
|
413
|
+
E + 1 < (z || 0) ? pe(E + 1) : (k("results"), setTimeout(() => ge(), 600));
|
|
385
414
|
return;
|
|
386
415
|
}
|
|
387
|
-
if (e && !
|
|
388
|
-
const n =
|
|
389
|
-
|
|
416
|
+
if (e && !a) {
|
|
417
|
+
const n = I[E].trim().split(/\s+/), i = W.map((d) => d.text), r = n.filter((d) => !i.includes(d)).length, h = i.filter((d) => !n.includes(d)).length, u = n.filter((d, T) => d !== i[T]).length, o = r + h + u;
|
|
418
|
+
o === 0 && $ > 0 ? (M((d) => d + 1), C("correct"), P("correct"), L("Correct! Well done!")) : o === 1 ? (M((d) => d + 0.5), C("almost"), P("half"), L("Almost correct! Just one mistake.")) : (C("wrong"), P("wrong"), L("Not quite right. Keep trying!")), E + 1 < (z || 0) ? setTimeout(() => pe(E + 1), 800) : (k("results"), setTimeout(() => ge(), 600));
|
|
390
419
|
}
|
|
391
420
|
};
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
}, [
|
|
395
|
-
const
|
|
421
|
+
J(() => {
|
|
422
|
+
x === "results" && U > he && (De(U), localStorage.setItem("magicSentenceBest", String(U)));
|
|
423
|
+
}, [x, U, he]);
|
|
424
|
+
const P = (e) => {
|
|
396
425
|
const t = new (window.AudioContext || window.webkitAudioContext)(), n = t.createOscillator(), i = t.createGain();
|
|
397
426
|
switch (n.connect(i), i.connect(t.destination), e) {
|
|
398
427
|
case "start":
|
|
@@ -412,36 +441,36 @@ function ln(h = {}) {
|
|
|
412
441
|
break;
|
|
413
442
|
}
|
|
414
443
|
i.gain.setValueAtTime(0.1, t.currentTime), n.start(), n.stop(t.currentTime + 0.2);
|
|
415
|
-
},
|
|
416
|
-
const t = Date.now() + 2500, n = ["#ec4c44", "#f7c948", "#6fcf97", "#56ccf2", "#bb6bd9"], i = document.createElement("canvas"),
|
|
444
|
+
}, ge = () => {
|
|
445
|
+
const t = Date.now() + 2500, n = ["#ec4c44", "#f7c948", "#6fcf97", "#56ccf2", "#bb6bd9"], i = document.createElement("canvas"), r = i.getContext("2d");
|
|
417
446
|
i.width = window.innerWidth, i.height = window.innerHeight, i.style.position = "fixed", i.style.top = "0", i.style.left = "0", i.style.pointerEvents = "none", document.body.appendChild(i);
|
|
418
|
-
const
|
|
447
|
+
const h = Array.from({ length: 100 }).map(() => ({
|
|
419
448
|
x: Math.random() * i.width,
|
|
420
449
|
y: Math.random() * i.height - i.height,
|
|
421
450
|
size: 6 + Math.random() * 6,
|
|
422
451
|
color: n[Math.floor(Math.random() * n.length)],
|
|
423
452
|
speed: 2 + Math.random() * 4,
|
|
424
453
|
tilt: Math.random() * 2 * Math.PI
|
|
425
|
-
})),
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
}), Date.now() < t ? requestAnimationFrame(
|
|
454
|
+
})), u = () => {
|
|
455
|
+
r.clearRect(0, 0, i.width, i.height), h.forEach((o) => {
|
|
456
|
+
r.fillStyle = o.color, r.beginPath(), r.ellipse(o.x, o.y, o.size, o.size / 2, o.tilt, 0, 2 * Math.PI), r.fill(), o.y += o.speed, o.x += Math.sin(o.tilt);
|
|
457
|
+
}), Date.now() < t ? requestAnimationFrame(u) : document.body.removeChild(i);
|
|
429
458
|
};
|
|
430
|
-
|
|
431
|
-
},
|
|
432
|
-
/* @__PURE__ */
|
|
433
|
-
/* @__PURE__ */
|
|
434
|
-
/* @__PURE__ */
|
|
459
|
+
u();
|
|
460
|
+
}, Ze = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
|
|
461
|
+
/* @__PURE__ */ l("h1", { style: g.gmHeadline1, children: "MAGIC SENTENCE" }),
|
|
462
|
+
/* @__PURE__ */ l("p", { style: g.gmBodyM, children: "Select number of rounds" }),
|
|
463
|
+
/* @__PURE__ */ l("div", { style: {
|
|
435
464
|
display: "flex",
|
|
436
|
-
gap:
|
|
465
|
+
gap: f() ? "8px" : "16px",
|
|
437
466
|
justifyContent: "center"
|
|
438
|
-
}, children: [3, 4, 5].map((e) => /* @__PURE__ */
|
|
467
|
+
}, children: [3, 4, 5].map((e) => /* @__PURE__ */ y(
|
|
439
468
|
"button",
|
|
440
469
|
{
|
|
441
|
-
onClick: () =>
|
|
470
|
+
onClick: () => qe(e),
|
|
442
471
|
style: {
|
|
443
472
|
...g.gmButton,
|
|
444
|
-
...
|
|
473
|
+
...b("medium")
|
|
445
474
|
},
|
|
446
475
|
children: [
|
|
447
476
|
e,
|
|
@@ -450,20 +479,20 @@ function ln(h = {}) {
|
|
|
450
479
|
},
|
|
451
480
|
e
|
|
452
481
|
)) })
|
|
453
|
-
] }),
|
|
454
|
-
/* @__PURE__ */
|
|
455
|
-
/* @__PURE__ */
|
|
456
|
-
/* @__PURE__ */
|
|
482
|
+
] }), _e = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
|
|
483
|
+
/* @__PURE__ */ l("h1", { style: g.gmHeadline1, children: "MAGIC SENTENCE" }),
|
|
484
|
+
/* @__PURE__ */ l("p", { style: g.gmBodyM, children: "Select time per round" }),
|
|
485
|
+
/* @__PURE__ */ l("div", { style: {
|
|
457
486
|
display: "flex",
|
|
458
|
-
gap:
|
|
487
|
+
gap: f() ? "8px" : "16px",
|
|
459
488
|
justifyContent: "center"
|
|
460
|
-
}, children: [15, 20, 30].map((e) => /* @__PURE__ */
|
|
489
|
+
}, children: [15, 20, 30].map((e) => /* @__PURE__ */ y(
|
|
461
490
|
"button",
|
|
462
491
|
{
|
|
463
|
-
onClick: () =>
|
|
492
|
+
onClick: () => Ve(e),
|
|
464
493
|
style: {
|
|
465
494
|
...g.gmButton,
|
|
466
|
-
...
|
|
495
|
+
...b("medium")
|
|
467
496
|
},
|
|
468
497
|
children: [
|
|
469
498
|
e,
|
|
@@ -472,16 +501,16 @@ function ln(h = {}) {
|
|
|
472
501
|
},
|
|
473
502
|
e
|
|
474
503
|
)) })
|
|
475
|
-
] }),
|
|
476
|
-
/* @__PURE__ */
|
|
504
|
+
] }), Qe = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
|
|
505
|
+
/* @__PURE__ */ y("h2", { style: { ...g.gmBodyM, marginBottom: "0px" }, children: [
|
|
477
506
|
"Type down ",
|
|
478
|
-
|
|
507
|
+
z,
|
|
479
508
|
" sentence",
|
|
480
|
-
|
|
509
|
+
z && z > 1 ? "s" : "",
|
|
481
510
|
" for your student"
|
|
482
511
|
] }),
|
|
483
|
-
/* @__PURE__ */
|
|
484
|
-
/* @__PURE__ */
|
|
512
|
+
/* @__PURE__ */ l("p", { style: { ...g.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
|
|
513
|
+
/* @__PURE__ */ l("div", { style: {
|
|
485
514
|
display: "flex",
|
|
486
515
|
flexDirection: "column",
|
|
487
516
|
gap: 12,
|
|
@@ -491,16 +520,16 @@ function ln(h = {}) {
|
|
|
491
520
|
// Минимальная ширина по содержимому
|
|
492
521
|
maxWidth: "600px"
|
|
493
522
|
// Ограничиваем максимальную ширину
|
|
494
|
-
}, children:
|
|
523
|
+
}, children: I.map((e, t) => /* @__PURE__ */ l(
|
|
495
524
|
"input",
|
|
496
525
|
{
|
|
497
526
|
value: e,
|
|
498
527
|
placeholder: `Sentence ${t + 1}`,
|
|
499
|
-
onChange: (n) =>
|
|
528
|
+
onChange: (n) => Je(t, n.target.value),
|
|
500
529
|
style: {
|
|
501
530
|
...g.gmInput,
|
|
502
|
-
padding:
|
|
503
|
-
fontSize:
|
|
531
|
+
padding: f() ? "8px 12px" : "12px 16px",
|
|
532
|
+
fontSize: f() ? "14px" : "16px",
|
|
504
533
|
width: "100%",
|
|
505
534
|
// Поля теперь будут шире благодаря увеличенной ширине контейнера
|
|
506
535
|
textAlign: "center"
|
|
@@ -509,125 +538,129 @@ function ln(h = {}) {
|
|
|
509
538
|
},
|
|
510
539
|
t
|
|
511
540
|
)) }),
|
|
512
|
-
/* @__PURE__ */
|
|
541
|
+
/* @__PURE__ */ l(
|
|
513
542
|
"button",
|
|
514
543
|
{
|
|
515
|
-
onClick:
|
|
516
|
-
disabled:
|
|
544
|
+
onClick: Ye,
|
|
545
|
+
disabled: I.some((e) => e.trim().length === 0),
|
|
517
546
|
style: {
|
|
518
547
|
...g.gmButton,
|
|
519
548
|
marginTop: 30,
|
|
520
|
-
background:
|
|
521
|
-
cursor:
|
|
522
|
-
...
|
|
549
|
+
background: I.some((e) => e.trim().length === 0) ? "#ccc" : "#ec4c44",
|
|
550
|
+
cursor: I.some((e) => e.trim().length === 0) ? "not-allowed" : "pointer",
|
|
551
|
+
...b("large")
|
|
523
552
|
},
|
|
524
553
|
children: "PLAY"
|
|
525
554
|
}
|
|
526
555
|
)
|
|
527
|
-
] }),
|
|
528
|
-
/* @__PURE__ */
|
|
556
|
+
] }), en = () => /* @__PURE__ */ y("div", { style: g.gmReadyWrapper, children: [
|
|
557
|
+
/* @__PURE__ */ l("h1", { style: {
|
|
529
558
|
...g.gmHeadline1,
|
|
530
559
|
color: "#ec4c44"
|
|
531
560
|
}, children: "GET READY" }),
|
|
532
|
-
/* @__PURE__ */
|
|
533
|
-
] }),
|
|
534
|
-
/* @__PURE__ */
|
|
535
|
-
marginBottom:
|
|
536
|
-
fontSize:
|
|
561
|
+
/* @__PURE__ */ l("div", { style: g.gmHourglass, children: "⏳" })
|
|
562
|
+
] }), nn = () => /* @__PURE__ */ y("div", { style: g.gmGameLayout, children: [
|
|
563
|
+
/* @__PURE__ */ y("h2", { style: {
|
|
564
|
+
marginBottom: f() ? "5px" : "10px",
|
|
565
|
+
fontSize: f() ? "16px" : "20px"
|
|
537
566
|
}, children: [
|
|
538
567
|
"Round ",
|
|
539
|
-
|
|
568
|
+
E + 1,
|
|
540
569
|
"/",
|
|
541
|
-
|
|
570
|
+
z,
|
|
542
571
|
" — ",
|
|
543
|
-
|
|
572
|
+
a ? "TIME'S UP!" : `Time: ${$}s`
|
|
544
573
|
] }),
|
|
545
|
-
/* @__PURE__ */
|
|
574
|
+
/* @__PURE__ */ l(
|
|
546
575
|
"div",
|
|
547
576
|
{
|
|
548
577
|
style: {
|
|
549
578
|
width: "60%",
|
|
550
|
-
height:
|
|
579
|
+
height: f() ? "8px" : "14px",
|
|
551
580
|
borderRadius: 8,
|
|
552
581
|
background: "#eee",
|
|
553
582
|
overflow: "hidden",
|
|
554
|
-
marginBottom:
|
|
583
|
+
marginBottom: f() ? "10px" : "20px"
|
|
555
584
|
},
|
|
556
|
-
children: /* @__PURE__ */
|
|
585
|
+
children: /* @__PURE__ */ l(
|
|
557
586
|
"div",
|
|
558
587
|
{
|
|
559
588
|
style: {
|
|
560
589
|
height: "100%",
|
|
561
|
-
width: `${
|
|
562
|
-
background:
|
|
590
|
+
width: `${$ / (fe || 20) * 100}%`,
|
|
591
|
+
background: $ <= 5 ? "#ec4c44" : "#4caf50",
|
|
563
592
|
transition: "width 1s linear"
|
|
564
593
|
}
|
|
565
594
|
}
|
|
566
595
|
)
|
|
567
596
|
}
|
|
568
597
|
),
|
|
569
|
-
/* @__PURE__ */
|
|
598
|
+
/* @__PURE__ */ l(
|
|
570
599
|
"div",
|
|
571
600
|
{
|
|
572
601
|
onDragOver: (e) => e.preventDefault(),
|
|
573
|
-
onDrop: (e) =>
|
|
602
|
+
onDrop: (e) => K(e, "bank", null),
|
|
574
603
|
style: {
|
|
575
604
|
display: "flex",
|
|
576
|
-
flexWrap:
|
|
577
|
-
gap:
|
|
605
|
+
flexWrap: R() ? "wrap" : "nowrap",
|
|
606
|
+
gap: c || window.innerWidth < 768 ? "6px" : "10px",
|
|
578
607
|
justifyContent: "center",
|
|
579
|
-
marginBottom:
|
|
580
|
-
padding:
|
|
608
|
+
marginBottom: c || window.innerWidth < 768 ? "15px" : "30px",
|
|
609
|
+
padding: c || window.innerWidth < 768 ? "5px" : "10px",
|
|
581
610
|
width: "100%",
|
|
582
611
|
boxSizing: "border-box"
|
|
583
612
|
},
|
|
584
|
-
children:
|
|
613
|
+
children: le.map((e, t) => /* @__PURE__ */ l(
|
|
585
614
|
"div",
|
|
586
615
|
{
|
|
587
|
-
draggable: !
|
|
616
|
+
draggable: !a,
|
|
588
617
|
role: "button",
|
|
589
|
-
tabIndex:
|
|
590
|
-
"aria-label":
|
|
618
|
+
tabIndex: a ? -1 : 0,
|
|
619
|
+
"aria-label": a ? `Word: ${e.text} (time expired)` : ln("Drag word", e.text, "to build sentence"),
|
|
591
620
|
onDragStart: (n) => {
|
|
592
|
-
if (
|
|
621
|
+
if (a) {
|
|
593
622
|
n.preventDefault();
|
|
594
623
|
return;
|
|
595
624
|
}
|
|
596
625
|
n.dataTransfer.setData(
|
|
597
626
|
"application/x-token",
|
|
598
627
|
JSON.stringify({ from: "bank", id: e.id })
|
|
599
|
-
), n.dataTransfer.setData("text/plain", e.id),
|
|
628
|
+
), n.dataTransfer.setData("text/plain", e.id), L(`Dragging word: ${e.text}`);
|
|
600
629
|
},
|
|
601
630
|
onKeyDown: (n) => {
|
|
602
|
-
|
|
631
|
+
a || cn(n, () => oe("bank", "selected", e.id, null));
|
|
603
632
|
},
|
|
604
633
|
onDragOver: (n) => n.preventDefault(),
|
|
605
634
|
onDrop: (n) => {
|
|
606
|
-
const i = n.currentTarget.getBoundingClientRect(),
|
|
607
|
-
|
|
635
|
+
const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2, h = n.clientX > r ? t + 1 : t;
|
|
636
|
+
B({ list: null, id: null, side: null }), n.stopPropagation(), K(n, "bank", h);
|
|
608
637
|
},
|
|
609
638
|
onDragEnter: (n) => {
|
|
610
|
-
if (
|
|
611
|
-
const i = n.currentTarget.getBoundingClientRect(),
|
|
612
|
-
|
|
639
|
+
if (a) return;
|
|
640
|
+
const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2;
|
|
641
|
+
B({ list: "bank", id: e.id, side: n.clientX > r ? "right" : "left" });
|
|
613
642
|
},
|
|
614
|
-
onDragLeave: () =>
|
|
643
|
+
onDragLeave: () => B({ list: null, id: null, side: null }),
|
|
615
644
|
onClick: () => {
|
|
616
|
-
|
|
645
|
+
a || oe("bank", "selected", e.id, null);
|
|
617
646
|
},
|
|
618
647
|
style: {
|
|
619
|
-
padding:
|
|
620
|
-
borderRadius:
|
|
648
|
+
padding: c || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
|
|
649
|
+
borderRadius: c || window.innerWidth < 768 ? "6px" : "10px",
|
|
621
650
|
border: "1px solid #ccc",
|
|
622
|
-
background:
|
|
623
|
-
cursor:
|
|
624
|
-
fontSize:
|
|
625
|
-
|
|
626
|
-
|
|
651
|
+
background: a ? "#f0f0f0" : "#f9f9f9",
|
|
652
|
+
cursor: a ? "not-allowed" : m.list === "bank" && m.id === e.id ? "grabbing" : "grab",
|
|
653
|
+
fontSize: c || window.innerWidth < 768 ? "12px" : "18px",
|
|
654
|
+
...m.list === "bank" && m.id === e.id && m.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
|
|
655
|
+
...m.list === "bank" && m.id === e.id && m.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
|
|
627
656
|
flexShrink: 0,
|
|
628
657
|
flexBasis: "auto",
|
|
629
|
-
opacity:
|
|
630
|
-
transition: "opacity 0.3s ease"
|
|
658
|
+
opacity: a ? 0.6 : 1,
|
|
659
|
+
transition: "opacity 0.3s ease, transform 0.2s ease",
|
|
660
|
+
...m.list === "bank" && m.id === e.id ? {
|
|
661
|
+
transform: "scale(1.05)",
|
|
662
|
+
boxShadow: "0 2px 8px rgba(59, 130, 246, 0.3)"
|
|
663
|
+
} : {}
|
|
631
664
|
},
|
|
632
665
|
children: e.text
|
|
633
666
|
},
|
|
@@ -635,13 +668,24 @@ function ln(h = {}) {
|
|
|
635
668
|
))
|
|
636
669
|
}
|
|
637
670
|
),
|
|
638
|
-
/* @__PURE__ */
|
|
671
|
+
/* @__PURE__ */ l(
|
|
639
672
|
"div",
|
|
640
673
|
{
|
|
641
674
|
onDragOver: (e) => e.preventDefault(),
|
|
642
|
-
onDrop: (e) =>
|
|
675
|
+
onDrop: (e) => {
|
|
676
|
+
const t = e.currentTarget.getBoundingClientRect(), n = Array.from(e.currentTarget.children);
|
|
677
|
+
if (n.length === 0) {
|
|
678
|
+
K(e, "selected", 0);
|
|
679
|
+
return;
|
|
680
|
+
}
|
|
681
|
+
let i = W.length, r = 1 / 0;
|
|
682
|
+
n.forEach((h, u) => {
|
|
683
|
+
const o = h.getBoundingClientRect(), d = o.left + o.width / 2, T = Math.abs(e.clientX - d);
|
|
684
|
+
T < r && (r = T, i = e.clientX < d ? u : u + 1);
|
|
685
|
+
}), e.clientX > t.right - 30 && (i = W.length), e.clientX < t.left + 30 && (i = 0), K(e, "selected", i);
|
|
686
|
+
},
|
|
643
687
|
style: {
|
|
644
|
-
minHeight:
|
|
688
|
+
minHeight: c || window.innerWidth < 768 ? "50px" : "70px",
|
|
645
689
|
width: "auto",
|
|
646
690
|
// Автоматическая ширина в зависимости от содержимого
|
|
647
691
|
maxWidth: "none",
|
|
@@ -649,23 +693,23 @@ function ln(h = {}) {
|
|
|
649
693
|
minWidth: "245px",
|
|
650
694
|
// Минимальная ширина для растягивания
|
|
651
695
|
border: A === "correct" ? "2px dashed #4caf50" : A === "almost" ? "2px dashed #ff9800" : A === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
|
|
652
|
-
borderRadius:
|
|
653
|
-
padding:
|
|
696
|
+
borderRadius: c || window.innerWidth < 768 ? "8px" : "12px",
|
|
697
|
+
padding: c || window.innerWidth < 768 ? "8px" : "12px",
|
|
654
698
|
display: "flex",
|
|
655
|
-
flexWrap:
|
|
699
|
+
flexWrap: R() ? "wrap" : "nowrap",
|
|
656
700
|
alignItems: "center",
|
|
657
701
|
justifyContent: "center",
|
|
658
|
-
fontSize: `${
|
|
702
|
+
fontSize: `${ve(W.length)}px`,
|
|
659
703
|
background: A === "correct" ? "#e8f5e8" : A === "almost" ? "#fff3e0" : A === "wrong" ? "#ffebee" : "#fafafa",
|
|
660
|
-
overflowX:
|
|
661
|
-
whiteSpace:
|
|
704
|
+
overflowX: R() ? "hidden" : "auto",
|
|
705
|
+
whiteSpace: R() ? "normal" : "nowrap"
|
|
662
706
|
},
|
|
663
|
-
children:
|
|
707
|
+
children: W.map((e, t) => /* @__PURE__ */ l(
|
|
664
708
|
"span",
|
|
665
709
|
{
|
|
666
|
-
draggable: !
|
|
710
|
+
draggable: !a,
|
|
667
711
|
onDragStart: (n) => {
|
|
668
|
-
if (
|
|
712
|
+
if (a) {
|
|
669
713
|
n.preventDefault();
|
|
670
714
|
return;
|
|
671
715
|
}
|
|
@@ -676,37 +720,41 @@ function ln(h = {}) {
|
|
|
676
720
|
},
|
|
677
721
|
onDragOver: (n) => n.preventDefault(),
|
|
678
722
|
onDrop: (n) => {
|
|
679
|
-
const i = n.currentTarget.getBoundingClientRect(),
|
|
680
|
-
|
|
723
|
+
const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2, h = i.width * 0.25, u = n.clientX < r - h ? t : n.clientX > r + h || n.clientX > r ? t + 1 : t;
|
|
724
|
+
B({ list: null, id: null, side: null }), n.stopPropagation(), K(n, "selected", u);
|
|
681
725
|
},
|
|
682
726
|
onDragEnter: (n) => {
|
|
683
|
-
if (
|
|
684
|
-
const i = n.currentTarget.getBoundingClientRect(),
|
|
685
|
-
|
|
727
|
+
if (a) return;
|
|
728
|
+
const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2;
|
|
729
|
+
B({ list: "selected", id: e.id, side: n.clientX > r ? "right" : "left" });
|
|
686
730
|
},
|
|
687
|
-
onDragLeave: () =>
|
|
731
|
+
onDragLeave: () => B({ list: null, id: null, side: null }),
|
|
688
732
|
onClick: () => {
|
|
689
|
-
|
|
733
|
+
a || oe("selected", "bank", e.id, null);
|
|
690
734
|
},
|
|
691
|
-
title:
|
|
735
|
+
title: a ? "Time expired" : "Click to remove back to bank",
|
|
692
736
|
style: {
|
|
693
|
-
padding:
|
|
694
|
-
margin:
|
|
695
|
-
borderRadius:
|
|
696
|
-
background:
|
|
697
|
-
border:
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
cursor:
|
|
737
|
+
padding: f() ? "4px 6px" : "6px 10px",
|
|
738
|
+
margin: f() ? "2px" : "4px",
|
|
739
|
+
borderRadius: f() ? "4px" : "8px",
|
|
740
|
+
background: a ? "#f0f0f0" : "#ffe9e7",
|
|
741
|
+
border: a ? "1px solid #ccc" : "1px solid #ec4c44",
|
|
742
|
+
...m.list === "selected" && m.id === e.id && m.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
|
|
743
|
+
...m.list === "selected" && m.id === e.id && m.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
|
|
744
|
+
cursor: a ? "not-allowed" : m.list === "selected" && m.id === e.id ? "grabbing" : "grab",
|
|
701
745
|
userSelect: "none",
|
|
702
|
-
fontSize: `${
|
|
746
|
+
fontSize: `${ve(W.length)}px`,
|
|
703
747
|
// Адаптивный размер шрифта для слов
|
|
704
748
|
fontFamily: '"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
|
|
705
749
|
// Более плотный шрифт
|
|
706
750
|
whiteSpace: "nowrap",
|
|
707
751
|
// Запрещаем перенос слов
|
|
708
|
-
opacity:
|
|
709
|
-
transition: "opacity 0.3s ease"
|
|
752
|
+
opacity: a ? 0.6 : 1,
|
|
753
|
+
transition: "opacity 0.3s ease, transform 0.2s ease",
|
|
754
|
+
...m.list === "selected" && m.id === e.id ? {
|
|
755
|
+
transform: "scale(1.05)",
|
|
756
|
+
boxShadow: "0 2px 8px rgba(59, 130, 246, 0.3)"
|
|
757
|
+
} : {}
|
|
710
758
|
},
|
|
711
759
|
children: e.text
|
|
712
760
|
},
|
|
@@ -714,91 +762,91 @@ function ln(h = {}) {
|
|
|
714
762
|
))
|
|
715
763
|
}
|
|
716
764
|
),
|
|
717
|
-
/* @__PURE__ */
|
|
765
|
+
/* @__PURE__ */ l(
|
|
718
766
|
"button",
|
|
719
767
|
{
|
|
720
|
-
onClick: () =>
|
|
721
|
-
disabled: !
|
|
768
|
+
onClick: () => Ke(!0),
|
|
769
|
+
disabled: !a && W.length === 0,
|
|
722
770
|
style: {
|
|
723
|
-
marginTop:
|
|
724
|
-
fontSize:
|
|
725
|
-
padding:
|
|
726
|
-
borderRadius:
|
|
727
|
-
background:
|
|
771
|
+
marginTop: f() ? "15px" : "30px",
|
|
772
|
+
fontSize: f() ? "14px" : "20px",
|
|
773
|
+
padding: f() ? "6px 12px" : "10px 24px",
|
|
774
|
+
borderRadius: f() ? "8px" : "12px",
|
|
775
|
+
background: a || W.length > 0 ? "#ec4c44" : "#ccc",
|
|
728
776
|
color: "white",
|
|
729
777
|
border: "none",
|
|
730
|
-
cursor:
|
|
778
|
+
cursor: a || W.length > 0 ? "pointer" : "not-allowed"
|
|
731
779
|
},
|
|
732
780
|
children: "NEXT"
|
|
733
781
|
}
|
|
734
782
|
)
|
|
735
|
-
] }),
|
|
736
|
-
/* @__PURE__ */
|
|
783
|
+
] }), tn = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
|
|
784
|
+
/* @__PURE__ */ l("h1", { style: {
|
|
737
785
|
...g.gmHeadline1,
|
|
738
|
-
marginTop: (
|
|
739
|
-
marginBottom:
|
|
740
|
-
fontSize:
|
|
786
|
+
marginTop: (c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V, "0px"),
|
|
787
|
+
marginBottom: c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V ? "2px" : "10px",
|
|
788
|
+
fontSize: c && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "32px" : "clamp(28px, 4vw, 40px)"
|
|
741
789
|
}, children: "Game Over 🎯" }),
|
|
742
|
-
/* @__PURE__ */
|
|
790
|
+
/* @__PURE__ */ y("h2", { style: {
|
|
743
791
|
...g.gmHeadline2,
|
|
744
|
-
marginTop: (
|
|
745
|
-
marginBottom:
|
|
746
|
-
fontSize:
|
|
792
|
+
marginTop: (c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V, "0px"),
|
|
793
|
+
marginBottom: c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V ? "2px" : "16px",
|
|
794
|
+
fontSize: c && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "18px" : "24px"
|
|
747
795
|
}, children: [
|
|
748
796
|
"Your score: ",
|
|
749
|
-
|
|
797
|
+
U,
|
|
750
798
|
" out of ",
|
|
751
|
-
|
|
799
|
+
z
|
|
752
800
|
] }),
|
|
753
|
-
/* @__PURE__ */
|
|
801
|
+
/* @__PURE__ */ y("p", { style: {
|
|
754
802
|
...g.gmBodyM,
|
|
755
803
|
color: "#10b981",
|
|
756
|
-
marginTop:
|
|
757
|
-
marginBottom:
|
|
758
|
-
fontSize:
|
|
804
|
+
marginTop: c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V ? "0px" : "12px",
|
|
805
|
+
marginBottom: c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V ? "2px" : "16px",
|
|
806
|
+
fontSize: c && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "14px" : "16px"
|
|
759
807
|
}, children: [
|
|
760
808
|
"Best score: ",
|
|
761
|
-
|
|
809
|
+
he
|
|
762
810
|
] }),
|
|
763
|
-
/* @__PURE__ */
|
|
811
|
+
/* @__PURE__ */ y("div", { style: {
|
|
764
812
|
display: "flex",
|
|
765
|
-
gap:
|
|
766
|
-
marginTop:
|
|
813
|
+
gap: c && window.innerWidth > window.innerHeight || c && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "6px" : "12px",
|
|
814
|
+
marginTop: c && window.innerWidth > window.innerHeight || c && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "2px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || Pe ? "12px" : "24px"
|
|
767
815
|
}, children: [
|
|
768
|
-
/* @__PURE__ */
|
|
816
|
+
/* @__PURE__ */ l(
|
|
769
817
|
"button",
|
|
770
818
|
{
|
|
771
819
|
onClick: () => {
|
|
772
|
-
|
|
773
|
-
k("getready"),
|
|
820
|
+
ge(), P("start"), setTimeout(() => {
|
|
821
|
+
k("getready"), We(null), ee(!1);
|
|
774
822
|
}, 800);
|
|
775
823
|
},
|
|
776
824
|
style: {
|
|
777
825
|
...g.gmButton,
|
|
778
|
-
...
|
|
826
|
+
...b("medium")
|
|
779
827
|
},
|
|
780
828
|
children: "🔁 Play again"
|
|
781
829
|
}
|
|
782
830
|
),
|
|
783
|
-
/* @__PURE__ */
|
|
831
|
+
/* @__PURE__ */ l(
|
|
784
832
|
"button",
|
|
785
833
|
{
|
|
786
834
|
onClick: () => {
|
|
787
|
-
|
|
835
|
+
P("click"), k("select"), _(null), me(null), Q([]), M(0), ce([]), ee(!1);
|
|
788
836
|
},
|
|
789
837
|
style: {
|
|
790
838
|
...g.gmButton,
|
|
791
|
-
...
|
|
839
|
+
...b("medium")
|
|
792
840
|
},
|
|
793
841
|
children: "⬅️ Exit"
|
|
794
842
|
}
|
|
795
843
|
)
|
|
796
844
|
] })
|
|
797
|
-
] }),
|
|
798
|
-
return /* @__PURE__ */
|
|
845
|
+
] }), rn = !c && v;
|
|
846
|
+
return /* @__PURE__ */ l(
|
|
799
847
|
"div",
|
|
800
848
|
{
|
|
801
|
-
ref:
|
|
849
|
+
ref: de,
|
|
802
850
|
style: {
|
|
803
851
|
width: "100%",
|
|
804
852
|
height: "100%",
|
|
@@ -814,90 +862,81 @@ function ln(h = {}) {
|
|
|
814
862
|
right: 0,
|
|
815
863
|
bottom: 0
|
|
816
864
|
},
|
|
817
|
-
children: /* @__PURE__ */
|
|
865
|
+
children: /* @__PURE__ */ l(
|
|
818
866
|
"div",
|
|
819
867
|
{
|
|
820
868
|
style: {
|
|
821
|
-
width:
|
|
822
|
-
height:
|
|
869
|
+
width: c ? "100%" : ke || 1e3,
|
|
870
|
+
height: c ? "100%" : ke || 1e3,
|
|
823
871
|
display: "flex",
|
|
824
872
|
justifyContent: "center",
|
|
825
873
|
alignItems: "center",
|
|
826
874
|
overflow: "hidden",
|
|
827
|
-
borderRadius:
|
|
875
|
+
borderRadius: c ? 0 : "20px",
|
|
828
876
|
background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
|
|
829
|
-
boxShadow:
|
|
830
|
-
margin:
|
|
831
|
-
position: "relative"
|
|
877
|
+
boxShadow: c ? "none" : "0 0 40px rgba(0,0,0,0.1)",
|
|
878
|
+
margin: c ? "0 auto" : "unset",
|
|
879
|
+
position: "relative",
|
|
832
880
|
// needed so absolute logo is inside the square
|
|
881
|
+
transform: `scale(${Ee})`
|
|
882
|
+
// ✅ Применяем масштаб для широких экранов
|
|
833
883
|
},
|
|
834
|
-
children:
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
children: /* @__PURE__ */ m("div", { id: "magic-sentence-root", children: [
|
|
865
|
-
f === "select" ? je() : null,
|
|
866
|
-
f === "time" ? Oe() : null,
|
|
867
|
-
f === "type" ? Fe() : null,
|
|
868
|
-
f === "getready" ? Ze() : null,
|
|
869
|
-
f === "play" ? Qe() : null,
|
|
870
|
-
f === "results" ? Xe() : null
|
|
871
|
-
] })
|
|
872
|
-
}
|
|
873
|
-
)
|
|
874
|
-
]
|
|
884
|
+
children: /* @__PURE__ */ l(
|
|
885
|
+
"div",
|
|
886
|
+
{
|
|
887
|
+
style: {
|
|
888
|
+
transform: "translateZ(0)",
|
|
889
|
+
width: "100%",
|
|
890
|
+
height: "100%",
|
|
891
|
+
display: "flex",
|
|
892
|
+
justifyContent: "center",
|
|
893
|
+
alignItems: "center"
|
|
894
|
+
},
|
|
895
|
+
children: /* @__PURE__ */ y("div", { id: "magic-sentence-root", children: [
|
|
896
|
+
rn ? /* @__PURE__ */ l("div", { style: g.gmLogoFixed, children: /* @__PURE__ */ l(
|
|
897
|
+
"img",
|
|
898
|
+
{
|
|
899
|
+
src: s || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/magic%20sentence/logo.png` : "/logo.png"),
|
|
900
|
+
alt: "SPEAKID Logo",
|
|
901
|
+
style: g.gmLogoImg,
|
|
902
|
+
loading: "lazy"
|
|
903
|
+
}
|
|
904
|
+
) }) : null,
|
|
905
|
+
x === "select" ? Ze() : null,
|
|
906
|
+
x === "time" ? _e() : null,
|
|
907
|
+
x === "type" ? Qe() : null,
|
|
908
|
+
x === "getready" ? en() : null,
|
|
909
|
+
x === "play" ? nn() : null,
|
|
910
|
+
x === "results" ? tn() : null
|
|
911
|
+
] })
|
|
912
|
+
}
|
|
913
|
+
)
|
|
875
914
|
}
|
|
876
915
|
)
|
|
877
916
|
}
|
|
878
917
|
);
|
|
879
918
|
}
|
|
880
|
-
class
|
|
881
|
-
constructor(
|
|
882
|
-
super(
|
|
919
|
+
class yn extends sn {
|
|
920
|
+
constructor(s) {
|
|
921
|
+
super(s), this.state = { hasError: !1 };
|
|
883
922
|
}
|
|
884
|
-
static getDerivedStateFromError(
|
|
923
|
+
static getDerivedStateFromError(s) {
|
|
885
924
|
return {
|
|
886
925
|
hasError: !0,
|
|
887
|
-
error:
|
|
926
|
+
error: s
|
|
888
927
|
};
|
|
889
928
|
}
|
|
890
|
-
componentDidCatch(
|
|
891
|
-
console.error("Game Error:",
|
|
892
|
-
error:
|
|
893
|
-
errorInfo:
|
|
929
|
+
componentDidCatch(s, v) {
|
|
930
|
+
console.error("Game Error:", s, v), this.setState({
|
|
931
|
+
error: s,
|
|
932
|
+
errorInfo: v
|
|
894
933
|
});
|
|
895
934
|
}
|
|
896
935
|
handleReset = () => {
|
|
897
936
|
this.setState({ hasError: !1, error: void 0, errorInfo: void 0 });
|
|
898
937
|
};
|
|
899
938
|
render() {
|
|
900
|
-
return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */
|
|
939
|
+
return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ y("div", { style: {
|
|
901
940
|
display: "flex",
|
|
902
941
|
flexDirection: "column",
|
|
903
942
|
alignItems: "center",
|
|
@@ -909,9 +948,9 @@ class cn extends Ye {
|
|
|
909
948
|
color: "#dc2626",
|
|
910
949
|
fontFamily: "system-ui, sans-serif"
|
|
911
950
|
}, children: [
|
|
912
|
-
/* @__PURE__ */
|
|
913
|
-
/* @__PURE__ */
|
|
914
|
-
/* @__PURE__ */
|
|
951
|
+
/* @__PURE__ */ l("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
|
|
952
|
+
/* @__PURE__ */ l("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
|
|
953
|
+
/* @__PURE__ */ l(
|
|
915
954
|
"button",
|
|
916
955
|
{
|
|
917
956
|
onClick: this.handleReset,
|
|
@@ -925,14 +964,14 @@ class cn extends Ye {
|
|
|
925
964
|
cursor: "pointer",
|
|
926
965
|
transition: "background-color 0.2s"
|
|
927
966
|
},
|
|
928
|
-
onMouseOver: (
|
|
929
|
-
onMouseOut: (
|
|
967
|
+
onMouseOver: (s) => s.currentTarget.style.backgroundColor = "#b91c1c",
|
|
968
|
+
onMouseOut: (s) => s.currentTarget.style.backgroundColor = "#dc2626",
|
|
930
969
|
children: "🔄 Restart Game"
|
|
931
970
|
}
|
|
932
971
|
),
|
|
933
|
-
typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */
|
|
934
|
-
/* @__PURE__ */
|
|
935
|
-
/* @__PURE__ */
|
|
972
|
+
typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ y("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
|
|
973
|
+
/* @__PURE__ */ l("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
|
|
974
|
+
/* @__PURE__ */ y("pre", { style: {
|
|
936
975
|
backgroundColor: "#f3f4f6",
|
|
937
976
|
padding: "12px",
|
|
938
977
|
borderRadius: "4px",
|
|
@@ -948,12 +987,12 @@ class cn extends Ye {
|
|
|
948
987
|
}
|
|
949
988
|
}
|
|
950
989
|
export {
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
990
|
+
yn as ErrorBoundary,
|
|
991
|
+
xn as Game,
|
|
992
|
+
L as announceToScreenReader,
|
|
993
|
+
ln as createAriaLabel,
|
|
994
|
+
xn as default,
|
|
995
|
+
cn as handleKeyDown,
|
|
996
|
+
an as useValidation
|
|
958
997
|
};
|
|
959
998
|
//# sourceMappingURL=speakid-build-a-sentence.es.js.map
|