@gamelearn/arcade-components 1.35.8-hotfix → 2.0.2

package/dist/components/auto-evaluation-component/components/AutoEvaluation.js

@@ -106,7 +106,9 @@ var AutoEvaluation = function AutoEvaluation(_ref) {
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "test--container__overlay"
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "test--container",
     dir: "auto"
   }, phase === 'start' && /*#__PURE__*/_react.default.createElement(_StartScreen.default, {
@@ -157,7 +159,7 @@ var AutoEvaluation = function AutoEvaluation(_ref) {
   })))), phase === 'end' && /*#__PURE__*/_react.default.createElement(_EndScreen.default, {
     onFinish: close,
     translate: translate
-  }));
+  })));
 };
 
 var _default = AutoEvaluation;

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

@@ -59,7 +59,7 @@ var characterMs = 75;
 var minMs = 1400;
 
 var ConversationProViewer = function ConversationProViewer(_ref) {
-  var _background$img, _currentLineData$slot3, _currentMessage$text;
+  var _background$img, _currentLineData$slot;
 
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
@@ -110,12 +110,12 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
   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 voiceOver = currentLineData.voiceOver,
-      decision = currentLineData.decision;
   var voiceOverSlots = [];
   var isBranched = !!edges;
   var isVoiceOver = voiceOver || currentLineData.type === 'conversationalNarration';
   var isDecision = decision || currentLineData.type === 'conversationalDecision';
+  var voiceOver = currentLineData.voiceOver,
+      decision = currentLineData.decision;
   var isFlex = currentLineData.flex;
 
   var _useState13 = (0, _react.useState)([]),
@@ -154,13 +154,11 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     });
   }, [emitEvent]);
   var getCurrentMessage = (0, _react.useCallback)(function () {
-    var _currentLineData$slot, _currentLineData$slot2;
-
     if (isVoiceOver) {
       return currentLineData;
     }
 
-    var currentMessage = currentLineData === null || currentLineData === void 0 ? void 0 : (_currentLineData$slot = currentLineData.slots) === null || _currentLineData$slot === void 0 ? void 0 : _currentLineData$slot.find(function (slot) {
+    var currentMessage = currentLineData.slots.find(function (slot) {
       return slot.uid && slot.talking;
     });
 
@@ -169,7 +167,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     } // Old conversational schema
 
 
-    return currentLineData === null || currentLineData === void 0 ? void 0 : (_currentLineData$slot2 = currentLineData.slots) === null || _currentLineData$slot2 === void 0 ? void 0 : _currentLineData$slot2.find(function (slot) {
+    return currentLineData.slots.find(function (slot) {
       return slot.uid && slot.text;
     });
   }, [currentLineData, isVoiceOver]);
@@ -188,10 +186,9 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   var leftWithSlots = lines.slice(0, currentLine + 1).reverse().find(function (line) {
     return line.slots;
   });
-  var hasCharacters = !isDecision && ((_currentLineData$slot3 = currentLineData.slots) === null || _currentLineData$slot3 === void 0 ? void 0 : _currentLineData$slot3.filter(function (slot) {
+  var hasCharacters = !isDecision && ((_currentLineData$slot = currentLineData.slots) === null || _currentLineData$slot === void 0 ? void 0 : _currentLineData$slot.filter(function (slot) {
     return slot.uid;
   }).length);
-  var autoPlayTime = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text = currentMessage.text) === null || _currentMessage$text === void 0 ? void 0 : _currentMessage$text.length) || 0);
   var currentSlots = [];
 
   if (currentLineData.slots) {
@@ -348,7 +345,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
     if (isBranched) {
       handleBranchDirection(false);
-    } else if (!previousLineWasDecision()) {
+    } else if (currentLine > 0) {
       setCurrentLine(currentLine - 1);
     }
 
@@ -383,9 +380,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   };
 
   var autoplayCond = automatic && !isDecision;
-  var disableBackButton = (0, _react.useMemo)(function () {
-    return currentLine === 0 || previousLineWasDecision();
-  }, [currentLine, previousLineWasDecision]);
+  var disableBackButton = currentLine === 0 || previousLineWasDecision();
   (0, _useEkho.default)({
     audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
     volume: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioVolume,
@@ -415,32 +410,26 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   (0, _react.useEffect)(function () {
     var _currentMessage$emoti2;
 
-    var timeout;
-
-    if (((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed) && !(currentMessage !== null && currentMessage !== void 0 && (_currentMessage$emoti2 = currentMessage.emotion) !== null && _currentMessage$emoti2 !== void 0 && _currentMessage$emoti2.includes('think'))) {
+    if ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' && !(currentMessage !== null && currentMessage !== void 0 && (_currentMessage$emoti2 = currentMessage.emotion) !== null && _currentMessage$emoti2 !== void 0 && _currentMessage$emoti2.includes('think'))) {
       setTTsStart(true);
-      timeout = setTimeout(function () {
-        setTTsStart(false);
-      }, autoPlayTime < minMs ? minMs : autoPlayTime);
     }
-
-    return function () {
-      if (timeout) clearTimeout(timeout);
-    };
-  }, [audioFailed, currentLineData, currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.emotion, autoPlayTime]); // Autoplay logic
+  }, [currentLineData, currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.emotion]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
     if (autoplayCond && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed)) {
-      // if it's not last node
+      var _currentMessage$text;
+
+      var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text = currentMessage.text) === null || _currentMessage$text === void 0 ? void 0 : _currentMessage$text.length) || 0); // if it's not last node
+
       if (!isEndNode()) {
-        start(handleClickNext, autoPlayTime < minMs ? minMs : autoPlayTime);
+        start(handleClickNext, time < minMs ? minMs : time);
       }
     }
 
     return function () {
       stop();
     };
-  }, [currentMessage, start, stop, handleClickNext, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoplayCond, audioFailed, lines, isEndNode, autoPlayTime]); // Calculate start node
+  }, [currentMessage, start, stop, handleClickNext, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoplayCond, audioFailed, lines, isEndNode]); // Calculate start node
 
   (0, _react.useEffect)(function () {
     if (isBranched && !mounted) {

package/dist/components/conversational-pro-component/components/scene/Panel.js

@@ -29,18 +29,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _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."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var isMobile = (0, _deviceDetection.DeviceDetection)();
 var defaultCamPos = [0, 14.63, 16];
 
@@ -53,12 +41,6 @@ function Panel(_ref) {
   var cameraRef = (0, _react.useRef)(null);
   var sceneRef = (0, _react.useRef)(null);
   var isCharacter = character.type === 'character';
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      talking = _useState2[0],
-      setTalking = _useState2[1];
-
   var model = (0, _react.useRef)();
   var defaultClip = (0, _react.useRef)();
   var emotion = (0, _react.useMemo)(function () {
@@ -76,36 +58,27 @@ function Panel(_ref) {
 
     return {};
   }, [character.emotion, character === null || character === void 0 ? void 0 : (_character$resource4 = character.resource) === null || _character$resource4 === void 0 ? void 0 : _character$resource4.animations, isCharacter]);
-  var resetAnimation = (0, _react.useCallback)(function () {
-    var _model$current$userDa = model.current.userData,
-        mixer = _model$current$userDa.mixer,
-        defaultAnim = _model$current$userDa.defaultAnim,
-        emotionClip = _model$current$userDa.emotionClip;
-
-    if (defaultAnim && emotionClip) {
-      var emotionAction = mixer.clipAction(emotionClip, model.current);
-      var defaultAction = mixer.clipAction(defaultAnim, model.current);
-      mixer.stopAllAction();
-      (0, _helpers.executeCrossFade)(emotionAction, defaultAction);
-      setTalking(false);
-    }
-  }, []);
   (0, _react.useEffect)(function () {
-    if (model.current) {
-      if (active) {
-        if (ttsStarted) {
-          var _character$resource5, _character$resource5$, _character$resource5$2;
-
-          (0, _helpers.executeTalkingAnimation)(model.current, character === null || character === void 0 ? void 0 : (_character$resource5 = character.resource) === null || _character$resource5 === void 0 ? void 0 : (_character$resource5$ = _character$resource5.animations) === null || _character$resource5$ === void 0 ? void 0 : (_character$resource5$2 = _character$resource5$.talking) === null || _character$resource5$2 === void 0 ? void 0 : _character$resource5$2.url);
-          setTalking(true);
-        } else {
-          resetAnimation();
+    if (model.current && active) {
+      if (ttsStarted) {
+        var _character$resource5, _character$resource5$, _character$resource5$2;
+
+        (0, _helpers.executeTalkingAnimation)(model.current, character === null || character === void 0 ? void 0 : (_character$resource5 = character.resource) === null || _character$resource5 === void 0 ? void 0 : (_character$resource5$ = _character$resource5.animations) === null || _character$resource5$ === void 0 ? void 0 : (_character$resource5$2 = _character$resource5$.talking) === null || _character$resource5$2 === void 0 ? void 0 : _character$resource5$2.url);
+      } else {
+        var _model$current$userDa = model.current.userData,
+            mixer = _model$current$userDa.mixer,
+            defaultAnim = _model$current$userDa.defaultAnim,
+            emotionClip = _model$current$userDa.emotionClip;
+
+        if (defaultAnim && emotionClip) {
+          var emotionAction = mixer.clipAction(emotionClip, model.current);
+          var defaultAction = mixer.clipAction(defaultAnim, model.current);
+          mixer.stopAllAction();
+          (0, _helpers.executeCrossFade)(emotionAction, defaultAction);
         }
-      } else if (talking) {
-        resetAnimation();
       }
     }
-  }, [character === null || character === void 0 ? void 0 : (_character$resource6 = character.resource) === null || _character$resource6 === void 0 ? void 0 : (_character$resource6$ = _character$resource6.animations) === null || _character$resource6$ === void 0 ? void 0 : (_character$resource6$2 = _character$resource6$.talking) === null || _character$resource6$2 === void 0 ? void 0 : _character$resource6$2.url, ttsStarted, active, resetAnimation, talking]);
+  }, [character === null || character === void 0 ? void 0 : (_character$resource6 = character.resource) === null || _character$resource6 === void 0 ? void 0 : (_character$resource6$ = _character$resource6.animations) === null || _character$resource6$ === void 0 ? void 0 : (_character$resource6$2 = _character$resource6$.talking) === null || _character$resource6$2 === void 0 ? void 0 : _character$resource6$2.url, ttsStarted, active]);
   var onLoadElement = (0, _react.useCallback)(function (object) {
     if (cameraRef.current) {
       var boundingBox = new _three.Box3();

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

@@ -212,22 +212,23 @@ var DialogComponent = function DialogComponent(_ref) {
     var lastEdge = edges.find(function (edge) {
       return edge.fromId === lastNodeId;
     });
-    var lastL = lines.find(function (l) {
-      return l.id === lastEdge.fromId;
+    var lastLine = lines.find(function (line) {
+      return line.id === lastEdge.fromId;
     });
-    return lastL;
+    return lastLine;
   }, [edges, lines, lastNodeId]);
   var previousLineWasDecision = (0, _react.useCallback)(function () {
     if (isBranched) {
       // if we have edges, we need to check if the previous line was a decision
-      var _lastL = findLastLineBranched();
-
-      return _lastL === null || _lastL === void 0 ? void 0 : _lastL.decision;
-    } // if there is no branching, the previous line is the previous one
+      var _lastLine = findLastLineBranched();
 
+      return _lastLine === null || _lastLine === void 0 ? void 0 : _lastLine.decision;
+    } else {
+      // if there is no branching, the previous line is the previous one
+      var _lastLine2 = lines[currentLineData - 1] ? lines[currentLineData - 1] : {};
 
-    var lastL = lines[line - 1] ? lines[line - 1] : {};
-    return line > 0 && (lastL === null || lastL === void 0 ? void 0 : lastL.decision);
+      return currentLineData > 0 && (_lastLine2 === null || _lastLine2 === void 0 ? void 0 : _lastLine2.decision);
+    }
   }, [currentLineData, isBranched, lines, lastNodeId, edges]);
   var getCurrentVisible = (0, _react.useCallback)(function (uid) {
     if (!uid) return null;
@@ -303,12 +304,7 @@ var DialogComponent = function DialogComponent(_ref) {
 
   var restTalkingAnimation = function restTalkingAnimation() {
     var element = getCurrentVisible(talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid);
-
-    if (!element) {
-      startTalking(false);
-      return;
-    }
-
+    if (!element) return;
     var _element$userData = element.userData,
         mixer = _element$userData.mixer,
         defaultAnim = _element$userData.defaultAnim,
@@ -413,7 +409,7 @@ var DialogComponent = function DialogComponent(_ref) {
 
     if (isBranched) {
       handleBranchDirection(false);
-    } else if (!previousLineWasDecision()) {
+    } else if (previousLineWasDecision()) {
       setCurrentMessage({
         show: false
       });
@@ -579,6 +575,10 @@ var DialogComponent = function DialogComponent(_ref) {
               element.userData.defaultAnim = action.getClip();
             }
 
+            if ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' && talkingCharacter.emotion !== 'thinkful') {
+              startTalking(true);
+            }
+
             if (talkingCharacter.uid === element.uid) {
               var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
               moveBubble(element, showArrowTop);
@@ -661,24 +661,13 @@ var DialogComponent = function DialogComponent(_ref) {
     return function () {
       stopEkho();
     };
-  }, [line, stopEkho]);
-  (0, _react.useEffect)(function () {
-    if (((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed) && currentMessage !== null && currentMessage !== void 0 && currentMessage.show && (talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.emotion) !== 'thinkful') {
-      var _currentMessage$text;
-
-      startTalking(true);
-      var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text = currentMessage.text) === null || _currentMessage$text === void 0 ? void 0 : _currentMessage$text.length) || 0);
-      setTimeout(function () {
-        startTalking(false);
-      }, time < minMs ? minMs : time);
-    }
-  }, [audioFailed, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.emotion, currentMessage]); // Autoplay logic
+  }, [line, stopEkho]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
     if (autoPlayCond && currentMessage.show && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed)) {
-      var _currentMessage$text2;
+      var _currentMessage$text;
 
-      var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text2 = currentMessage.text) === null || _currentMessage$text2 === void 0 ? void 0 : _currentMessage$text2.length) || 0); // if it's not last node
+      var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text = currentMessage.text) === null || _currentMessage$text === void 0 ? void 0 : _currentMessage$text.length) || 0); // if it's not last node
 
       if (!isEndNode()) {
         start(nextLine, time < minMs ? minMs : time);
@@ -805,10 +794,7 @@ var DialogComponent = function DialogComponent(_ref) {
     height: '100vh',
     position: 'static'
   };
-  var disableBackButton = (0, _react.useMemo)(function () {
-    var disabled = line === 0 || previousLineWasDecision();
-    return disabled;
-  }, [line, previousLineWasDecision]);
+  var disableBackButton = line === 0 || previousLineWasDecision();
 
   if (isDecision) {
     var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {

package/dist/components/survey-component/components/SurveyComponent.js

@@ -107,7 +107,9 @@ var SurveyComponent = function SurveyComponent(_ref) {
   };
 
   var View = PAGES[page].component;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "survey--container__overlay"
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "survey--container",
     dir: "auto"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -153,7 +155,7 @@ var SurveyComponent = function SurveyComponent(_ref) {
       });
     },
     className: "gat--btn gat--btn__primary ".concat(disabled ? 'disabled' : '', " not-transition")
-  }, translate('survey.finish')))));
+  }, translate('survey.finish'))))));
 };
 
 var _default = SurveyComponent;

package/dist/components/test-component/components/TestComponent.js

@@ -242,7 +242,9 @@ var TestComponent = function TestComponent(_ref) {
     });
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "test--container__overlay"
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "test--container",
     dir: "auto"
   }, view !== 'results' ? /*#__PURE__*/_react.default.createElement(_Container.default, {
@@ -280,7 +282,7 @@ var TestComponent = function TestComponent(_ref) {
     timeOverText: countdown.text,
     emitEvent: emitEvent,
     soundActions: soundActions
-  }));
+  })));
 };
 
 var _default = TestComponent;

package/dist/helpers/index.js

@@ -30,7 +30,7 @@ exports.yAxis = yAxis;
 var zAxis = new _three.Vector3(0, 0, 1);
 exports.zAxis = zAxis;
 var crossFadeDuration = 0.2;
-var bones = ['Jaw_M', 'Head_M', 'L_lip_jnt', 'HeadEnd_M', 'Neck_M', 'R_lip_jnt', 'joint4', 'transform1', 'lowerTeeths', 'upperTeeths'];
+var bones = ['Jaw_M', 'Head_M', 'L_lip_jnt', 'R_lip_jnt', 'joint4', 'transform1', 'lowerTeeths', 'upperTeeths'];
 var loader = new _GLTFLoader.GLTFLoader();
 
 var formatMessage = function formatMessage(text) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.35.8-hotfix",
+  "version": "2.0.2",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@gamelearn/arcade-styles": "0.15.8",
+    "@gamelearn/arcade-styles": "2.0.3",
     "@gamelearn/arcade-three-core": "1.17.1",
     "@react-three/drei": "9.4.3",
     "@react-three/fiber": "8.0.17",