@gamelearn/arcade-components 3.32.0 → 3.32.2

package/dist/arcade-components.js

@@ -19,8 +19,8 @@ var Nc = (l, e, n, t) => ({
 }), Ue = (l, e, n) => (Am(l, e, "access private method"), n);
 import * as React$2 from "react";
 import React__default, { useRef, useEffect, useCallback, createContext, useReducer, forwardRef, useImperativeHandle, useMemo, useContext, useLayoutEffect, useState } from "react";
-import { OrbitControls, PerspectiveCamera as PerspectiveCamera$1 } from "@react-three/drei";
-import { Renderer, SceneResource, CameraControls, SettingsController, EnvironmentWrapper, ProgressManager, QualityManager, HtmlPro, AssetLoader } from "@gamelearn/arcade-three-core";
+import { OrbitControls, PerspectiveCamera as PerspectiveCamera$1, Environment } from "@react-three/drei";
+import { Renderer, SceneResource, CameraControls, SettingsController, QualityManager, HtmlPro, ProgressManager, AssetLoader } from "@gamelearn/arcade-three-core";
 import { useThree, useFrame } from "@react-three/fiber";
 import { Vector3, Box3, TrianglesDrawMode, TriangleFanDrawMode, TriangleStripDrawMode, Loader, LoaderUtils, FileLoader, Color, LinearSRGBColorSpace, SpotLight, PointLight, DirectionalLight, MeshBasicMaterial, SRGBColorSpace, MeshPhysicalMaterial, Vector2, Matrix4, Quaternion, InstancedMesh, InstancedBufferAttribute, Object3D, TextureLoader, ImageBitmapLoader, BufferAttribute, InterleavedBuffer, InterleavedBufferAttribute, LinearFilter, LinearMipmapLinearFilter, RepeatWrapping, PointsMaterial, Material, LineBasicMaterial, MeshStandardMaterial, DoubleSide, PropertyBinding, BufferGeometry, SkinnedMesh, Mesh, LineSegments, Line as Line$3, LineLoop, Points, Group as Group$3, PerspectiveCamera, MathUtils, OrthographicCamera, Skeleton, AnimationClip, Bone, InterpolateLinear, ColorManagement, NearestFilter, NearestMipmapNearestFilter, LinearMipmapNearestFilter, NearestMipmapLinearFilter, ClampToEdgeWrapping, MirroredRepeatWrapping, InterpolateDiscrete, FrontSide, Texture, VectorKeyframeTrack, NumberKeyframeTrack, QuaternionKeyframeTrack, Sphere, Interpolant, Raycaster, LoopRepeat } from "three";
 import require$$0 from "react-dom";
@@ -29730,92 +29730,92 @@ function addPrimitiveAttributes(l, e, n) {
   });
 }
 const defaultCamPos = [0, 14.63, 16], isMobile = DeviceDetection(), loader$1 = new GLTFLoader(), box = new Box3(), worldPos = new Vector3(), size = new Vector3();
-function Panel({ character: l, ttsStarted: e, active: n, visible: t }) {
-  var x, S, g;
-  const s = useRef(null), o = useRef(null), d = l.type === "character", [h, f] = useState(!1), u = useRef(), p = useMemo(() => {
-    var v, b, R, y, w, C, N, D;
-    return d ? l.animationId && ((v = l.animation) != null && v.url) ? l.animation : (y = (R = (b = l == null ? void 0 : l.resource) == null ? void 0 : b.animations) == null ? void 0 : R[l.emotion]) != null && y.url ? (C = (w = l == null ? void 0 : l.resource) == null ? void 0 : w.animations) == null ? void 0 : C[l.emotion] : (D = (N = l == null ? void 0 : l.resource) == null ? void 0 : N.animations) == null ? void 0 : D.neutral : {};
-  }, [l.emotion, l == null ? void 0 : l.animationId, l == null ? void 0 : l.animation, (x = l == null ? void 0 : l.resource) == null ? void 0 : x.animations, d]), _ = useCallback(() => {
-    if (u.current) {
-      const v = u.current.userData.animator;
-      v.getAction("idle") && v.mix("idle", 0.1);
+function Panel({ character: l, ttsStarted: e, active: n, visible: t, onLoad: s }) {
+  var S, g, v;
+  const o = useRef(null), d = useRef(null), h = l.type === "character", [f, u] = useState(!1), p = useRef(), _ = useMemo(() => {
+    var b, R, y, w, C, N, D, P;
+    return h ? l.animationId && ((b = l.animation) != null && b.url) ? l.animation : (w = (y = (R = l == null ? void 0 : l.resource) == null ? void 0 : R.animations) == null ? void 0 : y[l.emotion]) != null && w.url ? (N = (C = l == null ? void 0 : l.resource) == null ? void 0 : C.animations) == null ? void 0 : N[l.emotion] : (P = (D = l == null ? void 0 : l.resource) == null ? void 0 : D.animations) == null ? void 0 : P.neutral : {};
+  }, [l.emotion, l == null ? void 0 : l.animationId, l == null ? void 0 : l.animation, (S = l == null ? void 0 : l.resource) == null ? void 0 : S.animations, h]), T = useCallback(() => {
+    if (p.current) {
+      const b = p.current.userData.animator;
+      b.getAction("idle") && b.mix("idle", 0.1);
     }
   }, []);
   useEffect(() => {
-    var v, b, R, y, w, C;
-    if (t)
-      if (n)
-        if (e) {
-          const N = (R = (b = (v = l == null ? void 0 : l.resource) == null ? void 0 : v.animations) == null ? void 0 : b.talking) == null ? void 0 : R.url, P = ((C = (w = (y = l == null ? void 0 : l.resource) == null ? void 0 : y.animations) == null ? void 0 : w["talking-short"]) == null ? void 0 : C.url) || N;
-          if (P && u.current) {
-            const k = u.current.userData.animator, F = `${P}_talking`;
-            k.getAction(F) ? (k.mix(F, 0.1), f(!0)) : loader$1.load(P, ({ animations: M }) => {
-              if (!u.current)
-                return;
-              const j = k.getAction("idle").getClip();
-              k.register(F, mixWithTalkingClip(M[0], j)), k.mix(F, 0.1), f(!0);
-            });
-          }
-        } else
-          _();
-      else
-        h && _();
-  }, [e, n, _, h, t, (S = l == null ? void 0 : l.resource) == null ? void 0 : S.animations]);
-  const T = useCallback(
-    (v) => {
+    var b, R, y, w, C, N;
+    if (n)
+      if (e) {
+        const D = (y = (R = (b = l == null ? void 0 : l.resource) == null ? void 0 : b.animations) == null ? void 0 : R.talking) == null ? void 0 : y.url, k = ((N = (C = (w = l == null ? void 0 : l.resource) == null ? void 0 : w.animations) == null ? void 0 : C["talking-short"]) == null ? void 0 : N.url) || D;
+        if (k && p.current) {
+          const F = p.current.userData.animator, M = `${k}_talking`;
+          F.getAction(M) ? (F.mix(M, 0.1), u(!0)) : loader$1.load(k, ({ animations: j }) => {
+            if (!p.current)
+              return;
+            const B = F.getAction("idle").getClip();
+            F.register(M, mixWithTalkingClip(j[0], B)), F.mix(M, 0.1), u(!0);
+          });
+        }
+      } else
+        T();
+    else
+      f && T();
+  }, [e, n, T, f, (g = l == null ? void 0 : l.resource) == null ? void 0 : g.animations]);
+  const x = useCallback(
+    (b) => {
       if (l.type === "character") {
-        const b = v.getObjectByName("Head_M", !0);
-        b ? (b.updateMatrixWorld(!0), box.setFromObject(v), box.getSize(size), b.getWorldPosition(worldPos), s.current.lookAt(worldPos)) : s.current.position.setY(size.y - 1.5 * 1.3), s.current.zoom = 1.5;
+        const R = b.getObjectByName("Head_M", !0);
+        R ? (R.updateMatrixWorld(!0), box.setFromObject(b), box.getSize(size), R.getWorldPosition(worldPos), o.current.lookAt(worldPos)) : o.current.position.setY(size.y - 1.5 * 1.3), o.current.zoom = 1.5;
       } else
-        cameraFitAnyObject(v, s.current), s.current.zoom = 1;
-      s.current.updateProjectionMatrix();
+        cameraFitAnyObject(b, o.current), o.current.zoom = 1;
+      o.current.updateProjectionMatrix(), s();
     },
-    [l]
+    [l, s]
   );
-  return useFrame(({ gl: v, scene: b }) => {
-    if (s.current && o.current) {
-      const R = document.querySelectorAll(".conversation--character__item")[l.slot];
-      if (R) {
-        const y = R.getBoundingClientRect(), w = R.parentNode.getBoundingClientRect(), [C, N] = [y.right - y.left, y.bottom - y.top];
-        if (s.current.aspect = C / N, s.current.updateProjectionMatrix(), d && u.current) {
-          box.setFromObject(u.current), box.getSize(size);
-          const k = u.current.getObjectByName("Head_M", !0);
-          k ? (k.getWorldPosition(worldPos), s.current.lookAt(worldPos)) : s.current.position.setY(size.y - 1.5 * 1.3), s.current.zoom = 1.5;
-        }
-        const D = {
-          top: y.top - w.top,
-          right: y.right - w.right,
-          left: y.left - w.left,
-          bottom: y.bottom - w.bottom
-        }, P = isMobile ? 24 : 40;
-        D.bottom += n ? -P : P, v.setViewport(D.left, D.bottom, C, N), v.setScissor(D.left, D.bottom, C, N), o.current.environment = b.environment, v.render(o.current, s.current);
-      }
-    }
-  }, 1), l.type === "image" ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("scene", { ref: o, children: [
-    (g = l.resource) != null && g.url ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return useFrame(({ gl: b, scene: R }) => {
+    if (o.current && d.current) {
+      const y = document.querySelectorAll(".conversation--character__item")[l.slot];
+      if (y) {
+        const w = y.getBoundingClientRect(), C = y.parentNode.getBoundingClientRect(), [N, D] = [w.right - w.left, w.bottom - w.top];
+        if (o.current.aspect = N / D, o.current.updateProjectionMatrix(), h && p.current) {
+          box.setFromObject(p.current), box.getSize(size);
+          const F = p.current.getObjectByName("Head_M", !0);
+          F ? (F.getWorldPosition(worldPos), o.current.lookAt(worldPos)) : o.current.position.setY(size.y - 1.5 * 1.3), o.current.zoom = 1.5;
+        }
+        const P = {
+          top: w.top - C.top,
+          right: w.right - C.right,
+          left: w.left - C.left,
+          bottom: w.bottom - C.bottom
+        }, k = isMobile ? 24 : 40;
+        P.bottom += n ? -k : k, b.setViewport(P.left, P.bottom, N, D), b.setScissor(P.left, P.bottom, N, D), d.current.environment = R.environment, b.render(d.current, o.current);
+      }
+    }
+  }, 1), !((v = l.resource) != null && v.url) || l.type === "image" ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("scene", { ref: d, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
       SceneResource,
       {
-        ref: u,
+        ref: p,
         name: `char_${l.uid}`,
         url: l.resource.url,
-        animationUrl: p.url,
+        animationStates: { idle: _.url },
         type: l.type,
-        onRender: T,
+        onRender: x,
         texturable: !0,
-        interactive: !0,
+        interactive: !1,
+        generate: !1,
         merge: l.type !== "character",
         visible: t
       }
-    ) : null,
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       PerspectiveCamera$1,
       {
-        ref: s,
+        ref: o,
         fov: 35,
         position: defaultCamPos,
         rotation: [0, 0, 0],
-        onUpdate: (v) => {
-          v.layers.enableAll();
+        onUpdate: (b) => {
+          b.layers.enableAll();
         },
         manual: !0
       }
@@ -29827,14 +29827,7 @@ function PanelsWrapper({ characters: l, slots: e, ttsStarted: n, flex: t, curren
   const [d, h] = useState(!1);
   return useFrame(({ gl: f }) => {
     f.setScissorTest(!1), f.clear(!0, !0), f.setScissorTest(!0);
-  }), useEffect(() => {
-    const f = () => {
-      h(!0);
-    };
-    return ProgressManager.addEventListener("loaded", f), () => {
-      ProgressManager.removeEventListener("loaded", f);
-    };
-  }, []), /* @__PURE__ */ jsxRuntimeExports.jsx(QualityManager, { lod: o, active: !0, children: e.map((f, u) => {
+  }), /* @__PURE__ */ jsxRuntimeExports.jsx(QualityManager, { lod: d ? o : "divideby64", active: d, children: e.map((f, u) => {
     let p = null;
     const _ = l.findIndex((T) => T && T.uid === f.uid);
     if (_ >= 0) {
@@ -29845,7 +29838,7 @@ function PanelsWrapper({ characters: l, slots: e, ttsStarted: n, flex: t, curren
           character: p,
           active: s.position === T,
           ttsStarted: n,
-          visible: d
+          onLoad: () => h(!0)
         },
         `${`${p.uid}_${u}`}_${_}`
       );
@@ -29870,7 +29863,7 @@ function Scene(l) {
       },
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsController, { current: { animate: l.pause } }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(EnvironmentWrapper, { url: "https://min.gamelearn.io/statics/envs/envmap_1k.hdr" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Environment, { files: "https://min.gamelearn.io/statics/envs/envmap_1k.hdr" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(PanelsWrapper, { ...l })
       ]
     }
@@ -30742,15 +30735,28 @@ function ConversationalComponent({
   ) });
 }
 function Vignette({ vignette: l, alias: e, translate: n, backgroundImageCover: t }) {
-  var u;
+  var _;
   const o = (l.img || {
     url: "https://min.gamelearn.io/css-resources/gamelearn/resources/conversation.jpg"
-  }).url, [d, h] = useState(!0), f = (p) => {
-    document.querySelector(`#${p}`).focus(), h(!d);
+  }).url, [d, h] = useState(!0), f = (T) => {
+    document.querySelector(`#${T}`).focus(), h(!d);
+  }, u = /\.(mp4|mov|webm)$/i.test(o), p = {
+    src: o,
+    style: t ? {
+      minHeight: "100%",
+      minWidth: "100%",
+      position: "fixed",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    } : { height: "100%", width: "100%" }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-testid": "comic-image", className: `comic-image ${t ? "comic-image--cover" : ""}`, children: o && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o, alt: "comic pic" }) }),
-    (u = l == null ? void 0 : l.textData) != null && u.text ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-testid": "comic-image", className: `comic-image ${t ? "comic-image--cover" : ""}`, children: [
+      u && /* @__PURE__ */ jsxRuntimeExports.jsx("video", { "data-testid": "videoTestId", autoPlay: !0, ...p }),
+      o && !u && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o, alt: "comic pic" })
+    ] }),
+    (_ = l == null ? void 0 : l.textData) != null && _.text ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         "data-testid": "comicCollapsable",