@gamelearn/arcade-components 2.18.0 → 2.18.1

package/dist/components/dialog-component/components/DialogComponent.js

@@ -63,11 +63,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var crossFadeDuration = 0.2;
+var crossFadeDuration = 0.1;
 var characterMs = 75;
 var minMs = 1400;
 var headSize = 2;
 var raycast = new _three.Raycaster();
+var animationTarget = new _three.Object3D();
 var maxCharacterToSwitch = 70;
 raycast.firstHitOnly = true;
 
@@ -109,12 +110,12 @@ var DialogComponent = function DialogComponent(_ref) {
       audioFailed = _useState10[0],
       setAudioFailed = _useState10[1];
 
-  var _useThree = (0, _fiber.useThree)(function (state) {
-    return [state.camera, state.scene];
-  }),
-      _useThree2 = _slicedToArray(_useThree, 2),
-      camera = _useThree2[0],
-      scene = _useThree2[1];
+  var scene = (0, _fiber.useThree)(function (state) {
+    return state.scene;
+  });
+  var camera = (0, _fiber.useThree)(function (state) {
+    return state.camera;
+  });
 
   var _useTimeout = (0, _useTimeout2.default)(),
       start = _useTimeout.start,
@@ -127,17 +128,11 @@ var DialogComponent = function DialogComponent(_ref) {
   var defaultCamera = (0, _react.useMemo)(function () {
     return camera.clone();
   }, []);
+  var actualCamera = (0, _react.useRef)(camera);
   var messagePosition = (0, _react.useRef)({
     pos: [0, 0, 0],
     child: null
   });
-
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      animationRunning = _useState12[0],
-      setAnimationRunning = _useState12[1];
-
-  var animationTarget = (0, _react.useRef)(new _three.Object3D());
   var currentLineData = lines[line];
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
@@ -157,9 +152,14 @@ var DialogComponent = function DialogComponent(_ref) {
   var audio = Object.keys((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio) || {}).length;
   var voice = Object.keys((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice) || {}).length;
   var isVoiceOver = voiceOver || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.type) === 'conversationalNarration';
-  var isDecision = decision || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.type) === 'conversationalDecision';
+  var isDecision = decision || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.type) === 'conversationalDecision'; // Force camera update (r3f selector not updating)
+
+  (0, _fiber.useFrame)(function (_ref3) {
+    var sceneCam = _ref3.camera;
+    actualCamera.current = sceneCam;
+  });
 
-  var _useState13 = (0, _react.useState)({
+  var _useState11 = (0, _react.useState)({
     text: '',
     name: '',
     inScene: false,
@@ -168,9 +168,9 @@ var DialogComponent = function DialogComponent(_ref) {
     avatar: '',
     show: false
   }),
-      _useState14 = _slicedToArray(_useState13, 2),
-      currentMessage = _useState14[0],
-      setCurrentMessage = _useState14[1];
+      _useState12 = _slicedToArray(_useState11, 2),
+      currentMessage = _useState12[0],
+      setCurrentMessage = _useState12[1];
 
   var charactersInvolved = (0, _react.useMemo)(function () {
     return lines.reduce(function (acc, current) {
@@ -193,10 +193,10 @@ var DialogComponent = function DialogComponent(_ref) {
     });
   }, [emitEvent]);
 
-  var _useState15 = (0, _react.useState)([]),
-      _useState16 = _slicedToArray(_useState15, 2),
-      edgesHistory = _useState16[0],
-      setEdgesHistory = _useState16[1];
+  var _useState13 = (0, _react.useState)([]),
+      _useState14 = _slicedToArray(_useState13, 2),
+      edgesHistory = _useState14[0],
+      setEdgesHistory = _useState14[1];
 
   var lastNodeId = (0, _react.useMemo)(function () {
     return edgesHistory[edgesHistory.length - 1];
@@ -251,13 +251,22 @@ var DialogComponent = function DialogComponent(_ref) {
 
     var onLoadAnim = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
     var animation;
+    var emotion = element.isSeated && !slot.emotion.includes('seated') ? "".concat(slot.emotion, "-seated") : slot.emotion;
 
     if (slot !== null && slot !== void 0 && slot.animationId && slot !== null && slot !== void 0 && (_slot$animation = slot.animation) !== null && _slot$animation !== void 0 && _slot$animation.url) {
+      // force camera transition seated -> not seated
+      if (lastTalking.current && lastTalking.current.uid === element.uid) {
+        var currentIsSeated = slot.emotion.includes('seated');
+        var lastIsSeated = lastTalking.current.emotion.includes('seated');
+        if (currentIsSeated && !lastIsSeated) lastTalking.current = {};
+        if (!currentIsSeated && lastIsSeated) lastTalking.current = {};
+      }
+
       animation = slot.animation;
     } else {
       var _slot$character2;
 
-      animation = (_slot$character2 = slot.character) === null || _slot$character2 === void 0 ? void 0 : _slot$character2.resource.animations[element.isSeated ? "".concat(slot.emotion, "-seated") : slot.emotion];
+      animation = (_slot$character2 = slot.character) === null || _slot$character2 === void 0 ? void 0 : _slot$character2.resource.animations[emotion];
     }
 
     var mixer = element.userData.mixer;
@@ -290,6 +299,70 @@ var DialogComponent = function DialogComponent(_ref) {
       mixer.stopAllAction();
       defaultAction.play();
     }
+  }; // Starts camera transition
+
+
+  var animateCameraTransition = function animateCameraTransition() {
+    if (!zoomStarted.current) {
+      var cam = actualCamera.current;
+      var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.position.toArray();
+      animationTarget.position.fromArray(targetPosition);
+
+      if (messagePosition.current.parent) {
+        if (!animationTarget.quaternion.equals(cam.quaternion)) {
+          animationTarget.applyQuaternion(cam.quaternion);
+        }
+
+        var mult = messagePosition.current.isLeft ? -1 : 1;
+        var headSpace = headSize * mult;
+        animationTarget.translateX(-10 * mult + headSpace);
+        animationTarget.translateY(-2);
+        animationTarget.translateZ(30);
+      }
+
+      _gsap.default.to(cam.position, _objectSpread({
+        duration: 0.9,
+        ease: 'power3.easeInOut',
+        onStart: function onStart() {
+          zoomStarted.current = true;
+        },
+        onUpdate: function onUpdate() {
+          if (changedMats.current.length) {
+            changedMats.current.forEach(function (o) {
+              var object = o.object;
+              object.material.visible = true;
+            });
+          }
+        },
+        onComplete: function onComplete() {
+          if (onZoomEnd.current) {
+            onZoomEnd.current();
+            onZoomEnd.current = null;
+          }
+
+          raycast.set(cam.getWorldPosition(new _three.Vector3(0, 0, 0)), cam.getWorldDirection(new _three.Vector3()));
+          var objects = raycast.intersectObjects(scene.children, true);
+          changedMats.current = objects.filter(function (o) {
+            return o.distance < 10;
+          }); // Make objects invisible in front of the camera
+
+          if (changedMats.current.length) {
+            changedMats.current.forEach(function (o) {
+              var object = o.object;
+              object.material.side = 0;
+            });
+          }
+
+          if (lastSet.current || !messagePosition.current.child) {
+            cam.copy(defaultCamera);
+          }
+
+          zoomStarted.current = false;
+        }
+      }, animationTarget.position));
+    } else if (zoomStarted.current) {
+      zoomStarted.current = false;
+    }
   }; // Reset currentEmotion to defaultAnim
 
 
@@ -305,7 +378,7 @@ var DialogComponent = function DialogComponent(_ref) {
     messagePosition.current.parent = null;
 
     if (zoomInActor) {
-      setAnimationRunning(true);
+      animateCameraTransition();
     }
   }, [zoomInActor]);
 
@@ -367,6 +440,7 @@ var DialogComponent = function DialogComponent(_ref) {
 
   (0, _react.useEffect)(function () {
     return function () {
+      lastTalking.current = {};
       resetAnims();
     };
   }, []);
@@ -584,37 +658,38 @@ var DialogComponent = function DialogComponent(_ref) {
 
         if (element && !lastSet.current) {
           loadEmotion(talkingCharacter, element, function (mixer, action, defaultAction) {
-            if (talkingCharacter.uid === element.uid) {
-              moveBubble(element);
-
-              var setMessage = function setMessage() {
-                var _talkingCharacter$cha5;
-
-                setCurrentMessage({
-                  text: talkingCharacter.text,
-                  name: talkingCharacter.alias || ((_talkingCharacter$cha5 = talkingCharacter.character) === null || _talkingCharacter$cha5 === void 0 ? void 0 : _talkingCharacter$cha5.name),
-                  inScene: true,
-                  thinkful: talkingCharacter.emotion === 'thinkful',
-                  avatar: getAvatarURL(talkingCharacter),
-                  show: true
-                });
-              };
-
-              if (zoomInActor) {
-                onZoomEnd.current = setMessage;
-                setAnimationRunning(true);
-              } else {
-                setMessage();
-              }
-            }
-
             var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
 
             if (startAction && action && startAction !== action) {
-              mixer.stopAllAction();
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
               element.userData.defaultAnim = action.getClip();
             }
+
+            setTimeout(function () {
+              if (talkingCharacter.uid === element.uid) {
+                moveBubble(element);
+
+                var setMessage = function setMessage() {
+                  var _talkingCharacter$cha5;
+
+                  setCurrentMessage({
+                    text: talkingCharacter.text,
+                    name: talkingCharacter.alias || ((_talkingCharacter$cha5 = talkingCharacter.character) === null || _talkingCharacter$cha5 === void 0 ? void 0 : _talkingCharacter$cha5.name),
+                    inScene: true,
+                    thinkful: talkingCharacter.emotion === 'thinkful',
+                    avatar: getAvatarURL(talkingCharacter),
+                    show: true
+                  });
+                };
+
+                if (zoomInActor) {
+                  onZoomEnd.current = setMessage;
+                  animateCameraTransition();
+                } else {
+                  setMessage();
+                }
+              }
+            }, 150);
           });
         } else {
           var _talkingCharacter$cha6;
@@ -638,7 +713,7 @@ var DialogComponent = function DialogComponent(_ref) {
         });
       }
     }
-  }, [actors, camera, currentLineData, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]); // Sound logic
+  }, [actors, currentLineData, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]); // Sound logic
 
   var stopEkho = (0, _useEkho.default)({
     audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
@@ -701,75 +776,11 @@ var DialogComponent = function DialogComponent(_ref) {
       stop();
     };
   }, [currentMessage, nextLine, start, stop, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoPlayCond, audio, voice, audioFailed]);
-  (0, _react.useEffect)(function () {
-    if (animationRunning && !zoomStarted.current) {
-      var cam = camera;
-      var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.position.toArray();
-      animationTarget.current.position.fromArray(targetPosition);
-
-      if (messagePosition.current.parent) {
-        if (!animationTarget.current.quaternion.equals(cam.quaternion)) {
-          animationTarget.current.applyQuaternion(cam.quaternion);
-        }
-
-        var mult = messagePosition.current.isLeft ? -1 : 1;
-        var headSpace = headSize * mult;
-        animationTarget.current.translateX(-10 * mult + headSpace);
-        animationTarget.current.translateY(-2);
-        animationTarget.current.translateZ(30);
-      }
-
-      _gsap.default.to(cam.position, {
-        duration: 1,
-        ease: 'power3.easeInOut',
-        onStart: function onStart() {
-          zoomStarted.current = true;
-        },
-        onUpdate: function onUpdate() {
-          if (changedMats.current.length) {
-            changedMats.current.forEach(function (o) {
-              var object = o.object;
-              object.material.visible = true;
-            });
-          }
-        },
-        onComplete: function onComplete() {
-          onZoomEnd.current();
-
-          onZoomEnd.current = function () {};
-
-          zoomStarted.current = false;
-          setAnimationRunning(false);
-          raycast.set(cam.getWorldPosition(new _three.Vector3(0, 0, 0)), cam.getWorldDirection(new _three.Vector3()));
-          var objects = raycast.intersectObjects(scene.children, true);
-          changedMats.current = objects.filter(function (o) {
-            return o.distance < 10;
-          }); // Make objects invisible in front of the camera
-
-          if (changedMats.current.length) {
-            changedMats.current.forEach(function (o) {
-              var object = o.object;
-              object.material.side = 0;
-            });
-          }
-
-          if (lastSet.current || !messagePosition.current.child) {
-            cam.copy(defaultCamera);
-          }
-        },
-        x: animationTarget.current.position.x,
-        y: animationTarget.current.position.y,
-        z: animationTarget.current.position.z
-      });
-    } else if (zoomStarted.current) {
-      zoomStarted.current = false;
-    }
-  }, [animationRunning, camera]);
   var disableBackButton = (0, _react.useMemo)(function () {
     var disabled = line === 0 || previousLineWasDecision();
     return disabled;
   }, [line, previousLineWasDecision]);
-  keyboardControl(isDecision || disableBackButton || animationRunning ? null : manualBackLine, isDecision || animationRunning ? null : manualNextLine);
+  keyboardControl(isDecision || disableBackButton || !currentMessage.show ? null : manualBackLine, isDecision || !currentMessage.show ? null : manualNextLine);
   var container = document.querySelector('.screens--container');
 
   if (isDecision) {
@@ -819,15 +830,15 @@ var DialogComponent = function DialogComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     onClick: manualBackLine,
-    disabled: disableBackButton || animationRunning,
-    className: "gat--btn__round ".concat(disableBackButton || animationRunning ? 'disabled' : '')
+    disabled: disableBackButton || !currentMessage.show,
+    className: "gat--btn__round ".concat(disableBackButton || !currentMessage.show ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back'
   })), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     onClick: manualNextLine,
-    disabled: animationRunning,
-    className: "gat--btn__round \n              ".concat(animationRunning ? 'disabled' : '', "\n              ").concat(automatic && isEndNode() ? 'glowing-animation' : '')
+    disabled: !currentMessage.show,
+    className: "gat--btn__round \n              ".concat(!currentMessage.show ? 'disabled' : '', "\n              ").concat(automatic && isEndNode() ? 'glowing-animation' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
   })))));

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "2.18.0",
+  "version": "2.18.1",
   "main": "dist/index.js",
   "files": [
     "dist",