@gamelearn/arcade-components 3.2.5 → 3.2.6

package/dist/arcade-components.js

@@ -27551,8 +27551,7 @@ const Vignette = ({ vignette: o, alias: e, translate: r, backgroundImageCover: t
       }
     )
   ] }) }) : null;
-};
-function CartelComponent({
+}, CartelComponent = ({
   img: o,
   text: e,
   audio: r,
@@ -27562,54 +27561,55 @@ function CartelComponent({
   soundActions: u,
   audioVolume: l,
   pause: f,
-  keyboardControl: c
-}) {
-  const h = (T) => a({ type: "translate", payload: T }), y = (o == null ? void 0 : o.url) || "https://min.gamelearn.io/css-resources/gamelearn/resources/conversation.jpg", E = useRef(), p = useRef(), [_] = u;
+  keyboardControl: c,
+  backgroundImageCover: h = !1
+}) => {
+  const y = (x) => a({ type: "translate", payload: x }), E = (o == null ? void 0 : o.url) || "https://min.gamelearn.io/css-resources/gamelearn/resources/conversation.jpg", p = useRef(), _ = useRef(), [g] = u;
   useEkho({ audioType: t, voice: n, text: e, audio: r, soundActions: u, emitEvent: a, volume: l, pauseTTS: f });
-  const g = () => {
-    _("click-ui"), a({ type: "success" });
+  const S = () => {
+    g("click-ui"), a({ type: "success" });
   };
-  c(null, g, g);
-  const S = (T, x) => window.matchMedia("(min-width: 1280px)").matches ? x : T, C = useCallback(() => {
-    if (e && p.current) {
-      const T = p.current.naturalWidth / p.current.naturalHeight;
-      let x = p.current.height * T, A = p.current.height;
-      if (x > p.current.width && (x = p.current.width, A = p.current.width / T), E.current.style.width = `${x}px`, window.innerHeight < p.current.width)
-        E.current.style.bottom = `${S(24, 48) + S(36, 100)}px`;
+  c(null, S, S);
+  const C = (x, A) => window.matchMedia("(min-width: 1280px)").matches ? A : x, T = useCallback(() => {
+    if (h !== !0 && e && _.current) {
+      const x = _.current.naturalWidth / _.current.naturalHeight;
+      let A = _.current.height * x, R = _.current.height;
+      if (A > _.current.width && (A = _.current.width, R = _.current.width / x), p.current.style.width = `${A}px`, window.innerHeight < _.current.width)
+        p.current.style.bottom = `${C(24, 48) + C(36, 100)}px`;
       else {
-        const R = (window.innerHeight - A) / 2 + S(36, 100);
-        E.current.style.bottom = `${R}px`;
+        const P = (window.innerHeight - R) / 2 + C(36, 100);
+        p.current.style.bottom = `${P}px`;
       }
     }
-  }, [e]);
+  }, [h, e]);
   return useEffect(() => {
-    p.current && new ResizeObserver(() => S(24, 48) && C()).observe(p.current);
+    _.current && new ResizeObserver(() => C(24, 48) && T()).observe(_.current);
   }), /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "cartel", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "cartel__imagewrap", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `cartel ${h ? "cartel--cover" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "cartel__imagewrap", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "img",
         {
-          ref: p,
-          onLoad: C,
+          ref: _,
+          onLoad: T,
           className: "cartel__image",
-          src: y,
+          src: E,
           alt: "cartel pic"
         }
       ),
-      e ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: E, className: "cartel__textwrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "cartel__text", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: e }) }) }) : null
+      e ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: p, className: "cartel__textwrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "cartel__text", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: e }) }) }) : null
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "position--absolute center right", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         type: "button",
         className: "gat--btn__round",
-        onClick: () => g(),
-        "aria-label": h("storylines.misc.closePiece"),
+        onClick: () => S(),
+        "aria-label": y("storylines.misc.closePiece"),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: LangIsRtl() ? "icon-back" : "icon-next" })
       }
     ) })
   ] });
-}
+};
 var Typist$1 = { exports: {} };
 (function(o) {
   o.exports = /******/

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "3.2.5",
+  "version": "3.2.6",
   "type": "module",
   "files": [
     "dist",