@gamelearn/arcade-components 0.25.34 → 0.25.36

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

@@ -100,7 +100,7 @@ var DialogComponent = function DialogComponent(_ref) {
   var animationStart = (0, _react.useRef)(false);
   var bubbleRef = (0, _react.useRef)();
   var groupRef = (0, _react.useRef)();
-  var animationTarget = (0, _react.useRef)(new _three.Vector3());
+  var animationTarget = (0, _react.useRef)(new _three.Object3D());
   var currentLine = lines[line];
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
@@ -194,6 +194,11 @@ var DialogComponent = function DialogComponent(_ref) {
       });
     }
   }, [getCurrentVisible, lastLine === null || lastLine === void 0 ? void 0 : lastLine.slots, scene]);
+  var resetCameraView = (0, _react.useCallback)(function () {
+    messagePosition.current.child = null;
+    messagePosition.current.parent = null;
+    if (zoomInActor) animationStart.current = true;
+  }, [zoomInActor]);
   var backLine = (0, _react.useCallback)(function () {
     if (lastLine && !lastLine.decision) {
       changeLine(line - 1);
@@ -206,32 +211,24 @@ var DialogComponent = function DialogComponent(_ref) {
       resetAnims(true);
       lastSet.current = true;
       setCurrentMessage({});
-      messagePosition.current.pos = defaultCamera.current.position.clone().add(new _three.Vector3(0, 5, -35)).toArray();
-
-      if (zoomInActor) {
-        animationStart.current = true;
-      } else {
-        camera.copy(defaultCamera.current);
-      }
-
+      resetCameraView();
       setTimeout(function () {
         emitEvent({
           type: 'success'
         });
-      }, currentLine.decision ? 0 : 700);
+        camera.copy(defaultCamera.current);
+      }, currentLine.decision ? 0 : 1200);
     }
-  }, [camera, currentLine.decision, emitEvent, line, lines.length, resetAnims, zoomInActor]); // Position bubble over talking character/and switch emotions
+  }, [camera, currentLine.decision, emitEvent, line, lines.length, resetAnims, resetCameraView]); // Position bubble over talking character/and switch emotions
 
   (0, _react.useEffect)(function () {
     setCurrentMessage({});
 
     if (currentLine.decision) {
-      messagePosition.current.child = null;
-      messagePosition.current.parent = null;
+      resetCameraView();
       return;
     } else if (currentLine.voiceOver) {
-      messagePosition.current.child = null;
-      messagePosition.current.parent = null;
+      resetCameraView();
       setCurrentMessage({
         text: currentLine.text,
         name: currentLine.alias || "[ ".concat(translate('storylines.misc.voiceOver'), " ]"),
@@ -285,7 +282,8 @@ var DialogComponent = function DialogComponent(_ref) {
               var box = new _three.Box3().setFromObject(element);
               var bodySize = box.getSize(new _three.Vector3());
               var headPos = head.getWorldPosition(new _three.Vector3());
-              headPos.add(new _three.Vector3(bodySize.x - 10, 5, 0));
+              headPos.add((0, _helpers.vectorTranslateX)(bodySize.x / 8, camera));
+              headPos.add((0, _helpers.vectorTranslateY)(bodySize.y / 6, camera));
               messagePosition.current = {
                 pos: headPos.toArray(),
                 child: head,
@@ -313,9 +311,7 @@ var DialogComponent = function DialogComponent(_ref) {
         } else {
           var _talkingCharacter$cha2;
 
-          messagePosition.current.child = null;
-          messagePosition.current.parent = null;
-          if (zoomInActor) animationStart.current = true;
+          resetCameraView();
           setCurrentMessage({
             text: talkingCharacter.text,
             name: talkingCharacter.alias || ((_talkingCharacter$cha2 = talkingCharacter.character) === null || _talkingCharacter$cha2 === void 0 ? void 0 : _talkingCharacter$cha2.name) || object.name,
@@ -327,7 +323,7 @@ var DialogComponent = function DialogComponent(_ref) {
         }
       }
     }
-  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetAnims]); // Autoplay logic
+  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetAnims, resetCameraView]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
     var timeout;
@@ -353,15 +349,14 @@ var DialogComponent = function DialogComponent(_ref) {
         return slot.talking;
       });
       var bubbleRect = bubbleRef.current.getBoundingClientRect();
-      var x = bubbleRect.x + bubbleRect.width;
-      var y = bubbleRect.y - bubbleRect.height;
+      var x = bubbleRect.x + bubbleRect.width / 2;
+      var y = bubbleRect.y - bubbleRect.height / 2;
 
       if ((x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) && currentMessage.inScene) {
         var child = messagePosition.current.child;
-        var headPos = child.getWorldPosition(new _three.Vector3());
 
-        if (child.isBone) {
-          groupRef.current.position.copy(headPos);
+        if (child) {
+          groupRef.current.position.fromArray(messagePosition.current.pos);
           var completeOutside = x > window.innerWidth + bubbleRect.width || y < -bubbleRect.height || y > window.innerHeight || x < -bubbleRect.width;
           var distanceX = bubbleRect.width + bubbleRect.width / 4;
           bubbleRef.current.parentNode.style.transform = "translate3d(-".concat(distanceX, "px, -").concat(bubbleRect.height / 2, "px, 0px)");
@@ -391,25 +386,27 @@ var DialogComponent = function DialogComponent(_ref) {
     var camera = _ref2.camera;
 
     if (animationStart.current) {
-      var toPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.current.position.toArray();
-      var target = animationTarget.current.fromArray(toPosition);
+      var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.current.position.toArray();
+      animationTarget.current.position.fromArray(targetPosition);
 
       if (messagePosition.current.parent) {
-        var size = messagePosition.current.parent.bbox.getSize(new _three.Vector3());
-        var offset = new _three.Vector3();
-        offset.add((0, _helpers.vectorTranslateZ)(size.z + 10, camera));
-        offset.add((0, _helpers.vectorTranslateY)(-size.y / 3, camera));
-        target.add(offset);
+        if (!animationTarget.current.quaternion.equals(camera.quaternion)) {
+          animationTarget.current.applyQuaternion(camera.quaternion);
+        }
+
+        animationTarget.current.translateX(12);
+        animationTarget.current.translateY(-5);
+        animationTarget.current.translateZ(30);
       }
 
-      if (target.distanceTo(camera.position) < 1) {
+      if (animationTarget.current.position.distanceTo(camera.position) < 1) {
         animationStart.current = false;
 
         if (lastSet.current || !messagePosition.current.child) {
           camera.copy(defaultCamera.current);
         }
       } else {
-        camera.position.lerp(target, delta * 2.5);
+        camera.position.lerp(animationTarget.current.position, delta * 2.5);
       }
     }
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "0.25.34",
+  "version": "0.25.36",
   "main": "dist/index.js",
   "files": [
     "dist",