@gamelearn/arcade-components 2.2.13 → 2.4.1

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

@@ -21,6 +21,20 @@ 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 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."); }
@@ -34,7 +48,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var AutoEvaluation = function AutoEvaluation(_ref) {
-  var _questions$currentQue;
+  var _questions$currentQue, _surveyData$current$q3, _surveyData$current$q4;
 
   var description = _ref.description,
       questions = _ref.questions,
@@ -57,15 +71,15 @@ var AutoEvaluation = function AutoEvaluation(_ref) {
       currentQuestion = _useState6[0],
       setCurrentQuestion = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(null),
+  var _useState7 = (0, _react.useState)({
+    current: {
+      questions: [],
+      type: type
+    }
+  }),
       _useState8 = _slicedToArray(_useState7, 2),
-      optionSelected = _useState8[0],
-      selectOption = _useState8[1];
-
-  var surveyData = (0, _react.useRef)({
-    questions: [],
-    type: type
-  });
+      surveyData = _useState8[0],
+      setSurveyData = _useState8[1];
 
   var _soundActions = _slicedToArray(soundActions, 1),
       play = _soundActions[0];
@@ -91,18 +105,49 @@ var AutoEvaluation = function AutoEvaluation(_ref) {
     }
   }, [questions, phase]);
 
-  var handleNextQuestion = function handleNextQuestion() {
+  var handleNextQuestion = function handleNextQuestion(optionSelected) {
+    var _surveyData$current$q;
+
+    var backward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var answer = optionSelected !== null ? optionSelected : (_surveyData$current$q = surveyData.current.questions.find(function (q) {
+      return q.id === questions[currentQuestion].id;
+    })) === null || _surveyData$current$q === void 0 ? void 0 : _surveyData$current$q.answer;
     play('click-ui');
-    surveyData.current.questions.push({
-      id: questions[currentQuestion].id,
-      answer: optionSelected
-    });
 
-    if (currentQuestion === questions.length - 1) {
-      setFinish(true);
+    if (!backward) {
+      var questionIndex = surveyData.current.questions.findIndex(function (q) {
+        return q.id === questions[currentQuestion].id;
+      });
+
+      var updatedQuestions = _toConsumableArray(surveyData.current.questions);
+
+      if (questionIndex > -1) {
+        updatedQuestions.splice(questionIndex, 1, {
+          id: questions[currentQuestion].id,
+          answer: answer
+        });
+      } else {
+        updatedQuestions.push({
+          id: questions[currentQuestion].id,
+          answer: answer
+        });
+      }
+
+      setSurveyData(_objectSpread(_objectSpread({}, surveyData), {}, {
+        current: _objectSpread(_objectSpread({}, surveyData.current), {}, {
+          questions: updatedQuestions
+        })
+      }));
+
+      if (currentQuestion === questions.length - 1) {
+        setFinish(true);
+      } else {
+        setCurrentQuestion(currentQuestion + 1);
+        setFinish(false);
+      }
     } else {
-      selectOption(null);
-      setCurrentQuestion(currentQuestion + 1);
+      setCurrentQuestion(currentQuestion - 1);
+      setFinish(false);
     }
   };
 
@@ -133,27 +178,40 @@ var AutoEvaluation = function AutoEvaluation(_ref) {
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: "survey--points"
   }, Array(11).fill(0).map(function (_, i) {
+    var _surveyData$current$q2;
+
     return /*#__PURE__*/_react.default.createElement("li", {
       key: "".concat(0 + i),
       onClick: function onClick() {
-        return selectOption(i);
+        handleNextQuestion(i, false);
       },
-      className: "survey--points__item ".concat(optionSelected === i ? 'selected' : '')
+      className: "survey--points__item ".concat(((_surveyData$current$q2 = surveyData.current.questions[currentQuestion]) === null || _surveyData$current$q2 === void 0 ? void 0 : _surveyData$current$q2.answer) === i ? 'selected' : '')
     }, i);
   }))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "test--buttons next"
-  }, finish ? /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    disabled: currentQuestion === 0,
+    onClick: function onClick() {
+      return handleNextQuestion(null, true);
+    },
+    className: "gat--btn__navigation ".concat(currentQuestion === 0 ? 'disabled' : '')
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back'
+  })), finish ? /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
-    className: "gat--btn gat--btn__primary auto-evaluation__button not-transition",
     onClick: function onClick() {
       setPhase('end');
       play('click-ui');
-    }
+    },
+    className: "gat--btn gat--btn__primary auto-evaluation__button not-transition"
   }, /*#__PURE__*/_react.default.createElement("span", null, translate('auto-evaluation.end'))) : /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleNextQuestion,
     type: "button",
-    disabled: optionSelected === null,
-    className: "gat--btn__navigation ".concat(optionSelected === null ? 'disabled' : '')
+    onClick: function onClick() {
+      return handleNextQuestion(null, false);
+    },
+    disabled: ((_surveyData$current$q3 = surveyData.current.questions[currentQuestion]) === null || _surveyData$current$q3 === void 0 ? void 0 : _surveyData$current$q3.answer) === undefined,
+    className: "gat--btn__navigation ".concat(((_surveyData$current$q4 = surveyData.current.questions[currentQuestion]) === null || _surveyData$current$q4 === void 0 ? void 0 : _surveyData$current$q4.answer) === undefined ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
   })))), phase === 'end' && /*#__PURE__*/_react.default.createElement(_EndScreen.default, {

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

@@ -57,16 +57,18 @@ var DecisionBody = function DecisionBody(_ref) {
   var choose = function choose(option) {
     selectChoice(option);
 
-    if (inherited && showingResults && failed) {
+    if (showingResults && failed) {
       changeOption(option);
     }
+
+    onNext(option);
   };
 
   var canNext = !showingResults && selectedChoice.id !== undefined || !failed;
   var optionsProps = {
     inherited: inherited,
     selectedChoice: selectedChoice,
-    selectChoice: !showingResults || inherited && failed ? choose : noop,
+    selectChoice: failed ? choose : noop,
     options: options,
     showingResults: showingResults
   };
@@ -88,19 +90,13 @@ var DecisionBody = function DecisionBody(_ref) {
       dir: "auto"
     }, /*#__PURE__*/_react.default.createElement(_Options.default, optionsProps)), /*#__PURE__*/_react.default.createElement("div", {
       className: "popup--buttons"
-    }, required ? /*#__PURE__*/_react.default.createElement("button", {
-      type: "button",
-      className: "gat--btn gat--btn__primary ".concat(selectedChoice.id !== undefined ? '' : 'disabled'),
-      onClick: function onClick() {
-        return canNext ? onNext(selectedChoice) : onBack(selectedChoice);
-      }
-    }, canNext || selectedChoice.id === undefined ? translate('screens.continue') : translate('tests.retry')) : /*#__PURE__*/_react.default.createElement("button", {
+    }, !failed ? /*#__PURE__*/_react.default.createElement("button", {
       type: "button",
       className: "gat--btn gat--btn__primary ".concat(selectedChoice.id !== undefined ? '' : 'disabled'),
       onClick: function onClick() {
-        return onNext(selectedChoice);
+        return required && canNext ? onNext(selectedChoice) : onBack(selectedChoice);
       }
-    }, translate('screens.continue'))));
+    }, translate('screens.continue')) : null));
   };
 
   var ComplexDecision = function ComplexDecision() {

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

@@ -186,14 +186,14 @@ var DecisionComponent = function DecisionComponent(_ref) {
             playSound('fail');
 
             if (!branched) {
-              if (inherited) {
-                emitEvent({
-                  type: 'addPoints',
-                  payload: choice.rewards,
-                  finish: false,
-                  complex: true
-                });
-              } else if (!required) {
+              emitEvent({
+                type: 'addPoints',
+                payload: choice.rewards,
+                finish: false,
+                complex: true
+              });
+
+              if (!required) {
                 setResultChoice({});
                 selectView('options');
               }

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

@@ -19,41 +19,30 @@ 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; }
 
-var cleanStyle = {
-  width: '100vw',
-  height: '100vh',
-  position: 'static'
-};
-
 var BubbleWrapper = function BubbleWrapper(_ref) {
-  var onLoad = _ref.onLoad,
-      position = _ref.position,
-      currentMessage = _ref.currentMessage;
+  var currentMessage = _ref.currentMessage,
+      translate = _ref.translate;
   var group = (0, _react.useRef)();
   var bubble = (0, _react.useRef)();
-
-  var onBubbleBuild = function onBubbleBuild() {
-    onLoad(group, bubble);
-  };
-
   var container = document.querySelector('.screens--container');
   return /*#__PURE__*/_react.default.createElement("group", {
-    ref: group,
-    position: position
+    ref: group
   }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     zIndexRange: [5, 5],
-    calculatePosition: currentMessage.inScene ? undefined : function () {
-      return [0, 0];
-    },
     portal: container ? {
       current: container
     } : undefined,
-    style: currentMessage.inScene ? {
+    style: {
+      width: '100vw',
+      height: '100vh',
       position: 'static'
-    } : cleanStyle
+    },
+    calculatePosition: function calculatePosition() {
+      return [0, 0];
+    }
   }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
+    translate: translate,
     ref: bubble,
-    onLoad: onBubbleBuild,
     message: currentMessage
   })));
 };

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

@@ -23,8 +23,6 @@ var _decisionComponent = _interopRequireDefault(require("../../decision-componen
 
 var _helpers = require("../../../helpers");
 
-var _deviceDetection = require("../../../helpers/deviceDetection");
-
 var _useTimeout2 = _interopRequireDefault(require("../../../helpers/useTimeout"));
 
 var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
@@ -67,8 +65,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// import { DeviceDetection } from '../../../helpers/deviceDetection';
 // Global
-var isMobile = (0, _deviceDetection.DeviceDetection)();
+// const isMobile = DeviceDetection();
 var crossFadeDuration = 0.2;
 var characterMs = 75;
 var minMs = 1400;
@@ -128,8 +127,6 @@ 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();
   }, []);
@@ -168,8 +165,6 @@ var DialogComponent = function DialogComponent(_ref) {
   var _useState13 = (0, _react.useState)({
     text: '',
     name: '',
-    left: false,
-    top: false,
     inScene: false,
     thinkful: false,
     voiceOver: false,
@@ -244,13 +239,13 @@ var DialogComponent = function DialogComponent(_ref) {
     var _slot$character, _slot$character$resou;
 
     var object = actors.find(function (element) {
-      if (element.uid === slot.uid) {
+      if ((element === null || element === void 0 ? void 0 : element.uid) === (slot === null || slot === void 0 ? void 0 : slot.uid)) {
         return element;
       }
 
       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) || '';
+    return (slot === null || slot === void 0 ? void 0 : (_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]); // Move to three core?
 
   var loadEmotion = (0, _react.useCallback)(function (slot, element) {
@@ -527,12 +522,11 @@ var DialogComponent = function DialogComponent(_ref) {
       setCurrentMessage({
         text: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.text,
         name: (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.alias) || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.name) || "[ ".concat(translate('storylines.misc.voiceOver'), " ]"),
-        left: false,
         inScene: false,
         voiceOver: true,
         thinkful: false,
         top: false,
-        avatar: '',
+        avatar: getAvatarURL(talkingCharacter),
         show: true
       });
     } else if (!lastSet.current) {
@@ -591,17 +585,12 @@ var DialogComponent = function DialogComponent(_ref) {
               setTimeout(function () {
                 var _talkingCharacter$cha5;
 
-                var _moveBubble = moveBubble(element, showArrowTop),
-                    distance = _moveBubble.distance;
-
                 setCurrentMessage({
                   text: talkingCharacter.text,
                   name: talkingCharacter.alias || ((_talkingCharacter$cha5 = talkingCharacter.character) === null || _talkingCharacter$cha5 === void 0 ? void 0 : _talkingCharacter$cha5.name),
-                  left: true,
-                  top: showArrowTop || distance > 70,
                   inScene: true,
                   thinkful: talkingCharacter.emotion === 'thinkful',
-                  avatar: '',
+                  avatar: getAvatarURL(talkingCharacter),
                   show: true
                 });
               }, zoomInActor ? 1200 : 0);
@@ -691,53 +680,7 @@ var DialogComponent = function DialogComponent(_ref) {
     return function () {
       stop();
     };
-  }, [currentMessage, nextLine, start, stop, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.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 (currentLineData !== null && currentLineData !== void 0 && currentLineData.slots && currentMessage.show && bubble !== null && bubble !== void 0 && bubble.current) {
-      var bubbleRect = bubble.current.getBoundingClientRect();
-      var x = bubbleRect.x + bubbleRect.width;
-      var y = bubbleRect.y - bubbleRect.height;
-
-      if (!messagePosition.current.isLeft && zoomInActor || (x < 0 || x > window.innerWidth) && currentMessage.inScene) {
-        var child = messagePosition.current.child;
-
-        if (child) {
-          var target = new _three.Object3D();
-          child.getWorldPosition(target.position);
-          group.current.position.copy(target.position);
-          group.current.updateMatrixWorld();
-          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();
-          var completeOutside = x > window.innerWidth + bubbleRect.width || y < -bubbleRect.height || y > window.innerHeight || x < -bubbleRect.width || bubbleRect.x < 10;
-
-          if (completeOutside) {
-            bubble.current.parentNode.style.transform = '';
-            messagePosition.current.child = null;
-            messagePosition.current.parent = null;
-          }
-
-          setCurrentMessage(function (old) {
-            return _objectSpread(_objectSpread({}, old), {}, {
-              left: false,
-              top: false,
-              inScene: !completeOutside,
-              avatar: getAvatarURL(talkingCharacter),
-              show: true
-            });
-          });
-        }
-      } else {
-        bubble.current.parentNode.style.transform = '';
-      }
-    }
-  }, [camera.quaternion, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots, currentMessage.inScene, getAvatarURL]);
+  }, [currentMessage, nextLine, start, stop, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoPlayCond, audio, voice, audioFailed]);
   (0, _react.useEffect)(function () {
     if (animationRunning) {
       var cam = camera;
@@ -750,9 +693,7 @@ var DialogComponent = function DialogComponent(_ref) {
         }
 
         var mult = messagePosition.current.isLeft ? -1 : 1;
-        var headSpace = headSize * mult; // move bubble
-
-        messagePosition.current.pos[0] -= headSpace;
+        var headSpace = headSize * mult;
         animationTarget.current.translateX(-10 * mult + headSpace);
         animationTarget.current.translateY(-2);
         animationTarget.current.translateZ(30);
@@ -796,10 +737,6 @@ var DialogComponent = function DialogComponent(_ref) {
           object.material.visible = true;
         });
       }
-
-      if (bubbleRef.current && groupRef.current) {
-        checkBubbleBounds(groupRef, bubbleRef);
-      }
     }
   });
   var container = document.querySelector('.screens--container');
@@ -843,9 +780,8 @@ var DialogComponent = function DialogComponent(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_BubbleWrapper.default, {
-    position: messagePosition.current.pos,
-    currentMessage: currentMessage,
-    onLoad: checkBubbleBounds
+    translate: translate,
+    currentMessage: currentMessage
   }) : null, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     style: {
       width: '100vw',

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

@@ -27,7 +27,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var message = _ref.message,
-      onLoad = _ref.onLoad;
+      translate = _ref.translate;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -51,32 +51,33 @@ var SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_re
 
   (0, _react.useLayoutEffect)(function () {
     if (!mounted) {
-      onLoad();
       setMounted(true);
     }
-  }, [onLoad, mounted]);
+  }, [mounted]);
   return /*#__PURE__*/_react.default.createElement("div", {
     dir: "auto",
     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.top && message.inScene ? 'arrow-top' : '', "\n          ").concat(message.thinkful || message.voiceOver ? 'speech-bubble--italic' : '', "\n      ")
+    className: "\n          speech-bubble\n          ".concat(!message.inScene || message.voiceOver ? 'speech-bubble--outOfScene' : '', "\n          ").concat(message.thinkful ? 'speech-bubble--italic' : '', "\n      ")
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "speech-bubble__content"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "speech-bubble__header"
+    className: "speech-bubble__header ".concat(message.thinkful ? 'speech-bubble__header--thinking' : '')
   }, message.thinkful ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "thinking-icon-wrap"
+  }, /*#__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", {
+  })) : null, message.avatar ? /*#__PURE__*/_react.default.createElement("div", {
     className: "speech-bubble__avatar"
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: getAvatar(),
     alt: message.name
+  })) : null, message.voiceOver ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "speech-bubble__avatar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "icon-narrator"
   })) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "speech-bubble__title"
-  }, message.name)), message.text ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "speech-bubble__name"
+  }, /*#__PURE__*/_react.default.createElement("span", null, message.name), message.thinkful ? /*#__PURE__*/_react.default.createElement("span", null, "[ ", translate('emotion.thinking'), " ]") : null)), message.text ? /*#__PURE__*/_react.default.createElement("div", {
     className: "speech-bubble__text"
-  }, message.text) : null));
+  }, message.text) : null);
 });
 
 var _default = SpeechBubbleComponent;

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

@@ -1,17 +1,13 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _react = _interopRequireDefault(require("react"));
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -19,18 +15,6 @@ 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 _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 OPTIONS = ['yes', 'no'];
 var LETTERS = ['A', 'B'];
 
@@ -38,18 +22,12 @@ var ApplicableBox = function ApplicableBox(_ref) {
   var setSurveyData = _ref.setSurveyData,
       survey = _ref.survey,
       id = _ref.id,
-      enable = _ref.enable,
-      translate = _ref.translate;
-
-  var _useState = (0, _react.useState)(),
-      _useState2 = _slicedToArray(_useState, 2),
-      optionSelected = _useState2[0],
-      selectOption = _useState2[1];
+      translate = _ref.translate,
+      changePage = _ref.changePage;
 
   var select = function select(option) {
-    enable(true);
-    selectOption(option);
     setSurveyData(_objectSpread(_objectSpread({}, survey), {}, _defineProperty({}, id, option)));
+    changePage();
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -60,7 +38,7 @@ var ApplicableBox = function ApplicableBox(_ref) {
       onClick: function onClick() {
         return select(option);
       },
-      className: "survey--response__item ".concat(optionSelected === option ? 'selected' : '')
+      className: "survey--response__item ".concat(survey[id] === option ? 'selected' : '')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "survey--response__index"
     }, LETTERS[i]), /*#__PURE__*/_react.default.createElement("div", {

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

@@ -1,17 +1,13 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _react = _interopRequireDefault(require("react"));
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -19,36 +15,18 @@ 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 _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 OPINION_OPTIONS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
 var OpinionBox = function OpinionBox(_ref) {
   var setSurveyData = _ref.setSurveyData,
       survey = _ref.survey,
-      enable = _ref.enable,
       id = _ref.id,
-      translate = _ref.translate;
-
-  var _useState = (0, _react.useState)(),
-      _useState2 = _slicedToArray(_useState, 2),
-      optionSelected = _useState2[0],
-      selectOption = _useState2[1];
+      translate = _ref.translate,
+      changePage = _ref.changePage;
 
   var select = function select(option) {
-    enable(true);
-    selectOption(option);
     setSurveyData(_objectSpread(_objectSpread({}, survey), {}, _defineProperty({}, id, option)));
+    changePage();
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -61,7 +39,7 @@ var OpinionBox = function OpinionBox(_ref) {
       onClick: function onClick() {
         return select(option);
       },
-      className: "survey--points__item ".concat(optionSelected === option ? 'selected' : '')
+      className: "survey--points__item ".concat(survey[id] === option ? 'selected' : '')
     }, option);
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "survey--points__labels"

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

@@ -43,20 +43,16 @@ var INIT_SURVEY = {
 };
 var PAGES = [{
   component: _ApplicableBox.default,
-  id: 'applicable',
-  disableContinue: true
+  id: 'applicable'
 }, {
   component: _OpinionBox.default,
-  id: 'opinion',
-  disableContinue: true
+  id: 'opinion'
 }, {
   component: _TextBox.default,
-  id: 'comments',
-  disableContinue: true
+  id: 'comments'
 }, {
   component: _TextBox.default,
-  id: 'suggestions',
-  disableContinue: true
+  id: 'suggestions'
 }];
 
 var SurveyComponent = function SurveyComponent(_ref) {
@@ -73,15 +69,10 @@ var SurveyComponent = function SurveyComponent(_ref) {
       page = _useState4[0],
       setPage = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(true),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      disabled = _useState6[0],
-      disable = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      finished = _useState8[0],
-      finish = _useState8[1];
+      finished = _useState6[0],
+      finish = _useState6[1];
 
   var _soundActions = _slicedToArray(soundActions, 1),
       play = _soundActions[0];
@@ -94,15 +85,15 @@ var SurveyComponent = function SurveyComponent(_ref) {
     });
   };
 
-  var changePage = function changePage() {
+  var _changePage = function changePage() {
+    var backward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     play('click-ui');
 
-    if (page + 1 >= PAGES.length) {
+    if (!backward && page + 1 >= PAGES.length) {
       finish(true);
     } else {
-      var nextPage = PAGES[page + 1];
-      disable(nextPage ? nextPage.disableContinue : true);
-      setPage(page + 1);
+      var destinationPage = backward ? page - 1 : page + 1;
+      setPage(destinationPage);
     }
   };
 
@@ -127,26 +118,18 @@ var SurveyComponent = function SurveyComponent(_ref) {
     ordinal: page + 1
   })), /*#__PURE__*/_react.default.createElement(View, {
     setSurveyData: setSurveyData,
-    enable: function enable(boolean) {
-      return disable(!boolean);
-    },
     id: PAGES[page].id,
     survey: survey,
-    translate: translate
+    translate: translate,
+    changePage: function changePage() {
+      return _changePage(false);
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "test--buttons next"
-  }, !finished ? /*#__PURE__*/_react.default.createElement("button", {
+  }, finished ? /*#__PURE__*/_react.default.createElement("button", {
     id: "survey-button",
     type: "button",
-    disabled: disabled,
-    onClick: changePage,
-    className: "gat--btn__navigation ".concat(disabled ? 'disabled' : '')
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
-  })) : /*#__PURE__*/_react.default.createElement("button", {
-    id: "survey-button",
-    type: "button",
-    disabled: disabled,
+    disabled: !survey[PAGES[page].id],
     onClick: function onClick() {
       play('click-ui');
       emitEvent({
@@ -154,8 +137,28 @@ var SurveyComponent = function SurveyComponent(_ref) {
         payload: survey
       });
     },
-    className: "gat--btn gat--btn__primary ".concat(disabled ? 'disabled' : '', " not-transition")
-  }, translate('survey.finish'))))));
+    className: "gat--btn gat--btn__primary ".concat(!survey[PAGES[page].id] ? 'disabled' : '', " not-transition")
+  }, translate('survey.finish')) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    id: "survey-button-back",
+    type: "button",
+    disabled: page === 0,
+    onClick: function onClick() {
+      return _changePage(true);
+    },
+    className: "gat--btn__navigation ".concat(page === 0 ? 'disabled' : '')
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back'
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    id: "survey-button",
+    type: "button",
+    disabled: !survey[PAGES[page].id],
+    onClick: function onClick() {
+      return _changePage(false);
+    },
+    className: "gat--btn__navigation ".concat(!survey[PAGES[page].id] ? 'disabled' : '')
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
+  })))))));
 };
 
 var _default = SurveyComponent;

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

@@ -18,11 +18,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var TextBox = function TextBox(_ref) {
   var setSurveyData = _ref.setSurveyData,
       survey = _ref.survey,
-      enable = _ref.enable,
       id = _ref.id;
 
   var writeText = function writeText(text) {
-    enable(Boolean(text));
     setSurveyData(_objectSpread(_objectSpread({}, survey), {}, _defineProperty({}, id, text)));
   };
 

package/package.json

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