@gamelearn/arcade-components 3.2.5 → 3.2.7

package/dist/arcade-components.js

@@ -26521,30 +26521,32 @@ function Panel({ character: o, ttsStarted: e, active: r, emitEvent: t }) {
   }, [(T = (C = (S = o == null ? void 0 : o.resource) == null ? void 0 : S.animations) == null ? void 0 : C.talking) == null ? void 0 : T.url, e, r, p, f]);
   const _ = useCallback(
     (A) => {
-      var R;
-      if (n.current) {
-        const P = new Box3();
-        P.setFromObject(A);
-        const w = P.getSize(new Vector3());
-        if (n.current.position.fromArray(defaultCamPos), n.current.rotation.set(0, 0, 0), n.current.updateProjectionMatrix(), n.current.layers.enableAll(), o.type === "character") {
-          y.current = A;
-          let O;
-          const k = (R = o.emotion) == null ? void 0 : R.includes("seated");
-          n.current.position.setY(w.y - 1.5 * 1.3), A.traverse((D) => {
-            const F = D.name.toLowerCase();
-            if (D.isBone && boneWhiteList.includes(F)) {
-              const B = k ? 1 : 0, V = new Vector3().setFromMatrixPosition(D.matrixWorld);
-              if (F === "head_m") {
-                O = V;
-                return;
+      setTimeout(() => {
+        var R;
+        if (n.current) {
+          const P = new Box3();
+          P.setFromObject(A);
+          const w = P.getSize(new Vector3());
+          if (n.current.position.fromArray(defaultCamPos), n.current.rotation.set(0, 0, 0), n.current.updateProjectionMatrix(), n.current.layers.enableAll(), o.type === "character") {
+            y.current = A;
+            let O;
+            const k = (R = o.emotion) == null ? void 0 : R.includes("seated");
+            n.current.position.setY(w.y - 1.5 * 1.3), A.traverse((D) => {
+              const F = D.name.toLowerCase();
+              if (D.isBone && boneWhiteList.includes(F)) {
+                const B = k ? 1 : 0, V = new Vector3().setFromMatrixPosition(D.matrixWorld);
+                if (F === "head_m") {
+                  O = V;
+                  return;
+                }
+                n.current.position.setY(V.y - B), n.current.position.setX(V.x - 0.5);
               }
-              n.current.position.setY(V.y - B), n.current.position.setX(V.x - 0.5);
-            }
-          }), O && !k && n.current.lookAt(O), n.current.zoom = 1.5;
-        } else
-          o.type === "object" && (cameraFitAnyObject(A, n.current), n.current.zoom = 1);
-        n.current.updateProjectionMatrix();
-      }
+            }), O && !k && n.current.lookAt(O), n.current.zoom = 1.5;
+          } else
+            o.type === "object" && (cameraFitAnyObject(A, n.current), n.current.zoom = 1);
+          n.current.updateProjectionMatrix();
+        }
+      }, 150);
     },
     [o.type, o.emotion]
   );
@@ -27551,8 +27553,7 @@ const Vignette = ({ vignette: o, alias: e, translate: r, backgroundImageCover: t
       }
     )
   ] }) }) : null;
-};
-function CartelComponent({
+}, CartelComponent = ({
   img: o,
   text: e,
   audio: r,
@@ -27562,54 +27563,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.7",
   "type": "module",
   "files": [
     "dist",