@gamelearn/arcade-components 1.18.4 → 1.19.0

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

@@ -134,16 +134,19 @@ var DialogComponent = function DialogComponent(_ref) {
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
   var isBranched = !!edges;
-  var voiceOver = currentLine.voiceOver,
-      decision = currentLine.decision;
+
+  var _ref2 = currentLine || {},
+      voiceOver = _ref2.voiceOver,
+      decision = _ref2.decision;
+
   var translate = (0, _react.useCallback)(function (id) {
     return emitEvent({
       type: 'translate',
       payload: id
     });
   }, [emitEvent]);
-  var isVoiceOver = voiceOver || currentLine.type === 'conversationalNarration';
-  var isDecision = decision || currentLine.type === 'conversationalDecision';
+  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';
   var getCurrentVisible = (0, _react.useCallback)(function (uid) {
     var object;
     scene.traverseVisible(function (node) {
@@ -240,7 +243,7 @@ var DialogComponent = function DialogComponent(_ref) {
     var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     var keys = forward ? ['fromId', 'toId'] : ['toId', 'fromId'];
     var foundEdge = edges.find(function (edge) {
-      return edge[keys[0]] === currentLine.id;
+      return edge[keys[0]] === (currentLine === null || currentLine === void 0 ? void 0 : currentLine.id);
     });
 
     if (!(foundEdge !== null && foundEdge !== void 0 && foundEdge[keys[0]])) {
@@ -259,7 +262,7 @@ var DialogComponent = function DialogComponent(_ref) {
         finishConversation();
       }
     }
-  }, [currentLine.id, edges, finishConversation, lines]);
+  }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
   var backLine = (0, _react.useCallback)(function () {
     setAudioFailed(false);
 
@@ -275,7 +278,7 @@ var DialogComponent = function DialogComponent(_ref) {
   var handleDecisionBranch = (0, _react.useCallback)(function (choice, reset) {
     var currentId = [3, 2, 1][choice.id];
     var optionsEdges = edges.filter(function (edge) {
-      return edge.fromId === currentLine.id;
+      return edge.fromId === (currentLine === null || currentLine === void 0 ? void 0 : currentLine.id);
     });
     var currentEdge = optionsEdges.find(function (edge) {
       return parseInt(edge.fromPointIndex) === currentId;
@@ -296,7 +299,7 @@ var DialogComponent = function DialogComponent(_ref) {
     } else {
       finishConversation();
     }
-  }, [currentLine.id, edges, finishConversation, lines]);
+  }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
   var nextLine = (0, _react.useCallback)(function (choice, reset) {
     setAudioFailed(false);
 
@@ -333,8 +336,8 @@ var DialogComponent = function DialogComponent(_ref) {
     } else if (isVoiceOver) {
       resetCameraView();
       setCurrentMessage({
-        text: currentLine.text,
-        name: currentLine.alias || currentLine.name || "[ ".concat(translate('storylines.misc.voiceOver'), " ]"),
+        text: currentLine === null || currentLine === void 0 ? void 0 : currentLine.text,
+        name: (currentLine === null || currentLine === void 0 ? void 0 : currentLine.alias) || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.name) || "[ ".concat(translate('storylines.misc.voiceOver'), " ]"),
         left: false,
         inScene: false,
         voiceOver: true,
@@ -344,10 +347,10 @@ var DialogComponent = function DialogComponent(_ref) {
         show: true
       });
     } else if (!lastSet.current) {
-      var talkingCharacter = currentLine.slots.find(function (slot) {
+      var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
         return slot.talking;
       });
-      var slottedCharacters = currentLine.slots.filter(function (slot) {
+      var slottedCharacters = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.filter(function (slot) {
         return slot.uid && !slot.talking;
       }); // Check not talking elements emotion
 
@@ -379,64 +382,45 @@ var DialogComponent = function DialogComponent(_ref) {
             if (startAction && action && startAction !== action) {
               mixer.stopAllAction();
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
-            } // Ugly timeout to wait an animation transition
+            }
+          });
+
+          if (talkingCharacter.uid === element.uid) {
+            var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
+            var head = element.getObjectByName('Head_M');
+            var target = new _three.Object3D();
+            head.getWorldPosition(target.position);
+            target.applyQuaternion(camera.quaternion);
+            target.translateX(1.25);
+            var distance = camera.position.distanceTo(target.position);
+            target.translateY(distance > 70 && !zoomInActor ? 0 : 3);
+            messagePosition.current = {
+              pos: target.position.toArray(),
+              child: head,
+              parent: element
+            };
+
+            if (zoomInActor) {
+              animationStart.current = true;
+            } // Ugly timeout to wait for zoom in ( maybe use tween (?))
 
 
             setTimeout(function () {
-              if (talkingCharacter.uid === element.uid) {
-                var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
-                var head = element.getObjectByName('Head_M');
-                var target = new _three.Object3D();
-                head.getWorldPosition(target.position);
-                target.applyQuaternion(camera.quaternion);
-                target.translateX(1.25);
-                var distanceToCam = camera.position.distanceTo(element.position);
-                var bbox = new _three.Box3().setFromObject(element);
-                var size = bbox.getSize(new _three.Vector3());
-                var distanceMultiplier = 1;
-
-                if (distanceToCam > 200 && !zoomInActor) {
-                  distanceMultiplier = size.y / 3.5;
-
-                  if (distanceToCam > 400) {
-                    distanceMultiplier = size.y / 2;
-
-                    if (distanceToCam > 600) {
-                      distanceMultiplier = size.y / 1.5;
-                    }
-                  }
-                }
-
-                var baseY = 3 * distanceMultiplier;
-                target.translateY(showArrowTop ? 1.25 : baseY);
-                messagePosition.current = {
-                  pos: target.position.toArray(),
-                  child: head,
-                  parent: element
-                };
-
-                if (zoomInActor) {
-                  animationStart.current = true;
-                } // Ugly timeout to wait for zoom in ( maybe use tween (?))
-
-
-                setTimeout(function () {
-                  var _talkingCharacter$cha;
-
-                  setCurrentMessage({
-                    text: talkingCharacter.text,
-                    name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
-                    left: true,
-                    top: showArrowTop,
-                    inScene: true,
-                    thinkful: talkingCharacter.emotion === 'thinkful',
-                    avatar: '',
-                    show: true
-                  });
-                }, zoomInActor ? 1200 : 0);
-              }
-            }, 1000 * crossFadeDuration);
-          });
+              var _talkingCharacter$cha;
+
+              distance = camera.position.distanceTo(target.position);
+              setCurrentMessage({
+                text: talkingCharacter.text,
+                name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
+                left: true,
+                top: showArrowTop || distance > 70,
+                inScene: true,
+                thinkful: talkingCharacter.emotion === 'thinkful',
+                avatar: '',
+                show: true
+              });
+            }, zoomInActor ? 1200 : 0);
+          }
         } else {
           var _talkingCharacter$cha2;
 
@@ -460,9 +444,9 @@ var DialogComponent = function DialogComponent(_ref) {
       }
     }
   }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver]);
-  var autoPlayCond = automatic && !currentLine.decision;
-  var audio = Object.keys(currentLine.audio || {}).length;
-  var voice = Object.keys(currentLine.voice || {}).length; // Sound logic
+  var autoPlayCond = automatic && !(currentLine !== null && currentLine !== void 0 && currentLine.decision);
+  var audio = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio) || {}).length;
+  var voice = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice) || {}).length; // Sound logic
 
   var stopEkho = (0, _useEkho.default)({
     audioType: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType,
@@ -499,12 +483,12 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [currentMessage, nextLine, start, stop, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, autoPlayCond, audio, voice, audioFailed]); // Positioning logic
 
   var checkBubblePosition = (0, _react.useCallback)(function () {
-    if (bubbleRef.current && currentLine.slots) {
-      var talkingCharacter = currentLine.slots.find(function (slot) {
+    if (bubbleRef.current && currentLine !== null && currentLine !== void 0 && currentLine.slots) {
+      var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
         return slot.talking;
       });
       var bubbleRect = bubbleRef.current.getBoundingClientRect();
-      var x = bubbleRect.x + bubbleRect.width - 75;
+      var x = bubbleRect.x + bubbleRect.width;
       var y = bubbleRect.y - bubbleRect.height;
 
       if ((x < 0 || x > window.innerWidth) && currentMessage.inScene) {
@@ -520,7 +504,7 @@ var DialogComponent = function DialogComponent(_ref) {
           var distanceX = bubbleRect.width + bubbleRect.width / divider;
           bubbleRef.current.parentNode.style.transform = "translate3d(-".concat(distanceX, "px, -").concat(bubbleRect.height, "px, 0px)");
           bubbleRect = bubbleRef.current.getBoundingClientRect();
-          var completeOutside = x > window.innerWidth + bubbleRect.width || y < -bubbleRect.height || y > window.innerHeight || x < -bubbleRect.width;
+          var completeOutside = x > window.innerWidth + bubbleRect.width || y < -bubbleRect.height || y > window.innerHeight || x < -bubbleRect.width || bubbleRect.x < 10;
 
           if (completeOutside) {
             bubbleRef.current.parentNode.style.transform = '';
@@ -547,8 +531,8 @@ var DialogComponent = function DialogComponent(_ref) {
     checkBubblePosition();
   }, [checkBubblePosition]); // Animate Camera
 
-  (0, _fiber.useFrame)(function (_ref2, delta) {
-    var cam = _ref2.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();
@@ -640,7 +624,7 @@ var DialogComponent = function DialogComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
     ref: bubbleRef,
     message: currentMessage
-  }))) : null, currentMessage.show ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+  }))) : null, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     style: {
       width: '100vw',
       height: '100vh'
@@ -666,7 +650,7 @@ var DialogComponent = function DialogComponent(_ref) {
     onClick: manualNextLine
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
-  })))) : null);
+  })))));
 };
 
 var _default = DialogComponent;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.18.4",
+  "version": "1.19.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -39,7 +39,8 @@
     "clean": "rimraf dist",
     "watch": "npx nodemon -e js --ignore dist --exec \"yarn compile && yalc push --changed\"",
     "compile": "npm run clean && cross-env NODE_ENV=production babel src -d dist --ignore src/**/*.stories.js,src/**/*.test.js,src/setupTests.js",
-    "test": "react-scripts test",
+    "test": "react-scripts test --watchAll=false",
+    "test:watch": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -o build",