speakid-build-a-sentence 1.0.28 → 1.0.30

package/dist/speakid-build-a-sentence.es.js

@@ -1,5 +1,5 @@
-import { jsx as l, jsxs as y } from "react/jsx-runtime";
-import { useState as c, useCallback as ce, useRef as re, useEffect as j, useMemo as dt, Component as pt } from "react";
+import { jsx as c, jsxs as b } from "react/jsx-runtime";
+import { useState as l, useCallback as ce, useRef as re, useEffect as j, useMemo as dt, Component as pt } from "react";
 const ut = `
   @keyframes spin {
     from { transform: rotate(0deg); }
@@ -174,7 +174,7 @@ const Ce = {
   // ===== Анимационные стили =====
   ...Ce
 }, ft = () => {
-  const [f, s] = c([]), v = ce((k, M, h) => {
+  const [f, s] = l([]), v = ce((k, L, h) => {
     const w = [];
     k.trim() || w.push({
       type: "empty",
@@ -186,7 +186,7 @@ const Ce = {
       type: "characters",
       message: "Only Latin characters, numbers, spaces and punctuation are allowed"
     });
-    const O = h.findIndex((N, b) => b !== M && N.toLowerCase().trim() === k.toLowerCase().trim());
+    const O = h.findIndex((N, y) => y !== L && N.toLowerCase().trim() === k.toLowerCase().trim());
     return O !== -1 && w.push({
       type: "duplicate",
       message: `Duplicate sentence (same as sentence ${O + 1})`
@@ -195,16 +195,16 @@ const Ce = {
       errors: w
     };
   }, []), H = ce((k) => {
-    const M = [];
+    const L = [];
     return k.forEach((h, w) => {
       const K = v(h, w, k);
-      M.push(...K.errors.map((O) => ({
+      L.push(...K.errors.map((O) => ({
         ...O,
         message: `Sentence ${w + 1}: ${O.message}`
       })));
     }), {
-      isValid: M.length === 0,
-      errors: M
+      isValid: L.length === 0,
+      errors: L
     };
   }, [v]), $ = ce(() => {
     s([]);
@@ -255,14 +255,14 @@ const Ce = {
   s && s.remove(), document.head.appendChild(f);
 }, xt = (f) => [...f].sort(() => Math.random() - 0.5);
 function kt(f = {}) {
-  const { logoUrl: s, showLogo: v = !0, screenHeight: H, screenWidth: $, gameCubeSize: k } = f, M = re(null), h = () => $ ?? (typeof window < "u" ? window.innerWidth : 1920), w = () => H ?? (typeof window < "u" ? window.innerHeight : 1080), { validateAllSentences: K, errors: O } = ft(), N = () => {
+  const { logoUrl: s, showLogo: v = !0, screenHeight: H, screenWidth: $, gameCubeSize: k } = f, L = re(null), h = () => $ ?? (typeof window < "u" ? window.innerWidth : 1920), w = () => H ?? (typeof window < "u" ? window.innerHeight : 1080), { validateAllSentences: K, errors: O } = ft(), N = () => {
     const e = h();
     return !!(m || e < 768 || e >= 768 && e < 1300);
-  }, b = () => {
+  }, y = () => {
     const e = h(), n = w();
     return m || e < 768 || e >= 320 && e <= 932 && n >= 390 && n <= 932;
   }, F = (e = "medium") => {
-    if (!b())
+    if (!y())
       return {
         padding: "12px 24px",
         fontSize: "16px",
@@ -294,13 +294,13 @@ function kt(f = {}) {
     const e = document.getElementById("magic-sentence-reset");
     e && e.remove();
   }), []);
-  const [S, z] = c("select"), [E, de] = c(null), [pe, ue] = c(null), [T, Z] = c([]), [D, fe] = c(0), [oe, me] = c([]), [I, ie] = c([]), [W, ge] = c(20), [V, G] = c(0), [yt, he] = c(null), [X, P] = c(null), [a, _] = c(!1), [xe, se] = c(!1), [ae, Te] = c(
+  const [S, z] = l("select"), [E, de] = l(null), [pe, ue] = l(null), [T, Z] = l([]), [D, fe] = l(0), [oe, me] = l([]), [I, ie] = l([]), [M, ge] = l(20), [V, G] = l(0), [yt, he] = l(null), [X, P] = l(null), [a, _] = l(!1), [xe, se] = l(!1), [ae, Te] = l(
     Number(localStorage.getItem("magicSentenceBest")) || 0
-  ), q = re(null), De = re(null), ye = re(0), [x, B] = c({ list: null, id: null, side: null }), [m, Re] = c(!1), [ze, U] = c(1), [be, J] = c(null), [Ee, Pe] = c(!1), [Be, Le] = c(!1), [Me, We] = c(!1), [Ae, He] = c(!1), [$e, Oe] = c(!1), [Ne, Ge] = c(!1), [Xe, je] = c(!1), [Fe, Ve] = c(!1), [qe, Ue] = c(!1), [bt, Je] = c(!1), [wt, Ye] = c(!1);
+  ), q = re(null), De = re(null), ye = re(0), [x, B] = l({ list: null, id: null, side: null }), [m, Re] = l(!1), [ze, U] = l(1), [be, J] = l(null), [Ee, Pe] = l(!1), [Be, We] = l(!1), [Le, Me] = l(!1), [Ae, He] = l(!1), [$e, Oe] = l(!1), [Ne, Ge] = l(!1), [Xe, je] = l(!1), [Fe, Ve] = l(!1), [qe, Ue] = l(!1), [bt, Je] = l(!1), [wt, Ye] = l(!1);
   j(() => {
     const e = () => {
       const n = h(), t = w(), r = n < 768 || n === 926 && t === 428 || n === 932 && t === 430, o = t < 700, p = n / t > 1.8, g = n === 768 && t === 1024, i = n === 1024 && t === 768, d = n === 820 && t === 1180, R = n === 1180 && t === 820, C = n === 540 && t === 720, ne = n === 720 && t === 540, ve = n === 1024 && t === 1366, ke = n === 1366 && t === 1024, Ie = n >= 1200 && t >= 600 && !r;
-      Pe(Ie), Le(g), We(i), He(d), Oe(R), Ge(C), je(ne), Ve(ve), Ue(ke), Ye(p);
+      Pe(Ie), We(g), Me(i), He(d), Oe(R), Ge(C), je(ne), Ve(ve), Ue(ke), Ye(p);
       const ct = r && n > t || r || // ✅ ВСЕ мобильные устройства (включая portrait)
       t < 700 || p || // ✅ Широкие экраны
       n === 1366 && t === 766 || n === 1366 && t === 768 || n === 1280 && t === 720 || n === 1440 && t === 900 || g || i || d || R || C || ne || ve || ke || Ie;
@@ -383,19 +383,19 @@ function kt(f = {}) {
     }));
     me(r), ie([]), fe(e), ye.current = e, ge(pe || 20), P(null), _(!1), se(!1), z("play");
   };
-  j(() => (S === "play" && !a && (q.current !== null && window.clearTimeout(q.current), W > 0 ? q.current = window.setTimeout(() => ge((e) => e - 1), 1e3) : _(!0)), () => {
+  j(() => (S === "play" && !a && (q.current !== null && window.clearTimeout(q.current), M > 0 ? q.current = window.setTimeout(() => ge((e) => e - 1), 1e3) : _(!0)), () => {
     q.current !== null && window.clearTimeout(q.current);
-  }), [S, W, a]), j(() => {
-    if (S === "play" && a && W === 0) {
+  }), [S, M, a]), j(() => {
+    if (S === "play" && a && M === 0) {
       const e = T[D];
       if (!e) {
         P(null);
         return;
       }
       const n = e.trim().split(/\s+/), t = I.map((i) => i.text), r = n.filter((i) => !t.includes(i)).length, o = t.filter((i) => !n.includes(i)).length, p = n.filter((i, d) => t.includes(i) ? t[d] !== i : !1).length, g = r + o + p;
-      g === 0 ? (P("correct"), xe || (se(!0), G((i) => i + 1)), L("correct"), A("Correct! Well done!")) : g === 1 ? (P("almost"), G((i) => i + 0.5), L("half"), A("Almost correct! Just one mistake.")) : (P("wrong"), L("wrong"), A("Not quite right. Keep trying!"));
+      g === 0 ? (P("correct"), xe || (se(!0), G((i) => i + 1)), W("correct"), A("Correct! Well done!")) : g === 1 ? (P("almost"), G((i) => i + 0.5), W("half"), A("Almost correct! Just one mistake.")) : (P("wrong"), W("wrong"), A("Not quite right. Keep trying!"));
     }
-  }, [S, a, W, T, D, I, xe]);
+  }, [S, a, M, T, D, I, xe]);
   const tt = (e = !0) => {
     if (e) {
       if (a) {
@@ -408,7 +408,7 @@ function kt(f = {}) {
         return;
       }
       const t = n.trim().split(/\s+/), r = I.map((d) => d.text), o = t.filter((d) => !r.includes(d)).length, p = r.filter((d) => !t.includes(d)).length, g = t.filter((d, R) => r.includes(d) ? r[R] !== d : !1).length, i = o + p + g;
-      i === 0 ? (G((d) => d + 1), P("correct"), se(!0), L("correct"), A("Correct! Well done!")) : i === 1 ? (G((d) => d + 0.5), P("almost"), L("half"), A("Almost correct! Just one mistake.")) : (P("wrong"), L("wrong"), A("Not quite right. Keep trying!")), D + 1 < (E || 0) ? setTimeout(() => ee(D + 1), 800) : setTimeout(() => {
+      i === 0 ? (G((d) => d + 1), P("correct"), se(!0), W("correct"), A("Correct! Well done!")) : i === 1 ? (G((d) => d + 0.5), P("almost"), W("half"), A("Almost correct! Just one mistake.")) : (P("wrong"), W("wrong"), A("Not quite right. Keep trying!")), D + 1 < (E || 0) ? setTimeout(() => ee(D + 1), 800) : setTimeout(() => {
         z("results"), setTimeout(() => te(), 600);
       }, 800);
     }
@@ -416,7 +416,7 @@ function kt(f = {}) {
   j(() => {
     S === "results" && V > ae && (Te(V), localStorage.setItem("magicSentenceBest", String(V)));
   }, [S, V, ae]);
-  const L = (e) => {
+  const W = (e) => {
     const n = new (window.AudioContext || window.webkitAudioContext)(), t = n.createOscillator(), r = n.createGain();
     switch (t.connect(r), r.connect(n.destination), e) {
       case "start":
@@ -452,14 +452,14 @@ function kt(f = {}) {
       }), Date.now() < n ? requestAnimationFrame(g) : document.body.removeChild(r);
     };
     g();
-  }, nt = () => /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ l("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ l("p", { style: u.gmBodyM, children: "Select number of rounds" }),
-    /* @__PURE__ */ l("div", { style: {
+  }, nt = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
+    /* @__PURE__ */ c("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
+    /* @__PURE__ */ c("p", { style: u.gmBodyM, children: "Select number of rounds" }),
+    /* @__PURE__ */ c("div", { style: {
       display: "flex",
-      gap: b() ? "8px" : "16px",
+      gap: y() ? "8px" : "16px",
       justifyContent: "center"
-    }, children: [3, 4, 5].map((e) => /* @__PURE__ */ y(
+    }, children: [3, 4, 5].map((e) => /* @__PURE__ */ b(
       "button",
       {
         onClick: () => Ke(e),
@@ -474,14 +474,14 @@ function kt(f = {}) {
       },
       e
     )) })
-  ] }), rt = () => /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ l("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ l("p", { style: u.gmBodyM, children: "Select time per round" }),
-    /* @__PURE__ */ l("div", { style: {
+  ] }), rt = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
+    /* @__PURE__ */ c("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
+    /* @__PURE__ */ c("p", { style: u.gmBodyM, children: "Select time per round" }),
+    /* @__PURE__ */ c("div", { style: {
       display: "flex",
-      gap: b() ? "8px" : "16px",
+      gap: y() ? "8px" : "16px",
       justifyContent: "center"
-    }, children: [15, 20, 30].map((e) => /* @__PURE__ */ y(
+    }, children: [15, 20, 30].map((e) => /* @__PURE__ */ b(
       "button",
       {
         onClick: () => Ze(e),
@@ -496,16 +496,16 @@ function kt(f = {}) {
       },
       e
     )) })
-  ] }), ot = () => /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ y("h2", { style: { ...u.gmBodyM, marginBottom: "0px" }, children: [
+  ] }), ot = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
+    /* @__PURE__ */ b("h2", { style: { ...u.gmBodyM, marginBottom: "0px" }, children: [
       "Type down ",
       E,
       " sentence",
       E && E > 1 ? "s" : "",
       " for your student"
     ] }),
-    /* @__PURE__ */ l("p", { style: { ...u.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
-    /* @__PURE__ */ l("div", { style: {
+    /* @__PURE__ */ c("p", { style: { ...u.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
+    /* @__PURE__ */ c("div", { style: {
       display: "flex",
       flexDirection: "column",
       gap: 12,
@@ -515,7 +515,7 @@ function kt(f = {}) {
       // Минимальная ширина по содержимому
       maxWidth: "600px"
       // Ограничиваем максимальную ширину
-    }, children: T.map((e, n) => /* @__PURE__ */ l(
+    }, children: T.map((e, n) => /* @__PURE__ */ c(
       "input",
       {
         value: e,
@@ -523,8 +523,8 @@ function kt(f = {}) {
         onChange: (t) => _e(n, t.target.value),
         style: {
           ...u.gmInput,
-          padding: b() ? "8px 12px" : "12px 16px",
-          fontSize: b() ? "14px" : "16px",
+          padding: y() ? "8px 12px" : "12px 16px",
+          fontSize: y() ? "14px" : "16px",
           width: "100%",
           // Поля теперь будут шире благодаря увеличенной ширине контейнера
           textAlign: "center"
@@ -533,7 +533,7 @@ function kt(f = {}) {
       },
       n
     )) }),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       "button",
       {
         onClick: et,
@@ -548,49 +548,49 @@ function kt(f = {}) {
         children: "PLAY"
       }
     )
-  ] }), it = () => /* @__PURE__ */ y("div", { style: u.gmReadyWrapper, children: [
-    /* @__PURE__ */ l("h1", { style: {
+  ] }), it = () => /* @__PURE__ */ b("div", { style: u.gmReadyWrapper, children: [
+    /* @__PURE__ */ c("h1", { style: {
       ...u.gmHeadline1,
       color: "#ec4c44"
     }, children: "GET READY" }),
-    /* @__PURE__ */ l("div", { style: u.gmHourglass, children: "⏳" })
-  ] }), st = () => /* @__PURE__ */ y("div", { style: u.gmGameLayout, children: [
-    /* @__PURE__ */ y("h2", { style: {
-      marginBottom: b() ? "5px" : "10px",
-      fontSize: b() ? "16px" : "20px"
+    /* @__PURE__ */ c("div", { style: u.gmHourglass, children: "⏳" })
+  ] }), st = () => /* @__PURE__ */ b("div", { style: u.gmGameLayout, children: [
+    /* @__PURE__ */ b("h2", { style: {
+      marginBottom: y() ? "5px" : "10px",
+      fontSize: y() ? "16px" : "20px"
     }, children: [
       "Round ",
       D + 1,
       "/",
       E,
       " — ",
-      a ? "TIME'S UP!" : `Time: ${W}s`
+      a ? "TIME'S UP!" : `Time: ${M}s`
     ] }),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       "div",
       {
         style: {
           width: "60%",
-          height: b() ? "8px" : "14px",
+          height: y() ? "8px" : "14px",
           borderRadius: 8,
           background: "#eee",
           overflow: "hidden",
-          marginBottom: b() ? "10px" : "20px"
+          marginBottom: y() ? "10px" : "20px"
         },
-        children: /* @__PURE__ */ l(
+        children: /* @__PURE__ */ c(
           "div",
           {
             style: {
               height: "100%",
-              width: `${W / (pe || 20) * 100}%`,
-              background: W <= 5 ? "#ec4c44" : "#4caf50",
+              width: `${M / (pe || 20) * 100}%`,
+              background: M <= 5 ? "#ec4c44" : "#4caf50",
               transition: "width 1s linear"
             }
           }
         )
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
@@ -605,7 +605,7 @@ function kt(f = {}) {
           width: "100%",
           boxSizing: "border-box"
         },
-        children: oe.map((e, n) => /* @__PURE__ */ l(
+        children: oe.map((e, n) => /* @__PURE__ */ c(
           "div",
           {
             draggable: !a,
@@ -666,7 +666,7 @@ function kt(f = {}) {
         ))
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
@@ -702,7 +702,7 @@ function kt(f = {}) {
           overflowX: N() ? "hidden" : "auto",
           whiteSpace: N() ? "normal" : "nowrap"
         },
-        children: I.map((e, n) => /* @__PURE__ */ l(
+        children: I.map((e, n) => /* @__PURE__ */ c(
           "span",
           {
             draggable: !a,
@@ -732,9 +732,9 @@ function kt(f = {}) {
             },
             title: a ? "Time expired" : "Click to remove back to bank",
             style: {
-              padding: b() ? "4px 6px" : "6px 10px",
-              margin: b() ? "2px" : "4px",
-              borderRadius: b() ? "4px" : "8px",
+              padding: y() ? "4px 6px" : "6px 10px",
+              margin: y() ? "2px" : "4px",
+              borderRadius: y() ? "4px" : "8px",
               background: a ? "#f0f0f0" : "#ffe9e7",
               border: a ? "1px solid #ccc" : "1px solid #ec4c44",
               ...x.list === "selected" && x.id === e.id && x.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
@@ -760,16 +760,16 @@ function kt(f = {}) {
         ))
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       "button",
       {
         onClick: () => tt(!0),
         disabled: !a && I.length === 0,
         style: {
-          marginTop: b() ? "15px" : "30px",
-          fontSize: b() ? "14px" : "20px",
-          padding: b() ? "6px 12px" : "10px 24px",
-          borderRadius: b() ? "8px" : "12px",
+          marginTop: y() ? "15px" : "30px",
+          fontSize: y() ? "14px" : "20px",
+          padding: y() ? "6px 12px" : "10px 24px",
+          borderRadius: y() ? "8px" : "12px",
           background: a || I.length > 0 ? "#ec4c44" : "#ccc",
           color: "white",
           border: "none",
@@ -779,15 +779,15 @@ function kt(f = {}) {
       }
     )
   ] }), at = () => {
-    const e = h(), n = w(), t = m && e > n || e === 896 && n === 414 || e === 844 && n === 390 || e === 926 && n === 428 || e === 932 && n === 430 || Be || Me || Ae || $e || Ne || Xe || Fe || qe, r = m && e <= 375 && n <= 667 || e === 896 && n === 414 || e === 844 && n === 390 || e === 926 && n === 428 || e === 932 && n === 430, o = e === 1366 && n === 766 || e === 1366 && n === 768 || e === 1280 && n === 720 || e === 1440 && n === 900;
-    return /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
-      /* @__PURE__ */ l("h1", { style: {
+    const e = h(), n = w(), t = m && e > n || e === 896 && n === 414 || e === 844 && n === 390 || e === 926 && n === 428 || e === 932 && n === 430 || Be || Le || Ae || $e || Ne || Xe || Fe || qe, r = m && e <= 375 && n <= 667 || e === 896 && n === 414 || e === 844 && n === 390 || e === 926 && n === 428 || e === 932 && n === 430, o = e === 1366 && n === 766 || e === 1366 && n === 768 || e === 1280 && n === 720 || e === 1440 && n === 900;
+    return /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
+      /* @__PURE__ */ c("h1", { style: {
         ...u.gmHeadline1,
         marginTop: "0px",
         marginBottom: t ? "2px" : "10px",
         fontSize: r ? "32px" : "clamp(28px, 4vw, 40px)"
       }, children: "Game Over 🎯" }),
-      /* @__PURE__ */ y("h2", { style: {
+      /* @__PURE__ */ b("h2", { style: {
         ...u.gmHeadline2,
         marginTop: "0px",
         marginBottom: t ? "2px" : "16px",
@@ -798,7 +798,7 @@ function kt(f = {}) {
         " out of ",
         E
       ] }),
-      /* @__PURE__ */ y("p", { style: {
+      /* @__PURE__ */ b("p", { style: {
         ...u.gmBodyM,
         color: "#10b981",
         marginTop: t ? "0px" : "12px",
@@ -808,16 +808,16 @@ function kt(f = {}) {
         "Best score: ",
         ae
       ] }),
-      /* @__PURE__ */ y("div", { style: {
+      /* @__PURE__ */ b("div", { style: {
         display: "flex",
         gap: t || m && e <= 375 && n <= 667 ? "6px" : "12px",
         marginTop: t || m && e <= 375 && n <= 667 ? "2px" : o || Ee ? "12px" : "24px"
       }, children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ c(
           "button",
           {
             onClick: () => {
-              te(), L("start"), setTimeout(() => {
+              te(), W("start"), setTimeout(() => {
                 z("getready"), he(null), _(!1);
               }, 800);
             },
@@ -828,11 +828,11 @@ function kt(f = {}) {
             children: "🔁 Play again"
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ c(
           "button",
           {
             onClick: () => {
-              L("click"), z("select"), de(null), ue(null), Z([]), G(0), ie([]), _(!1);
+              W("click"), z("select"), de(null), ue(null), Z([]), G(0), ie([]), _(!1);
             },
             style: {
               ...u.gmButton,
@@ -845,35 +845,26 @@ function kt(f = {}) {
     ] });
   }, Se = !m && v, lt = dt(
     () => {
-      const e = h(), n = w();
-      if (m && e > n || n < 700 || !Se)
+      const e = h(), n = w(), t = e >= 1200 && e <= 1400;
+      if (m && e > n || n < 700 && !t || !Se)
         return null;
-      const t = s || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/magic%20sentence/logo` : "/cloud/speakid/games/magic%20sentence/logo");
-      return /* @__PURE__ */ l("div", { style: u.gmLogoFixed, children: /* @__PURE__ */ y("picture", { children: [
-        /* @__PURE__ */ l(
-          "source",
-          {
-            srcSet: `${t}.svg`,
-            type: "image/svg+xml"
-          }
-        ),
-        /* @__PURE__ */ l(
-          "img",
-          {
-            src: `${t}.png`,
-            alt: "SPEAKID Logo",
-            style: u.gmLogoImg,
-            loading: "lazy"
-          }
-        )
-      ] }) });
+      const r = s || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/magic%20sentence/logo` : "/cloud/speakid/games/magic%20sentence/logo");
+      return /* @__PURE__ */ c("div", { style: u.gmLogoFixed, children: /* @__PURE__ */ c(
+        "img",
+        {
+          src: `${r}.svg`,
+          alt: "SPEAKID Logo",
+          style: u.gmLogoImg,
+          loading: "lazy"
+        }
+      ) });
     },
     [m, Se, s, $, H]
   );
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ c(
     "div",
     {
-      ref: M,
+      ref: L,
       style: {
         width: "100%",
         height: "100%",
@@ -889,7 +880,7 @@ function kt(f = {}) {
         right: 0,
         bottom: 0
       },
-      children: /* @__PURE__ */ y(
+      children: /* @__PURE__ */ b(
         "div",
         {
           style: {
@@ -910,7 +901,7 @@ function kt(f = {}) {
           },
           children: [
             lt,
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ c(
               "div",
               {
                 style: {
@@ -921,7 +912,7 @@ function kt(f = {}) {
                   justifyContent: "center",
                   alignItems: "center"
                 },
-                children: /* @__PURE__ */ y("div", { id: "magic-sentence-root", children: [
+                children: /* @__PURE__ */ b("div", { id: "magic-sentence-root", children: [
                   S === "select" ? nt() : null,
                   S === "time" ? rt() : null,
                   S === "type" ? ot() : null,
@@ -957,7 +948,7 @@ class It extends pt {
     this.setState({ hasError: !1, error: void 0, errorInfo: void 0 });
   };
   render() {
-    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ y("div", { style: {
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ b("div", { style: {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -969,9 +960,9 @@ class It extends pt {
       color: "#dc2626",
       fontFamily: "system-ui, sans-serif"
     }, children: [
-      /* @__PURE__ */ l("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
-      /* @__PURE__ */ l("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ c("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
+      /* @__PURE__ */ c("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
+      /* @__PURE__ */ c(
         "button",
         {
           onClick: this.handleReset,
@@ -990,9 +981,9 @@ class It extends pt {
           children: "🔄 Restart Game"
         }
       ),
-      typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ y("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
-        /* @__PURE__ */ l("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
-        /* @__PURE__ */ y("pre", { style: {
+      typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ b("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
+        /* @__PURE__ */ c("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
+        /* @__PURE__ */ b("pre", { style: {
           backgroundColor: "#f3f4f6",
           padding: "12px",
           borderRadius: "4px",