@gamelearn/arcade-components 2.2.3 → 2.2.7

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.5;
+var crossFadeDuration = 0.2;
 var characterMs = 75;
 var minMs = 1400;
 var headSize = 2; // Mobile always zoom in?
@@ -79,13 +79,16 @@ 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;
+      autoPlay = _ref.autoPlay,
+      pause = _ref.pause;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -97,25 +100,15 @@ var DialogComponent = function DialogComponent(_ref) {
       automatic = _useState4[0],
       setAutomatic = _useState4[1];
 
-  var _useState5 = (0, _react.useState)({
-    text: '',
-    name: '',
-    left: false,
-    top: false,
-    inScene: false,
-    thinkful: false,
-    voiceOver: false,
-    avatar: '',
-    show: false
-  }),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      currentMessage = _useState6[0],
-      setCurrentMessage = _useState6[1];
+      mounted = _useState6[0],
+      setMounted = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      mounted = _useState8[0],
-      setMounted = _useState8[1];
+      talking = _useState8[0],
+      startTalking = _useState8[1];
 
   var _useState9 = (0, _react.useState)(false),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -154,15 +147,39 @@ var DialogComponent = function DialogComponent(_ref) {
       setAnimationRunning = _useState12[1];
 
   var animationTarget = (0, _react.useRef)(new _three.Object3D());
-  var currentLine = lines[line];
+  var currentLineData = lines[line];
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
   var isBranched = !!edges;
 
-  var _ref2 = currentLine || {},
+  var _ref2 = currentLineData || {},
       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) {
@@ -184,14 +201,37 @@ var DialogComponent = function DialogComponent(_ref) {
     });
   }, [emitEvent]);
 
-  var _useState13 = (0, _react.useState)(false),
-      _useState14 = _slicedToArray(_useState13, 2),
-      previousLineWasDecision = _useState14[0],
-      setPreviousLineWasDecision = _useState14[1];
+  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();
 
-  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';
+      return _lastL === null || _lastL === void 0 ? void 0 : _lastL.decision;
+    } // if there is no branching, the previous line is the previous one
+
+
+    var lastL = lines[line - 1] ? lines[line - 1] : {};
+    return line > 0 && (lastL === null || lastL === void 0 ? void 0 : lastL.decision);
+  }, [currentLineData, isBranched, lines, lastNodeId, edges]);
   var getCurrentVisible = (0, _react.useCallback)(function (uid) {
+    if (!uid) return null;
     var object;
     scene.traverseVisible(function (node) {
       if (node.uid === uid && !object) {
@@ -240,6 +280,8 @@ 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);
@@ -259,6 +301,43 @@ 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);
@@ -275,31 +354,39 @@ 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 foundEdge = edges.find(function (edge) {
-      return edge[keys[0]] === (currentLine === null || currentLine === void 0 ? void 0 : currentLine.id);
+    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;
     });
 
     if (!(foundEdge !== null && foundEdge !== void 0 && foundEdge[keys[0]])) {
-      finishConversation();
-    } else {
-      var destination = lines.findIndex(function (l) {
-        return l.id === foundEdge[keys[1]];
-      });
+      return;
+    } // if going backwards remove last edge from history
 
-      if (destination >= 0) {
-        setCurrentMessage({
-          show: false
-        });
-        changeLine(destination);
-      } else {
-        finishConversation();
-      }
+
+    if (!forward) {
+      setEdgesHistory(edgesHistory.slice(0, edgesHistory.length - 1));
     }
-  }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
+
+    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]);
   var handleDecisionBranch = (0, _react.useCallback)(function (choice, reset) {
     var currentId = [3, 2, 1][choice.id];
     var optionsEdges = edges.filter(function (edge) {
-      return edge.fromId === (currentLine === null || currentLine === void 0 ? void 0 : currentLine.id);
+      return edge.fromId === (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id);
     });
     var currentEdge = optionsEdges.find(function (edge) {
       return parseInt(edge.fromPointIndex) === currentId;
@@ -320,13 +407,14 @@ var DialogComponent = function DialogComponent(_ref) {
     } else {
       finishConversation();
     }
-  }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
+  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id, edges, finishConversation, lines]);
   var backLine = (0, _react.useCallback)(function () {
+    restTalkingAnimation();
     setAudioFailed(false);
 
     if (isBranched) {
       handleBranchDirection(false);
-    } else if (lastLine && !(lastLine !== null && lastLine !== void 0 && lastLine.decision) || lastLine.type && !lastLine.type !== 'conversationalDecision') {
+    } else if (!previousLineWasDecision()) {
       setCurrentMessage({
         show: false
       });
@@ -334,7 +422,8 @@ var DialogComponent = function DialogComponent(_ref) {
     }
   }, [handleBranchDirection, isBranched, lastLine, line]);
   var nextLine = (0, _react.useCallback)(function (choice, reset) {
-    setPreviousLineWasDecision(currentLine.decision);
+    restTalkingAnimation();
+    setEdgesHistory([].concat(_toConsumableArray(edgesHistory), [currentLineData.id]));
     setAudioFailed(false);
 
     if (isBranched) {
@@ -348,19 +437,34 @@ var DialogComponent = function DialogComponent(_ref) {
         show: false
       });
       changeLine(line + 1);
-    } else {
+    } else if (currentLineData.decision) {
       finishConversation();
     }
-  }, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]);
+  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.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() {
-    setAutomatic(false);
-    nextLine();
+    if (isEndNode()) {
+      startTalking(false);
+      finishConversation();
+    } else {
+      setAutomatic(false);
+      nextLine();
+    }
   }; // Calculate start node
 
 
@@ -421,8 +525,8 @@ var DialogComponent = function DialogComponent(_ref) {
     } else if (isVoiceOver) {
       resetCameraView();
       setCurrentMessage({
-        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'), " ]"),
+        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,
@@ -432,10 +536,7 @@ var DialogComponent = function DialogComponent(_ref) {
         show: true
       });
     } else if (!lastSet.current) {
-      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) {
+      var slottedCharacters = currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots.filter(function (slot) {
         return slot.uid && !slot.talking;
       });
       var currentParticipants = [].concat(_toConsumableArray(slottedCharacters.map(function (slot) {
@@ -476,6 +577,7 @@ 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) {
@@ -487,14 +589,14 @@ var DialogComponent = function DialogComponent(_ref) {
               }
 
               setTimeout(function () {
-                var _talkingCharacter$cha;
+                var _talkingCharacter$cha5;
 
                 var _moveBubble = moveBubble(element, showArrowTop),
                     distance = _moveBubble.distance;
 
                 setCurrentMessage({
                   text: talkingCharacter.text,
-                  name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
+                  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,
@@ -506,12 +608,12 @@ var DialogComponent = function DialogComponent(_ref) {
             }
           });
         } else {
-          var _talkingCharacter$cha2;
+          var _talkingCharacter$cha6;
 
           resetCameraView();
           setCurrentMessage({
             text: talkingCharacter.text,
-            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),
+            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),
             left: false,
             top: talkingCharacter.text.length > maxCharacterToSwitch,
             inScene: false,
@@ -527,25 +629,32 @@ var DialogComponent = function DialogComponent(_ref) {
         });
       }
     }
-  }, [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
+  }, [actors, camera, currentLineData, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]); // Sound logic
 
   var stopEkho = (0, _useEkho.default)({
-    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,
+    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,
     started: currentMessage.show,
     text: currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text,
-    audio: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio,
+    audio: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio,
+    slide: line,
     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() {
-      if (autoPlayCond) {
+      startTalking(false);
+
+      if (autoPlayCond && !pause) {
         nextLine();
       }
     }
@@ -555,29 +664,40 @@ var DialogComponent = function DialogComponent(_ref) {
     return function () {
       stopEkho();
     };
-  }, [line, stopEkho]); // Autoplay logic
-
+  }, [line, stopEkho]);
   (0, _react.useEffect)(function () {
-    if (autoPlayCond && currentMessage.show && ((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'none' || audioFailed)) {
+    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);
-      start(nextLine, time < minMs ? minMs : time);
+      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);
+      }
     }
 
     return function () {
       stop();
     };
-  }, [currentMessage, nextLine, start, stop, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, autoPlayCond, audio, voice, audioFailed]); // Positioning Bubble Message logic
+  }, [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 (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;
-      });
+    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;
@@ -617,7 +737,7 @@ var DialogComponent = function DialogComponent(_ref) {
         bubble.current.parentNode.style.transform = '';
       }
     }
-  }, [camera.quaternion, currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots, currentMessage.inScene, getAvatarURL]);
+  }, [camera.quaternion, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots, currentMessage.inScene, getAvatarURL]);
   (0, _react.useEffect)(function () {
     if (animationRunning) {
       var cam = camera;
@@ -688,10 +808,13 @@ var DialogComponent = function DialogComponent(_ref) {
     height: '100vh',
     position: 'static'
   };
-  var disableBackButton = line === 0 || previousLineWasDecision || line > 0 && (lastLine === null || lastLine === void 0 ? void 0 : lastLine.decision);
+  var disableBackButton = (0, _react.useMemo)(function () {
+    var disabled = line === 0 || previousLineWasDecision();
+    return disabled;
+  }, [line, previousLineWasDecision]);
 
   if (isDecision) {
-    var decisionPayload = _objectSpread(_objectSpread({}, currentLine.payload), {}, {
+    var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
       inheritProps: {
         slots: [],
         disableBackground: true
@@ -700,6 +823,7 @@ var DialogComponent = function DialogComponent(_ref) {
       branched: isBranched,
       onFinish: nextLine,
       emitEvent: emitEvent,
+      pause: pause,
       soundActions: soundActions
     });
 
@@ -709,6 +833,7 @@ var DialogComponent = function DialogComponent(_ref) {
       portal: container ? {
         current: container
       } : undefined,
+      onOcclude: function onOcclude() {},
       calculatePosition: function calculatePosition() {
         return [0, 0];
       }
@@ -748,7 +873,7 @@ var DialogComponent = function DialogComponent(_ref) {
     type: "button",
     onClick: manualNextLine,
     disabled: animationRunning,
-    className: "gat--btn__round ".concat(animationRunning ? 'disabled' : '')
+    className: "gat--btn__round \n              ".concat(animationRunning ? 'disabled' : '', "\n              ").concat(automatic && isEndNode() ? 'glowing-animation' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
   })))));

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

@@ -95,15 +95,14 @@ 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", {
-    // eslint-disable-next-line prettier/prettier
-    className: "feedback-layer__header ".concat(additionalStyle || '', " ").concat(statusColor())
+    className: "feedback-layer__header ".concat(shortText ? 'feedback-layer__header--in-shortText' : '', " ").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"
-  }, !shortText ? /*#__PURE__*/_react.default.createElement("div", {
+  }, !text || !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,7 +61,8 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       firstTryForFrame = _ref.firstTryForFrame,
       setPuzzlesAutoCompleted = _ref.setPuzzlesAutoCompleted,
       puzzlesAutoCompleted = _ref.puzzlesAutoCompleted,
-      emitOpenPopupCounterInfo = _ref.emitOpenPopupCounterInfo;
+      emitOpenPopupCounterInfo = _ref.emitOpenPopupCounterInfo,
+      pause = _ref.pause;
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
@@ -70,6 +71,7 @@ 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 () {
@@ -82,6 +84,7 @@ 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;
@@ -95,7 +98,14 @@ 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 {
-        correctClicked.current += props.areas.length;
+        var total = selected;
+
+        if (currentSelected.current) {
+          total -= currentSelected.current;
+        }
+
+        correctClicked.current = props.areas.length;
+        setSelected(total + correctClicked.current);
       }
 
       if (correctClicked.current === props.areas.length) {
@@ -146,6 +156,7 @@ 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 () {
@@ -156,6 +167,7 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
 
   var checkSelectedAreas = function checkSelectedAreas() {
     var areasSelected = props.hasClickOnce ? props.areas.length : 1;
+    currentSelected.current += areasSelected;
     setSelected(selected + areasSelected);
   };
 
@@ -183,7 +195,8 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
     emitResetPuzzle: handleResetPuzzle,
     firstTryForFrame: firstTryForFrame,
     puzzlesAutoCompleted: puzzlesAutoCompleted,
-    emitOpenPopupCounterInfo: emitOpenPopupCounterInfo
+    emitOpenPopupCounterInfo: emitOpenPopupCounterInfo,
+    pause: pause
   }));
 };
 

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

@@ -48,7 +48,8 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
       soundActions = _ref.soundActions,
       disableExit = _ref.disableExit,
       setResolveAction = _ref.setResolveAction,
-      setInfo = _ref.setInfo;
+      setInfo = _ref.setInfo,
+      pause = _ref.pause;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -161,7 +162,8 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     emitResetPuzzle: resetPuzzle,
     setPuzzlesAutoCompleted: setPuzzlesAutoCompleted,
     puzzlesAutoCompleted: puzzlesAutoCompleted,
-    emitOpenPopupCounterInfo: onInitPuzzle
+    emitOpenPopupCounterInfo: onInitPuzzle,
+    pause: pause
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle-frame"

package/dist/components/image-click-wrapper-component/components/ImageClickWrapperComponent.js

@@ -88,7 +88,8 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       emitResetPuzzle = props.emitResetPuzzle,
       firstTryForFrame = props.firstTryForFrame,
       puzzlesAutoCompleted = props.puzzlesAutoCompleted,
-      emitOpenPopupCounterInfo = props.emitOpenPopupCounterInfo;
+      emitOpenPopupCounterInfo = props.emitOpenPopupCounterInfo,
+      pause = props.pause;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -175,6 +176,13 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     }, 1000);
     intervalForCountDown.current = timeout;
   }, []);
+  (0, _react.useEffect)(function () {
+    if (pause) {
+      clearInterval(intervalForCountDown.current);
+    } else {
+      startCountDown();
+    }
+  }, [pause, startCountDown]);
   var handleFinish = (0, _react.useCallback)(function (rewards, success) {
     if (emitFinish) {
       emitFinish(rewards, success);

package/dist/components/lectures-component/components/LecturesComponent.js

@@ -121,7 +121,7 @@ var LecturesComponent = function LecturesComponent(_ref) {
   return visible ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(viewed ? 'notes--results' : 'readings--container', " ").concat(!viewed && backgroundImage !== null && backgroundImage !== void 0 && backgroundImage.url ? 'readings--container--with-custom-bg' : ''),
     style: !viewed && backgroundImage !== null && backgroundImage !== void 0 && backgroundImage.url ? {
-      backgroundImage: "url(".concat(backgroundImage.url, ")")
+      backgroundImage: "url('".concat(backgroundImage.url, "')")
     } : {}
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: viewed ? 'notes--results__text' : 'readings'