speakid-hangman 1.0.3 → 1.0.5

package/dist/speakid-hangman.es.js

@@ -1,5 +1,5 @@
-import { jsx as n, jsxs as u, Fragment as X } from "react/jsx-runtime";
-import { useState as m, useMemo as D, useCallback as ae, useEffect as le } from "react";
+import { jsx as n, jsxs as u, Fragment as O } from "react/jsx-runtime";
+import { useState as m, useMemo as X, useCallback as le, useEffect as de } from "react";
 const a = {
   gmCenterScreen: {
     position: "relative",
@@ -183,7 +183,8 @@ const a = {
     top: "16px",
     left: "16px",
     width: "auto",
-    zIndex: 10,
+    zIndex: 30,
+    // ✅ Унифицирован zIndex для консистентности
     pointerEvents: "none",
     background: "transparent",
     transform: "none",
@@ -201,53 +202,60 @@ const a = {
     display: "block"
   }
 };
-function ve({
+function Se({
   mistakes: r,
-  maxMistakes: Z,
-  size: G = 200
+  maxMistakes: U,
+  size: D = 200
 }) {
-  const l = G, d = G * 1.25, y = Math.max(2, G / 100), T = 10 * (l / 200), b = 240 * (d / 250), f = 150 * (l / 200), x = 80 * (l / 200), K = 20 * (d / 250), Q = 240 * (d / 250), w = 80 * (l / 200), N = 20 * (d / 250), $ = 150 * (l / 200), B = 150 * (l / 200), M = 20 * (d / 250), z = 50 * (d / 250), v = 150 * (l / 200), C = 70 * (d / 250), _ = 20 * (l / 200), S = 150 * (l / 200), q = 90 * (d / 250), E = 150 * (d / 250), h = 150 * (l / 200), F = 110 * (d / 250), g = 130 * (l / 200), W = 130 * (d / 250), J = 150 * (l / 200), H = 110 * (d / 250), ce = 170 * (l / 200), L = 130 * (d / 250), ee = 150 * (l / 200), V = 150 * (d / 250), p = 130 * (l / 200), te = 190 * (d / 250), I = 150 * (l / 200), ne = 150 * (d / 250), s = 170 * (l / 200), Y = 190 * (d / 250), c = r === 0 || r <= Z * 0.5 ? "#1f2937" : r <= Z * 0.75 ? "#f59e0b" : "#ec4c44";
+  const l = D, g = D * 1.25, b = Math.max(3, D / 100), T = 10 * (l / 200), f = 240 * (g / 250), x = 150 * (l / 200), y = 80 * (l / 200), K = 20 * (g / 250), G = 240 * (g / 250), w = 80 * (l / 200), Q = 20 * (g / 250), $ = 150 * (l / 200), B = 150 * (l / 200), M = 20 * (g / 250), z = 50 * (g / 250), v = 150 * (l / 200), W = 70 * (g / 250), N = 20 * (l / 200), S = 150 * (l / 200), q = 90 * (g / 250), E = 150 * (g / 250), h = 150 * (l / 200), F = 110 * (g / 250), p = 130 * (l / 200), C = 130 * (g / 250), J = 150 * (l / 200), H = 110 * (g / 250), ce = 170 * (l / 200), L = 130 * (g / 250), ee = 150 * (l / 200), _ = 150 * (g / 250), d = 130 * (l / 200), te = 190 * (g / 250), I = 150 * (l / 200), ne = 150 * (g / 250), s = 170 * (l / 200), V = 190 * (g / 250), c = r === 0 || r <= U * 0.5 ? "#1f2937" : r <= U * 0.75 ? "#f59e0b" : "#ec4c44";
   return /* @__PURE__ */ u(
     "svg",
     {
       width: l,
-      height: d,
+      height: g,
+      viewBox: "0 0 200 250",
       style: {
         display: "block",
-        margin: "0 auto"
+        margin: "0 auto",
+        overflow: "visible",
+        // ✅ Для корректного отображения линий
+        WebkitFontSmoothing: "antialiased",
+        // ✅ Для лучшего рендеринга на iOS
+        transform: "translateZ(0)"
+        // ✅ Включение аппаратного ускорения на iOS
       },
       children: [
         r > 0 && /* @__PURE__ */ n(
           "line",
           {
             x1: T,
-            y1: b,
-            x2: f,
-            y2: b,
+            y1: f,
+            x2: x,
+            y2: f,
             stroke: c,
-            strokeWidth: y
+            strokeWidth: b
           }
         ),
         r > 1 && /* @__PURE__ */ n(
           "line",
           {
-            x1: x,
+            x1: y,
             y1: K,
-            x2: x,
-            y2: Q,
+            x2: y,
+            y2: G,
             stroke: c,
-            strokeWidth: y
+            strokeWidth: b
           }
         ),
         r > 2 && /* @__PURE__ */ n(
           "line",
           {
             x1: w,
-            y1: N,
+            y1: Q,
             x2: $,
-            y2: N,
+            y2: Q,
             stroke: c,
-            strokeWidth: y
+            strokeWidth: b
           }
         ),
         r > 3 && /* @__PURE__ */ n(
@@ -258,18 +266,18 @@ function ve({
             x2: B,
             y2: z,
             stroke: c,
-            strokeWidth: y
+            strokeWidth: b
           }
         ),
         r > 4 && /* @__PURE__ */ n(
           "circle",
           {
             cx: v,
-            cy: C,
-            r: _,
+            cy: W,
+            r: N,
             stroke: c,
             fill: "none",
-            strokeWidth: y
+            strokeWidth: b
           }
         ),
         r > 5 && /* @__PURE__ */ n(
@@ -280,7 +288,7 @@ function ve({
             x2: S,
             y2: E,
             stroke: c,
-            strokeWidth: y
+            strokeWidth: b
           }
         ),
         r > 6 && /* @__PURE__ */ n(
@@ -288,10 +296,10 @@ function ve({
           {
             x1: h,
             y1: F,
-            x2: g,
-            y2: W,
+            x2: p,
+            y2: C,
             stroke: c,
-            strokeWidth: y
+            strokeWidth: b
           }
         ),
         r > 7 && /* @__PURE__ */ n(
@@ -302,18 +310,18 @@ function ve({
             x2: ce,
             y2: L,
             stroke: c,
-            strokeWidth: y
+            strokeWidth: b
           }
         ),
         r > 8 && /* @__PURE__ */ n(
           "line",
           {
             x1: ee,
-            y1: V,
-            x2: p,
+            y1: _,
+            x2: d,
             y2: te,
             stroke: c,
-            strokeWidth: y
+            strokeWidth: b
           }
         ),
         r > 9 && /* @__PURE__ */ n(
@@ -322,22 +330,22 @@ function ve({
             x1: I,
             y1: ne,
             x2: s,
-            y2: Y,
+            y2: V,
             stroke: c,
-            strokeWidth: y
+            strokeWidth: b
           }
         )
       ]
     }
   );
 }
-function Le({
+function Te({
   gameCubeSize: r = 400,
-  screenHeight: Z = 800,
-  screenWidth: G = 800,
+  screenHeight: U = 800,
+  screenWidth: D = 800,
   logoUrl: l,
-  showLogo: d = !0,
-  baseURL: y
+  showLogo: g = !0,
+  baseURL: b
 } = {}) {
   const T = {
     Professions: ["teacher", "doctor", "nurse", "driver", "police", "firefighter", "cook", "waiter", "farmer", "builder", "singer", "actor", "dentist", "pilot", "vet", "artist", "cleaner", "student", "baker", "mechanic"],
@@ -357,40 +365,40 @@ function Le({
     Environment: ["tree", "forest", "air", "water", "pollution", "recycle", "nature", "clean", "waste", "plastic", "energy", "animal", "climate", "earth", "ocean", "river", "planet", "save", "green", "environment", "litter", "organic"],
     Space: ["planet", "star", "sun", "moon", "astronaut", "rocket", "space", "galaxy", "universe", "telescope", "comet", "asteroid", "orbit", "gravity", "alien", "spaceship", "mars", "satellite", "sky", "eclipse"],
     Devices: ["computer", "laptop", "phone", "tablet", "tv", "keyboard", "mouse", "printer", "camera", "headphones", "charger", "screen", "watch", "microphone", "speaker", "console", "router", "battery", "cable", "remote"]
-  }, [b, f] = m("lobby"), [x, K] = m(""), [Q] = m("Normal"), [w, N] = m(0), [$, B] = m(1), [M, z] = m(""), [v, C] = m([]), [_, S] = m(0), [q, E] = m(0), [h, F] = m(null), [g, W] = m(null), [J, H] = m(1), [ce, L] = m([]), ee = Q === "Easy" ? 8 : Q === "Normal" ? 6 : 4, V = y || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman` : "/cloud/speakid/games/hangman"), [p, te] = m(!1), [I, ne] = m(!1), s = D(() => {
-    const e = (g || r || 1e3) / 400;
+  }, [f, x] = m("lobby"), [y, K] = m(""), [G] = m("Normal"), [w, Q] = m(0), [$, B] = m(1), [M, z] = m(""), [v, W] = m([]), [N, S] = m(0), [q, E] = m(0), [h, F] = m(null), [p, C] = m(null), [J, H] = m(1), [ce, L] = m([]), ee = G === "Easy" ? 8 : G === "Normal" ? 6 : 4, _ = b || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman` : "/cloud/speakid/games/hangman"), [d, te] = m(!1), [I, ne] = m(!1), s = X(() => {
+    const e = (p || r || 1e3) / 400;
     return {
-      headline1: p ? Math.max(24, Math.min(30, 30 * e)) : Math.max(28, Math.min(32, 32 * e)),
+      headline1: d ? Math.max(24, Math.min(30, 30 * e)) : Math.max(28, Math.min(32, 32 * e)),
       // Desktop: 32px
       headline2: Math.max(20, Math.min(28, 24 * e)),
       // Desktop: 24px
-      headline3: p ? Math.max(14, Math.min(18, 16 * e)) : Math.max(20, Math.min(26, 24 * e)),
+      headline3: d ? Math.max(14, Math.min(18, 16 * e)) : Math.max(20, Math.min(26, 24 * e)),
       // Desktop: 24px
       bodyL: Math.max(14, Math.min(20, 18 * e)),
       // Desktop: 18px
-      bodyM: p ? Math.max(12, Math.min(16, 14 * e)) : Math.max(14, Math.min(18, 16 * e)),
+      bodyM: d ? Math.max(12, Math.min(16, 14 * e)) : Math.max(14, Math.min(18, 16 * e)),
       // Desktop: 16px
-      bodyS: p ? Math.max(10, Math.min(14, 12 * e)) : Math.max(12, Math.min(16, 14 * e)),
+      bodyS: d ? Math.max(10, Math.min(14, 12 * e)) : Math.max(12, Math.min(16, 14 * e)),
       // Desktop: 14px
       wordDisplay: Math.max(18, Math.min(32, 26 * e)),
       // Адаптивный размер
       button: Math.max(12, Math.min(18, 16 * e))
       // Desktop: 16px
     };
-  }, [p, g, r]), Y = D(() => {
-    const e = (g || r || 1e3) / 400;
+  }, [d, p, r]), V = X(() => {
+    const e = (p || r || 1e3) / 400;
     return I ? Math.max(8, Math.min(12, 10 * e)) : Math.max(12, Math.min(24, 16 * e));
-  }, [I, g, r]), o = D(() => {
-    const e = (g || r || 1e3) / 400;
+  }, [I, p, r]), o = X(() => {
+    const e = (p || r || 1e3) / 400;
     return I ? Math.max(3, Math.min(6, 5 * e)) : Math.max(4, Math.min(12, 8 * e));
-  }, [I, g, r]), c = D(() => {
-    const e = (g || r || 1e3) / 400;
+  }, [I, p, r]), c = X(() => {
+    const e = (p || r || 1e3) / 400;
     return Math.max(6, Math.min(10, 8 * e));
-  }, [g, r]), he = (e, t) => e.split("").every((i) => t.includes(i)), me = (e, t) => e.split("").map((i) => t.includes(i) ? i : "_").join(" "), fe = (e) => "abcdefghijklmnopqrstuvwxyz".split("").filter((i) => !e.includes(i)), P = (e, t = []) => {
-    var U;
+  }, [p, r]), he = (e, t) => e.split("").every((i) => t.includes(i)), me = (e, t) => e.split("").map((i) => t.includes(i) ? i : "_").join(" "), fe = (e) => "abcdefghijklmnopqrstuvwxyz".split("").filter((i) => !e.includes(i)), Z = (e, t = []) => {
+    var P;
     if (!e || !T[e]) {
       const k = Object.keys(T)[0];
-      return ((U = T[k]) == null ? void 0 : U[0]) || "";
+      return ((P = T[k]) == null ? void 0 : P[0]) || "";
     }
     const i = T[e];
     if (!i || i.length === 0)
@@ -398,87 +406,87 @@ function Le({
     const R = i.filter((k) => !t.includes(k)), j = R.length > 0 ? R : i;
     if (j.length === 0)
       return "";
-    let O;
+    let A;
     if (typeof crypto < "u" && crypto.getRandomValues) {
       const k = new Uint32Array(1);
       crypto.getRandomValues(k);
       const ue = k[0] / 4294967295;
-      O = Math.floor(ue * j.length);
+      A = Math.floor(ue * j.length);
     } else
-      O = Math.floor(Math.random() * j.length);
-    return j[O];
+      A = Math.floor(Math.random() * j.length);
+    return j[A];
   }, xe = () => {
-    if (!x) return;
+    if (!y) return;
     L([]);
-    const e = P(x, []);
+    const e = Z(y, []);
     if (!e) {
-      f("category");
+      x("category");
       return;
     }
-    z(e), L([e]), C([]), S(0), B(1), E(0), F(null), f("game");
-  }, oe = ae((e) => {
-    if (b !== "game" || h !== null) return;
+    z(e), L([e]), W([]), S(0), B(1), E(0), F(null), x("game");
+  }, oe = le((e) => {
+    if (f !== "game" || h !== null) return;
     const t = e.toLowerCase();
-    /^[a-z]$/.test(t) && (C((i) => i.includes(t) ? i : [...i, t]), z((i) => (i && !i.includes(t) && S((R) => R + 1), i)));
-  }, [b, h]), re = ae((e) => {
+    /^[a-z]$/.test(t) && (W((i) => i.includes(t) ? i : [...i, t]), z((i) => (i && !i.includes(t) && S((R) => R + 1), i)));
+  }, [f, h]), re = le((e) => {
     oe(e.key);
   }, [oe]);
-  le(() => {
-    if (b === "game")
+  de(() => {
+    if (f === "game")
       return window.addEventListener("keydown", re), () => window.removeEventListener("keydown", re);
-  }, [b, re]);
-  const ye = M ? me(M, v) : "", de = M ? he(M, v) : !1, ge = _ >= 10, be = fe(v), ie = ae(() => {
-    if (!x || $ >= w) {
-      f("result");
+  }, [f, re]);
+  const ye = M ? me(M, v) : "", ge = M ? he(M, v) : !1, pe = N >= 10, be = fe(v), ie = le(() => {
+    if (!y || $ >= w) {
+      x("result");
       return;
     }
     B((e) => e + 1), L((e) => {
-      const t = P(x, e);
+      const t = Z(y, e);
       return t ? (z(t), [...e, t]) : e;
-    }), C([]), S(0), F(null);
-  }, [x, $, w]);
-  le(() => {
-    if (de && h === null) {
+    }), W([]), S(0), F(null);
+  }, [y, $, w]);
+  de(() => {
+    if (ge && h === null) {
       F("win"), E((t) => t + 1);
       const e = setTimeout(() => {
         ie();
       }, 2e3);
       return () => clearTimeout(e);
     }
-    if (ge && h === null) {
+    if (pe && h === null) {
       F("lose");
       const e = setTimeout(() => {
         ie();
       }, 2e3);
       return () => clearTimeout(e);
     }
-  }, [de, ge, h, ie]);
+  }, [ge, pe, h, ie]);
   const ke = () => {
-    if (!x || $ >= w) {
-      f("result");
+    if (!y || $ >= w) {
+      x("result");
       return;
     }
     B((e) => e + 1), L((e) => {
-      const t = P(x, e);
+      const t = Z(y, e);
       return t ? (z(t), [...e, t]) : e;
-    }), C([]), S(0), F(null);
+    }), W([]), S(0), F(null);
   };
-  le(() => {
+  de(() => {
     const e = () => {
-      const t = window.innerWidth, i = window.innerHeight, R = t < 768 || t === 926 && i === 428 || t === 932 && i === 430, j = i < 700, O = t / i > 1.8, U = t === 1024 && i === 600;
-      if (te(R), ne(U), r && r >= 320) {
-        const $e = Math.max(320, Math.min(1200, r));
-        W($e), H(1);
+      const t = window.innerWidth, i = window.innerHeight, R = t < 768 || t === 926 && i === 428 || t === 932 && i === 430, j = i < 700, A = t / i > 1.8, P = t === 1024 && i === 600;
+      if (te(R), ne(P), r && r >= 320) {
+        const ve = Math.max(320, Math.min(1200, r));
+        C(ve), H(1);
       } else if (R)
-        W(null), H(1);
+        C(null), H(1);
       else if (j)
-        W(null), H(1);
-      else if (O) {
+        C(null), H(1);
+      else if (A) {
         const k = Math.min(1e3, Math.min(t, i) * 0.9);
-        W(k), H(0.85);
+        C(k), H(0.85);
       } else {
         const k = Math.min(1e3, Math.min(t, i) * 0.9);
-        W(k), H(1);
+        C(k), H(1);
       }
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
@@ -527,22 +535,24 @@ function Le({
       <path d="M 35% 85% Q 37% 83%, 39% 85% T 43% 85% T 47% 85%" 
             fill="none" stroke="#FF4500" stroke-width="3.5" stroke-linecap="round"/>
     </svg>
-  `, we = {
+  `, we = !d && typeof window < "u" && window.innerWidth >= 768 && window.innerWidth < 1024, ae = !d && g && (f !== "game" || we), Me = {
     ...a.gmCenterScreen,
     width: "100%",
     height: "100%",
-    padding: `${Y}px`,
+    padding: `${V}px`,
+    paddingTop: ae ? "60px" : `${V}px`,
+    // ✅ Резервируем место под логотип (16px top + 28px высота + 16px отступ)
     overflow: "auto",
     position: "relative",
     boxSizing: "border-box",
     background: "transparent"
-  }, pe = !p && d, A = D(
+  }, Y = X(
     () => {
       const e = window.innerWidth, t = window.innerHeight;
-      if (p && e > t || t < 700 || !pe)
+      if (d && e > t || t < 700 || !ae)
         return null;
       const i = l || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman/logo` : "/cloud/speakid/games/hangman/logo");
-      return /* @__PURE__ */ n("div", { style: { ...a.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ u("picture", { children: [
+      return /* @__PURE__ */ n("div", { style: a.gmLogoFixed, children: /* @__PURE__ */ u("picture", { children: [
         /* @__PURE__ */ n(
           "source",
           {
@@ -561,9 +571,9 @@ function Le({
         )
       ] }) });
     },
-    [p, pe, l]
-  ), Me = () => b === "lobby" ? /* @__PURE__ */ u(X, { children: [
-    A,
+    [d, ae, l, f]
+  ), $e = () => f === "lobby" ? /* @__PURE__ */ u(O, { children: [
+    Y,
     /* @__PURE__ */ n("div", { dangerouslySetInnerHTML: { __html: se } }),
     /* @__PURE__ */ n("h1", { style: {
       ...a.gmHeadline1,
@@ -575,7 +585,7 @@ function Le({
     /* @__PURE__ */ u(
       "button",
       {
-        onClick: () => f("category"),
+        onClick: () => x("category"),
         style: {
           fontFamily: '"Onest", system-ui, sans-serif',
           fontWeight: 500,
@@ -642,14 +652,14 @@ function Le({
       /* @__PURE__ */ n(
         "img",
         {
-          src: `${V}/sun.png`,
+          src: `${_}/sun.png`,
           alt: "Sun",
           style: {
             position: "absolute",
-            left: p ? "-10%" : "5%",
+            left: d ? "-10%" : "5%",
             top: "20%",
             width: "auto",
-            height: p ? `${Math.min(window.innerHeight * 0.33, 200)}px` : `${Math.min((g || r || 1e3) * 0.33, 300)}px`,
+            height: d ? `${Math.min(window.innerHeight * 0.33, 200)}px` : `${Math.min((p || r || 1e3) * 0.33, 300)}px`,
             maxHeight: "33vh",
             objectFit: "contain",
             opacity: 0.6
@@ -659,14 +669,14 @@ function Le({
       /* @__PURE__ */ n(
         "img",
         {
-          src: `${V}/character.png`,
+          src: `${_}/character.png`,
           alt: "Hangman character",
           style: {
             position: "absolute",
-            right: p ? "5%" : "10%",
+            right: d ? "5%" : "10%",
             bottom: "10%",
             width: "auto",
-            height: p ? `${Math.min(window.innerHeight * 0.33, 200)}px` : `${Math.min((g || r || 1e3) * 0.33, 300)}px`,
+            height: d ? `${Math.min(window.innerHeight * 0.33, 200)}px` : `${Math.min((p || r || 1e3) * 0.33, 300)}px`,
             maxHeight: "33vh",
             objectFit: "contain",
             opacity: 0.6
@@ -674,13 +684,13 @@ function Le({
         }
       )
     ] })
-  ] }) : b === "category" ? /* @__PURE__ */ u(X, { children: [
-    A,
+  ] }) : f === "category" ? /* @__PURE__ */ u(O, { children: [
+    Y,
     /* @__PURE__ */ n("div", { dangerouslySetInnerHTML: { __html: se } }),
     /* @__PURE__ */ n(
       "button",
       {
-        onClick: () => f("lobby"),
+        onClick: () => x("lobby"),
         onMouseEnter: (e) => {
           e.currentTarget.style.backgroundColor = "#e5e7eb";
         },
@@ -694,9 +704,10 @@ function Le({
           padding: `${o}px ${o * 1.5}px`,
           borderRadius: `${c}px`,
           position: "absolute",
-          top: `${Y}px`,
-          left: "160px",
-          // ✅ Фиксированное смещение правее логотипа (16px + ~120px логотип + 24px отступ)
+          top: "52px",
+          // ✅ Под логотипом (16px top логотипа + 28px высота логотипа + 8px отступ)
+          left: "16px",
+          // ✅ Та же позиция что и логотип
           zIndex: 10
         },
         children: "←"
@@ -706,7 +717,7 @@ function Le({
       "button",
       {
         onClick: () => {
-          K(e), f("rounds");
+          K(e), x("rounds");
         },
         onMouseEnter: (t) => {
           t.currentTarget.style.backgroundColor = "#f0f0f0", t.currentTarget.style.borderColor = "#1f2937", t.currentTarget.style.transform = "scale(1.05)";
@@ -733,13 +744,13 @@ function Le({
       },
       e
     )) })
-  ] }) : b === "rounds" ? /* @__PURE__ */ u(X, { children: [
-    A,
+  ] }) : f === "rounds" ? /* @__PURE__ */ u(O, { children: [
+    Y,
     /* @__PURE__ */ n("div", { dangerouslySetInnerHTML: { __html: se } }),
     /* @__PURE__ */ n(
       "button",
       {
-        onClick: () => f("category"),
+        onClick: () => x("category"),
         onMouseEnter: (e) => {
           e.currentTarget.style.backgroundColor = "#e5e7eb";
         },
@@ -753,9 +764,10 @@ function Le({
           padding: `${o}px ${o * 1.5}px`,
           borderRadius: `${c}px`,
           position: "absolute",
-          top: `${Y}px`,
-          left: "160px",
-          // ✅ Фиксированное смещение правее логотипа (16px + ~120px логотип + 24px отступ)
+          top: "52px",
+          // ✅ Под логотипом (16px top логотипа + 28px высота логотипа + 8px отступ)
+          left: "16px",
+          // ✅ Та же позиция что и логотип
           zIndex: 10
         },
         children: "←"
@@ -766,7 +778,7 @@ function Le({
       "button",
       {
         onClick: () => {
-          N(e), xe();
+          Q(e), xe();
         },
         onMouseEnter: (t) => {
           t.currentTarget.style.backgroundColor = "#f0f0f0", t.currentTarget.style.borderColor = "#1f2937", t.currentTarget.style.transform = "scale(1.05)";
@@ -793,17 +805,17 @@ function Le({
       },
       e
     )) })
-  ] }) : b === "game" ? /* @__PURE__ */ u(X, { children: [
-    A,
+  ] }) : f === "game" ? /* @__PURE__ */ u(O, { children: [
+    Y,
     /* @__PURE__ */ u("div", { style: {
       ...a.gmInfoBox,
       padding: `${o * 0.8}px`,
       marginBottom: `${o * 0.5}px`,
-      maxWidth: `${(g || r) * 0.9}px`
+      maxWidth: `${(p || r) * 0.9}px`
     }, children: [
       /* @__PURE__ */ u("h3", { style: { ...a.gmHeadline3, fontSize: `${s.headline3}px`, marginBottom: `${o * 0.5}px` }, children: [
         "Category: ",
-        x
+        y
       ] }),
       /* @__PURE__ */ u("p", { style: { ...a.gmBodyM, fontSize: `${s.bodyM}px`, marginBottom: "0px" }, children: [
         "Round ",
@@ -828,11 +840,11 @@ function Le({
       justifyContent: "center",
       alignItems: "center"
     }, children: /* @__PURE__ */ n(
-      ve,
+      Se,
       {
-        mistakes: _,
+        mistakes: N,
         maxMistakes: ee,
-        size: I ? Math.max(80, Math.min(110, (g || r) * 0.16)) : Math.max(100, Math.min(150, (g || r) * 0.2))
+        size: I ? Math.max(80, Math.min(110, (p || r) * 0.16)) : d ? Math.max(100, Math.min(150, Math.min(window.innerWidth * 0.3, window.innerHeight * 0.2))) : Math.max(100, Math.min(150, (p || r) * 0.2))
       }
     ) }),
     /* @__PURE__ */ n("div", { style: {
@@ -847,7 +859,7 @@ function Le({
       padding: `${o}px`,
       marginTop: `${o}px`,
       marginBottom: `${o}px`,
-      maxWidth: `${(g || r) * 0.95}px`
+      maxWidth: `${(p || r) * 0.95}px`
     }, children: [
       /* @__PURE__ */ n("p", { style: {
         ...a.gmBodyS,
@@ -880,7 +892,7 @@ function Le({
             background: "#f9f9f9",
             color: "#1f2937",
             border: "1px solid #e5e7eb",
-            minWidth: `${Math.max(o * 1.5, (g || r) * 0.04)}px`,
+            minWidth: `${Math.max(o * 1.5, (p || r) * 0.04)}px`,
             textAlign: "center",
             display: "inline-block",
             cursor: h === null ? "pointer" : "default",
@@ -937,7 +949,7 @@ function Le({
     h !== null && $ >= w && /* @__PURE__ */ n("div", { style: { marginTop: "2px", marginBottom: `${o}px` }, children: /* @__PURE__ */ n(
       "button",
       {
-        onClick: () => f("result"),
+        onClick: () => x("result"),
         onMouseEnter: (e) => {
           e.currentTarget.style.backgroundColor = "#d43a32";
         },
@@ -950,7 +962,7 @@ function Le({
           padding: `${o}px ${o * 1.5}px`,
           borderRadius: `${c}px`
         },
-        children: "View Results →"
+        children: "View results"
       }
     ) }),
     h === null && v.length === 0 && /* @__PURE__ */ n("p", { style: {
@@ -959,8 +971,8 @@ function Le({
       marginTop: `${o}px`,
       marginBottom: `${o}px`
     }, children: "Type a letter on your keyboard" })
-  ] }) : b === "result" ? /* @__PURE__ */ u(X, { children: [
-    A,
+  ] }) : f === "result" ? /* @__PURE__ */ u(O, { children: [
+    Y,
     /* @__PURE__ */ n("h1", { style: {
       ...a.gmHeadline1,
       fontSize: `${s.headline1}px`,
@@ -987,13 +999,13 @@ function Le({
         "button",
         {
           onClick: () => {
-            if (!x || w === 0) {
-              f("lobby");
+            if (!y || w === 0) {
+              x("lobby");
               return;
             }
             L([]);
-            const e = P(x, []);
-            e && (z(e), L([e]), C([]), S(0), B(1), E(0), F(null), f("game"));
+            const e = Z(y, []);
+            e && (z(e), L([e]), W([]), S(0), B(1), E(0), F(null), x("game"));
           },
           onMouseEnter: (e) => {
             e.currentTarget.style.backgroundColor = "#d43a32";
@@ -1014,7 +1026,7 @@ function Le({
       /* @__PURE__ */ n(
         "button",
         {
-          onClick: () => f("lobby"),
+          onClick: () => x("lobby"),
           onMouseEnter: (e) => {
             e.currentTarget.style.backgroundColor = "#e5e7eb";
           },
@@ -1055,16 +1067,16 @@ function Le({
         "div",
         {
           style: {
-            width: p ? "100%" : g || r || 1e3,
-            height: p ? "100%" : g || r || 1e3,
+            width: d ? "100%" : p || r || 1e3,
+            height: d ? "100%" : p || r || 1e3,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             overflow: "hidden",
-            borderRadius: p ? 0 : "20px",
+            borderRadius: d ? 0 : "20px",
             background: "#ffffff",
-            boxShadow: p ? "none" : "0 0 40px rgba(0,0,0,0.1)",
-            margin: p ? "0 auto" : "unset",
+            boxShadow: d ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: d ? "0 auto" : "unset",
             position: "relative",
             // needed so absolute logo is inside the square
             transform: `scale(${J})`
@@ -1080,7 +1092,7 @@ function Le({
                 justifyContent: "center",
                 alignItems: "center"
               },
-              children: /* @__PURE__ */ n("div", { style: we, children: Me() })
+              children: /* @__PURE__ */ n("div", { style: Me, children: $e() })
             }
           )
         }
@@ -1089,8 +1101,8 @@ function Le({
   );
 }
 export {
-  Le as Game,
-  Le as HangmanLobbyGame,
-  Le as default
+  Te as Game,
+  Te as HangmanLobbyGame,
+  Te as default
 };
 //# sourceMappingURL=speakid-hangman.es.js.map