@gamelearn/arcade-components 1.23.1 → 1.24.1

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

@@ -71,7 +71,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var isMobile = (0, _deviceDetection.DeviceDetection)();
 var crossFadeDuration = 0.5;
 var characterMs = 75;
-var minMs = 1400; // Mobile always zoom in?
+var minMs = 1400;
+var headSize = 2; // Mobile always zoom in?
 
 var raycast = new _three.Raycaster();
 var maxCharacterToSwitch = 70;
@@ -236,26 +237,14 @@ var DialogComponent = function DialogComponent(_ref) {
     } else {
       onLoadAnim();
     }
-  }, [loader]);
+  }, [loader]); // Force default animation without transition
 
   var executeDefaultAnimation = function executeDefaultAnimation(element) {
-    if (element.userData.mixer && element.userData.currentEmotion) {
+    if (element.userData.mixer && element.userData.defaultAnim) {
       var mixer = element.userData.mixer;
-      var startAction = mixer.clipAction(element.userData.currentEmotion.getClip(), element);
       var defaultAction = mixer.clipAction(element.userData.defaultAnim, element);
-
-      if (element.userData.currentEmotion !== defaultAction) {
-        setTimeout(function () {
-          mixer.stopAllAction();
-          (0, _helpers.executeCrossFade)(startAction, defaultAction, crossFadeDuration / Math.floor(Math.random() * 3));
-
-          if (element.userData.currentEmotion) {
-            element.userData.lastEmotion = element.userData.currentEmotion;
-          }
-
-          element.userData.currentEmotion = defaultAction;
-        }, Math.floor(Math.random() * 3) * 500);
-      }
+      mixer.stopAllAction();
+      defaultAction.play();
     }
   }; // Reset currentEmotion to defaultAnim
 
@@ -271,18 +260,16 @@ var DialogComponent = function DialogComponent(_ref) {
     if (zoomInActor) setAnimationRunning(true);
   }, [zoomInActor]);
   var finishConversation = (0, _react.useCallback)(function () {
-    resetAnims();
     lastSet.current = true;
+    changeLine(0);
     setCurrentMessage({
       show: false
     });
     resetCameraView();
-    setTimeout(function () {
-      changeLine(0);
-      emitEvent({
-        type: 'success'
-      });
-      camera.copy(defaultCamera);
+    camera.copy(defaultCamera);
+    resetAnims();
+    emitEvent({
+      type: 'success'
     });
   }, [camera, emitEvent, resetAnims, resetCameraView]);
   var handleBranchDirection = (0, _react.useCallback)(function () {
@@ -438,15 +425,9 @@ var DialogComponent = function DialogComponent(_ref) {
         var element = getCurrentVisible(slot.uid);
 
         if (element) {
-          loadEmotion(slot, element, function (mixer, action, defaultAction) {
-            setTimeout(function () {
-              var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
-
-              if (startAction && action && startAction !== action) {
-                mixer.stopAllAction();
-                (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration / Math.floor(Math.random() * 3));
-              }
-            }, Math.floor(Math.random() * 3) * 500);
+          loadEmotion(slot, element, function (_, action, defaultAction) {
+            var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
+            (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
           });
         }
       }); // Talking element logic
@@ -469,6 +450,8 @@ var DialogComponent = function DialogComponent(_ref) {
             setTimeout(function () {
               if (talkingCharacter.uid === element.uid) {
                 var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
+                element.updateMatrix();
+                element.updateMatrixWorld();
                 var head = element.getObjectByName('Head_M');
                 var target = new _three.Object3D();
                 head.updateMatrix();
@@ -482,6 +465,7 @@ var DialogComponent = function DialogComponent(_ref) {
                 var vector = new _three.Vector3();
                 vector.setFromMatrixPosition(head.matrixWorld);
                 var p = vector.project(defaultCamera);
+                target.translateX(headSize);
                 var isLeft = p.x < 0;
                 messagePosition.current = {
                   pos: target.position.toArray(),
@@ -577,7 +561,7 @@ var DialogComponent = function DialogComponent(_ref) {
     };
   }, [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 () {
+  var checkBubbleBounds = (0, _react.useCallback)(function () {
     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;
@@ -623,8 +607,8 @@ 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]);
+    checkBubbleBounds();
+  }, [checkBubbleBounds]);
   (0, _react.useEffect)(function () {
     if (animationRunning) {
       var cam = camera;
@@ -637,10 +621,10 @@ var DialogComponent = function DialogComponent(_ref) {
         }
 
         var mult = messagePosition.current.isLeft ? -1 : 1;
-        var headSpace = 2 * mult; // move bubble
+        var headSpace = headSize * mult; // move bubble
 
         messagePosition.current.pos[0] -= headSpace;
-        animationTarget.current.translateX(-10 * mult - headSpace);
+        animationTarget.current.translateX(-10 + headSpace);
         animationTarget.current.translateY(-5);
         animationTarget.current.translateZ(30);
       }
@@ -684,7 +668,7 @@ var DialogComponent = function DialogComponent(_ref) {
         });
       }
 
-      checkBubblePosition();
+      checkBubbleBounds();
     }
   });
   var cleanStyle = {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.23.1",
+  "version": "1.24.1",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,9 +14,9 @@
   },
   "dependencies": {
     "@gamelearn/arcade-styles": "0.11.10",
-    "@gamelearn/arcade-three-core": "1.1.15",
-    "@react-three/drei": "8.8.1",
-    "@react-three/fiber": "7.0.25",
+    "@gamelearn/arcade-three-core": "1.10.4",
+    "@react-three/drei": "9.4.3",
+    "@react-three/fiber": "8.0.10",
     "@testing-library/jest-dom": "5.11.4",
     "@testing-library/react": "11.1.0",
     "@testing-library/user-event": "13.5.0",
@@ -32,7 +32,7 @@
     "react-pdf": "5.2.0",
     "react-promise-suspense": "0.3.3",
     "react-typist": "^2.0.5",
-    "three": "0.136.0",
+    "three": "0.139.2",
     "web-vitals": "0.2.4"
   },
   "scripts": {
@@ -89,8 +89,8 @@
     "nodemon": "^2.0.13",
     "plop": "^2.7.4",
     "prettier": "^2.5.0",
-    "react": "0.0.0-experimental-27659559e",
-    "react-dom": "0.0.0-experimental-27659559e",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
     "react-scripts": "4.0.1",
     "rimraf": "3.0.2"
   },