@gamelearn/arcade-components 0.25.38 → 0.26.1

package/dist/components/conversational-pro-component/components/ConversationalProComponent.js

@@ -68,6 +68,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       finished = _useState4[0],
       setFinished = _useState4[1];
 
+  var emitEventRef = (0, _react.useRef)(emitEvent);
   var backgroundImage = (background === null || background === void 0 ? void 0 : (_background$img = background.img) === null || _background$img === void 0 ? void 0 : _background$img.url) || null;
   var currentLineData = lines[currentLine];
   var voiceOverSlots = [];
@@ -75,11 +76,11 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       decision = currentLineData.decision;
   var isFlex = currentLineData.flex;
   var translate = (0, _react.useCallback)(function (id) {
-    return emitEvent({
+    return emitEventRef.current({
       type: 'translate',
       payload: id
     });
-  }, [emitEvent]);
+  }, []);
   var getCurrentMessage = (0, _react.useCallback)(function () {
     if (voiceOver) {
       return currentLineData;
@@ -140,7 +141,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
             }
 
             _context.next = 5;
-            return emitEvent({
+            return emitEventRef.current({
               type: 'playSpeech',
               payload: payload
             });
@@ -155,7 +156,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
         }
       }
     }, _callee);
-  })), [currentLineData.voice, getVoice, currentMessage, emitEvent, playSound]); // Recupera la antigua linea de la conversacion para conservar los personajes en voice-over
+  })), [currentLineData.voice, currentMessage.text, getVoice, playSound]); // Recupera la antigua linea de la conversacion para conservar los personajes en voice-over
 
   var leftWithSlots = lines.slice(0, currentLine + 1).reverse().find(function (line) {
     return line.slots;
@@ -241,7 +242,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       setCurrentLine(line + 1);
     } else {
       setFinished(true);
-      emitEvent({
+      emitEventRef.current({
         type: 'success'
       });
     }

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

@@ -23,6 +23,8 @@ var _helpers = require("../../../helpers");
 
 var _HtmlPro = _interopRequireDefault(require("../../../helpers/HtmlPro"));
 
+var _deviceDetection = require("../../../helpers/deviceDetection");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -37,6 +39,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -49,9 +55,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var crossFadeDuration = 0.5;
+var isMobile = (0, _deviceDetection.DeviceDetection)();
+var crossFadeDuration = 0.5; // Mobile always zoom in?
 
 var DialogComponent = function DialogComponent(_ref) {
+  var _currentLine$audio3, _currentLine$audio4;
+
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
       actors = _ref.actors,
@@ -82,6 +91,8 @@ var DialogComponent = function DialogComponent(_ref) {
       currentMessage = _useState6[0],
       setCurrentMessage = _useState6[1];
 
+  var emitRef = (0, _react.useRef)(emitEvent);
+
   var _useThree = (0, _fiber.useThree)(function (state) {
     return [state.camera, state.scene];
   }),
@@ -93,6 +104,11 @@ var DialogComponent = function DialogComponent(_ref) {
     return new _GLTFLoader.GLTFLoader();
   }, []);
   var defaultCamera = (0, _react.useRef)(camera.clone());
+
+  var _soundActions = _slicedToArray(soundActions, 2),
+      playSound = _soundActions[0],
+      stop = _soundActions[1];
+
   var messagePosition = (0, _react.useRef)({
     pos: [0, 0, 0],
     child: null
@@ -105,11 +121,66 @@ var DialogComponent = function DialogComponent(_ref) {
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
   var translate = (0, _react.useCallback)(function (id) {
-    return emitEvent({
+    return emitRef.current({
       type: 'translate',
       payload: id
     });
-  }, [emitEvent]);
+  }, []);
+  var getVoice = (0, _react.useCallback)(function (_ref2) {
+    var id = _ref2.id,
+        _ref2$type = _ref2.type,
+        type = _ref2$type === void 0 ? 'base' : _ref2$type;
+    var usedVoices = translate('usedVoices');
+    var gameChars = translate('gameCharacters');
+
+    if (type === 'base') {
+      return usedVoices === null || usedVoices === void 0 ? void 0 : usedVoices[id];
+    } else if (type === 'character') {
+      var _gameChars$id;
+
+      return gameChars === null || gameChars === void 0 ? void 0 : (_gameChars$id = gameChars[id]) === null || _gameChars$id === void 0 ? void 0 : _gameChars$id.voiceId;
+    }
+
+    return null;
+  }, [translate]);
+  var playSpeech = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var payload, speechUrl;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (!currentLine.voice.id) {
+              _context.next = 7;
+              break;
+            }
+
+            payload = {
+              voiceId: getVoice(currentLine.voice),
+              text: currentMessage.text
+            };
+
+            if (!(payload.voiceId && payload.text)) {
+              _context.next = 7;
+              break;
+            }
+
+            _context.next = 5;
+            return emitRef.current({
+              type: 'playSpeech',
+              payload: payload
+            });
+
+          case 5:
+            speechUrl = _context.sent;
+            playSound(speechUrl);
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })), [currentLine.voice, getVoice, currentMessage.text, playSound]);
   var getCurrentVisible = (0, _react.useCallback)(function (uid) {
     var object;
     scene.traverseVisible(function (node) {
@@ -201,11 +272,13 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [zoomInActor]);
   var backLine = (0, _react.useCallback)(function () {
     if (lastLine && !lastLine.decision) {
+      setCurrentMessage({});
       changeLine(line - 1);
     }
   }, [lastLine, line]);
   var nextLine = (0, _react.useCallback)(function () {
     if (line < lines.length - 1) {
+      setCurrentMessage({});
       changeLine(line + 1);
     } else {
       resetAnims(true);
@@ -222,8 +295,6 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [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) {
       resetCameraView();
       return;
@@ -275,38 +346,42 @@ var DialogComponent = function DialogComponent(_ref) {
             if (startAction !== action) {
               mixer.stopAllAction();
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
-            }
-
-            if (talkingCharacter.uid === element.uid) {
-              var head = element.getObjectByName('Head_M');
-              var box = new _three.Box3().setFromObject(element);
-              var bodySize = box.getSize(new _three.Vector3());
-              var headPos = head.getWorldPosition(new _three.Vector3());
-              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,
-                parent: element
-              };
-
-              if (zoomInActor) {
-                animationStart.current = true;
+            } // Ugly timeout to wait an animation transition
+
+
+            setTimeout(function () {
+              if (talkingCharacter.uid === element.uid) {
+                var head = element.getObjectByName('Head_M');
+                var target = new _three.Object3D();
+                head.getWorldPosition(target.position);
+                target.applyQuaternion(camera.quaternion);
+                target.translateX(1.25);
+                target.translateY(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 () {
+                  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,
+                    inScene: true,
+                    thinkful: talkingCharacter.emotion === 'thinkful',
+                    avatar: ''
+                  });
+                }, zoomInActor ? 1200 : 0);
               }
-
-              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,
-                  inScene: true,
-                  thinkful: talkingCharacter.emotion === 'thinkful',
-                  avatar: ''
-                });
-              }, zoomInActor ? 700 : 0);
-            }
+            }, 1000 * crossFadeDuration);
           });
         } else {
           var _talkingCharacter$cha2;
@@ -323,7 +398,23 @@ var DialogComponent = function DialogComponent(_ref) {
         }
       }
     }
-  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetAnims, resetCameraView]); // Autoplay logic
+  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetAnims, resetCameraView]); // Sound logic
+
+  (0, _react.useEffect)(function () {
+    var _currentLine$audio;
+
+    if ((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'voice' && !lastSet.current) {
+      playSpeech();
+    } else if (currentLine !== null && currentLine !== void 0 && (_currentLine$audio = currentLine.audio) !== null && _currentLine$audio !== void 0 && _currentLine$audio.url) {
+      var _currentLine$audio2;
+
+      playSound(currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio2 = currentLine.audio) === null || _currentLine$audio2 === void 0 ? void 0 : _currentLine$audio2.url);
+    }
+
+    return function () {
+      stop();
+    };
+  }, [currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio3 = currentLine.audio) === null || _currentLine$audio3 === void 0 ? void 0 : _currentLine$audio3.url, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, currentMessage, lines, playSound, playSpeech, stop]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
     var timeout;
@@ -332,35 +423,41 @@ var DialogComponent = function DialogComponent(_ref) {
       if (line >= lines.length - 1 && automatic) {
         setAutomatic(false);
       } else if (automatic && currentMessage.text && !currentLine.decision) {
+        var time = 70 * (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text.length);
         timeout = setTimeout(function () {
           nextLine();
-        }, 70 * currentMessage.text.length);
+        }, time < 1400 ? 1400 : time);
       }
     }
 
     return function () {
       if (timeout) clearTimeout(timeout);
     };
-  }, [currentMessage, nextLine, autoPlay, lines.length, automatic, line, currentLine.decision]); //Positioning logic
+  }, [currentMessage, nextLine, autoPlay, lines.length, automatic, line, currentLine.decision, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio4 = currentLine.audio) === null || _currentLine$audio4 === void 0 ? void 0 : _currentLine$audio4.url]); //Positioning logic
 
-  (0, _react.useEffect)(function () {
+  var checkBubblePosition = (0, _react.useCallback)(function () {
     if (bubbleRef.current && currentLine.slots) {
       var talkingCharacter = currentLine.slots.find(function (slot) {
         return slot.talking;
       });
       var bubbleRect = bubbleRef.current.getBoundingClientRect();
-      var x = bubbleRect.x + bubbleRect.width / 2;
-      var y = bubbleRect.y - bubbleRect.height / 2;
+      var x = bubbleRect.x + bubbleRect.width - 75;
+      var y = bubbleRect.y - bubbleRect.height;
 
-      if ((x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) && currentMessage.inScene) {
+      if ((x < 0 || x > window.innerWidth) && currentMessage.inScene) {
         var child = messagePosition.current.child;
 
         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)");
+          var target = new _three.Object3D();
+          child.getWorldPosition(target.position);
+          target.applyQuaternion(camera.quaternion);
+          groupRef.current.position.copy(target.position);
           groupRef.current.updateMatrixWorld();
+          var divider = isMobile ? 10 : 6;
+          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;
 
           if (completeOutside) {
             bubbleRef.current.parentNode.style.transform = '';
@@ -380,10 +477,13 @@ var DialogComponent = function DialogComponent(_ref) {
         bubbleRef.current.parentNode.style.transform = '';
       }
     }
-  }, [currentMessage.text, camera, currentLine.slots, getAvatarURL, currentMessage.inScene]); // Animate Camera
+  }, [camera.quaternion, currentLine.slots, currentMessage.inScene, getAvatarURL]);
+  (0, _react.useEffect)(function () {
+    checkBubblePosition();
+  }, [checkBubblePosition]); // Animate Camera
 
-  (0, _fiber.useFrame)(function (_ref2, delta) {
-    var camera = _ref2.camera;
+  (0, _fiber.useFrame)(function (_ref4, delta) {
+    var camera = _ref4.camera;
 
     if (animationStart.current) {
       var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.current.position.toArray();
@@ -394,7 +494,7 @@ var DialogComponent = function DialogComponent(_ref) {
           animationTarget.current.applyQuaternion(camera.quaternion);
         }
 
-        animationTarget.current.translateX(12);
+        animationTarget.current.translateX(13);
         animationTarget.current.translateY(-5);
         animationTarget.current.translateZ(30);
       }
@@ -405,6 +505,8 @@ var DialogComponent = function DialogComponent(_ref) {
         if (lastSet.current || !messagePosition.current.child) {
           camera.copy(defaultCamera.current);
         }
+
+        checkBubblePosition();
       } else {
         camera.position.lerp(animationTarget.current.position, delta * 2.5);
       }
@@ -417,7 +519,7 @@ var DialogComponent = function DialogComponent(_ref) {
       disableBackground: true
     },
     onFinish: nextLine,
-    emitEvent: emitEvent,
+    emitEvent: emitRef.current,
     soundActions: soundActions
   });
 

package/dist/components/media-visor/components/MediaVisor.js

@@ -101,7 +101,6 @@ var VideoVisor = function VideoVisor(_ref) {
     backgroundRepeat: "no-repeat",
     backgroundPosition: "center center"
   };
-  console.log('re-render control');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "video media-visor",
     style: isAudio ? configForAudio : null

package/dist/components/text-click-puzzle-component/utils/index.js

@@ -76,8 +76,7 @@ var getRecursiveJSX = function getRecursiveJSX(jsx) {
     return /*#__PURE__*/_react.default.createElement(Type, _extends({
       key: "".concat(jsx.type, "_").concat(i)
     }, props), getRecursiveJSX(children, i, slide, onClick, onHover));
-  } // console.log('🐮', jsx);
-
+  }
 
   if (((_jsx$props3 = jsx.props) === null || _jsx$props3 === void 0 ? void 0 : _jsx$props3.children) !== null) {
     return jsx.split(' ').filter(function (word) {

package/package.json

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