speakid-build-a-sentence 1.0.27 → 1.0.29

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

@@ -1,5 +1,5 @@
-import { jsx as a, jsxs as b } 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); }
@@ -134,13 +134,14 @@ const Ce = {
     fontFamily: '"Geist", system-ui',
     width: "160px"
   },
-  // ✅ Обновлено только для качества логотипа (размер как в whats-missing)
+  // ✅ Обновлено только для качества логотипа (размер как в Hangman)
   gmLogoFixed: {
     position: "absolute",
     top: "16px",
     left: "16px",
     width: "auto",
-    zIndex: 10,
+    zIndex: 30,
+    // ✅ Унифицирован zIndex для консистентности
     pointerEvents: "none",
     background: "transparent",
     transform: "none",
@@ -173,7 +174,7 @@ const Ce = {
   // ===== Анимационные стили =====
   ...Ce
 }, ft = () => {
-  const [f, s] = c([]), v = ce((k, M, h) => {
+  const [f, s] = l([]), v = ce((k, M, h) => {
     const w = [];
     k.trim() || w.push({
       type: "empty",
@@ -293,9 +294,9 @@ 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), [l, _] = 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([]), [W, 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, Le] = l(!1), [Me, We] = 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;
@@ -321,7 +322,7 @@ function kt(f = {}) {
       return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, [$, H, k]);
   const Q = (e, n, t, r) => {
-    if (l) return;
+    if (a) return;
     let o = [...oe], p = [...I];
     const g = e === "bank" ? o : p, i = n === "bank" ? o : p, d = g.findIndex((ne) => ne.id === t);
     if (d === -1) return;
@@ -329,7 +330,7 @@ function kt(f = {}) {
     let C = r;
     e === n && C !== null && C !== void 0 && C > d && (C = C - 1), C == null || C < 0 || C > i.length ? i.push(R) : i.splice(C, 0, R), e === "bank" ? o = g : p = g, n === "bank" ? o = i : p = i, me(o), ie(p);
   }, Y = (e, n, t) => {
-    if (e.preventDefault(), l) {
+    if (e.preventDefault(), a) {
       B({ list: null, id: null, side: null });
       return;
     }
@@ -382,10 +383,10 @@ function kt(f = {}) {
     }));
     me(r), ie([]), fe(e), ye.current = e, ge(pe || 20), P(null), _(!1), se(!1), z("play");
   };
-  j(() => (S === "play" && !l && (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), W > 0 ? q.current = window.setTimeout(() => ge((e) => e - 1), 1e3) : _(!0)), () => {
     q.current !== null && window.clearTimeout(q.current);
-  }), [S, W, l]), j(() => {
-    if (S === "play" && l && W === 0) {
+  }), [S, W, a]), j(() => {
+    if (S === "play" && a && W === 0) {
       const e = T[D];
       if (!e) {
         P(null);
@@ -394,10 +395,10 @@ function kt(f = {}) {
       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!"));
     }
-  }, [S, l, W, T, D, I, xe]);
+  }, [S, a, W, T, D, I, xe]);
   const tt = (e = !0) => {
     if (e) {
-      if (l) {
+      if (a) {
         D + 1 < (E || 0) ? ee(D + 1) : (z("results"), setTimeout(() => te(), 600));
         return;
       }
@@ -452,9 +453,9 @@ function kt(f = {}) {
     };
     g();
   }, nt = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ a("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ a("p", { style: u.gmBodyM, children: "Select number of rounds" }),
-    /* @__PURE__ */ a("div", { style: {
+    /* @__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: y() ? "8px" : "16px",
       justifyContent: "center"
@@ -474,9 +475,9 @@ function kt(f = {}) {
       e
     )) })
   ] }), rt = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ a("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ a("p", { style: u.gmBodyM, children: "Select time per round" }),
-    /* @__PURE__ */ a("div", { style: {
+    /* @__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: y() ? "8px" : "16px",
       justifyContent: "center"
@@ -503,8 +504,8 @@ function kt(f = {}) {
       E && E > 1 ? "s" : "",
       " for your student"
     ] }),
-    /* @__PURE__ */ a("p", { style: { ...u.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
-    /* @__PURE__ */ a("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,
@@ -514,7 +515,7 @@ function kt(f = {}) {
       // Минимальная ширина по содержимому
       maxWidth: "600px"
       // Ограничиваем максимальную ширину
-    }, children: T.map((e, n) => /* @__PURE__ */ a(
+    }, children: T.map((e, n) => /* @__PURE__ */ c(
       "input",
       {
         value: e,
@@ -532,7 +533,7 @@ function kt(f = {}) {
       },
       n
     )) }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ c(
       "button",
       {
         onClick: et,
@@ -548,11 +549,11 @@ function kt(f = {}) {
       }
     )
   ] }), it = () => /* @__PURE__ */ b("div", { style: u.gmReadyWrapper, children: [
-    /* @__PURE__ */ a("h1", { style: {
+    /* @__PURE__ */ c("h1", { style: {
       ...u.gmHeadline1,
       color: "#ec4c44"
     }, children: "GET READY" }),
-    /* @__PURE__ */ a("div", { style: u.gmHourglass, children: "⏳" })
+    /* @__PURE__ */ c("div", { style: u.gmHourglass, children: "⏳" })
   ] }), st = () => /* @__PURE__ */ b("div", { style: u.gmGameLayout, children: [
     /* @__PURE__ */ b("h2", { style: {
       marginBottom: y() ? "5px" : "10px",
@@ -563,9 +564,9 @@ function kt(f = {}) {
       "/",
       E,
       " — ",
-      l ? "TIME'S UP!" : `Time: ${W}s`
+      a ? "TIME'S UP!" : `Time: ${W}s`
     ] }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ c(
       "div",
       {
         style: {
@@ -576,7 +577,7 @@ function kt(f = {}) {
           overflow: "hidden",
           marginBottom: y() ? "10px" : "20px"
         },
-        children: /* @__PURE__ */ a(
+        children: /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -589,7 +590,7 @@ function kt(f = {}) {
         )
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ c(
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
@@ -604,15 +605,15 @@ function kt(f = {}) {
           width: "100%",
           boxSizing: "border-box"
         },
-        children: oe.map((e, n) => /* @__PURE__ */ a(
+        children: oe.map((e, n) => /* @__PURE__ */ c(
           "div",
           {
-            draggable: !l,
+            draggable: !a,
             role: "button",
-            tabIndex: l ? -1 : 0,
-            "aria-label": l ? `Word: ${e.text} (time expired)` : mt("Drag word", e.text, "to build sentence"),
+            tabIndex: a ? -1 : 0,
+            "aria-label": a ? `Word: ${e.text} (time expired)` : mt("Drag word", e.text, "to build sentence"),
             onDragStart: (t) => {
-              if (l) {
+              if (a) {
                 t.preventDefault();
                 return;
               }
@@ -622,7 +623,7 @@ function kt(f = {}) {
               ), t.dataTransfer.setData("text/plain", e.id), A(`Dragging word: ${e.text}`);
             },
             onKeyDown: (t) => {
-              l || gt(t, () => Q("bank", "selected", e.id, null));
+              a || gt(t, () => Q("bank", "selected", e.id, null));
             },
             onDragOver: (t) => t.preventDefault(),
             onDrop: (t) => {
@@ -630,20 +631,20 @@ function kt(f = {}) {
               B({ list: null, id: null, side: null }), t.stopPropagation(), Y(t, "bank", p);
             },
             onDragEnter: (t) => {
-              if (l) return;
+              if (a) return;
               const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2;
               B({ list: "bank", id: e.id, side: t.clientX > o ? "right" : "left" });
             },
             onDragLeave: () => B({ list: null, id: null, side: null }),
             onClick: () => {
-              l || Q("bank", "selected", e.id, null);
+              a || Q("bank", "selected", e.id, null);
             },
             style: {
               padding: m || h() < 768 ? "6px 10px" : "10px 16px",
               borderRadius: m || h() < 768 ? "6px" : "10px",
               border: "1px solid #ccc",
-              background: l ? "#f0f0f0" : "#f9f9f9",
-              cursor: l ? "not-allowed" : x.list === "bank" && x.id === e.id ? "grabbing" : "grab",
+              background: a ? "#f0f0f0" : "#f9f9f9",
+              cursor: a ? "not-allowed" : x.list === "bank" && x.id === e.id ? "grabbing" : "grab",
               fontSize: (() => {
                 const t = h();
                 return m || t < 768 ? "12px" : t >= 768 && t < 1300 ? "14px" : "18px";
@@ -652,7 +653,7 @@ function kt(f = {}) {
               ...x.list === "bank" && x.id === e.id && x.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
               flexShrink: 0,
               flexBasis: "auto",
-              opacity: l ? 0.6 : 1,
+              opacity: a ? 0.6 : 1,
               transition: "opacity 0.3s ease, transform 0.2s ease",
               ...x.list === "bank" && x.id === e.id ? {
                 transform: "scale(1.05)",
@@ -665,7 +666,7 @@ function kt(f = {}) {
         ))
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ c(
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
@@ -701,12 +702,12 @@ function kt(f = {}) {
           overflowX: N() ? "hidden" : "auto",
           whiteSpace: N() ? "normal" : "nowrap"
         },
-        children: I.map((e, n) => /* @__PURE__ */ a(
+        children: I.map((e, n) => /* @__PURE__ */ c(
           "span",
           {
-            draggable: !l,
+            draggable: !a,
             onDragStart: (t) => {
-              if (l) {
+              if (a) {
                 t.preventDefault();
                 return;
               }
@@ -721,24 +722,24 @@ function kt(f = {}) {
               B({ list: null, id: null, side: null }), t.stopPropagation(), Y(t, "selected", g);
             },
             onDragEnter: (t) => {
-              if (l) return;
+              if (a) return;
               const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2;
               B({ list: "selected", id: e.id, side: t.clientX > o ? "right" : "left" });
             },
             onDragLeave: () => B({ list: null, id: null, side: null }),
             onClick: () => {
-              l || Q("selected", "bank", e.id, null);
+              a || Q("selected", "bank", e.id, null);
             },
-            title: l ? "Time expired" : "Click to remove back to bank",
+            title: a ? "Time expired" : "Click to remove back to bank",
             style: {
               padding: y() ? "4px 6px" : "6px 10px",
               margin: y() ? "2px" : "4px",
               borderRadius: y() ? "4px" : "8px",
-              background: l ? "#f0f0f0" : "#ffe9e7",
-              border: l ? "1px solid #ccc" : "1px solid #ec4c44",
+              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" } : {},
               ...x.list === "selected" && x.id === e.id && x.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
-              cursor: l ? "not-allowed" : x.list === "selected" && x.id === e.id ? "grabbing" : "grab",
+              cursor: a ? "not-allowed" : x.list === "selected" && x.id === e.id ? "grabbing" : "grab",
               userSelect: "none",
               fontSize: `${we(I.length)}px`,
               // Адаптивный размер шрифта для слов
@@ -746,7 +747,7 @@ function kt(f = {}) {
               // Более плотный шрифт
               whiteSpace: "nowrap",
               // Запрещаем перенос слов
-              opacity: l ? 0.6 : 1,
+              opacity: a ? 0.6 : 1,
               transition: "opacity 0.3s ease, transform 0.2s ease",
               ...x.list === "selected" && x.id === e.id ? {
                 transform: "scale(1.05)",
@@ -759,20 +760,20 @@ function kt(f = {}) {
         ))
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ c(
       "button",
       {
         onClick: () => tt(!0),
-        disabled: !l && I.length === 0,
+        disabled: !a && I.length === 0,
         style: {
           marginTop: y() ? "15px" : "30px",
           fontSize: y() ? "14px" : "20px",
           padding: y() ? "6px 12px" : "10px 24px",
           borderRadius: y() ? "8px" : "12px",
-          background: l || I.length > 0 ? "#ec4c44" : "#ccc",
+          background: a || I.length > 0 ? "#ec4c44" : "#ccc",
           color: "white",
           border: "none",
-          cursor: l || I.length > 0 ? "pointer" : "not-allowed"
+          cursor: a || I.length > 0 ? "pointer" : "not-allowed"
         },
         children: "NEXT"
       }
@@ -780,7 +781,7 @@ 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__ */ b("div", { style: u.gmCenterScreen, children: [
-      /* @__PURE__ */ a("h1", { style: {
+      /* @__PURE__ */ c("h1", { style: {
         ...u.gmHeadline1,
         marginTop: "0px",
         marginBottom: t ? "2px" : "10px",
@@ -812,7 +813,7 @@ function kt(f = {}) {
         gap: t || m && e <= 375 && n <= 667 ? "6px" : "12px",
         marginTop: t || m && e <= 375 && n <= 667 ? "2px" : o || Ee ? "12px" : "24px"
       }, children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ c(
           "button",
           {
             onClick: () => {
@@ -827,7 +828,7 @@ function kt(f = {}) {
             children: "🔁 Play again"
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ c(
           "button",
           {
             onClick: () => {
@@ -848,31 +849,19 @@ function kt(f = {}) {
       if (m && e > n || n < 700 || !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 (
-        // ensure logo is positioned inside the square container
-        /* @__PURE__ */ a("div", { style: { ...u.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ b("picture", { children: [
-          /* @__PURE__ */ a(
-            "source",
-            {
-              srcSet: `${t}.svg`,
-              type: "image/svg+xml"
-            }
-          ),
-          /* @__PURE__ */ a(
-            "img",
-            {
-              src: `${t}.png`,
-              alt: "SPEAKID Logo",
-              style: u.gmLogoImg,
-              loading: "lazy"
-            }
-          )
-        ] }) })
-      );
+      return /* @__PURE__ */ c("div", { style: u.gmLogoFixed, children: /* @__PURE__ */ c(
+        "img",
+        {
+          src: `${t}.svg`,
+          alt: "SPEAKID Logo",
+          style: u.gmLogoImg,
+          loading: "lazy"
+        }
+      ) });
     },
     [m, Se, s, $, H]
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ c(
     "div",
     {
       ref: M,
@@ -891,7 +880,7 @@ function kt(f = {}) {
         right: 0,
         bottom: 0
       },
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ b(
         "div",
         {
           style: {
@@ -910,28 +899,30 @@ function kt(f = {}) {
             transform: `scale(${ze})`
             // ✅ Применяем масштаб для широких экранов
           },
-          children: /* @__PURE__ */ a(
-            "div",
-            {
-              style: {
-                transform: "translateZ(0)",
-                width: "100%",
-                height: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center"
-              },
-              children: /* @__PURE__ */ b("div", { id: "magic-sentence-root", children: [
-                lt,
-                S === "select" ? nt() : null,
-                S === "time" ? rt() : null,
-                S === "type" ? ot() : null,
-                S === "getready" ? it() : null,
-                S === "play" ? st() : null,
-                S === "results" ? at() : null
-              ] })
-            }
-          )
+          children: [
+            lt,
+            /* @__PURE__ */ c(
+              "div",
+              {
+                style: {
+                  transform: "translateZ(0)",
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ b("div", { id: "magic-sentence-root", children: [
+                  S === "select" ? nt() : null,
+                  S === "time" ? rt() : null,
+                  S === "type" ? ot() : null,
+                  S === "getready" ? it() : null,
+                  S === "play" ? st() : null,
+                  S === "results" ? at() : null
+                ] })
+              }
+            )
+          ]
         }
       )
     }
@@ -969,9 +960,9 @@ class It extends pt {
       color: "#dc2626",
       fontFamily: "system-ui, sans-serif"
     }, children: [
-      /* @__PURE__ */ a("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
-      /* @__PURE__ */ a("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
-      /* @__PURE__ */ a(
+      /* @__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,
@@ -991,7 +982,7 @@ class It extends pt {
         }
       ),
       typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ b("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
-        /* @__PURE__ */ a("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
+        /* @__PURE__ */ c("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
         /* @__PURE__ */ b("pre", { style: {
           backgroundColor: "#f3f4f6",
           padding: "12px",