@mblinkov/whats-missing 20.0.44 → 20.0.46

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 (5) hide show
  1. package/CHANGELOG.md +219 -0
  2. package/dist/whats-missing.cjs.js +3 -3
  3. package/dist/whats-missing.es.js +281 -227
  4. package/package.json +1 -1
  5. package/src/Game.tsx +325 -64
package/dist/whats-missing.es.js CHANGED
@@ -1,9 +1,9 @@
1
- import { jsx as e, jsxs as h, Fragment as tn } from "react/jsx-runtime";
2
- import { useRef as Hn, useEffect as D, useState as r, useMemo as Wn } from "react";
3
- const un = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (o, x) => o.map(([l, w]) => ({
4
- src: `${un}${x}/${w.replace(/\s/g, "%20")}.png`,
5
- name: w
6
- })), fn = [
1
+ import { jsx as w, jsxs as s, Fragment as bn } from "react/jsx-runtime";
2
+ import { useRef as qn, useEffect as Q, useState as o, useMemo as Kn } from "react";
3
+ const On = window.origin + "/cloud/speakid/games/whatsmissing/", Z = (r, f) => r.map(([y, h]) => ({
4
+ src: `${On}${f}/${h.replace(/\s/g, "%20")}.png`,
5
+ name: h
6
+ })), Qn = [
7
7
  ["apple", "apple"],
8
8
  ["banana", "banana"],
9
9
  ["bread", "bread"],
@@ -29,7 +29,7 @@ const un = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (o, x) => o
29
29
  ["strawberry", "strawberry"],
30
30
  ["tomato", "tomato"],
31
31
  ["watermelon", "watermelon"]
32
- ], yn = [
32
+ ], Zn = [
33
33
  ["bear", "bear"],
34
34
  ["cat", "cat"],
35
35
  ["crocodile", "crocodile"],
@@ -49,7 +49,7 @@ const un = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (o, x) => o
49
49
  ["tortoise", "tortoise"],
50
50
  ["wolf", "wolf"],
51
51
  ["zebra", "zebra"]
52
- ], bn = [
52
+ ], Jn = [
53
53
  ["ball", "ball"],
54
54
  ["balloon", "balloon"],
55
55
  ["blocks", "blocks"],
@@ -69,23 +69,23 @@ const un = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (o, x) => o
69
69
  ["teddy_bear", "teddy bear"],
70
70
  ["yo-yo", "yo-yo"],
71
71
  ["crayons", "crayons"]
72
- ], on = {
73
- food: Y(fn, "food"),
74
- animals: Y(yn, "animals"),
75
- toys: Y(bn, "toys")
76
- }, kn = `
72
+ ], J = {
73
+ food: Z(Qn, "food"),
74
+ animals: Z(Zn, "animals"),
75
+ toys: Z(Jn, "toys")
76
+ }, Xn = `
77
77
  @keyframes spin {
78
78
  from { transform: rotate(0deg); }
79
79
  to { transform: rotate(360deg); }
80
80
  }
81
81
  `;
82
82
  if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
83
- const o = document.createElement("style");
84
- o.id = "spin-keyframes", o.innerHTML = kn, document.head.appendChild(o);
83
+ const r = document.createElement("style");
84
+ r.id = "spin-keyframes", r.innerHTML = Xn, document.head.appendChild(r);
85
85
  }
86
- const vn = {
86
+ const ni = {
87
87
  animation: "spin 1.4s linear infinite"
88
- }, t = {
88
+ }, d = {
89
89
  gmCenterScreen: {
90
90
  position: "relative",
91
91
  zIndex: 1,
@@ -218,11 +218,11 @@ const vn = {
218
218
  },
219
219
  gmHourglass: {
220
220
  fontSize: "42px",
221
- ...vn
221
+ ...ni
222
222
  }
223
- }, Sn = () => {
224
- const o = document.createElement("style");
225
- o.textContent = `
223
+ }, ii = () => {
224
+ const r = document.createElement("style");
225
+ r.id = "whats-missing-reset", r.textContent = `
226
226
  #whats-missing-root, #whats-missing-root * {
227
227
  box-sizing: border-box;
228
228
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
@@ -248,106 +248,124 @@ const vn = {
248
248
  height: 100% !important;
249
249
  overflow: hidden !important;
250
250
  }
251
- `, document.head.appendChild(o);
252
- }, zn = (o, x) => {
253
- const l = Array.from({ length: o.length + 1 }, () => Array(x.length + 1).fill(0));
254
- for (let w = 0; w <= o.length; w++) l[w][0] = w;
255
- for (let w = 0; w <= x.length; w++) l[0][w] = w;
256
- for (let w = 1; w <= o.length; w++)
257
- for (let s = 1; s <= x.length; s++)
258
- l[w][s] = o[w - 1] === x[s - 1] ? l[w - 1][s - 1] : Math.min(l[w - 1][s - 1], l[w][s - 1], l[w - 1][s]) + 1;
259
- return l[o.length][x.length];
251
+ `;
252
+ const f = document.getElementById("whats-missing-reset");
253
+ f && f.remove(), document.head.appendChild(r);
254
+ }, ei = (r, f) => {
255
+ const y = Array.from({ length: r.length + 1 }, () => Array(f.length + 1).fill(0));
256
+ for (let h = 0; h <= r.length; h++) y[h][0] = h;
257
+ for (let h = 0; h <= f.length; h++) y[0][h] = h;
258
+ for (let h = 1; h <= r.length; h++)
259
+ for (let u = 1; u <= f.length; u++)
260
+ y[h][u] = r[h - 1] === f[u - 1] ? y[h - 1][u - 1] : Math.min(y[h - 1][u - 1], y[h][u - 1], y[h - 1][u]) + 1;
261
+ return y[r.length][f.length];
260
262
  };
261
- function Mn({
262
- gameCubeSize: o,
263
- screenHeight: x,
264
- screenWidth: l
263
+ function si({
264
+ gameCubeSize: r,
265
+ screenHeight: f,
266
+ screenWidth: y
265
267
  }) {
266
- const w = Hn(null);
267
- D(() => (Sn(), () => {
268
- document.body.style.overflow = "";
268
+ const h = qn(null);
269
+ Q(() => (ii(), () => {
270
+ document.documentElement.style.overflow = "", document.body.style.overflow = "";
271
+ const i = document.getElementById("whats-missing-reset");
272
+ i && i.remove();
269
273
  }), []);
270
- const [s, U] = r(null), [u, N] = r([]), [k, dn] = r(4), [f, P] = r(!1), [v, V] = r(1), [m, wn] = r(null), [c, S] = r("ready"), [_, $] = r(3), [C, I] = r(10), [R, q] = r(20), [rn, M] = r(0), [z, A] = r(!1), [T, K] = r(""), [H, B] = r(!1), [L, O] = r(!1), [Z, y] = r(null), [hn, j] = r([]), [sn, J] = r([]), [n, gn] = r(!1), [Tn, E] = r(1), [Q, G] = r(null), [a, pn] = r(!1);
271
- D(() => {
274
+ const [u, X] = o(null), [T, nn] = o([]), [B, In] = o(4), [z, en] = o(!1), [M, tn] = o(1), [S, vn] = o(null), [I, C] = o("ready"), [wn, dn] = o(3), [E, D] = o(10), [G, on] = o(20), [Sn, F] = o(0), [A, Y] = o(!1), [j, rn] = o(""), [k, U] = o(!1), [N, hn] = o(!1), [gn, L] = o(null), [kn, V] = o([]), [Pn, sn] = o([]), [n, Tn] = o(!1), [ti, _] = o(1), [an, $] = o(null), [b, zn] = o(!1), [a, Ln] = o(!1), [p, Rn] = o(!1), [l, Bn] = o(!1), [x, Mn] = o(!1), [H, Cn] = o(!1), [c, An] = o(!1), [W, jn] = o(!1), [m, En] = o(!1), [q, Dn] = o(!1), [K, pn] = o(/* @__PURE__ */ new Set()), [wi, di] = o([]);
275
+ Q(() => {
272
276
  const i = () => {
273
- const d = l ?? window.innerWidth, p = x ?? window.innerHeight, g = d < 768, W = p < 700, b = d >= 1200 && p >= 600 && !g;
274
- if (pn(b), gn(g), g)
275
- G(o && o >= 320 ? o : null), E(1);
276
- else if (W)
277
- G(o && o >= 400 ? o : null), E(1);
277
+ const e = y ?? window.innerWidth, t = f ?? window.innerHeight, g = e < 768 || e === 926 && t === 428 || e === 932 && t === 430, v = t < 700, P = e === 768 && t === 1024, R = e === 1024 && t === 768, cn = e === 820 && t === 1180, Wn = e === 1180 && t === 820, mn = e === 540 && t === 720, un = e === 720 && t === 540, fn = e === 1024 && t === 1366, yn = e === 1366 && t === 1024, Vn = e >= 1200 && t >= 600 && !g;
278
+ zn(Vn), Ln(P), Rn(R), Bn(cn), Mn(Wn), Cn(mn), An(un), jn(fn), En(yn);
279
+ const _n = g && e > t || t < 700 || e === 1366 && t === 766 || e === 1366 && t === 768 || e === 1280 && t === 720 || e === 1440 && t === 900 || P || R || cn || Wn || mn || un || fn || yn || b;
280
+ if (Dn(_n), Tn(g), g)
281
+ $(r && r >= 320 ? r : null), _(1);
282
+ else if (v)
283
+ $(r && r >= 400 ? r : null), _(1);
278
284
  else {
279
- const mn = o ? Math.max(400, Math.min(1200, o)) : Math.min(1e3, Math.min(d, p) * 0.9);
280
- G(mn), E(1);
285
+ const $n = r ? Math.max(400, Math.min(1200, r)) : Math.min(1e3, Math.min(e, t) * 0.9);
286
+ $($n), _(1);
281
287
  }
282
288
  };
283
289
  return i(), window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
284
- }, [l, x, o]);
285
- const X = (i) => [...i].sort(() => Math.random() - 0.5).slice(0, 6), nn = () => {
286
- if (!s) return;
287
- const i = X(on[s]);
288
- N(i), P(!0), A(!1), V(1), M(0), j([]), J([]), en(i, [], !0);
289
- }, en = (i = u, d = sn, p = !1) => {
290
- const g = X(i.length ? i : on[s]);
291
- let W = Math.floor(Math.random() * g.length), b = g[W].name, F = 0;
292
- for (; d.includes(b) && F < 20; )
293
- W = Math.floor(Math.random() * g.length), b = g[W].name, F++;
294
- N(g), wn(W), J([...d, b]), B(!1), K(""), q(20), y(null), p ? (S("ready"), $(3), I(10)) : (S("memorize"), I(10));
290
+ }, [y, f, r]);
291
+ const O = (i) => [...i].sort(() => Math.random() - 0.5).slice(0, 6), Gn = (i) => new Promise((e, t) => {
292
+ const g = new Image();
293
+ g.onload = () => {
294
+ pn((v) => new Set(v).add(i)), e();
295
+ }, g.onerror = t, g.src = i;
296
+ }), ln = async (i) => {
297
+ const e = i.map((t) => Gn(t));
298
+ await Promise.allSettled(e);
299
+ }, xn = async () => {
300
+ if (!u) return;
301
+ const i = O(J[u]);
302
+ await ln(i.map((t) => t.src)), nn(i), en(!0), Y(!1), tn(1), F(0), V([]), sn([]);
303
+ const e = O(
304
+ J[u].filter((t) => !i.includes(t))
305
+ );
306
+ ln(e.map((t) => t.src)), Hn(i, [], !0);
307
+ }, Hn = (i = T, e = Pn, t = !1) => {
308
+ const g = O(i.length ? i : J[u]);
309
+ let v = Math.floor(Math.random() * g.length), P = g[v].name, R = 0;
310
+ for (; e.includes(P) && R < 20; )
311
+ v = Math.floor(Math.random() * g.length), P = g[v].name, R++;
312
+ nn(g), vn(v), sn([...e, P]), U(!1), rn(""), on(20), L(null), t ? (C("ready"), dn(3), D(10)) : (C("memorize"), D(10));
295
313
  };
296
- D(() => {
297
- if (!(!f || z || H)) {
298
- if (c === "ready")
299
- if (_ <= 0) S("memorize");
314
+ Q(() => {
315
+ if (!(!z || A || k)) {
316
+ if (I === "ready")
317
+ if (wn <= 0) C("memorize");
300
318
  else {
301
- const i = setTimeout(() => $((d) => d - 1), 1e3);
319
+ const i = setTimeout(() => dn((e) => e - 1), 1e3);
302
320
  return () => clearTimeout(i);
303
321
  }
304
- if (c === "memorize")
305
- if (C <= 0) S("guess");
322
+ if (I === "memorize")
323
+ if (E <= 0) C("guess");
306
324
  else {
307
- const i = setTimeout(() => I((d) => d - 1), 1e3);
325
+ const i = setTimeout(() => D((e) => e - 1), 1e3);
308
326
  return () => clearTimeout(i);
309
327
  }
310
- if (c === "guess") {
311
- if (R <= 0) {
312
- B(!0), y("wrong");
313
- const d = u[m].name;
314
- j((p) => [
315
- ...p,
316
- { round: v, answer: T, correct: d, result: "wrong" }
328
+ if (I === "guess") {
329
+ if (G <= 0) {
330
+ U(!0), L("wrong");
331
+ const e = T[S].name;
332
+ V((t) => [
333
+ ...t,
334
+ { round: M, answer: j, correct: e, result: "wrong" }
317
335
  ]);
318
336
  return;
319
337
  }
320
- const i = setTimeout(() => q((d) => d - 1), 1e3);
338
+ const i = setTimeout(() => on((e) => e - 1), 1e3);
321
339
  return () => clearTimeout(i);
322
340
  }
323
341
  }
324
- }, [c, _, C, R, f, z, H, u, m, v, T]);
325
- const ln = () => {
326
- if (m === null || L) return;
327
- const i = u[m].name, d = T.toLowerCase().trim();
328
- let p = "wrong";
329
- d === i ? (M((g) => g + 1), y("correct"), p = "correct") : zn(d, i) === 1 ? (M((g) => g + 0.5), y("almost"), p = "almost") : (y("wrong"), p = "wrong"), j((g) => [...g, { round: v, answer: d, correct: i, result: p }]), O(!0), setTimeout(() => {
330
- O(!1), B(!0);
342
+ }, [I, wn, E, G, z, A, k, T, S, M, j]);
343
+ const Fn = () => {
344
+ if (S === null || N) return;
345
+ const i = T[S].name, e = j.toLowerCase().trim();
346
+ let t = "wrong";
347
+ e === i ? (F((g) => g + 1), L("correct"), t = "correct") : ei(e, i) === 1 ? (F((g) => g + 0.5), L("almost"), t = "almost") : (L("wrong"), t = "wrong"), V((g) => [...g, { round: M, answer: e, correct: i, result: t }]), hn(!0), setTimeout(() => {
348
+ hn(!1), U(!0);
331
349
  }, 600);
332
- }, an = () => v < k ? (V((i) => i + 1), en()) : A(!0), xn = () => {
333
- P(!1), A(!1), U(null);
334
- }, cn = Wn(
350
+ }, Yn = () => M < B ? (tn((i) => i + 1), Hn()) : Y(!0), Un = () => {
351
+ en(!1), Y(!1), X(null);
352
+ }, Nn = Kn(
335
353
  () => n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? null : (
336
354
  // ensure logo is positioned inside the square container
337
- /* @__PURE__ */ e("div", { style: { ...t.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ h("picture", { children: [
338
- /* @__PURE__ */ e(
355
+ /* @__PURE__ */ w("div", { style: { ...d.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ s("picture", { children: [
356
+ /* @__PURE__ */ w(
339
357
  "source",
340
358
  {
341
359
  srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg",
342
360
  type: "image/svg+xml"
343
361
  }
344
362
  ),
345
- /* @__PURE__ */ e(
363
+ /* @__PURE__ */ w(
346
364
  "img",
347
365
  {
348
366
  src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png",
349
367
  alt: "SPEAKID Logo",
350
- style: t.gmLogoImg,
368
+ style: d.gmLogoImg,
351
369
  loading: "lazy"
352
370
  }
353
371
  )
@@ -355,10 +373,10 @@ function Mn({
355
373
  ),
356
374
  [n]
357
375
  );
358
- return /* @__PURE__ */ e(
376
+ return /* @__PURE__ */ w(
359
377
  "div",
360
378
  {
361
- ref: w,
379
+ ref: h,
362
380
  style: {
363
381
  width: "100%",
364
382
  height: "100%",
@@ -374,12 +392,12 @@ function Mn({
374
392
  right: 0,
375
393
  bottom: 0
376
394
  },
377
- children: /* @__PURE__ */ e(
395
+ children: /* @__PURE__ */ w(
378
396
  "div",
379
397
  {
380
398
  style: {
381
- width: n ? "100%" : Q || o || 1e3,
382
- height: n ? "100%" : Q || o || 1e3,
399
+ width: n ? "100%" : an || r || 1e3,
400
+ height: n ? "100%" : an || r || 1e3,
383
401
  display: "flex",
384
402
  justifyContent: "center",
385
403
  alignItems: "center",
@@ -391,7 +409,7 @@ function Mn({
391
409
  position: "relative"
392
410
  // needed so absolute logo is inside the square
393
411
  },
394
- children: /* @__PURE__ */ e(
412
+ children: /* @__PURE__ */ w(
395
413
  "div",
396
414
  {
397
415
  style: {
@@ -402,229 +420,265 @@ function Mn({
402
420
  justifyContent: "center",
403
421
  alignItems: "center"
404
422
  },
405
- children: /* @__PURE__ */ h("div", { id: "whats-missing-root", children: [
406
- !n && cn,
407
- !s && !f && /* @__PURE__ */ h("div", { style: t.gmCenterScreen, children: [
408
- /* @__PURE__ */ e("h1", { style: t.gmHeadline1, children: "WHAT'S MISSING?" }),
409
- /* @__PURE__ */ e("p", { style: t.gmBodyM, children: "Select a theme:" }),
410
- /* @__PURE__ */ e("div", { style: { display: "flex", gap: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "8px" : "16px" }, children: ["animals", "food", "toys"].map((i) => /* @__PURE__ */ e("button", { style: {
411
- ...t.gmButton,
412
- padding: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "8px 12px" : "12px 24px",
413
- fontSize: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "12px" : "16px",
414
- minWidth: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "70px" : "auto"
415
- }, onClick: () => U(i), children: i === "animals" ? "🐶 Animals" : i === "food" ? "🍎 Food" : "🧸 Toys" }, i)) }),
416
- /* @__PURE__ */ h("div", { style: { marginTop: 24 }, children: [
417
- /* @__PURE__ */ e("p", { style: t.gmBodyS, children: "Choose number of rounds:" }),
418
- /* @__PURE__ */ e("div", { style: { display: "flex", gap: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "6px" : "12px", marginTop: 8 }, children: [3, 4, 5].map((i) => /* @__PURE__ */ e(
423
+ children: /* @__PURE__ */ s("div", { id: "whats-missing-root", children: [
424
+ !n && Nn,
425
+ !u && !z && /* @__PURE__ */ s("div", { style: d.gmCenterScreen, children: [
426
+ /* @__PURE__ */ w("h1", { style: d.gmHeadline1, children: "WHAT'S MISSING?" }),
427
+ /* @__PURE__ */ w("p", { style: d.gmBodyM, children: "Select a theme:" }),
428
+ /* @__PURE__ */ w("div", { style: { display: "flex", gap: n && window.innerWidth > window.innerHeight || n && 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 ? "8px" : "16px" }, children: ["animals", "food", "toys"].map((i) => /* @__PURE__ */ w("button", { style: {
429
+ ...d.gmButton,
430
+ padding: n && window.innerWidth > window.innerHeight || n && 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 ? "8px 12px" : "12px 24px",
431
+ fontSize: n && window.innerWidth > window.innerHeight || n && 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 ? "12px" : "16px",
432
+ minWidth: n && window.innerWidth > window.innerHeight || n && 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 ? "70px" : "auto"
433
+ }, onClick: () => X(i), children: i === "animals" ? "🐶 Animals" : i === "food" ? "🍎 Food" : "🧸 Toys" }, i)) }),
434
+ /* @__PURE__ */ s("div", { style: { marginTop: 24 }, children: [
435
+ /* @__PURE__ */ w("p", { style: d.gmBodyS, children: "Choose number of rounds:" }),
436
+ /* @__PURE__ */ w("div", { style: { display: "flex", gap: n && window.innerWidth > window.innerHeight || n && 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", marginTop: 8 }, children: [3, 4, 5].map((i) => /* @__PURE__ */ w(
419
437
  "button",
420
438
  {
421
439
  style: {
422
- ...t.gmButton,
423
- ...k === i ? t.gmButtonActive : {},
424
- padding: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "6px 10px" : "12px 24px",
425
- fontSize: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "12px" : "16px",
426
- minWidth: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "40px" : "auto"
440
+ ...d.gmButton,
441
+ ...B === i ? d.gmButtonActive : {},
442
+ padding: n && window.innerWidth > window.innerHeight || n && 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 10px" : "12px 24px",
443
+ fontSize: n && window.innerWidth > window.innerHeight || n && 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 ? "12px" : "16px",
444
+ minWidth: n && window.innerWidth > window.innerHeight || n && 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 ? "40px" : "auto"
427
445
  },
428
- onClick: () => dn(i),
446
+ onClick: () => In(i),
429
447
  children: i
430
448
  },
431
449
  i
432
450
  )) })
433
451
  ] })
434
452
  ] }),
435
- s && !f && /* @__PURE__ */ h("div", { style: t.gmCenterScreen, children: [
436
- /* @__PURE__ */ h("h1", { style: t.gmHeadline1, children: [
453
+ u && !z && /* @__PURE__ */ s("div", { style: d.gmCenterScreen, children: [
454
+ /* @__PURE__ */ s("h1", { style: d.gmHeadline1, children: [
437
455
  "Theme selected: ",
438
- s
456
+ u
439
457
  ] }),
440
- /* @__PURE__ */ h("p", { style: t.gmBodyM, children: [
458
+ /* @__PURE__ */ s("p", { style: d.gmBodyM, children: [
441
459
  "Rounds: ",
442
- k
460
+ B
443
461
  ] }),
444
- /* @__PURE__ */ e("button", { style: {
445
- ...t.gmButton,
446
- padding: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "8px 16px" : "12px 24px",
447
- fontSize: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "14px" : "16px",
448
- minWidth: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "120px" : "auto"
449
- }, onClick: nn, children: "▶ Start game" })
462
+ /* @__PURE__ */ w("button", { style: {
463
+ ...d.gmButton,
464
+ padding: n && window.innerWidth > window.innerHeight || n && 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 ? "8px 16px" : "12px 24px",
465
+ fontSize: n && window.innerWidth > window.innerHeight || n && 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",
466
+ minWidth: n && window.innerWidth > window.innerHeight || n && 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 ? "120px" : "auto"
467
+ }, onClick: xn, children: "▶ Start game" })
450
468
  ] }),
451
- z && /* @__PURE__ */ h("div", { style: t.gmCenterScreen, children: [
452
- /* @__PURE__ */ e("h1", { style: t.gmHeadline1, children: "Results" }),
453
- /* @__PURE__ */ h("h2", { style: t.gmHeadline3, children: [
469
+ A && /* @__PURE__ */ s("div", { style: d.gmCenterScreen, children: [
470
+ /* @__PURE__ */ w("h1", { style: {
471
+ ...d.gmHeadline1,
472
+ marginTop: n && 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 || p || l || x || H || c || W || m ? "0px" : d.gmHeadline1.marginTop,
473
+ marginBottom: n && 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 || p || l || x || H || c || W || m ? "2px" : d.gmHeadline1.marginBottom
474
+ }, children: "Results" }),
475
+ /* @__PURE__ */ s("h2", { style: {
476
+ ...d.gmHeadline3,
477
+ marginTop: n && 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 || p || l || x || H || c || W || m ? "0px" : d.gmHeadline3.marginTop,
478
+ marginBottom: n && 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 || p || l || x || H || c || W || m ? "2px" : d.gmHeadline3.marginBottom
479
+ }, children: [
454
480
  "Your score: ",
455
- rn,
481
+ Sn,
456
482
  " / ",
457
- k
483
+ B
458
484
  ] }),
459
- /* @__PURE__ */ e("p", { style: { ...t.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
460
- /* @__PURE__ */ h("table", { style: t.gmTable, children: [
461
- /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ h("tr", { children: [
462
- /* @__PURE__ */ e("th", { children: "Round" }),
463
- /* @__PURE__ */ e("th", { children: "Your Answer" }),
464
- /* @__PURE__ */ e("th", { children: "Correct" }),
465
- /* @__PURE__ */ e("th", { children: "Result" })
485
+ /* @__PURE__ */ w("p", { style: {
486
+ ...d.gmBodyM,
487
+ color: "#10b981",
488
+ marginTop: n && 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 || p || l || x || H || c || W || m ? "0px" : "12px",
489
+ marginBottom: n && 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 || p || l || x || H || c || W || m ? "2px" : d.gmBodyM.marginBottom
490
+ }, children: "Yahoo! You did it! 🍬✨" }),
491
+ /* @__PURE__ */ s("table", { style: {
492
+ ...d.gmTable,
493
+ marginTop: n && 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 || p || l || x || H || c || W || m ? "0px" : "20px",
494
+ marginBottom: n && 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 || p || l || x || H || c || W || m ? "4px" : "32px"
495
+ }, children: [
496
+ /* @__PURE__ */ w("thead", { children: /* @__PURE__ */ s("tr", { children: [
497
+ /* @__PURE__ */ w("th", { children: "Round" }),
498
+ /* @__PURE__ */ w("th", { children: "Your Answer" }),
499
+ /* @__PURE__ */ w("th", { children: "Correct" }),
500
+ /* @__PURE__ */ w("th", { children: "Result" })
466
501
  ] }) }),
467
- /* @__PURE__ */ e("tbody", { children: hn.map((i, d) => /* @__PURE__ */ h("tr", { children: [
468
- /* @__PURE__ */ e("td", { style: t.gmTableCell, children: i.round }),
469
- /* @__PURE__ */ e("td", { style: t.gmTableCell, children: i.answer || "—" }),
470
- /* @__PURE__ */ e("td", { style: t.gmTableCell, children: i.correct }),
471
- /* @__PURE__ */ e("td", { style: t.gmTableCell, children: i.result === "correct" ? "✔ Correct" : i.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
472
- ] }, d)) })
502
+ /* @__PURE__ */ w("tbody", { children: kn.map((i, e) => /* @__PURE__ */ s("tr", { children: [
503
+ /* @__PURE__ */ w("td", { style: d.gmTableCell, children: i.round }),
504
+ /* @__PURE__ */ w("td", { style: d.gmTableCell, children: i.answer || "—" }),
505
+ /* @__PURE__ */ w("td", { style: d.gmTableCell, children: i.correct }),
506
+ /* @__PURE__ */ w("td", { style: d.gmTableCell, children: i.result === "correct" ? "✔ Correct" : i.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
507
+ ] }, e)) })
473
508
  ] }),
474
- /* @__PURE__ */ h("div", { style: {
509
+ /* @__PURE__ */ s("div", { style: {
475
510
  display: "flex",
476
- gap: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "6px" : "12px",
477
- marginTop: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "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 || a ? "12px" : "24px"
511
+ gap: n && window.innerWidth > window.innerHeight || n && 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",
512
+ marginTop: n && window.innerWidth > window.innerHeight || n && 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 || b ? "12px" : "24px"
478
513
  }, children: [
479
- /* @__PURE__ */ e("button", { style: {
480
- ...t.gmButton,
481
- padding: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "6px 10px" : "12px 24px",
482
- fontSize: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "12px" : "16px",
483
- minWidth: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "80px" : "auto"
484
- }, onClick: nn, children: "🔁 Play again" }),
485
- /* @__PURE__ */ e("button", { style: {
486
- ...t.gmButton,
487
- padding: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "6px 10px" : "12px 24px",
488
- fontSize: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "12px" : "16px",
489
- minWidth: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "80px" : "auto"
490
- }, onClick: xn, children: "⬅️ Choose theme" })
514
+ /* @__PURE__ */ w("button", { style: {
515
+ ...d.gmButton,
516
+ padding: n && window.innerWidth > window.innerHeight || n && 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 10px" : "12px 24px",
517
+ fontSize: n && window.innerWidth > window.innerHeight || n && 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 ? "12px" : "16px",
518
+ minWidth: n && window.innerWidth > window.innerHeight || n && 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 ? "80px" : "auto"
519
+ }, onClick: xn, children: "🔁 Play again" }),
520
+ /* @__PURE__ */ w("button", { style: {
521
+ ...d.gmButton,
522
+ padding: n && window.innerWidth > window.innerHeight || n && 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 10px" : "12px 24px",
523
+ fontSize: n && window.innerWidth > window.innerHeight || n && 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 ? "12px" : "16px",
524
+ minWidth: n && window.innerWidth > window.innerHeight || n && 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 ? "80px" : "auto"
525
+ }, onClick: Un, children: "⬅️ Choose theme" })
491
526
  ] })
492
527
  ] }),
493
- f && !z && /* @__PURE__ */ h("div", { style: t.gmGameLayout, children: [
494
- /* @__PURE__ */ h(
528
+ z && !A && /* @__PURE__ */ s("div", { style: d.gmGameLayout, children: [
529
+ /* @__PURE__ */ s(
495
530
  "div",
496
531
  {
497
532
  style: {
498
- minHeight: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "45px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "50px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "60px" : "160px",
533
+ minHeight: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "45px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "60px" : "160px",
499
534
  display: "flex",
500
535
  flexDirection: "column",
501
536
  justifyContent: "center",
502
537
  alignItems: "center",
503
- paddingTop: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "8px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "15px" : "40px"
538
+ paddingTop: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "8px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "15px" : "40px"
504
539
  },
505
540
  children: [
506
- c === "ready" && /* @__PURE__ */ h(tn, { children: [
507
- /* @__PURE__ */ e("h1", { style: { ...t.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
508
- /* @__PURE__ */ e("div", { style: t.gmHourglass, children: "⏳" })
541
+ I === "ready" && /* @__PURE__ */ s(bn, { children: [
542
+ /* @__PURE__ */ w("h1", { style: { ...d.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
543
+ /* @__PURE__ */ w("div", { style: d.gmHourglass, children: "⏳" })
509
544
  ] }),
510
- c === "memorize" && /* @__PURE__ */ h("p", { style: { ...t.gmBodyM, color: "#10b981" }, children: [
545
+ I === "memorize" && /* @__PURE__ */ s("p", { style: { ...d.gmBodyM, color: "#10b981" }, children: [
511
546
  "MEMORIZE (",
512
- C,
547
+ E,
513
548
  ")"
514
549
  ] }),
515
- c === "guess" && !H && /* @__PURE__ */ h("p", { style: t.gmBodyM, children: [
550
+ I === "guess" && !k && /* @__PURE__ */ s("p", { style: d.gmBodyM, children: [
516
551
  "⏳ Time left: ",
517
- R,
552
+ G,
518
553
  "s"
519
554
  ] })
520
555
  ]
521
556
  }
522
557
  ),
523
- c !== "ready" && /* @__PURE__ */ e(
558
+ I !== "ready" && /* @__PURE__ */ w(
524
559
  "div",
525
560
  {
526
561
  style: {
527
- ...t.gmGrid,
562
+ ...d.gmGrid,
528
563
  gridTemplateColumns: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "repeat(3, 1fr)" : n ? "repeat(2, 1fr)" : window.innerHeight < 700 ? "repeat(3, 1fr)" : "repeat(3, 210px)",
529
564
  // desktop: 3 колонки фиксированного размера
530
- gridAutoRows: n && window.innerWidth > window.innerHeight ? "120px" : n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "100px" : n ? "150px" : window.innerHeight < 700 ? "140px" : "210px",
565
+ gridAutoRows: n && window.innerWidth > window.innerHeight ? "120px" : n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "100px" : n ? "150px" : window.innerHeight < 700 ? "140px" : typeof window < "u" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5 ? "240px" : "210px",
531
566
  // desktop: стандартная высота
532
- gap: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "12px" : n || window.innerHeight < 700 ? "8px" : "20px",
567
+ gap: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "12px" : n || window.innerHeight < 700 ? "8px" : typeof window < "u" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5 ? "24px" : "20px",
533
568
  justifyItems: "center",
534
- maxWidth: n && window.innerWidth > window.innerHeight ? "90%" : n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "95%" : "100%",
535
- padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "8px" : "16px"
569
+ maxWidth: n && window.innerWidth > window.innerHeight ? "90%" : n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "95%" : "100%",
570
+ padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "8px" : typeof window < "u" && window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5 ? "20px" : "16px"
536
571
  },
537
- children: u.map((i, d) => {
538
- const p = m === d && c === "guess" && !H;
539
- return /* @__PURE__ */ e(
572
+ children: T.map((i, e) => {
573
+ const t = S === e && I === "guess" && !k;
574
+ return /* @__PURE__ */ w(
540
575
  "div",
541
576
  {
542
577
  style: {
543
578
  width: "100%",
544
579
  height: "100%",
545
- borderRadius: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "6px" : "12px",
580
+ borderRadius: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "6px" : "12px",
546
581
  overflow: "hidden",
547
- boxShadow: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "0 1px 4px rgba(0,0,0,0.1)" : "0 4px 12px rgba(0,0,0,0.15)",
582
+ boxShadow: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "0 1px 4px rgba(0,0,0,0.1)" : "0 4px 12px rgba(0,0,0,0.15)",
548
583
  transition: "all 0.3s ease",
549
584
  cursor: "pointer",
550
- ...Z === "correct" && m === d ? {
551
- boxShadow: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "0 0 15px #10b981" : "0 0 20px #10b981",
585
+ ...gn === "correct" && S === e ? {
586
+ boxShadow: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "0 0 15px #10b981" : "0 0 20px #10b981",
552
587
  transform: "scale(1.03)"
553
588
  } : {},
554
- ...Z === "wrong" && m === d ? {
555
- boxShadow: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "0 0 15px #ef4444" : "0 0 20px #ef4444",
589
+ ...gn === "wrong" && S === e ? {
590
+ boxShadow: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "0 0 15px #ef4444" : "0 0 20px #ef4444",
556
591
  transform: "scale(1.03)"
557
592
  } : {}
558
593
  },
559
- children: !p && /* @__PURE__ */ e(
560
- "img",
561
- {
562
- src: i.src,
563
- alt: i.name,
564
- style: {
565
- width: "100%",
566
- height: "100%",
567
- objectFit: "cover"
594
+ children: !t && /* @__PURE__ */ s("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
595
+ !K.has(i.src) && /* @__PURE__ */ w("div", { style: {
596
+ position: "absolute",
597
+ top: 0,
598
+ left: 0,
599
+ width: "100%",
600
+ height: "100%",
601
+ background: "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
602
+ backgroundSize: "200% 100%",
603
+ borderRadius: "inherit",
604
+ display: "flex",
605
+ justifyContent: "center",
606
+ alignItems: "center"
607
+ } }),
608
+ /* @__PURE__ */ w(
609
+ "img",
610
+ {
611
+ src: i.src,
612
+ alt: i.name,
613
+ fetchpriority: K.has(i.src) ? "auto" : "high",
614
+ onLoad: () => pn((g) => new Set(g).add(i.src)),
615
+ style: {
616
+ width: "100%",
617
+ height: "100%",
618
+ objectFit: "cover",
619
+ opacity: K.has(i.src) ? 1 : 0,
620
+ transition: "opacity 0.3s ease"
621
+ }
568
622
  }
569
- }
570
- )
623
+ )
624
+ ] })
571
625
  },
572
- d
626
+ e
573
627
  );
574
628
  })
575
629
  }
576
630
  ),
577
- /* @__PURE__ */ h("div", { style: {
578
- marginTop: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "1px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "2px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "4px" : "16px",
579
- height: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "40px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "45px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "50px" : "80px"
631
+ /* @__PURE__ */ s("div", { style: {
632
+ marginTop: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "1px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "4px" : "16px",
633
+ height: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "40px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "50px" : "80px"
580
634
  }, children: [
581
- c === "guess" && !H && /* @__PURE__ */ e("div", { style: {
635
+ I === "guess" && !k && /* @__PURE__ */ w("div", { style: {
582
636
  display: "flex",
583
- flexDirection: n && window.innerWidth > window.innerHeight || window.innerHeight < 700 || window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a ? "row" : "column",
584
- gap: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "3px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "4px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a ? "8px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "6px" : "12px",
637
+ flexDirection: q ? "row" : "column",
638
+ gap: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "3px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || b || a || p || l || x || H || c || W || m ? "8px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "6px" : "12px",
585
639
  alignItems: "center",
586
640
  justifyContent: "center",
587
641
  width: "100%",
588
- maxWidth: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "270px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "350px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "400px" : "300px"
589
- }, children: /* @__PURE__ */ h(tn, { children: [
590
- /* @__PURE__ */ e(
642
+ maxWidth: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "270px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || b || a || p || l || x || H || c || W || m || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "400px" : "300px"
643
+ }, children: /* @__PURE__ */ s(bn, { children: [
644
+ /* @__PURE__ */ w(
591
645
  "input",
592
646
  {
593
647
  type: "text",
594
648
  placeholder: "Type the missing word",
595
- value: T,
596
- onChange: (i) => K(i.target.value),
649
+ value: j,
650
+ onChange: (i) => rn(i.target.value),
597
651
  style: {
598
- ...t.gmInput,
599
- width: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "170px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "220px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "250px" : "auto",
600
- padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "5px 6px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "6px 8px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "10px 12px" : "12px 16px",
601
- fontSize: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "10px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "11px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "14px" : "16px",
602
- flex: n && window.innerWidth > window.innerHeight || window.innerHeight < 700 || window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a ? "1" : "none"
652
+ ...d.gmInput,
653
+ width: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "170px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || b || a || p || l || x || H || c || W || m || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "250px" : "auto",
654
+ padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "5px 6px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || b || a || p || l || x || H || c || W || m || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "10px 12px" : "12px 16px",
655
+ fontSize: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 ? "10px" : window.innerWidth === 896 && window.innerHeight === 414 ? "11px" : window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "10px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || b || a || p || l || x || H || c || W || m || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "14px" : "16px",
656
+ flex: q ? "1" : "none"
603
657
  }
604
658
  }
605
659
  ),
606
- /* @__PURE__ */ e(
660
+ /* @__PURE__ */ w(
607
661
  "button",
608
662
  {
609
663
  style: {
610
- ...t.gmButton,
611
- marginLeft: n && window.innerWidth > window.innerHeight || window.innerHeight < 700 || window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a ? "8px" : "0",
612
- padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "5px 8px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "6px 10px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
613
- fontSize: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "10px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "11px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "14px" : "16px",
614
- minWidth: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "45px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "55px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || a || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "80px" : "100px",
664
+ ...d.gmButton,
665
+ marginLeft: q ? "8px" : "0",
666
+ padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "5px 8px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "6px 10px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || b || a || p || l || x || H || c || W || m || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
667
+ fontSize: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "10px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "11px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || b || a || p || l || x || H || c || W || m || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "14px" : "16px",
668
+ minWidth: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "45px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "55px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || b || a || p || l || x || H || c || W || m || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "80px" : "100px",
615
669
  flexShrink: 0
616
670
  },
617
- onClick: ln,
618
- disabled: L,
619
- children: L ? "..." : "Check"
671
+ onClick: Fn,
672
+ disabled: N,
673
+ children: N ? "..." : "Check"
620
674
  }
621
675
  )
622
676
  ] }) }),
623
- H && /* @__PURE__ */ e("button", { style: {
624
- ...t.gmButton,
625
- padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "5px 8px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "6px 10px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
626
- fontSize: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "10px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 ? "11px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "14px" : "16px"
627
- }, onClick: an, children: "Next round" })
677
+ k && /* @__PURE__ */ w("button", { style: {
678
+ ...d.gmButton,
679
+ padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "5px 8px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "6px 10px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || b || a || p || l || x || H || c || W || m || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
680
+ fontSize: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "10px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "11px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || b || a || p || l || x || H || c || W || m || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "14px" : "16px"
681
+ }, onClick: Yn, children: "Next round" })
628
682
  ] })
629
683
  ] })
630
684
  ] })
@@ -636,6 +690,6 @@ function Mn({
636
690
  );
637
691
  }
638
692
  export {
639
- Mn as Game,
640
- on as themes
693
+ si as Game,
694
+ J as themes
641
695
  };