@gamelearn/arcade-components 2.22.0 → 2.23.0

package/dist/components/comic-component/components/ComicComponent.js

@@ -46,7 +46,9 @@ var ComicComponent = function ComicComponent(_ref) {
       soundActions = _ref$soundActions === void 0 ? [function () {}, function () {}] : _ref$soundActions,
       autoPlay = _ref.autoPlay,
       pause = _ref.pause,
+      progress = _ref.progress,
       keyboardControl = _ref.keyboardControl;
+  var defaultSlide = (progress === null || progress === void 0 ? void 0 : progress.slide) || 0;
 
   var translate = function translate(id) {
     return emitEvent({
@@ -74,7 +76,7 @@ var ComicComponent = function ComicComponent(_ref) {
       start = _useTimeout.start,
       stop = _useTimeout.stop;
 
-  var _useState7 = (0, _react.useState)(0),
+  var _useState7 = (0, _react.useState)(defaultSlide),
       _useState8 = _slicedToArray(_useState7, 2),
       slideCount = _useState8[0],
       setCount = _useState8[1];
@@ -99,22 +101,36 @@ var ComicComponent = function ComicComponent(_ref) {
     setAudioFailed(false);
 
     if (slideCount + 1 < slides.length && !pause) {
+      var next = slideCount + 1;
       setTransition('slide-animation');
-      setCount(slideCount + 1);
+      setCount(next);
       setStarted(true);
+      emitEvent({
+        type: 'notifyProgress',
+        payload: {
+          slide: next
+        }
+      });
     }
-  }, [pause, slideCount, slides.length]);
+  }, [pause, slideCount, slides.length, emitEvent]);
   var goToPreviousSlide = (0, _react.useCallback)(function () {
     setStarted(false);
     setAudioFailed(false);
 
     if (slideCount - 1 >= 0) {
+      var next = slideCount - 1;
       setTransition('slide-animation');
-      setCount(slideCount - 1);
+      setCount(next);
       setStarted(true);
       play('click-ui');
+      emitEvent({
+        type: 'notifyProgress',
+        payload: {
+          slide: next
+        }
+      });
     }
-  }, [play, slideCount]);
+  }, [play, slideCount, emitEvent]);
 
   var handleManualNext = function handleManualNext() {
     play('click-ui');

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

@@ -71,7 +71,9 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       background = _ref.background,
       soundActions = _ref.soundActions,
       lodSettings = _ref.lodSettings,
-      autoPlay = _ref.autoPlay;
+      autoPlay = _ref.autoPlay,
+      progress = _ref.progress;
+  var defaultLine = (progress === null || progress === void 0 ? void 0 : progress.line) || 0;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -93,7 +95,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       audioFailed = _useState8[0],
       setAudioFailed = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(0),
+  var _useState9 = (0, _react.useState)(defaultLine),
       _useState10 = _slicedToArray(_useState9, 2),
       currentLine = _useState10[0],
       setCurrentLine = _useState10[1];
@@ -137,8 +139,15 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     var lastLine = lines.find(function (line) {
       return line.id === (lastEdge === null || lastEdge === void 0 ? void 0 : lastEdge.fromId);
     });
+
+    if (!lastNodeId && (progress === null || progress === void 0 ? void 0 : progress.line) >= 0) {
+      return {
+        decision: true
+      };
+    }
+
     return lastLine;
-  }, [edges, lines, lastNodeId]);
+  }, [edges, lines, lastNodeId, progress === null || progress === void 0 ? void 0 : progress.line]);
   var previousLineWasDecision = (0, _react.useCallback)(function () {
     if (isBranched) {
       // if we have edges, we need to check if the previous line was a decision
@@ -280,13 +289,19 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
         reset();
       } else if (destinationEdge >= 0) {
         setCurrentLine(destinationEdge);
+        emitEvent({
+          type: 'notifyProgress',
+          payload: {
+            line: destinationEdge
+          }
+        });
       } else {
         finishConversation();
       }
     } else {
       finishConversation();
     }
-  }, [currentLineData.id, edges, finishConversation, lines]);
+  }, [currentLineData.id, edges, emitEvent, finishConversation, lines]);
   var handleBranchDirection = (0, _react.useCallback)(function () {
     var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     var keys = forward ? ['fromId', 'toId'] : ['toId', 'fromId'];
@@ -312,10 +327,16 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
     if (destination >= 0) {
       setCurrentLine(destination);
+      emitEvent({
+        type: 'notifyProgress',
+        payload: {
+          line: destination
+        }
+      });
     } else {
       finishConversation();
     }
-  }, [currentLineData.id, edges, edgesHistory, finishConversation, lastNodeId, lines]);
+  }, [currentLineData.id, edges, edgesHistory, emitEvent, finishConversation, lastNodeId, lines]);
   var handleClickNext = (0, _react.useCallback)(function (choice, reset) {
     var isLast = false;
     setTTsStart(false);
@@ -334,7 +355,14 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       var maxLine = lines.length - 1;
 
       if (line + 1 <= maxLine) {
-        setCurrentLine(line + 1);
+        var next = line + 1;
+        setCurrentLine(next);
+        emitEvent({
+          type: 'notifyProgress',
+          payload: {
+            line: next
+          }
+        });
       } else if (currentLineData.decision) {
         finishConversation();
       } else {
@@ -345,7 +373,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     if (!isLast) {
       setStarted(true);
     }
-  }, [currentLine, currentLineData.decision, currentLineData.id, finishConversation, handleBranchDirection, handleDecisionBranch, isBranched, lines.length, edgesHistory]);
+  }, [emitEvent, currentLine, currentLineData.decision, currentLineData.id, finishConversation, handleBranchDirection, handleDecisionBranch, isBranched, lines.length, edgesHistory]);
 
   var handleClickBack = function handleClickBack() {
     setStarted(false);
@@ -355,7 +383,14 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     if (isBranched) {
       handleBranchDirection(false);
     } else if (!previousLineWasDecision()) {
-      setCurrentLine(currentLine - 1);
+      var next = currentLine - 1;
+      setCurrentLine(next);
+      emitEvent({
+        type: 'notifyProgress',
+        payload: {
+          line: next
+        }
+      });
     }
 
     setStarted(true);
@@ -453,6 +488,14 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
   (0, _react.useEffect)(function () {
     if (isBranched && !mounted) {
+      var defaultBranch = progress === null || progress === void 0 ? void 0 : progress.line;
+
+      if (defaultBranch >= 0) {
+        setMounted(true);
+        setCurrentLine(defaultBranch);
+        return;
+      }
+
       var startNodes = lines.filter(function (node) {
         return !edges.find(function (edge) {
           return edge.toId === node.id;
@@ -469,7 +512,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
         }
       }
     }
-  }, [edges, isBranched, lines, mounted]);
+  }, [edges, isBranched, lines, mounted, progress === null || progress === void 0 ? void 0 : progress.line]);
   keyboardControl(isDecision || disableBackButton ? null : manualClickBack, isDecision ? null : manualClickNext);
 
   var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {

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

@@ -83,9 +83,11 @@ var DialogComponent = function DialogComponent(_ref) {
       soundActions = _ref.soundActions,
       zoomInActor = _ref.zoomInActor,
       autoPlay = _ref.autoPlay,
-      pause = _ref.pause;
+      pause = _ref.pause,
+      progress = _ref.progress;
+  var defaultLine = (progress === null || progress === void 0 ? void 0 : progress.line) || 0;
 
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)(defaultLine),
       _useState2 = _slicedToArray(_useState, 2),
       line = _useState2[0],
       changeLine = _useState2[1];
@@ -210,6 +212,13 @@ var DialogComponent = function DialogComponent(_ref) {
     var lastL = lines.find(function (l) {
       return l.id === (lastEdge === null || lastEdge === void 0 ? void 0 : lastEdge.fromId);
     });
+
+    if (!lastNodeId && (progress === null || progress === void 0 ? void 0 : progress.line) >= 0) {
+      return {
+        decision: true
+      };
+    }
+
     return lastL;
   }, [edges, lines, lastNodeId]);
   var previousLineWasDecision = (0, _react.useCallback)(function () {
@@ -480,10 +489,16 @@ var DialogComponent = function DialogComponent(_ref) {
         show: false
       });
       changeLine(destination);
+      emitEvent({
+        type: 'notifyProgress',
+        payload: {
+          line: destination
+        }
+      });
     } else {
       finishConversation();
     }
-  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id, edges, finishConversation, lines]);
+  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.id, emitEvent, edges, finishConversation, lines]);
   var handleDecisionBranch = (0, _react.useCallback)(function (choice, reset) {
     var currentId = [3, 2, 1][choice.id];
     var optionsEdges = edges.filter(function (edge) {
@@ -504,6 +519,12 @@ var DialogComponent = function DialogComponent(_ref) {
           show: false
         });
         changeLine(destinationEdge);
+        emitEvent({
+          type: 'notifyProgress',
+          payload: {
+            line: destinationEdge
+          }
+        });
       }
     } else {
       finishConversation();
@@ -517,12 +538,19 @@ var DialogComponent = function DialogComponent(_ref) {
     if (isBranched) {
       handleBranchDirection(false);
     } else if (!previousLineWasDecision()) {
+      var next = line - 1;
       setCurrentMessage({
         show: false
       });
-      changeLine(line - 1);
+      changeLine(next);
+      emitEvent({
+        type: 'notifyProgress',
+        payload: {
+          line: next
+        }
+      });
     }
-  }, [handleBranchDirection, isBranched, lastLine, line, talkingCharacter]);
+  }, [handleBranchDirection, emitEvent, isBranched, lastLine, line, talkingCharacter]);
   var nextLine = (0, _react.useCallback)(function (choice, reset) {
     lastTalking.current = _objectSpread({}, talkingCharacter);
     resetTalkingAnimation();
@@ -536,14 +564,21 @@ var DialogComponent = function DialogComponent(_ref) {
         handleBranchDirection();
       }
     } else if (line < lines.length - 1) {
+      var next = line + 1;
       setCurrentMessage({
         show: false
       });
-      changeLine(line + 1);
+      changeLine(next);
+      emitEvent({
+        type: 'notifyProgress',
+        payload: {
+          line: next
+        }
+      });
     } else if (currentLineData.decision) {
       finishConversation();
     }
-  }, [currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation, talkingCharacter]);
+  }, [emitEvent, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.decision, isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation, talkingCharacter]);
 
   var manualBackLine = function manualBackLine() {
     setAutomatic(false);
@@ -573,6 +608,14 @@ var DialogComponent = function DialogComponent(_ref) {
 
   (0, _react.useEffect)(function () {
     if (isBranched && !mounted) {
+      var defaultBranch = progress === null || progress === void 0 ? void 0 : progress.line;
+
+      if (defaultBranch >= 0) {
+        setMounted(true);
+        changeLine(defaultBranch);
+        return;
+      }
+
       var startNodes = lines.filter(function (node) {
         return !edges.find(function (edge) {
           return edge.toId === node.id;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,8 +14,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@gamelearn/arcade-styles": "2.15.0",
-    "@gamelearn/arcade-three-core": "1.17.2",
+    "@gamelearn/arcade-styles": "2.15.1",
+    "@gamelearn/arcade-three-core": "^1.24.3-beta.2",
+    "@react-three/a11y": "^3.0.0",
     "@react-three/drei": "9.4.3",
     "@react-three/fiber": "8.0.17",
     "@testing-library/jest-dom": "^5.16.4",