@gamelearn/arcade-components 1.27.10 → 1.27.11

package/README.md

@@ -10,7 +10,7 @@ yarn add @gamelearn/arcade-components
 ```
 
 ## Usage
-
+ 
 ```jsx
 import React, { Component } from 'react';
 

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

@@ -135,6 +135,8 @@ var DialogComponent = function DialogComponent(_ref) {
       start = _useTimeout.start,
       stop = _useTimeout.stop;
 
+  var bubbleRef = (0, _react.useRef)();
+  var groupRef = (0, _react.useRef)();
   var loader = (0, _react.useMemo)(function () {
     return new _GLTFLoader.GLTFLoader();
   }, []);
@@ -382,23 +384,25 @@ var DialogComponent = function DialogComponent(_ref) {
     }
   }, [edges, isBranched, lines, mounted]);
 
-  var moveBubble = function moveBubble(element, target, showArrowTop) {
+  var moveBubble = function moveBubble(element, showArrowTop) {
+    var target = new _three.Object3D();
     element.updateMatrix();
     element.updateMatrixWorld();
     var head = element.getObjectByName('Head_M');
-    head.updateMatrix();
     head.updateMatrixWorld();
     head.getWorldPosition(target.position);
     target.applyQuaternion(camera.quaternion);
     var distance = camera.position.distanceTo(target.position);
     var staticDisplay = distance > 70 && !zoomInActor && !showArrowTop;
-    target.translateY(staticDisplay || showArrowTop ? -1 : 0); // Detectar posicion de personaje a izq o derecha de pantalla
+    var yDistance = zoomInActor ? 2.5 : 2;
+    var xDistance = zoomInActor ? 1.2 : 1.5;
+    target.translateY(staticDisplay || showArrowTop ? 0 : yDistance);
+    target.translateX(xDistance); // 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 p = vector.project(camera);
     var isLeft = p.x < 0;
-    target.translateX(-1);
     messagePosition.current = {
       pos: target.position.toArray(),
       child: head,
@@ -474,36 +478,32 @@ var DialogComponent = function DialogComponent(_ref) {
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
             }
 
-            setTimeout(function () {
-              if (talkingCharacter.uid === element.uid) {
-                var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
-                var target = new _three.Object3D();
-                moveBubble(element, target, showArrowTop);
-
-                if (zoomInActor) {
-                  setAnimationRunning(true);
-                } // Ugly timeout to wait for zoom in ( maybe use tween (?))
-
-
-                setTimeout(function () {
-                  var _talkingCharacter$cha;
-
-                  var _moveBubble = moveBubble(element, target, showArrowTop),
-                      distance = _moveBubble.distance;
-
-                  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);
+            if (talkingCharacter.uid === element.uid) {
+              var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
+              moveBubble(element, showArrowTop);
+
+              if (zoomInActor) {
+                setAnimationRunning(true);
               }
-            }, crossFadeDuration * 100);
+
+              setTimeout(function () {
+                var _talkingCharacter$cha;
+
+                var _moveBubble = moveBubble(element, showArrowTop),
+                    distance = _moveBubble.distance;
+
+                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;
@@ -570,6 +570,9 @@ 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 checkBubbleBounds = (0, _react.useCallback)(function (group, bubble) {
+    groupRef.current = group === null || group === void 0 ? void 0 : group.current;
+    bubbleRef.current = bubble === null || bubble === void 0 ? void 0 : bubble.current;
+
     if (currentLine !== null && currentLine !== void 0 && currentLine.slots && currentMessage.show && bubble !== null && bubble !== void 0 && bubble.current) {
       var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
         return slot.talking;
@@ -579,18 +582,15 @@ var DialogComponent = function DialogComponent(_ref) {
       var y = bubbleRect.y - bubbleRect.height;
 
       if (!messagePosition.current.isLeft && zoomInActor || (x < 0 || x > window.innerWidth) && currentMessage.inScene) {
-        var _messagePosition$curr = messagePosition.current,
-            child = _messagePosition$curr.child,
-            parent = _messagePosition$curr.parent;
+        var child = messagePosition.current.child;
 
         if (child) {
           var target = new _three.Object3D();
           child.getWorldPosition(target.position);
-          target.applyQuaternion(camera.quaternion);
           group.current.position.copy(target.position);
           group.current.updateMatrixWorld();
-          moveBubble(parent, target, false);
-          var divider = isMobile ? 10 : 6;
+          var dividerWidth = bubbleRect.width > 250 ? 4 : 2.75;
+          var divider = isMobile ? 10 : dividerWidth;
           var distanceX = bubbleRect.width + bubbleRect.width / divider;
           bubble.current.parentNode.style.transform = "translate3d(-".concat(distanceX, "px, -").concat(bubbleRect.height, "px, 0px)");
           bubbleRect = bubble.current.getBoundingClientRect();
@@ -632,8 +632,8 @@ var DialogComponent = function DialogComponent(_ref) {
         var headSpace = headSize * mult; // move bubble
 
         messagePosition.current.pos[0] -= headSpace;
-        animationTarget.current.translateX(-10 + headSpace);
-        animationTarget.current.translateY(0);
+        animationTarget.current.translateX(-10 * mult + headSpace);
+        animationTarget.current.translateY(-2);
         animationTarget.current.translateZ(30);
       }
 
@@ -651,7 +651,7 @@ var DialogComponent = function DialogComponent(_ref) {
           if (changedMats.current.length) {
             changedMats.current.forEach(function (o) {
               var object = o.object;
-              object.material.visible = false;
+              object.material.side = 0;
             });
           }
 
@@ -676,7 +676,9 @@ var DialogComponent = function DialogComponent(_ref) {
         });
       }
 
-      checkBubbleBounds();
+      if (bubbleRef.current && groupRef.current) {
+        checkBubbleBounds(groupRef, bubbleRef);
+      }
     }
   });
   var container = document.querySelector('.screens--container');

package/package.json

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