@gamelearn/arcade-components 0.25.32 → 0.25.35

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

@@ -290,19 +290,20 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "conversation--layer"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "conversation arcade-conversation",
+    className: "conversation",
     style: backgroundImage ? {
       backgroundImage: "url(\"".concat(backgroundImage, "\")")
-    } : {}
+    } : null
   }, /*#__PURE__*/_react.default.createElement(_SlotList.default, listProps), /*#__PURE__*/_react.default.createElement("div", {
     className: "conversation--body"
   }, currentMessage ? /*#__PURE__*/_react.default.createElement(_Message.default, {
     current: currentMessage,
     translate: translate
   }) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "conversation--controls arcade-conversation--controls"
+    className: "conversation--controls"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "gat--btn__round ".concat(currentLine > 0 && !lastLine.decision ? '' : 'visibility--hidden'),
+    className: "gat--btn__round ".concat(currentLine > 0 && !lastLine.decision ? '' : 'disabled'),
+    disabled: currentLine > 0 && !lastLine.decision ? '' : true,
     type: "button",
     onClick: handleClickBack
   }, /*#__PURE__*/_react.default.createElement("span", {

package/dist/components/decision-component/components/DecisionBody.js

@@ -44,7 +44,8 @@ var DecisionBody = function DecisionBody(_ref) {
       currentSelectedChoice = _ref.currentSelectedChoice,
       children = _ref.children,
       translate = _ref.translate,
-      hasRewards = _ref.hasRewards;
+      hasRewards = _ref.hasRewards,
+      inScene = _ref.inScene;
 
   var _useState = (0, _react.useState)(currentSelectedChoice),
       _useState2 = _slicedToArray(_useState, 2),
@@ -73,7 +74,7 @@ var DecisionBody = function DecisionBody(_ref) {
   var BasicDecision = function BasicDecision(_ref2) {
     var defaultChildren = _ref2.children;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "popup popup__large popup__basicDecision arcade-popup__basicDecision ".concat(showingResults && currentSelectedChoice.feedback ? 'popup__feedback' : '')
+      className: "popup popup__large popup__basicDecision ".concat(showingResults && currentSelectedChoice.feedback ? 'popup__feedback' : '')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "popup--info"
     }, showingResults ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, defaultChildren, !currentSelectedChoice.feedback && hasRewards.length === 0 && /*#__PURE__*/_react.default.createElement("span", {
@@ -95,13 +96,13 @@ var DecisionBody = function DecisionBody(_ref) {
 
   var ComplexDecision = function ComplexDecision() {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "conversation--body"
+      className: "conversation--body ".concat(inScene ? 'conversation--body--inScene' : '')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "conversation--message"
     }, question !== '' && /*#__PURE__*/_react.default.createElement("span", {
       className: "conversation--main__text"
     }, question), /*#__PURE__*/_react.default.createElement(_Options.default, optionsProps)), /*#__PURE__*/_react.default.createElement("div", {
-      className: "conversation--controls arcade-conversation--controls conversation--controls--fixedbottom"
+      className: "conversation--controls conversation--controls--fixedbottom"
     }, /*#__PURE__*/_react.default.createElement("button", {
       className: "gat--btn__round disabled",
       type: "button"

package/dist/components/decision-component/components/DecisionComponent.js

@@ -54,7 +54,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var DecisionComponent = function DecisionComponent(_ref) {
   var emitEvent = _ref.emitEvent,
       soundActions = _ref.soundActions,
-      props = _objectWithoutProperties(_ref, ["emitEvent", "soundActions"]);
+      inScene = _ref.inScene,
+      props = _objectWithoutProperties(_ref, ["emitEvent", "soundActions", "inScene"]);
 
   var _props$inheritProps = props.inheritProps,
       inheritProps = _props$inheritProps === void 0 ? {} : _props$inheritProps,
@@ -119,6 +120,7 @@ var DecisionComponent = function DecisionComponent(_ref) {
     currentSelectedChoice: resultChoice,
     hasRewards: resultChoice.rewards || [],
     failed: failed,
+    inScene: inScene,
     changeOption: function changeOption(option) {
       playSound('click-ui');
       setResultChoice(option);
@@ -196,14 +198,16 @@ var DecisionComponent = function DecisionComponent(_ref) {
   };
 
   var CharactersWrapper = function CharactersWrapper(_ref4) {
-    var _inheritProps$backgro;
+    var _inheritProps$backgro, _inheritProps$backgro2;
 
     var children = _ref4.children;
+    var style = {};
+    style = (_inheritProps$backgro = inheritProps.background) !== null && _inheritProps$backgro !== void 0 && _inheritProps$backgro.img ? {
+      backgroundImage: "url(\"".concat((_inheritProps$backgro2 = inheritProps.background.img) === null || _inheritProps$backgro2 === void 0 ? void 0 : _inheritProps$backgro2.url, "\")")
+    } : null;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "conversation arcade-conversation",
-      style: inheritProps.background ? {
-        backgroundImage: "url(\"".concat((_inheritProps$backgro = inheritProps.background.img) === null || _inheritProps$backgro === void 0 ? void 0 : _inheritProps$backgro.url, "\")")
-      } : {}
+      className: "conversation ".concat(inScene ? 'conversation--inScene' : ''),
+      style: style
     }, /*#__PURE__*/_react.default.createElement(_SlotList.default, listProps, children), /*#__PURE__*/_react.default.createElement(_DecisionBody.default, bodyProps));
   };
 

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

@@ -9,22 +9,28 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _drei = require("@react-three/drei");
-
 var _fiber = require("@react-three/fiber");
 
 var _three = require("three");
 
 var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
 
+var _SpeechBubbleComponent = _interopRequireDefault(require("./SpeechBubbleComponent"));
+
 var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
 
+var _helpers = require("../../../helpers");
+
+var _HtmlPro = _interopRequireDefault(require("../../../helpers/HtmlPro"));
+
 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; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -43,25 +49,38 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var crossFadeDuration = 0.5;
+
 var DialogComponent = function DialogComponent(_ref) {
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
       actors = _ref.actors,
       soundActions = _ref.soundActions,
-      enableZoom = _ref.enableZoom;
+      zoomInActor = _ref.zoomInActor,
+      autoPlay = _ref.autoPlay;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
       line = _useState2[0],
       changeLine = _useState2[1];
 
-  var _useState3 = (0, _react.useState)({
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      automatic = _useState4[0],
+      setAutomatic = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({
     text: '',
-    name: ''
+    name: '',
+    left: false,
+    inScene: false,
+    thinkful: false,
+    voiceOver: false,
+    avatar: ''
   }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentMessage = _useState4[0],
-      setCurrentMessage = _useState4[1];
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentMessage = _useState6[0],
+      setCurrentMessage = _useState6[1];
 
   var _useThree = (0, _fiber.useThree)(function (state) {
     return [state.camera, state.scene];
@@ -73,172 +92,394 @@ var DialogComponent = function DialogComponent(_ref) {
   var loader = (0, _react.useMemo)(function () {
     return new _GLTFLoader.GLTFLoader();
   }, []);
-  var messagePosition = (0, _react.useRef)(new _three.Vector3());
   var defaultCamera = (0, _react.useRef)(camera.clone());
+  var messagePosition = (0, _react.useRef)({
+    pos: [0, 0, 0],
+    child: null
+  });
   var animationStart = (0, _react.useRef)(false);
+  var bubbleRef = (0, _react.useRef)();
+  var groupRef = (0, _react.useRef)();
+  var animationTarget = (0, _react.useRef)(new _three.Object3D());
   var currentLine = lines[line];
   var lastLine = lines[line - 1];
-  var resetAnims = (0, _react.useCallback)(function (end) {
-    var _currentLine$slots, _lastLine$slots;
-
-    var slottedCharacters = (_currentLine$slots = currentLine.slots) === null || _currentLine$slots === void 0 ? void 0 : _currentLine$slots.filter(function (slot) {
-      return slot.uid;
+  var lastSet = (0, _react.useRef)(false);
+  var translate = (0, _react.useCallback)(function (id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
     });
-    var lastSlotterCharacters = lastLine === null || lastLine === void 0 ? void 0 : (_lastLine$slots = lastLine.slots) === null || _lastLine$slots === void 0 ? void 0 : _lastLine$slots.filter(function (slot) {
-      return slot.uid;
+  }, [emitEvent]);
+  var getCurrentVisible = (0, _react.useCallback)(function (uid) {
+    var object;
+    scene.traverseVisible(function (node) {
+      if (node.uid === uid && !object) {
+        object = node;
+      }
     });
+    return object;
+  }, [scene]);
+  var getAvatarURL = (0, _react.useCallback)(function (slot) {
+    var _slot$character, _slot$character$resou;
+
+    var object = actors.find(function (element) {
+      if (element.uid === slot.uid) {
+        return element;
+      }
 
-    if (end) {
-      slottedCharacters === null || slottedCharacters === void 0 ? void 0 : slottedCharacters.forEach(function (slot) {
-        var element = scene.getObjectByName(slot.uid);
-
-        if (element) {
-          var mixer = element.userData.mixer;
-          mixer.stopAllAction();
-          var action = mixer.clipAction(element.userData.defaultAnim, element);
-          action.play();
+      return '';
+    });
+    return ((_slot$character = slot.character) === null || _slot$character === void 0 ? void 0 : (_slot$character$resou = _slot$character.resource) === null || _slot$character$resou === void 0 ? void 0 : _slot$character$resou.url) || (object === null || object === void 0 ? void 0 : object.completeUrl) || '';
+  }, [actors]);
+  var loadEmotion = (0, _react.useCallback)(function (slot, element) {
+    var _slot$character2;
+
+    var onLoadAnim = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
+    var animation = (_slot$character2 = slot.character) === null || _slot$character2 === void 0 ? void 0 : _slot$character2.resource.animations[slot.emotion];
+
+    if (animation) {
+      var mixer = element.userData.mixer;
+      loader.load(animation === null || animation === void 0 ? void 0 : animation.url, function (anim) {
+        var emotionClip = anim.animations[0];
+        var defaultClip = element.userData.defaultAnim;
+        var emotionAction = mixer.clipAction(emotionClip, element);
+        var defaultAction = mixer.clipAction(defaultClip, element);
+
+        if (element.userData.currentEmotion) {
+          element.userData.lastEmotion = element.userData.currentEmotion;
         }
+
+        element.userData.currentEmotion = emotionAction;
+        onLoadAnim(mixer, emotionAction, defaultAction);
       });
     }
+  }, [loader]); // Reset currentEmotion to defaultAnim
+
+  var executeAnimation = function executeAnimation(element) {
+    var mixer = element.userData.mixer;
+    var startAction = mixer.clipAction(element.userData.currentEmotion.getClip(), element);
+    var defaultAction = mixer.clipAction(element.userData.defaultAnim, element);
 
-    lastSlotterCharacters === null || lastSlotterCharacters === void 0 ? void 0 : lastSlotterCharacters.forEach(function (slot) {
-      var element = scene.getObjectByName(slot.uid);
+    if (element.userData.currentEmotion !== defaultAction) {
+      mixer.stopAllAction();
+      (0, _helpers.executeCrossFade)(startAction, defaultAction, crossFadeDuration);
 
-      if (element) {
-        var mixer = element.userData.mixer;
-        mixer.stopAllAction();
-        var action = mixer.clipAction(element.userData.defaultAnim, element);
-        action.play();
+      if (element.userData.currentEmotion) {
+        element.userData.lastEmotion = element.userData.currentEmotion;
       }
-    });
-  }, [lastLine === null || lastLine === void 0 ? void 0 : lastLine.slots, currentLine, scene]);
-  var nextLine = (0, _react.useCallback)(function () {
-    resetAnims(line >= lines.length - 1);
 
+      element.userData.currentEmotion = defaultAction;
+    }
+  };
+
+  var resetAnims = (0, _react.useCallback)(function () {
+    var end = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+    if (end) {
+      scene.traverseVisible(function (node) {
+        if (node.userData.mixer && node.userData.currentEmotion) {
+          executeAnimation(node);
+        }
+      });
+    } else if (lastLine !== null && lastLine !== void 0 && lastLine.slots) {
+      var slottedCharacters = lastLine.slots.filter(function (slot) {
+        return slot.uid;
+      });
+      slottedCharacters.forEach(function (slot) {
+        var element = getCurrentVisible(slot.uid);
+
+        if (element && element.userData.currentEmotion) {
+          executeAnimation(element);
+        }
+      });
+    }
+  }, [getCurrentVisible, lastLine === null || lastLine === void 0 ? void 0 : lastLine.slots, scene]);
+  var backLine = (0, _react.useCallback)(function () {
+    if (lastLine && !lastLine.decision) {
+      changeLine(line - 1);
+    }
+  }, [lastLine, line]);
+  var nextLine = (0, _react.useCallback)(function () {
     if (line < lines.length - 1) {
       changeLine(line + 1);
     } else {
-      messagePosition.current = defaultCamera.current.position.clone().add(new _three.Vector3(0, 5, -35));
-      animationStart.current = true;
-      setCurrentMessage({
-        text: ''
-      });
-      setTimeout(function () {
+      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);
+      }
+
+      setTimeout(function () {
         emitEvent({
           type: 'success'
         });
-      }, 2000);
-    }
-  }, [camera, emitEvent, line, lines.length, resetAnims]);
-  var onKeyCallback = (0, _react.useCallback)(function (e) {
-    if (e.keyCode === 32) {
-      nextLine();
+      }, currentLine.decision ? 0 : 700);
     }
-  }, [nextLine]);
+  }, [camera, currentLine.decision, emitEvent, line, lines.length, resetAnims, zoomInActor]);
+  var resetCameraView = (0, _react.useCallback)(function () {
+    messagePosition.current.child = null;
+    messagePosition.current.parent = null;
+    if (zoomInActor) animationStart.current = true;
+  }, [zoomInActor]); // Position bubble over talking character/and switch emotions
+
   (0, _react.useEffect)(function () {
-    setCurrentMessage({
-      text: ''
-    });
-    if (currentLine.decision) return;
-    var talkingCharacter = currentLine.slots.find(function (slot) {
-      return slot.talking;
-    });
-    var slottedCharacters = currentLine.slots.filter(function (slot) {
-      return slot.uid;
-    });
-    var box = new _three.Box3();
-    slottedCharacters.forEach(function (slot) {
-      var element = scene.getObjectByName(slot.uid);
-
-      if (element) {
-        var mixer = element.userData.mixer;
-        var animation = slot.character.resource.animations[slot.emotion];
-        loader.load(animation.url, function (anim) {
-          mixer.stopAllAction();
-          var clip = anim.animations[0];
-          var action = mixer.clipAction(clip, element);
-          action.play();
-
-          if (talkingCharacter.uid === element.name) {
-            var head = element.getObjectByName('Head_M');
-            var size = box.setFromObject(head).getSize(new _three.Vector3());
-            messagePosition.current = head.getWorldPosition(new _three.Vector3());
-            messagePosition.current.add(new _three.Vector3(size.x + 3, 2.5, 0));
-
-            if (enableZoom) {
-              animationStart.current = true;
+    setCurrentMessage({});
+
+    if (currentLine.decision) {
+      resetCameraView();
+      return;
+    } else if (currentLine.voiceOver) {
+      resetCameraView();
+      setCurrentMessage({
+        text: currentLine.text,
+        name: currentLine.alias || "[ ".concat(translate('storylines.misc.voiceOver'), " ]"),
+        left: false,
+        inScene: false,
+        voiceOver: true,
+        thinkful: false,
+        avatar: ''
+      });
+    } else if (!lastSet.current) {
+      var talkingCharacter = currentLine.slots.find(function (slot) {
+        return slot.talking;
+      });
+      var slottedCharacters = currentLine.slots.filter(function (slot) {
+        return slot.uid && !slot.talking;
+      });
+      resetAnims(false); // Check not talking elements emotion
+
+      slottedCharacters.forEach(function (slot) {
+        var element = getCurrentVisible(slot.uid);
+
+        if (element) {
+          loadEmotion(slot, element, function (mixer, action, defaultAction) {
+            var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
+
+            if (startAction !== action) {
+              mixer.stopAllAction();
+              (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
             }
+          });
+        }
+      }); // Talking element logic
 
-            setCurrentMessage({
-              text: talkingCharacter.text,
-              name: talkingCharacter.alias
-            });
-          }
+      if (talkingCharacter) {
+        var element = getCurrentVisible(talkingCharacter.uid);
+        var object = actors.find(function (a) {
+          return a.uid === talkingCharacter.uid;
         });
+
+        if (element && !lastSet.current) {
+          loadEmotion(talkingCharacter, element, function (mixer, action, defaultAction) {
+            var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
+
+            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;
+              }
+
+              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);
+            }
+          });
+        } else {
+          var _talkingCharacter$cha2;
+
+          resetCameraView();
+          setCurrentMessage({
+            text: talkingCharacter.text,
+            name: talkingCharacter.alias || ((_talkingCharacter$cha2 = talkingCharacter.character) === null || _talkingCharacter$cha2 === void 0 ? void 0 : _talkingCharacter$cha2.name) || object.name,
+            left: false,
+            inScene: false,
+            thinkful: talkingCharacter.emotion === 'thinkful',
+            avatar: getAvatarURL(talkingCharacter)
+          });
+        }
       }
-    });
-  }, [camera, currentLine, enableZoom, lastLine, scene, loader]);
+    }
+  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetAnims, resetCameraView]); // Autoplay logic
+
   (0, _react.useEffect)(function () {
-    window.addEventListener('keydown', onKeyCallback);
+    var timeout;
+
+    if (autoPlay) {
+      if (line >= lines.length - 1 && automatic) {
+        setAutomatic(false);
+      } else if (automatic && currentMessage.text && !currentLine.decision) {
+        timeout = setTimeout(function () {
+          nextLine();
+        }, 70 * currentMessage.text.length);
+      }
+    }
+
     return function () {
-      window.removeEventListener('keydown', onKeyCallback);
+      if (timeout) clearTimeout(timeout);
     };
-  }, [onKeyCallback]);
+  }, [currentMessage, nextLine, autoPlay, lines.length, automatic, line, currentLine.decision]); //Positioning logic
+
+  (0, _react.useEffect)(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;
+
+      if ((x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) && 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)");
+          groupRef.current.updateMatrixWorld();
+
+          if (completeOutside) {
+            bubbleRef.current.parentNode.style.transform = '';
+            messagePosition.current.child = null;
+            messagePosition.current.parent = null;
+          }
+
+          setCurrentMessage(function (old) {
+            return _objectSpread(_objectSpread({}, old), {}, {
+              left: false,
+              inScene: !completeOutside,
+              avatar: getAvatarURL(talkingCharacter)
+            });
+          });
+        }
+      } else {
+        bubbleRef.current.parentNode.style.transform = '';
+      }
+    }
+  }, [currentMessage.text, camera, currentLine.slots, getAvatarURL, currentMessage.inScene]); // Animate Camera
+
   (0, _fiber.useFrame)(function (_ref2, delta) {
     var camera = _ref2.camera;
 
     if (animationStart.current) {
-      var target = messagePosition.current.clone();
-      target.add(new _three.Vector3(0, -5, 35));
-      camera.position.lerp(target, delta * 2.5);
+      var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.current.position.toArray();
+      animationTarget.current.position.fromArray(targetPosition);
+
+      if (messagePosition.current.parent) {
+        if (!animationTarget.current.quaternion.equals(camera.quaternion)) {
+          animationTarget.current.applyQuaternion(camera.quaternion);
+        }
 
-      if (target.distanceTo(camera.position) < 1) {
+        animationTarget.current.translateX(12);
+        animationTarget.current.translateY(-5);
+        animationTarget.current.translateZ(30);
+      }
+
+      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(animationTarget.current.position, delta * 2.5);
       }
     }
   });
 
   var decisionPayload = _objectSpread(_objectSpread({}, currentLine.payload), {}, {
+    inheritProps: {
+      slots: [],
+      disableBackground: true
+    },
     onFinish: nextLine,
     emitEvent: emitEvent,
     soundActions: soundActions
   });
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentLine.decision ? /*#__PURE__*/_react.default.createElement(_drei.Html, {
+  var cleanStyle = {
+    width: '100vw',
+    height: '100vh',
+    position: 'static'
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentLine.decision ? /*#__PURE__*/_react.default.createElement(_HtmlPro.default, {
+    zIndexRange: [3, 0],
+    style: cleanStyle,
+    calculatePosition: function calculatePosition() {
+      return [0, 0];
+    }
+  }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, _extends({
+    inScene: true
+  }, decisionPayload))) : null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("group", {
+    ref: groupRef,
+    position: messagePosition.current.pos
+  }, /*#__PURE__*/_react.default.createElement(_HtmlPro.default, {
+    zIndexRange: [3, 0],
+    calculatePosition: currentMessage.inScene ? undefined : function () {
+      return [0, 0];
+    },
+    style: currentMessage.inScene ? {
+      position: 'static'
+    } : cleanStyle
+  }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
+    ref: bubbleRef,
+    message: currentMessage
+  }))), /*#__PURE__*/_react.default.createElement(_HtmlPro.default, {
     style: {
       width: '100vw',
       height: '100vh'
     },
+    zIndexRange: [3, 0],
+    onOcclude: function onOcclude() {},
     calculatePosition: function calculatePosition() {
       return [0, 0];
     }
-  }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, decisionPayload)) : null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_drei.Html, {
-    position: messagePosition.current,
-    zIndexRange: [3, 0],
-    sprite: true
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      backgroundColor: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      borderRadius: '10px',
-      border: '2px solid black',
-      padding: '5px',
-      width: '240px',
-      maxWidth: '400px'
-    }
+    className: "dialog-component-controls"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    disabled: line <= 0 || (lastLine === null || lastLine === void 0 ? void 0 : lastLine.decision),
+    type: "button",
+    onClick: backLine,
+    className: "gat--btn__round ".concat(line <= 0 || lastLine !== null && lastLine !== void 0 && lastLine.decision ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      borderBottom: '2px solid black'
-    }
-  }, currentMessage.name), /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      fontSize: '20px',
-      wordWrap: 'break-word',
-      overflow: 'auto'
-    }
-  }, currentMessage.text))) : null);
+    className: "icon-back"
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    className: "gat--btn__round",
+    type: "button",
+    onClick: nextLine
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-next"
+  }))))) : null);
 };
 
 var _default = DialogComponent;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var message = _ref.message;
+
+  var getAvatar = function getAvatar() {
+    var avatarUrl = message.avatar;
+    var idx = avatarUrl.lastIndexOf('/');
+
+    if (avatarUrl.includes('object')) {
+      return avatarUrl.slice(0, idx).concat('/mini-thumbnail.png');
+    } else if (avatarUrl.includes('character')) {
+      return avatarUrl.slice(0, idx).concat('/mini-face.png');
+    } else {
+      return avatarUrl;
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: "\n          speech-bubble\n          ".concat(message.left && message.inScene ? 'speech-bubble--arrow-left' : '', "\n          ").concat(!message.left && message.inScene ? 'speech-bubble--arrow-right' : '', "\n          ").concat(message.thinkful || message.voiceOver ? 'speech-bubble--italic' : '', "\n      ")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "speech-bubble__content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "speech-bubble__header"
+  }, message.thinkful ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "icon-bubble-thinkful-black"
+  }) : null, message.voiceOver ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "icon-narrator"
+  }) : null, !message.inScene && message.avatar ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "speech-bubble__avatar"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: getAvatar(),
+    alt: message.name
+  })) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "speech-bubble__title"
+  }, message.name)), message.text ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "speech-bubble__text"
+  }, message.text) : null)));
+});
+
+var _default = SpeechBubbleComponent;
+exports.default = _default;

package/dist/components/dialog-component/mocks/mockForStory.js

@@ -28,12 +28,13 @@ var mockProps = {
   emitEvent: _mocker.emitEvent,
   soundActions: _mocker.soundActions,
   setShowPoints: _mocker.setShowPoints,
+  autoPlay: false,
   lines: [{
     flex: true,
     slots: [{
       emotion: '',
       text: '',
-      uid: 'DbKslR',
+      uid: null,
       talking: false,
       alias: 'paco',
       text_labelId: 'text_0_0_nlrZh8Np',
@@ -61,10 +62,15 @@ var mockProps = {
       alias_labelId: 'alias_0_3_nlrZjLWB'
     }, {
       emotion: 'neutral',
-      text: 'Hola!',
-      uid: 'kjTHqt',
+      text: 'En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco. En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga an',
+      uid: 'snHJhg',
       talking: true,
-      alias: 'manolo',
+      character: {
+        resource: {
+          animations: animations
+        }
+      },
+      alias: 'Manolo',
       text_labelId: 'text_0_4_nlrZjUV9',
       alias_labelId: 'alias_0_4_nlrZj81d'
     }],
@@ -77,7 +83,7 @@ var mockProps = {
     slots: [{
       emotion: '',
       text: '',
-      uid: 'DbKslR',
+      uid: null,
       talking: false,
       alias: 'paco',
       text_labelId: 'text_0_0_nlrZh8Np',
@@ -106,9 +112,14 @@ var mockProps = {
     }, {
       emotion: 'neutral',
       text: 'Hola!',
-      uid: 'kjTHqi',
+      character: {
+        resource: {
+          animations: animations
+        }
+      },
+      uid: 'jLKRKJ',
       talking: true,
-      alias: 'manolo',
+      alias: 'Manolo',
       text_labelId: 'text_0_4_nlrZjUV9',
       alias_labelId: 'alias_0_4_nlrZj81d'
     }],
@@ -121,7 +132,7 @@ var mockProps = {
     slots: [{
       emotion: '',
       text: '',
-      uid: 'DbKslR',
+      uid: null,
       talking: false,
       alias: 'paco',
       text_labelId: 'text_0_0_nlrZh8Np',
@@ -150,9 +161,14 @@ var mockProps = {
     }, {
       emotion: 'neutral',
       text: 'Hola!',
-      uid: 'kjTHqx',
+      uid: 'snHJhg',
+      character: {
+        resource: {
+          animations: animations
+        }
+      },
       talking: true,
-      alias: 'manolo',
+      alias: 'Manolo',
       text_labelId: 'text_0_4_nlrZjUV9',
       alias_labelId: 'alias_0_4_nlrZj81d'
     }],
@@ -203,7 +219,7 @@ var mockProps = {
     slots: [{
       emotion: 'angry',
       text: '',
-      uid: 'DbKslR',
+      uid: null,
       talking: false,
       alias: 'paco',
       text_labelId: 'text_0_0_nlrZh8Np',
@@ -232,9 +248,14 @@ var mockProps = {
     }, {
       emotion: 'neutral',
       text: 'Hola!',
-      uid: 'kjTHqi',
+      uid: 'snHJhg',
       talking: true,
-      alias: 'manolo',
+      character: {
+        resource: {
+          animations: animations
+        }
+      },
+      alias: 'Manolo',
       text_labelId: 'text_0_4_nlrZjUV9',
       alias_labelId: 'alias_0_4_nlrZj81d'
     }],
@@ -250,45 +271,8 @@ var mockProps = {
       url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/605369a5901f3e00123b81ca/b27bb40dcb1189d14012131a35b48a36.jpeg'
     }
   },
-  characters: [{
-    name: 'Testing',
-    resourceId: '5f68d7b6a373890011a78a11',
-    resource: {
-      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/5981fca94d82290bcbe957fe/object/5eff09c2085be00011aae087/pr0238_yacht_001.glb'
-    },
-    type: 'object',
-    uid: 'DbKslR'
-  }, {
-    name: 'Male senior dark-skinned 01',
-    resourceId: '5f5214cec39e26001123797f',
-    resource: {
-      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/5981fca94d82290bcbe957fe/character/5f5214cec39e26001123797f/ch0112_philip_001.glb',
-      animations: animations
-    },
-    type: 'character',
-    uid: 'kjTHqi'
-  }, {
-    name: 'Female senior light-skinned 01',
-    resourceId: '5f5214cec39e26001123797f',
-    resource: {
-      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/5981fca94d82290bcbe957fe/character/5f60759328beb100113b694c/ch0116_bima_001_rig_v01_llaveronuevo.glb',
-      animations: {
-        neutral: {
-          resource: {}
-        }
-      }
-    },
-    type: 'character',
-    uid: 'kjTHqt'
-  }, {
-    name: 'Taxi',
-    resourceId: '5f5214cec39e26001123797f',
-    resource: {
-      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/5981fca94d82290bcbe957fe/object/5e53b649ef1f60000fb9cc1c/draco_pr0065_car_004.glb'
-    },
-    type: 'object',
-    uid: 'kjTHqx'
-  }]
+  characters: [],
+  actors: []
 };
 exports.mockProps = mockProps;
 var mockScene = {

package/dist/helpers/HtmlPro.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _drei = require("@react-three/drei");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var HtmlPro = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var calculatePosition = _ref.calculatePosition,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["calculatePosition", "children"]);
+
+  return calculatePosition ? /*#__PURE__*/_react.default.createElement(_drei.Html, _extends({
+    ref: ref,
+    calculatePosition: calculatePosition
+  }, props), children) : /*#__PURE__*/_react.default.createElement(_drei.Html, _extends({
+    ref: ref
+  }, props), children);
+});
+
+var _default = HtmlPro;
+exports.default = _default;

package/dist/helpers/index.js

@@ -3,12 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.executeCrossFade = exports.getObjectPosition = exports.cameraFitAnyObject = exports.roundFloat = exports.usePrevious = exports.formatMessage = void 0;
+exports.executeCrossFade = exports.screenToVector = exports.vectorToScreen = exports.getObjectPosition = exports.cameraFitAnyObject = exports.roundFloat = exports.vectorTranslateY = exports.vectorTranslateX = exports.vectorTranslateZ = exports.vectorTranslateOnAxis = exports.usePrevious = exports.formatMessage = exports.zAxis = exports.yAxis = exports.xAxis = void 0;
 
 var _react = require("react");
 
 var _three = require("three");
 
+var xAxis = new _three.Vector3(1, 0, 0);
+exports.xAxis = xAxis;
+var yAxis = new _three.Vector3(0, 1, 0);
+exports.yAxis = yAxis;
+var zAxis = new _three.Vector3(0, 0, 1);
+exports.zAxis = zAxis;
+
 var formatMessage = function formatMessage(text) {
   var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var result = text;
@@ -30,6 +37,31 @@ var usePrevious = function usePrevious(value) {
 
 exports.usePrevious = usePrevious;
 
+var vectorTranslateOnAxis = function vectorTranslateOnAxis(axis, amount, object) {
+  var result = axis.clone().applyQuaternion(object.quaternion);
+  return result.multiplyScalar(amount).clone();
+};
+
+exports.vectorTranslateOnAxis = vectorTranslateOnAxis;
+
+var vectorTranslateZ = function vectorTranslateZ(amount, object) {
+  return vectorTranslateOnAxis(zAxis, amount, object);
+};
+
+exports.vectorTranslateZ = vectorTranslateZ;
+
+var vectorTranslateX = function vectorTranslateX(amount, object) {
+  return vectorTranslateOnAxis(xAxis, amount, object);
+};
+
+exports.vectorTranslateX = vectorTranslateX;
+
+var vectorTranslateY = function vectorTranslateY(amount, object) {
+  return vectorTranslateOnAxis(yAxis, amount, object);
+};
+
+exports.vectorTranslateY = vectorTranslateY;
+
 var roundFloat = function roundFloat(number, decimals) {
   return parseFloat(number.toFixed(decimals));
 };
@@ -39,6 +71,8 @@ exports.roundFloat = roundFloat;
 var cameraFitAnyObject = function cameraFitAnyObject(object, camera) {
   var uOff = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   var controls = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var clone = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var clonedCamera = camera.clone();
   var offset = uOff || 1.25;
   var boundingBox = new _three.Box3();
   boundingBox.setFromObject(object);
@@ -46,27 +80,33 @@ var cameraFitAnyObject = function cameraFitAnyObject(object, camera) {
   var center = new _three.Vector3(0, boundingBoxCenter.y, 0);
   var size = boundingBox.getSize(new _three.Vector3());
   var maxDim = Math.max(size.x, size.y, size.z);
-  var fov = camera.fov * (Math.PI / 180);
+  var fov = clonedCamera.fov * (Math.PI / 180);
   var cameraZ = Math.abs(maxDim * Math.sqrt(2) / 2 * Math.tan(fov * 2));
   cameraZ *= offset;
   var objectWorldPosition = new _three.Vector3();
   objectWorldPosition.setFromMatrixPosition(object.matrixWorld);
   var directionVector = new _three.Vector3(1, 1, 1);
   var unitDirectionVector = directionVector.normalize();
-  camera.position.copy(unitDirectionVector.multiplyScalar(cameraZ));
-  camera.lookAt(objectWorldPosition);
+  clonedCamera.position.copy(unitDirectionVector.multiplyScalar(cameraZ));
+  clonedCamera.lookAt(objectWorldPosition);
   var minZ = boundingBox.min.z;
   var cameraToFarEdge = minZ < 0 ? -minZ + cameraZ : cameraZ - minZ;
-  camera.far = cameraToFarEdge * 3;
-  camera.near = 0.01;
-  camera.updateProjectionMatrix();
-  camera.lookAt(center);
+  clonedCamera.far = cameraToFarEdge * 3;
+  clonedCamera.near = 0.01;
+  clonedCamera.updateProjectionMatrix();
+  clonedCamera.lookAt(center);
 
   if (controls) {
     controls.target = center;
     controls.maxDistance = cameraToFarEdge * 2;
     controls.saveState();
   }
+
+  if (clone) {
+    return clonedCamera;
+  } else {
+    camera.copy(clonedCamera);
+  }
 };
 
 exports.cameraFitAnyObject = cameraFitAnyObject;
@@ -87,6 +127,28 @@ var getObjectPosition = function getObjectPosition(object, camera, canvas) {
 
 exports.getObjectPosition = getObjectPosition;
 
+var vectorToScreen = function vectorToScreen(vector, camera) {
+  var width = window.innerWidth,
+      height = window.innerHeight;
+  var widthHalf = width / 2,
+      heightHalf = height / 2;
+  var pos = vector.clone();
+  pos.project(camera);
+  pos.x = pos.x * widthHalf + widthHalf;
+  pos.y = -(pos.y * heightHalf) + heightHalf;
+  return pos;
+};
+
+exports.vectorToScreen = vectorToScreen;
+
+var screenToVector = function screenToVector(vector, camera) {
+  var clone = vector.clone();
+  clone.z = -1;
+  return clone.unproject(camera);
+};
+
+exports.screenToVector = screenToVector;
+
 var setWeight = function setWeight(action, weight) {
   action.enabled = true;
   action.setEffectiveTimeScale(1);
@@ -94,6 +156,7 @@ var setWeight = function setWeight(action, weight) {
 };
 
 var executeCrossFade = function executeCrossFade(startAction, endAction, duration) {
+  if (startAction === endAction) return;
   startAction.play();
   startAction.reset();
   endAction.reset();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "0.25.32",
+  "version": "0.25.35",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -59,7 +59,7 @@
     "@babel/cli": "7.12.10",
     "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
-    "@gamelearn/arcade-styles": "0.2.3",
+    "@gamelearn/arcade-styles": "0.2.4",
     "@react-three/test-renderer": "6.0.6",
     "@storybook/addon-actions": "6.1.11",
     "@storybook/addon-essentials": "6.1.11",