@gamelearn/arcade-components 3.16.3 → 3.17.1

package/dist/arcade-components.js

@@ -20,7 +20,7 @@ var Nc = (l, e, n, t) => ({
 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, QualityManager, HtmlPro } from "@gamelearn/arcade-three-core";
+import { Renderer, SceneResource, CameraControls, SettingsController, EnvironmentWrapper, QualityManager, HtmlPro, ProgressManager, AssetLoader } from "@gamelearn/arcade-three-core";
 import { useThree, useFrame } from "@react-three/fiber";
 import { Vector3, Box3, AnimationUtils, 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";
@@ -35670,9 +35670,9 @@ let Group$1 = class extends Container_1.Container {
 Group$2.Group = Group$1;
 Group$1.prototype.nodeType = "Group";
 (0, Global_1$i._registerNode)(Group$1);
-var Animation$2 = {};
-Object.defineProperty(Animation$2, "__esModule", { value: !0 });
-Animation$2.Animation = void 0;
+var Animation$3 = {};
+Object.defineProperty(Animation$3, "__esModule", { value: !0 });
+Animation$3.Animation = void 0;
 const Global_1$h = Global, Util_1$8 = Util, now = function() {
   return Global_1$h.glob.performance && Global_1$h.glob.performance.now ? function() {
     return Global_1$h.glob.performance.now();
@@ -35680,7 +35680,7 @@ const Global_1$h = Global, Util_1$8 = Util, now = function() {
     return (/* @__PURE__ */ new Date()).getTime();
   };
 }();
-let Animation$1 = class su {
+let Animation$2 = class su {
   constructor(e, n) {
     this.id = su.animIdCounter++, this.frame = {
       time: 0,
@@ -35754,14 +35754,14 @@ let Animation$1 = class su {
     this.animRunning || (this.animRunning = !0, Util_1$8.Util.requestAnimFrame(this._animationLoop));
   }
 };
-Animation$2.Animation = Animation$1;
-Animation$1.animations = [];
-Animation$1.animIdCounter = 0;
-Animation$1.animRunning = !1;
+Animation$3.Animation = Animation$2;
+Animation$2.animations = [];
+Animation$2.animIdCounter = 0;
+Animation$2.animRunning = !1;
 var Tween$1 = {};
 (function(l) {
   Object.defineProperty(l, "__esModule", { value: !0 }), l.Easings = l.Tween = void 0;
-  const e = Util, n = Animation$2, t = Node$1, s = Global;
+  const e = Util, n = Animation$3, t = Node$1, s = Global;
   var o = {
     node: 1,
     duration: 1,
@@ -35990,7 +35990,7 @@ var Tween$1 = {};
 })(Tween$1);
 (function(l) {
   Object.defineProperty(l, "__esModule", { value: !0 }), l.Konva = void 0;
-  const e = Global, n = Util, t = Node$1, s = Container$2, o = Stage$1, d = Layer$2, f = FastLayer$1, h = Group$2, u = DragAndDrop, p = Shape, _ = Animation$2, b = Tween$1, S = Context$2, E = Canvas$1;
+  const e = Global, n = Util, t = Node$1, s = Container$2, o = Stage$1, d = Layer$2, f = FastLayer$1, h = Group$2, u = DragAndDrop, p = Shape, _ = Animation$3, b = Tween$1, S = Context$2, E = Canvas$1;
   l.Konva = n.Util._assign(e.Konva, {
     Util: n.Util,
     Transform: n.Transform,
@@ -37623,7 +37623,7 @@ Factory_1$l.Factory.addGetterSetter(Ring, "outerRadius", 0, (0, Validators_1$l.g
 var Sprite$1 = {};
 Object.defineProperty(Sprite$1, "__esModule", { value: !0 });
 Sprite$1.Sprite = void 0;
-const Factory_1$k = Factory, Shape_1$5 = Shape, Animation_1 = Animation$2, Validators_1$k = Validators, Global_1$5 = Global;
+const Factory_1$k = Factory, Shape_1$5 = Shape, Animation_1 = Animation$3, Validators_1$k = Validators, Global_1$5 = Global;
 class Sprite extends Shape_1$5.Shape {
   constructor(e) {
     super(e), this._updated = !0, this.anim = new Animation_1.Animation(() => {
@@ -59199,7 +59199,7 @@ _forEachName("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt
 });
 var GSCache = function l(e, n) {
   this.id = _gsID++, e._gsap = this, this.target = e, this.harness = n, this.get = n ? n.get : _getProperty, this.set = n ? n.getSetter : _getSetter;
-}, Animation = /* @__PURE__ */ function() {
+}, Animation$1 = /* @__PURE__ */ function() {
   function l(n) {
     this.vars = n, this._delay = +n.delay || 0, (this._repeat = n.repeat === 1 / 0 ? -2 : n.repeat || 0) && (this._rDelay = n.repeatDelay || 0, this._yoyo = !!n.yoyo || !!n.yoyoEase), this._ts = 1, _setDuration(this, +n.duration, 1, 1), this.data = n.data, _context && (this._ctx = _context, _context.data.push(this)), _tickerActive || _ticker.wake();
   }
@@ -59303,7 +59303,7 @@ var GSCache = function l(e, n) {
     _interrupt(this);
   }, l;
 }();
-_setDefaults(Animation.prototype, {
+_setDefaults(Animation$1.prototype, {
   _time: 0,
   _start: 0,
   _end: 0,
@@ -59396,7 +59396,7 @@ var Timeline = /* @__PURE__ */ function(l) {
     return this;
   }, n.add = function(s, o) {
     var d = this;
-    if (_isNumber(o) || (o = _parsePosition(this, o, s)), !(s instanceof Animation)) {
+    if (_isNumber(o) || (o = _parsePosition(this, o, s)), !(s instanceof Animation$1)) {
       if (_isArray(s))
         return s.forEach(function(f) {
           return d.add(f, o);
@@ -59512,7 +59512,7 @@ var Timeline = /* @__PURE__ */ function(l) {
       }
     }
   }, e;
-}(Animation);
+}(Animation$1);
 _setDefaults(Timeline.prototype, {
   _lock: 0,
   _hasPause: 0,
@@ -59768,7 +59768,7 @@ var Tween = /* @__PURE__ */ function(l) {
   }, e.killTweensOf = function(s, o, d) {
     return _globalTimeline.killTweensOf(s, o, d);
   }, e;
-}(Animation);
+}(Animation$1);
 _setDefaults(Tween.prototype, {
   _targets: [],
   _lazy: 0,
@@ -60073,7 +60073,7 @@ var _media = [], _listeners = {}, _emptyArray = [], _lastMediaTime = 0, _context
     globals: _addGlobal,
     Tween,
     Timeline,
-    Animation,
+    Animation: Animation$1,
     getCache: _getCache,
     _removeLinkedListItem,
     reverting: function l() {
@@ -60722,17 +60722,19 @@ function useStateMachine(l) {
       return b.mix("idle"), b.getAction("idle");
     {
       const S = n[u], E = p.split("_")[0], g = S[E], v = cache[S.talking];
-      let R = cache[g];
-      if (!R) {
-        const { animations: T } = await loader.loadAsync(S[E]);
-        R = cache[S[E]] = T[0];
-      }
-      if (p.includes("talking") && p !== "talking" && (R = mixWithTalkingClip(v, R)), !_.userData._active || _.userData._active !== p) {
-        _.userData._active = p;
-        const T = b.register(p, R);
-        return new Promise((x) => {
-          b.mix(p).then((C) => x(C ? T : !1));
-        });
+      if (g) {
+        let R = cache[g];
+        if (!R) {
+          const { animations: T } = await loader.loadAsync(g);
+          R = cache[g] = T[0];
+        }
+        if (p.includes("talking") && p !== "talking" && (R = mixWithTalkingClip(v, R)), !_.userData._active || _.userData._active !== p) {
+          _.userData._active = p;
+          const T = b.register(p, R);
+          return new Promise((x) => {
+            b.mix(p).then((C) => x(C ? T : !1));
+          });
+        }
       }
     }
     return new Promise((S) => S(!1));
@@ -61178,52 +61180,71 @@ function DialogComponent({
     )
   ] });
 }
-function AnimationComponent({ animation: l, loopTimes: e, resource: n, enableInteraction: t, makeDefault: s, emitEvent: o }) {
-  const [d, f] = useState(!1), h = useThree((_) => _.scene), u = useMemo(() => new GLTFLoader(), []), p = useRef(1);
+const activeCache = ProgressManager.request("AssetLoader").cache, assetLoader = new AssetLoader(void 0, activeCache);
+function Animation({ animation: l, loopTimes: e, onAnimationFinish: n, onAnimationSave: t, resource: s, makeDefault: o, emitEvent: d }) {
+  const f = useThree((p) => p.scene), h = useRef(1), u = useRef();
   return useEffect(() => {
-    f(!1);
-  }, [n.uid, l == null ? void 0 : l.url]), useEffect(() => {
-    if (!d) {
-      const _ = h.getObjectByProperty("uid", n.uid);
-      if (_ && l && _.skeletonId === l.skeletonId)
-        if (s)
-          o({
-            type: "saveAnimation",
-            payload: { uid: n.uid, animation: l.id, index: _.index }
-          }), o({ type: "success" });
+    if (!u.current) {
+      const p = f.getObjectByProperty("uid", s.uid);
+      if (p && l && p.skeletonId === l.skeletonId)
+        if (o)
+          t({ uid: s.uid, animation: l.id, index: p.index }), n(l);
         else {
-          const b = t;
-          b || o({ type: "success" });
-          const S = _.userData.animator, E = () => {
-            S.getAction(l.url).setLoop(LoopRepeat, 1 / 0), p.current = 1;
-            function v() {
-              p.current >= e && (S.mix("idle"), b && o({ type: "success" }), S.removeEventListener("loop", v)), p.current += 1;
-            }
-            S.mix(l.url).then((R) => {
-              R && S.addEventListener("loop", v);
-            }), f(!0);
+          const _ = p.userData.animator, b = () => {
+            _.getAction(l.url).setLoop(LoopRepeat, 1 / 0), h.current = 1;
+            function E() {
+              h.current >= e && (_.mix("idle"), n(l), _.removeEventListener("loop", E)), h.current += 1;
+            }
+            _.mix(l.url).then((g) => {
+              g && _.addEventListener("loop", E);
+            });
           };
-          S.getAction(l.url) ? E() : u.load(l.url, (g) => {
-            S.register(l.url, g.animations[0]), E();
+          _.getAction(l.url) ? b() : assetLoader.load(l.url, (S) => {
+            _.register(l.url, S.animations[0]), b();
           });
         }
       else
-        o({ type: "success" });
+        n(l);
+      u.current = l.id;
     }
   }, [
-    h,
-    l == null ? void 0 : l.url,
+    f,
+    l.url,
     e,
-    o,
     d,
-    u,
-    n.uid,
-    s,
+    s.uid,
+    o,
     l,
+    s,
     n,
     t
   ]), null;
 }
+function MultipleAnimation({ animations: l = [], enableInteraction: e, emitEvent: n }) {
+  const [t, s] = useState(!1), o = l.length, d = useRef(0), f = () => {
+    d.current += 1, d.current >= o && s(!0);
+  }, h = (u) => {
+    n({
+      type: "saveAnimation",
+      payload: u
+    });
+  };
+  return useEffect(() => {
+    t && n({ type: "success" });
+  }, [n, t]), useEffect(() => {
+    e && s(!0);
+  }, [e]), l.map(({ animation: u, resource: p, ..._ }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Animation,
+    {
+      animation: u,
+      resource: p,
+      ..._,
+      onAnimationSave: h,
+      onAnimationFinish: f
+    },
+    `${u.id}_${p.uid}`
+  ));
+}
 function EmailPill({ text: l, error: e, handleClick: n }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -61390,7 +61411,7 @@ function ReferralComponent({ emitEvent: l, text: e, rewards: n, referrals: t })
   ] }) });
 }
 export {
-  AnimationComponent,
+  MultipleAnimation as AnimationComponent,
   AutoEvaluation as AutoEvaluationComponent,
   CardsSelectorPuzzleComponent,
   CartelComponent,