@gamelearn/arcade-components 2.15.1 → 2.15.3

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

@@ -19,8 +19,6 @@ var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
 
 var _gsap = _interopRequireDefault(require("gsap"));
 
-var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
-
 var _helpers = require("../../../helpers");
 
 var _useTimeout2 = _interopRequireDefault(require("../../../helpers/useTimeout"));
@@ -31,14 +29,14 @@ var _LangIsRtl = _interopRequireDefault(require("../../../helpers/LangIsRtl"));
 
 var _BubbleWrapper = _interopRequireDefault(require("./BubbleWrapper"));
 
+var _DialogDecision = _interopRequireDefault(require("./DialogDecision"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -145,6 +143,7 @@ var DialogComponent = function DialogComponent(_ref) {
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
   var isBranched = !!edges;
+  var onZoomEnd = (0, _react.useRef)(function () {});
 
   var _ref2 = currentLineData || {},
       voiceOver = _ref2.voiceOver,
@@ -302,7 +301,10 @@ var DialogComponent = function DialogComponent(_ref) {
   var resetCameraView = (0, _react.useCallback)(function () {
     messagePosition.current.child = null;
     messagePosition.current.parent = null;
-    if (zoomInActor) setAnimationRunning(true);
+
+    if (zoomInActor) {
+      setAnimationRunning(true);
+    }
   }, [zoomInActor]);
 
   var resetTalkingAnimation = function resetTalkingAnimation() {
@@ -529,9 +531,7 @@ var DialogComponent = function DialogComponent(_ref) {
 
 
   (0, _react.useEffect)(function () {
-    if (isDecision) {
-      resetCameraView();
-    } else if (isVoiceOver) {
+    if (isVoiceOver) {
       resetCameraView();
       setCurrentMessage({
         text: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.text,
@@ -543,36 +543,36 @@ var DialogComponent = function DialogComponent(_ref) {
         avatar: getAvatarURL(talkingCharacter),
         show: true
       });
-    } else if (!lastSet.current) {
-      var slottedCharacters = currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots.filter(function (slot) {
-        return slot.uid && !slot.talking;
-      });
-      var currentParticipants = [].concat(_toConsumableArray(slottedCharacters.map(function (slot) {
-        return slot.uid;
-      }) || []), [talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid]);
-      var notInvolvedParticipants = charactersInvolved.filter(function (charUid) {
-        return !currentParticipants.includes(charUid);
-      });
-      notInvolvedParticipants.forEach(function (uid) {
-        var element = getCurrentVisible(uid);
-
-        if (element) {
-          executeDefaultAnimation(element);
-        }
-      }); // Check not talking elements emotion
+    } else if (!lastSet.current && !isDecision) {
+      // Talking element logic
+      if (talkingCharacter) {
+        var slottedCharacters = currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots.filter(function (slot) {
+          return slot.uid && !slot.talking;
+        });
+        var currentParticipants = [].concat(_toConsumableArray(slottedCharacters.map(function (slot) {
+          return slot.uid;
+        }) || []), [talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid]);
+        var notInvolvedParticipants = charactersInvolved.filter(function (charUid) {
+          return !currentParticipants.includes(charUid);
+        });
+        notInvolvedParticipants.forEach(function (uid) {
+          var element = getCurrentVisible(uid);
 
-      slottedCharacters.forEach(function (slot) {
-        var element = getCurrentVisible(slot.uid);
+          if (element) {
+            executeDefaultAnimation(element);
+          }
+        }); // Check not talking elements emotion
 
-        if (element) {
-          loadEmotion(slot, element, function (_, action, defaultAction) {
-            var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
-            (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
-          });
-        }
-      }); // Talking element logic
+        slottedCharacters.forEach(function (slot) {
+          var element = getCurrentVisible(slot.uid);
 
-      if (talkingCharacter) {
+          if (element) {
+            loadEmotion(slot, element, function (_, action, defaultAction) {
+              var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
+              (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
+            });
+          }
+        });
         var element = getCurrentVisible(talkingCharacter.uid);
         var object = actors.find(function (a) {
           return a.uid === talkingCharacter.uid;
@@ -592,11 +592,7 @@ var DialogComponent = function DialogComponent(_ref) {
               var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
               moveBubble(element, showArrowTop);
 
-              if (zoomInActor) {
-                setAnimationRunning(true);
-              }
-
-              setTimeout(function () {
+              var setMessage = function setMessage() {
                 var _talkingCharacter$cha5;
 
                 setCurrentMessage({
@@ -607,7 +603,14 @@ var DialogComponent = function DialogComponent(_ref) {
                   avatar: getAvatarURL(talkingCharacter),
                   show: true
                 });
-              }, zoomInActor ? 1200 : 0);
+              };
+
+              if (zoomInActor) {
+                onZoomEnd.current = setMessage;
+                setAnimationRunning(true);
+              } else {
+                setMessage();
+              }
             }
           });
         } else {
@@ -697,7 +700,6 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [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) {
-      zoomStarted.current = true;
       var cam = camera;
       var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.position.toArray();
       animationTarget.current.position.fromArray(targetPosition);
@@ -717,7 +719,22 @@ var DialogComponent = function DialogComponent(_ref) {
       _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()));
@@ -741,33 +758,16 @@ var DialogComponent = function DialogComponent(_ref) {
         y: animationTarget.current.position.y,
         z: animationTarget.current.position.z
       });
-    } else {
+    } else if (zoomStarted.current) {
       zoomStarted.current = false;
     }
-  }, [animationRunning]); // Animate Camera
-  // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
-
-  (0, _fiber.useFrame)(function () {
-    if (animationRunning) {
-      if (changedMats.current.length) {
-        changedMats.current.forEach(function (o) {
-          var object = o.object;
-          object.material.visible = true;
-        });
-      }
-    }
-  });
-  var container = document.querySelector('.screens--container');
-  var cleanStyle = {
-    width: '100vw',
-    height: '100vh',
-    position: 'static'
-  };
+  }, [animationRunning]);
   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);
+  var container = document.querySelector('.screens--container');
 
   if (isDecision) {
     var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
@@ -781,22 +781,16 @@ var DialogComponent = function DialogComponent(_ref) {
       emitEvent: emitEvent,
       pause: pause,
       soundActions: soundActions,
-      keyboardControl: keyboardControl
+      keyboardControl: keyboardControl,
+      onMount: function onMount() {
+        resetCameraView();
+      },
+      onUnMount: function onUnMount() {
+        zoomStarted.current = false;
+      }
     });
 
-    return /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
-      zIndexRange: [6, 6],
-      style: cleanStyle,
-      portal: container ? {
-        current: container
-      } : undefined,
-      onOcclude: function onOcclude() {},
-      calculatePosition: function calculatePosition() {
-        return [0, 0];
-      }
-    }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, _extends({
-      inScene: true
-    }, decisionPayload)));
+    return /*#__PURE__*/_react.default.createElement(_DialogDecision.default, decisionPayload);
   }
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_BubbleWrapper.default, {

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

@@ -0,0 +1,54 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
+
+var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var cleanStyle = {
+  width: '100vw',
+  height: '100vh',
+  position: 'static'
+};
+
+var DialogDecision = function DialogDecision(props) {
+  var container = document.querySelector('.screens--container');
+  (0, _react.useEffect)(function () {
+    if (props.onMount) props.onMount();
+    return function () {
+      if (props.onUnMount) props.onUnMount();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+    zIndexRange: [6, 6],
+    style: cleanStyle,
+    portal: container ? {
+      current: container
+    } : undefined,
+    onOcclude: function onOcclude() {},
+    calculatePosition: function calculatePosition() {
+      return [0, 0];
+    }
+  }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, _extends({
+    inScene: true
+  }, props)));
+};
+
+var _default = DialogDecision;
+exports.default = _default;

package/package.json

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