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