@gamelearn/arcade-components 1.22.11 → 1.22.12

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

@@ -31,6 +31,8 @@ var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
 
 var _LangIsRtl = _interopRequireDefault(require("../../../helpers/LangIsRtl"));
 
+var _gsap = _interopRequireDefault(require("gsap"));
+
 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); }
@@ -65,6 +67,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// Global
 var isMobile = (0, _deviceDetection.DeviceDetection)();
 var crossFadeDuration = 0.5;
 var characterMs = 75;
@@ -134,17 +137,23 @@ var DialogComponent = function DialogComponent(_ref) {
   var loader = (0, _react.useMemo)(function () {
     return new _GLTFLoader.GLTFLoader();
   }, []);
-  var defaultCamera = (0, _react.useRef)(camera.clone());
+  var defaultCamera = (0, _react.useMemo)(function () {
+    return camera.clone();
+  }, []);
   var messagePosition = (0, _react.useRef)({
     pos: [0, 0, 0],
     child: null
   });
-  var animationStart = (0, _react.useRef)(false);
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      animationRunning = _useState12[0],
+      setAnimationRunning = _useState12[1];
+
   var bubbleRef = (0, _react.useRef)();
   var groupRef = (0, _react.useRef)();
   var animationTarget = (0, _react.useRef)(new _three.Object3D());
   var currentLine = lines[line];
-  var currentLineData = lines[line];
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
   var isBranched = !!edges;
@@ -174,10 +183,10 @@ var DialogComponent = function DialogComponent(_ref) {
     });
   }, [emitEvent]);
 
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      previousLineWasDecision = _useState12[0],
-      setPreviousLineWasDecision = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      previousLineWasDecision = _useState14[0],
+      setPreviousLineWasDecision = _useState14[1];
 
   var isVoiceOver = voiceOver || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalNarration';
   var isDecision = decision || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalDecision';
@@ -201,7 +210,8 @@ var DialogComponent = function DialogComponent(_ref) {
       return '';
     });
     return ((_slot$character = slot.character) === null || _slot$character === void 0 ? void 0 : (_slot$character$resou = _slot$character.resource) === null || _slot$character$resou === void 0 ? void 0 : _slot$character$resou.url) || (object === null || object === void 0 ? void 0 : object.completeUrl) || '';
-  }, [actors]);
+  }, [actors]); // Move to three core?
+
   var loadEmotion = (0, _react.useCallback)(function (slot, element) {
     var _slot$character2;
 
@@ -258,7 +268,7 @@ var DialogComponent = function DialogComponent(_ref) {
   var resetCameraView = (0, _react.useCallback)(function () {
     messagePosition.current.child = null;
     messagePosition.current.parent = null;
-    if (zoomInActor) animationStart.current = true;
+    if (zoomInActor) setAnimationRunning(true);
   }, [zoomInActor]);
   var finishConversation = (0, _react.useCallback)(function () {
     resetAnims();
@@ -272,7 +282,7 @@ var DialogComponent = function DialogComponent(_ref) {
       emitEvent({
         type: 'success'
       });
-      camera.copy(defaultCamera.current);
+      camera.copy(defaultCamera);
     });
   }, [camera, emitEvent, resetAnims, resetCameraView]);
   var handleBranchDirection = (0, _react.useCallback)(function () {
@@ -299,18 +309,6 @@ var DialogComponent = function DialogComponent(_ref) {
       }
     }
   }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
-  var backLine = (0, _react.useCallback)(function () {
-    setAudioFailed(false);
-
-    if (isBranched) {
-      handleBranchDirection(false);
-    } else if (lastLine && !(lastLine !== null && lastLine !== void 0 && lastLine.decision) || lastLine.type && !lastLine.type !== 'conversationalDecision') {
-      setCurrentMessage({
-        show: false
-      });
-      changeLine(line - 1);
-    }
-  }, [handleBranchDirection, isBranched, lastLine, line]);
   var handleDecisionBranch = (0, _react.useCallback)(function (choice, reset) {
     var currentId = [3, 2, 1][choice.id];
     var optionsEdges = edges.filter(function (edge) {
@@ -336,8 +334,20 @@ var DialogComponent = function DialogComponent(_ref) {
       finishConversation();
     }
   }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
+  var backLine = (0, _react.useCallback)(function () {
+    setAudioFailed(false);
+
+    if (isBranched) {
+      handleBranchDirection(false);
+    } else if (lastLine && !(lastLine !== null && lastLine !== void 0 && lastLine.decision) || lastLine.type && !lastLine.type !== 'conversationalDecision') {
+      setCurrentMessage({
+        show: false
+      });
+      changeLine(line - 1);
+    }
+  }, [handleBranchDirection, isBranched, lastLine, line]);
   var nextLine = (0, _react.useCallback)(function (choice, reset) {
-    setPreviousLineWasDecision(currentLineData.decision);
+    setPreviousLineWasDecision(currentLine.decision);
     setAudioFailed(false);
 
     if (isBranched) {
@@ -354,7 +364,7 @@ var DialogComponent = function DialogComponent(_ref) {
     } else {
       finishConversation();
     }
-  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]);
+  }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]);
 
   var manualBackLine = function manualBackLine() {
     setAutomatic(false);
@@ -412,7 +422,7 @@ var DialogComponent = function DialogComponent(_ref) {
       });
       var currentParticipants = [].concat(_toConsumableArray(slottedCharacters.map(function (slot) {
         return slot.uid;
-      }) || []), [talkingCharacter.uid]);
+      }) || []), [talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid]);
       var notInvolvedParticipants = charactersInvolved.filter(function (charUid) {
         return !currentParticipants.includes(charUid);
       });
@@ -462,18 +472,23 @@ var DialogComponent = function DialogComponent(_ref) {
               var target = new _three.Object3D();
               head.getWorldPosition(target.position);
               target.applyQuaternion(camera.quaternion);
-              target.translateX(1.25);
               var distance = camera.position.distanceTo(target.position);
               var staticDisplay = distance > 70 && !zoomInActor && !showArrowTop;
-              target.translateY(staticDisplay || showArrowTop ? 0 : 3);
+              target.translateY(staticDisplay || showArrowTop ? 0 : 3); // Detectar posicion de personaje a izq o derecha de pantalla
+
+              var vector = new _three.Vector3();
+              vector.setFromMatrixPosition(head.matrixWorld);
+              var p = vector.project(defaultCamera);
+              var isLeft = p.x < 0;
               messagePosition.current = {
                 pos: target.position.toArray(),
                 child: head,
-                parent: element
+                parent: element,
+                isLeft: isLeft
               };
 
               if (zoomInActor) {
-                animationStart.current = true;
+                setAnimationRunning(true);
               } // Ugly timeout to wait for zoom in ( maybe use tween (?))
 
 
@@ -491,7 +506,7 @@ var DialogComponent = function DialogComponent(_ref) {
                   avatar: '',
                   show: true
                 });
-              }, zoomInActor ? 1200 : 0);
+              }, zoomInActor ? 1000 : 0);
             }
           });
         } else {
@@ -553,7 +568,7 @@ var DialogComponent = function DialogComponent(_ref) {
     return function () {
       stop();
     };
-  }, [currentMessage, nextLine, start, stop, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, autoPlayCond, audio, voice, audioFailed]); // Positioning logic
+  }, [currentMessage, nextLine, start, stop, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, autoPlayCond, audio, voice, audioFailed]); // Positioning Bubble Message logic
 
   var checkBubblePosition = (0, _react.useCallback)(function () {
     if (bubbleRef.current && currentLine !== null && currentLine !== void 0 && currentLine.slots) {
@@ -564,7 +579,7 @@ var DialogComponent = function DialogComponent(_ref) {
       var x = bubbleRect.x + bubbleRect.width;
       var y = bubbleRect.y - bubbleRect.height;
 
-      if ((x < 0 || x > window.innerWidth) && currentMessage.inScene) {
+      if (!messagePosition.current.isLeft || (x < 0 || x > window.innerWidth) && currentMessage.inScene) {
         var child = messagePosition.current.child;
 
         if (child) {
@@ -602,13 +617,11 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [camera.quaternion, currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots, currentMessage.inScene, getAvatarURL]);
   (0, _react.useEffect)(function () {
     checkBubblePosition();
-  }, [checkBubblePosition]); // Animate Camera
-
-  (0, _fiber.useFrame)(function (_ref3, delta) {
-    var cam = _ref3.camera;
-
-    if (animationStart.current) {
-      var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.current.position.toArray();
+  }, [checkBubblePosition]);
+  (0, _react.useEffect)(function () {
+    if (animationRunning) {
+      var cam = camera;
+      var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.position.toArray();
       animationTarget.current.position.fromArray(targetPosition);
 
       if (messagePosition.current.parent) {
@@ -616,41 +629,55 @@ var DialogComponent = function DialogComponent(_ref) {
           animationTarget.current.applyQuaternion(cam.quaternion);
         }
 
-        animationTarget.current.translateX(10);
+        var mult = messagePosition.current.isLeft ? -1 : 1;
+        var headSpace = 2.25 * mult; // move bubble
+
+        messagePosition.current.pos[0] = messagePosition.current.pos[0] - 1.25;
+        animationTarget.current.translateX(-10 * mult - headSpace);
         animationTarget.current.translateY(-5);
         animationTarget.current.translateZ(30);
       }
 
-      if (animationTarget.current.position.distanceTo(cam.position) < 1) {
-        animationStart.current = 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;
-        });
-
-        if (changedMats.current.length) {
-          changedMats.current.forEach(function (o) {
-            var object = o.object;
-            object.material.visible = false;
-          });
-        }
-
-        if (lastSet.current || !messagePosition.current.child) {
-          cam.copy(defaultCamera.current);
-        }
-
-        checkBubblePosition();
-      } else {
-        if (changedMats.current.length) {
-          changedMats.current.forEach(function (o) {
-            var object = o.object;
-            object.material.visible = true;
-          });
-        }
+      _gsap.default.to(cam.position, {
+        duration: 1,
+        ease: 'power3.easeInOut',
+        onComplete: function onComplete() {
+          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;
+          }); // TODO: CHECK IF OBJECT BETWEEN CAMERA AND TARGET
+
+          if (changedMats.current.length) {
+            changedMats.current.forEach(function (o) {
+              var object = o.object;
+              object.material.visible = false;
+            });
+          }
 
-        cam.position.lerp(animationTarget.current.position, delta * 2.5);
+          if (lastSet.current || !messagePosition.current.child) {
+            cam.copy(defaultCamera);
+          }
+        },
+        x: animationTarget.current.position.x,
+        y: animationTarget.current.position.y,
+        z: animationTarget.current.position.z
+      });
+    }
+  }, [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;
+        });
       }
+
+      checkBubblePosition();
     }
   });
   var cleanStyle = {
@@ -682,7 +709,8 @@ var DialogComponent = function DialogComponent(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, _extends({
       inScene: true
     }, decisionPayload)));
-  }
+  } // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentMessage.text ? /*#__PURE__*/_react.default.createElement("group", {
     ref: groupRef,
@@ -712,16 +740,17 @@ var DialogComponent = function DialogComponent(_ref) {
     dir: (0, _LangIsRtl.default)() ? 'rtl' : 'ltr',
     className: "dialog-component-controls"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    disabled: disableBackButton,
     type: "button",
     onClick: manualBackLine,
-    className: "gat--btn__round ".concat(disableBackButton ? 'disabled' : '')
+    disabled: disableBackButton || animationRunning,
+    className: "gat--btn__round ".concat(disableBackButton || animationRunning ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back'
   })), /*#__PURE__*/_react.default.createElement("button", {
-    className: "gat--btn__round",
     type: "button",
-    onClick: manualNextLine
+    onClick: manualNextLine,
+    disabled: animationRunning,
+    className: "gat--btn__round ".concat(animationRunning ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
   })))));

package/dist/components/dialog-component/mocks/mockForStory.js

@@ -29,6 +29,7 @@ var mockProps = {
   emitEvent: _mocker.emitEvent,
   soundActions: _mocker.soundActions,
   autoPlay: false,
+  zoomInActor: true,
   lines: [{
     flex: true,
     slots: [{

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.22.11",
+  "version": "1.22.12",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -21,6 +21,7 @@
     "@testing-library/react": "11.1.0",
     "@testing-library/user-event": "13.5.0",
     "global": "^4.4.0",
+    "gsap": "^3.10.1",
     "hls.js": "0.12.4",
     "html-react-parser": "^1.4.0",
     "interactjs": "^1.10.11",
@@ -109,4 +110,4 @@
       "post-merge": "bash node_modules/@gamelearn/version/scripts/after_version_update.sh -p hooks.config"
     }
   }
-}
+}