@gamelearn/arcade-components 2.2.1 → 2.2.3

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

@@ -20,7 +20,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Panels = function Panels(_ref) {
   var characters = _ref.characters,
       slots = _ref.slots,
-      ttsStarted = _ref.ttsStarted,
       activeIndex = _ref.activeIndex,
       flex = _ref.flex,
       lodSettings = _ref.lodSettings;
@@ -38,8 +37,7 @@ var Panels = function Panels(_ref) {
         key: "".concat("".concat(currentCharacter.uid, "_").concat(slotPosition), "_", characterPos),
         character: currentCharacter,
         active: activeIndex === currentPosition,
-        lodSettings: lodSettings,
-        ttsStarted: ttsStarted
+        lodSettings: lodSettings
       });
     }
 

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

@@ -36,7 +36,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var PanelsWrapper = function PanelsWrapper(_ref) {
   var characters = _ref.characters,
       slots = _ref.slots,
-      ttsStarted = _ref.ttsStarted,
       slotRefs = _ref.slotRefs,
       flex = _ref.flex,
       currentMessage = _ref.currentMessage;
@@ -57,7 +56,6 @@ var PanelsWrapper = function PanelsWrapper(_ref) {
     finishBuild(true);
   }, []);
   return built ? /*#__PURE__*/_react.default.createElement(_Panels.default, {
-    ttsStarted: ttsStarted,
     characters: characters,
     slots: slots,
     slotRefs: slotRefs,
@@ -79,13 +77,8 @@ var Scene = function Scene(props) {
       var gl = _ref3.gl;
       gl.setClearColor('white', 0);
       gl.physicallyCorrectLights = true;
-    },
-    frameloop: "demand"
-  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.SettingsController, {
-    current: {
-      animate: props.pause
     }
-  }), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
   }, /*#__PURE__*/_react.default.createElement(PanelsWrapper, props)));
 };

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

@@ -69,7 +69,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 // Global
 var isMobile = (0, _deviceDetection.DeviceDetection)();
-var crossFadeDuration = 0.2;
+var crossFadeDuration = 0.5;
 var characterMs = 75;
 var minMs = 1400;
 var headSize = 2; // Mobile always zoom in?
@@ -79,16 +79,13 @@ var maxCharacterToSwitch = 70;
 raycast.firstHitOnly = true;
 
 var DialogComponent = function DialogComponent(_ref) {
-  var _currentLineData$slot;
-
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
       actors = _ref.actors,
       edges = _ref.edges,
       soundActions = _ref.soundActions,
       zoomInActor = _ref.zoomInActor,
-      autoPlay = _ref.autoPlay,
-      pause = _ref.pause;
+      autoPlay = _ref.autoPlay;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -100,15 +97,25 @@ var DialogComponent = function DialogComponent(_ref) {
       automatic = _useState4[0],
       setAutomatic = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react.useState)({
+    text: '',
+    name: '',
+    left: false,
+    top: false,
+    inScene: false,
+    thinkful: false,
+    voiceOver: false,
+    avatar: '',
+    show: false
+  }),
       _useState6 = _slicedToArray(_useState5, 2),
-      mounted = _useState6[0],
-      setMounted = _useState6[1];
+      currentMessage = _useState6[0],
+      setCurrentMessage = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      talking = _useState8[0],
-      startTalking = _useState8[1];
+      mounted = _useState8[0],
+      setMounted = _useState8[1];
 
   var _useState9 = (0, _react.useState)(false),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -147,39 +154,15 @@ var DialogComponent = function DialogComponent(_ref) {
       setAnimationRunning = _useState12[1];
 
   var animationTarget = (0, _react.useRef)(new _three.Object3D());
-  var currentLineData = lines[line];
+  var currentLine = lines[line];
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
   var isBranched = !!edges;
 
-  var _ref2 = currentLineData || {},
+  var _ref2 = currentLine || {},
       voiceOver = _ref2.voiceOver,
       decision = _ref2.decision;
 
-  var talkingCharacter = currentLineData === null || currentLineData === void 0 ? void 0 : (_currentLineData$slot = currentLineData.slots) === null || _currentLineData$slot === void 0 ? void 0 : _currentLineData$slot.find(function (slot) {
-    return slot.talking;
-  });
-  var autoPlayCond = automatic && !(currentLineData !== null && currentLineData !== void 0 && currentLineData.decision);
-  var audio = Object.keys((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio) || {}).length;
-  var voice = Object.keys((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice) || {}).length;
-  var isVoiceOver = voiceOver || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.type) === 'conversationalNarration';
-  var isDecision = decision || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.type) === 'conversationalDecision';
-
-  var _useState13 = (0, _react.useState)({
-    text: '',
-    name: '',
-    left: false,
-    top: false,
-    inScene: false,
-    thinkful: false,
-    voiceOver: false,
-    avatar: '',
-    show: false
-  }),
-      _useState14 = _slicedToArray(_useState13, 2),
-      currentMessage = _useState14[0],
-      setCurrentMessage = _useState14[1];
-
   var charactersInvolved = (0, _react.useMemo)(function () {
     return lines.reduce(function (acc, current) {
       if (current.slots) {
@@ -201,37 +184,14 @@ var DialogComponent = function DialogComponent(_ref) {
     });
   }, [emitEvent]);
 
-  var _useState15 = (0, _react.useState)([]),
-      _useState16 = _slicedToArray(_useState15, 2),
-      edgesHistory = _useState16[0],
-      setEdgesHistory = _useState16[1];
-
-  var lastNodeId = (0, _react.useMemo)(function () {
-    return edgesHistory[edgesHistory.length - 1];
-  }, [edgesHistory]);
-  var findLastLineBranched = (0, _react.useCallback)(function () {
-    var lastEdge = edges.find(function (edge) {
-      return edge.fromId === lastNodeId;
-    });
-    var lastL = lines.find(function (l) {
-      return l.id === lastEdge.fromId;
-    });
-    return lastL;
-  }, [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 _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      previousLineWasDecision = _useState14[0],
+      setPreviousLineWasDecision = _useState14[1];
 
-    var lastL = lines[currentLineData - 1] ? lines[currentLineData - 1] : {};
-    return currentLineData > 0 && (lastL === null || lastL === void 0 ? void 0 : lastL.decision);
-  }, [currentLineData, isBranched, lines, lastNodeId, edges]);
+  var isVoiceOver = voiceOver || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalNarration';
+  var isDecision = decision || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalDecision';
   var getCurrentVisible = (0, _react.useCallback)(function (uid) {
-    if (!uid) return null;
     var object;
     scene.traverseVisible(function (node) {
       if (node.uid === uid && !object) {
@@ -280,8 +240,6 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [loader]); // Force default animation without transition
 
   var executeDefaultAnimation = function executeDefaultAnimation(element) {
-    if (!talkingCharacter || element.uid === talkingCharacter.uid) return;
-
     if (element.userData.mixer && element.userData.defaultAnim) {
       var mixer = element.userData.mixer;
       var defaultAction = mixer.clipAction(element.userData.defaultAnim, element);
@@ -301,43 +259,6 @@ var DialogComponent = function DialogComponent(_ref) {
     messagePosition.current.parent = null;
     if (zoomInActor) setAnimationRunning(true);
   }, [zoomInActor]);
-
-  var restTalkingAnimation = function restTalkingAnimation() {
-    var element = getCurrentVisible(talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid);
-
-    if (!element) {
-      startTalking(false);
-      return;
-    }
-
-    var _element$userData = element.userData,
-        mixer = _element$userData.mixer,
-        defaultAnim = _element$userData.defaultAnim,
-        emotionClip = _element$userData.emotionClip;
-
-    if (defaultAnim && emotionClip) {
-      var emotionAction = mixer.clipAction(emotionClip, element);
-      var defaultAction = mixer.clipAction(defaultAnim, element);
-      mixer.stopAllAction();
-      (0, _helpers.executeCrossFade)(emotionAction, defaultAction, crossFadeDuration);
-    }
-
-    startTalking(false);
-  };
-
-  (0, _react.useEffect)(function () {
-    var element = getCurrentVisible(talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid);
-
-    if (element) {
-      if (talking) {
-        var _talkingCharacter$cha, _talkingCharacter$cha2, _talkingCharacter$cha3, _talkingCharacter$cha4;
-
-        (0, _helpers.executeTalkingAnimation)(element, talkingCharacter === null || talkingCharacter === void 0 ? void 0 : (_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : (_talkingCharacter$cha2 = _talkingCharacter$cha.resource) === null || _talkingCharacter$cha2 === void 0 ? void 0 : (_talkingCharacter$cha3 = _talkingCharacter$cha2.animations) === null || _talkingCharacter$cha3 === void 0 ? void 0 : (_talkingCharacter$cha4 = _talkingCharacter$cha3.talking) === null || _talkingCharacter$cha4 === void 0 ? void 0 : _talkingCharacter$cha4.url);
-      } else {
-        restTalkingAnimation();
-      }
-    }
-  }, [talkingCharacter, talking]);
   var finishConversation = (0, _react.useCallback)(function () {
     lastSet.current = true;
     changeLine(0);
@@ -354,39 +275,31 @@ var DialogComponent = function DialogComponent(_ref) {
   var handleBranchDirection = (0, _react.useCallback)(function () {
     var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     var keys = forward ? ['fromId', 'toId'] : ['toId', 'fromId'];
-    var foundEdges = edges.filter(function (edge) {
-      return edge[keys[0]] === currentLineData.id;
-    });
-    var foundEdge = foundEdges.length === 1 ? foundEdges[0] : foundEdges.find(function (edge) {
-      return edge[keys[1]] === lastNodeId;
+    var foundEdge = edges.find(function (edge) {
+      return edge[keys[0]] === (currentLine === null || currentLine === void 0 ? void 0 : currentLine.id);
     });
 
     if (!(foundEdge !== null && foundEdge !== void 0 && foundEdge[keys[0]])) {
-      return;
-    } // if going backwards remove last edge from history
-
-
-    if (!forward) {
-      setEdgesHistory(edgesHistory.slice(0, edgesHistory.length - 1));
-    }
-
-    var destination = lines.findIndex(function (l) {
-      return l.id === foundEdge[keys[1]];
-    });
-
-    if (destination >= 0) {
-      setCurrentMessage({
-        show: false
-      });
-      changeLine(destination);
-    } else {
       finishConversation();
+    } else {
+      var destination = lines.findIndex(function (l) {
+        return l.id === foundEdge[keys[1]];
+      });
+
+      if (destination >= 0) {
+        setCurrentMessage({
+          show: false
+        });
+        changeLine(destination);
+      } else {
+        finishConversation();
+      }
     }
-  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id, edges, finishConversation, lines]);
+  }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
   var handleDecisionBranch = (0, _react.useCallback)(function (choice, reset) {
     var currentId = [3, 2, 1][choice.id];
     var optionsEdges = edges.filter(function (edge) {
-      return edge.fromId === (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id);
+      return edge.fromId === (currentLine === null || currentLine === void 0 ? void 0 : currentLine.id);
     });
     var currentEdge = optionsEdges.find(function (edge) {
       return parseInt(edge.fromPointIndex) === currentId;
@@ -407,14 +320,13 @@ var DialogComponent = function DialogComponent(_ref) {
     } else {
       finishConversation();
     }
-  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id, edges, finishConversation, lines]);
+  }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
   var backLine = (0, _react.useCallback)(function () {
-    restTalkingAnimation();
     setAudioFailed(false);
 
     if (isBranched) {
       handleBranchDirection(false);
-    } else if (previousLineWasDecision()) {
+    } else if (lastLine && !(lastLine !== null && lastLine !== void 0 && lastLine.decision) || lastLine.type && !lastLine.type !== 'conversationalDecision') {
       setCurrentMessage({
         show: false
       });
@@ -422,8 +334,7 @@ var DialogComponent = function DialogComponent(_ref) {
     }
   }, [handleBranchDirection, isBranched, lastLine, line]);
   var nextLine = (0, _react.useCallback)(function (choice, reset) {
-    restTalkingAnimation();
-    setEdgesHistory([].concat(_toConsumableArray(edgesHistory), [currentLineData.id]));
+    setPreviousLineWasDecision(currentLine.decision);
     setAudioFailed(false);
 
     if (isBranched) {
@@ -437,34 +348,19 @@ var DialogComponent = function DialogComponent(_ref) {
         show: false
       });
       changeLine(line + 1);
-    } else if (currentLineData.decision) {
+    } else {
       finishConversation();
     }
-  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]);
+  }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]);
 
   var manualBackLine = function manualBackLine() {
     setAutomatic(false);
     backLine();
   };
 
-  var isEndNode = function isEndNode() {
-    if (isBranched) {
-      return currentLineData && currentLineData.type !== 'conversationalDecision' && !edges.find(function (edge) {
-        return edge.fromId === currentLineData.id;
-      });
-    }
-
-    return line === lines.length - 1;
-  };
-
   var manualNextLine = function manualNextLine() {
-    if (isEndNode()) {
-      startTalking(false);
-      finishConversation();
-    } else {
-      setAutomatic(false);
-      nextLine();
-    }
+    setAutomatic(false);
+    nextLine();
   }; // Calculate start node
 
 
@@ -525,8 +421,8 @@ var DialogComponent = function DialogComponent(_ref) {
     } else if (isVoiceOver) {
       resetCameraView();
       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'), " ]"),
+        text: currentLine === null || currentLine === void 0 ? void 0 : currentLine.text,
+        name: (currentLine === null || currentLine === void 0 ? void 0 : currentLine.alias) || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.name) || "[ ".concat(translate('storylines.misc.voiceOver'), " ]"),
         left: false,
         inScene: false,
         voiceOver: true,
@@ -536,7 +432,10 @@ var DialogComponent = function DialogComponent(_ref) {
         show: true
       });
     } else if (!lastSet.current) {
-      var slottedCharacters = currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots.filter(function (slot) {
+      var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
+        return slot.talking;
+      });
+      var slottedCharacters = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.filter(function (slot) {
         return slot.uid && !slot.talking;
       });
       var currentParticipants = [].concat(_toConsumableArray(slottedCharacters.map(function (slot) {
@@ -577,7 +476,6 @@ var DialogComponent = function DialogComponent(_ref) {
             if (startAction && action && startAction !== action) {
               mixer.stopAllAction();
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
-              element.userData.defaultAnim = action.getClip();
             }
 
             if (talkingCharacter.uid === element.uid) {
@@ -589,14 +487,14 @@ var DialogComponent = function DialogComponent(_ref) {
               }
 
               setTimeout(function () {
-                var _talkingCharacter$cha5;
+                var _talkingCharacter$cha;
 
                 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),
+                  name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
                   left: true,
                   top: showArrowTop || distance > 70,
                   inScene: true,
@@ -608,12 +506,12 @@ var DialogComponent = function DialogComponent(_ref) {
             }
           });
         } else {
-          var _talkingCharacter$cha6;
+          var _talkingCharacter$cha2;
 
           resetCameraView();
           setCurrentMessage({
             text: talkingCharacter.text,
-            name: talkingCharacter.alias || ((_talkingCharacter$cha6 = talkingCharacter.character) === null || _talkingCharacter$cha6 === void 0 ? void 0 : _talkingCharacter$cha6.name) || (object === null || object === void 0 ? void 0 : object.name),
+            name: talkingCharacter.alias || ((_talkingCharacter$cha2 = talkingCharacter.character) === null || _talkingCharacter$cha2 === void 0 ? void 0 : _talkingCharacter$cha2.name) || (object === null || object === void 0 ? void 0 : object.name),
             left: false,
             top: talkingCharacter.text.length > maxCharacterToSwitch,
             inScene: false,
@@ -629,31 +527,25 @@ var DialogComponent = function DialogComponent(_ref) {
         });
       }
     }
-  }, [actors, camera, currentLineData, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]); // Sound logic
+  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]);
+  var autoPlayCond = automatic && !(currentLine !== null && currentLine !== void 0 && currentLine.decision);
+  var audio = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio) || {}).length;
+  var voice = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice) || {}).length; // Sound logic
 
   var stopEkho = (0, _useEkho.default)({
-    audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
-    volume: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioVolume,
-    voice: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice,
+    audioType: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType,
+    volume: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioVolume,
+    voice: currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice,
     started: currentMessage.show,
     text: currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text,
-    audio: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio,
+    audio: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio,
     soundActions: soundActions,
     emitEvent: emitEvent,
-    pauseTTS: pause,
-    onStart: function onStart() {
-      var _talkingCharacter$emo;
-
-      if (talkingCharacter !== null && talkingCharacter !== void 0 && (_talkingCharacter$emo = talkingCharacter.emotion) !== null && _talkingCharacter$emo !== void 0 && _talkingCharacter$emo.includes('think')) return;
-      startTalking(true);
-    },
     onError: function onError() {
       setAudioFailed(true);
     },
     onFinish: function onFinish() {
-      startTalking(false);
-
-      if (autoPlayCond && !pause) {
+      if (autoPlayCond) {
         nextLine();
       }
     }
@@ -663,40 +555,29 @@ var DialogComponent = function DialogComponent(_ref) {
     return function () {
       stopEkho();
     };
-  }, [line, stopEkho]);
+  }, [line, stopEkho]); // Autoplay logic
+
   (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') {
+    if (autoPlayCond && currentMessage.show && ((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'none' || audioFailed)) {
       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
-
-  (0, _react.useEffect)(function () {
-    if (autoPlayCond && currentMessage.show && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed) && !pause) {
-      var _currentMessage$text2;
-
-      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
-
-      if (!isEndNode()) {
-        start(nextLine, time < minMs ? minMs : time);
-      }
+      start(nextLine, time < minMs ? minMs : time);
     }
 
     return function () {
       stop();
     };
-  }, [currentMessage, nextLine, start, stop, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoPlayCond, audio, voice, audioFailed]); // Positioning Bubble Message logic
+  }, [currentMessage, nextLine, start, stop, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, autoPlayCond, audio, voice, audioFailed]); // Positioning Bubble Message logic
 
   var checkBubbleBounds = (0, _react.useCallback)(function (group, bubble) {
     groupRef.current = group === null || group === void 0 ? void 0 : group.current;
     bubbleRef.current = bubble === null || bubble === void 0 ? void 0 : bubble.current;
 
-    if (currentLineData !== null && currentLineData !== void 0 && currentLineData.slots && currentMessage.show && bubble !== null && bubble !== void 0 && bubble.current) {
+    if (currentLine !== null && currentLine !== void 0 && currentLine.slots && currentMessage.show && bubble !== null && bubble !== void 0 && bubble.current) {
+      var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
+        return slot.talking;
+      });
       var bubbleRect = bubble.current.getBoundingClientRect();
       var x = bubbleRect.x + bubbleRect.width;
       var y = bubbleRect.y - bubbleRect.height;
@@ -736,7 +617,7 @@ var DialogComponent = function DialogComponent(_ref) {
         bubble.current.parentNode.style.transform = '';
       }
     }
-  }, [camera.quaternion, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots, currentMessage.inScene, getAvatarURL]);
+  }, [camera.quaternion, currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots, currentMessage.inScene, getAvatarURL]);
   (0, _react.useEffect)(function () {
     if (animationRunning) {
       var cam = camera;
@@ -807,10 +688,10 @@ var DialogComponent = function DialogComponent(_ref) {
     height: '100vh',
     position: 'static'
   };
-  var disableBackButton = line === 0 || previousLineWasDecision();
+  var disableBackButton = line === 0 || previousLineWasDecision || line > 0 && (lastLine === null || lastLine === void 0 ? void 0 : lastLine.decision);
 
   if (isDecision) {
-    var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
+    var decisionPayload = _objectSpread(_objectSpread({}, currentLine.payload), {}, {
       inheritProps: {
         slots: [],
         disableBackground: true
@@ -819,7 +700,6 @@ var DialogComponent = function DialogComponent(_ref) {
       branched: isBranched,
       onFinish: nextLine,
       emitEvent: emitEvent,
-      pause: pause,
       soundActions: soundActions
     });
 
@@ -829,7 +709,6 @@ var DialogComponent = function DialogComponent(_ref) {
       portal: container ? {
         current: container
       } : undefined,
-      onOcclude: function onOcclude() {},
       calculatePosition: function calculatePosition() {
         return [0, 0];
       }
@@ -869,7 +748,7 @@ var DialogComponent = function DialogComponent(_ref) {
     type: "button",
     onClick: manualNextLine,
     disabled: animationRunning,
-    className: "gat--btn__round \n              ".concat(animationRunning ? 'disabled' : '', "\n              ").concat(automatic && isEndNode() ? 'glowing-animation' : '')
+    className: "gat--btn__round ".concat(animationRunning ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
   })))));

package/dist/components/feedback-component/components/FeedbackComponent.js

@@ -95,14 +95,15 @@ var FeedbackComponent = function FeedbackComponent(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "feedback-layer ".concat(explain ? 'feedback-layer--withexplain' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "feedback-layer__header ".concat(shortText ? 'feedback-layer__header--in-shortText' : '', " ").concat(additionalStyle || '', " ").concat(statusColor())
+    // eslint-disable-next-line prettier/prettier
+    className: "feedback-layer__header ".concat(additionalStyle || '', " ").concat(statusColor())
   }, secondText && /*#__PURE__*/_react.default.createElement("span", {
     className: "puzzle--terminal__visor--file"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "puzzle--terminal__icon ".concat(additionalStyle || '')
   }), /*#__PURE__*/_react.default.createElement("span", null, secondText)), /*#__PURE__*/_react.default.createElement("span", {
     className: "feedback-layer__maintitle"
-  }, !text || !shortText ? /*#__PURE__*/_react.default.createElement("div", {
+  }, !shortText ? /*#__PURE__*/_react.default.createElement("div", {
     title: translate("tooltip.".concat(success ? 'correct' : 'incorrect')),
     className: "".concat(statusIcon())
   }) : text), text && functionOnClose && explain && /*#__PURE__*/_react.default.createElement("button", {

package/dist/components/frame-click-puzzle-component/components/CurrentFramePuzzle.js

@@ -61,8 +61,7 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       firstTryForFrame = _ref.firstTryForFrame,
       setPuzzlesAutoCompleted = _ref.setPuzzlesAutoCompleted,
       puzzlesAutoCompleted = _ref.puzzlesAutoCompleted,
-      emitOpenPopupCounterInfo = _ref.emitOpenPopupCounterInfo,
-      pause = _ref.pause;
+      emitOpenPopupCounterInfo = _ref.emitOpenPopupCounterInfo;
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
@@ -71,7 +70,6 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
   var info = props.info,
       specificFeedbacks = props.specificFeedbacks;
   info.description = description;
-  var currentSelected = (0, _react.useRef)(0);
   var correctClicked = (0, _react.useRef)(0);
   var puzzleId = "frame-image-click-puzzle_".concat(index, "_").concat(nodeId);
   (0, _react.useEffect)(function () {
@@ -84,7 +82,6 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
   }, [setInfo, info, puzzleId]);
   (0, _react.useEffect)(function () {
     correctClicked.current = 0;
-    currentSelected.current = 0;
   }, [index]);
   var onComplete = (0, _react.useCallback)(function (rw) {
     var correct = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -98,14 +95,7 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       if (specificFeedbacks !== null && specificFeedbacks !== void 0 && (_specificFeedbacks$co = specificFeedbacks.correctFeedbacks) !== null && _specificFeedbacks$co !== void 0 && _specificFeedbacks$co.length && !props.hasClickOnce && !finish) {
         correctClicked.current += 1;
       } else {
-        var total = selected;
-
-        if (currentSelected.current) {
-          total -= currentSelected.current;
-        }
-
-        correctClicked.current = props.areas.length;
-        setSelected(total + correctClicked.current);
+        correctClicked.current += props.areas.length;
       }
 
       if (correctClicked.current === props.areas.length) {
@@ -156,7 +146,6 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
   var handleResetPuzzle = (0, _react.useCallback)(function () {
     setFramesCompleted({});
     correctClicked.current = 0;
-    currentSelected.current = 0;
     emitResetPuzzle();
   }, [emitResetPuzzle, setFramesCompleted]);
   (0, _react.useEffect)(function () {
@@ -167,7 +156,6 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
 
   var checkSelectedAreas = function checkSelectedAreas() {
     var areasSelected = props.hasClickOnce ? props.areas.length : 1;
-    currentSelected.current += areasSelected;
     setSelected(selected + areasSelected);
   };
 
@@ -195,8 +183,7 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
     emitResetPuzzle: handleResetPuzzle,
     firstTryForFrame: firstTryForFrame,
     puzzlesAutoCompleted: puzzlesAutoCompleted,
-    emitOpenPopupCounterInfo: emitOpenPopupCounterInfo,
-    pause: pause
+    emitOpenPopupCounterInfo: emitOpenPopupCounterInfo
   }));
 };