speakid-build-a-sentence 1.0.22 → 1.0.23

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