@gamelearn/arcade-components 1.4.11 → 1.4.12

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

@@ -48,6 +48,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
 
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
+      edges = _ref.edges,
       characters = _ref.characters,
       actors = _ref.actors,
       background = _ref.background,
@@ -73,6 +74,9 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   var voiceOverSlots = [];
   var voiceOver = currentLineData.voiceOver,
       decision = currentLineData.decision;
+  var isBranched = !!edges;
+  var isVoiceOver = voiceOver || currentLineData.type === 'conversationalNarration';
+  var isDecision = decision || currentLineData.type === 'conversationalDecision';
   var isFlex = currentLineData.flex;
   var translate = (0, _react.useCallback)(function (id) {
     return emitEvent({
@@ -81,7 +85,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     });
   }, [emitEvent]);
   var getCurrentMessage = (0, _react.useCallback)(function () {
-    if (voiceOver) {
+    if (isVoiceOver) {
       return currentLineData;
     }
 
@@ -97,7 +101,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     return currentLineData.slots.find(function (slot) {
       return slot.uid && slot.text;
     });
-  }, [currentLineData, voiceOver]);
+  }, [currentLineData, isVoiceOver]);
   var getVoice = (0, _react.useCallback)(function (_ref2) {
     var id = _ref2.id,
         _ref2$type = _ref2.type,
@@ -118,8 +122,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     return null;
   }, [translate]);
   var currentMessage = (0, _react.useMemo)(function () {
-    return !decision ? getCurrentMessage() : {};
-  }, [getCurrentMessage, decision]);
+    return !isDecision ? getCurrentMessage() : {};
+  }, [getCurrentMessage, isDecision]);
   var playSpeech = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
     var payload, url;
     return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -163,7 +167,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     return line.slots;
   });
   var lastLine = lines[currentLine - 1] ? lines[currentLine - 1] : {};
-  var hasCharacters = !currentLineData.decision && ((_currentLineData$slot = currentLineData.slots) === null || _currentLineData$slot === void 0 ? void 0 : _currentLineData$slot.filter(function (slot) {
+  var hasCharacters = !isDecision && ((_currentLineData$slot = currentLineData.slots) === null || _currentLineData$slot === void 0 ? void 0 : _currentLineData$slot.filter(function (slot) {
     return slot.uid;
   }).length);
   var currentSlots = [];
@@ -190,7 +194,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     return slot;
   });
 
-  if (voiceOver) {
+  if (isVoiceOver) {
     var rightWithSlots = lines.slice(currentLine).find(function (line) {
       return line.slots;
     });
@@ -200,7 +204,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       voiceOverSlots = lineWithSlots.slots;
       isFlex = lineWithSlots.flex;
     }
-  } else if (!decision && hasCharacters) {
+  } else if (!isDecision && hasCharacters) {
     currentLineData.slots.forEach(function (slot) {
       var indx = currentCharacters.findIndex(function (char) {
         return char.uid === slot.uid;
@@ -230,29 +234,85 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     lodSettings: lodSettings,
     actors: actors,
     currentMessage: currentMessage || {},
-    slots: !voiceOver ? currentLineData.slots : voiceOverSlots,
+    slots: !isVoiceOver ? currentLineData.slots : voiceOverSlots,
     flex: isFlex
   };
+  var finishConversation = (0, _react.useCallback)(function () {
+    setFinished(true);
+    emitEvent({
+      type: 'success'
+    });
+  }, [emitEvent]);
+  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.id;
+    });
+    var currentEdge = optionsEdges.find(function (edge) {
+      return parseInt(edge.fromPointIndex) === currentId;
+    });
+    var destinationEdge = lines.findIndex(function (l) {
+      return l.id === currentEdge.toId;
+    });
 
-  var handleClickNext = function handleClickNext() {
-    playSound('click-ui');
-    var line = currentLine;
-    var maxLine = lines.length - 1;
+    if (currentEdge.fromId === currentEdge.toId) {
+      reset();
+    } else if (destinationEdge >= 0) {
+      setCurrentLine(destinationEdge);
+    } else {
+      finishConversation();
+    }
+  }, [currentLineData.id, edges, finishConversation, lines]);
 
-    if (line + 1 <= maxLine) {
-      setCurrentLine(line + 1);
+  var handleBranchDirection = function handleBranchDirection() {
+    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]] === currentLineData.id;
+    });
+
+    if (!(foundEdge !== null && foundEdge !== void 0 && foundEdge[keys[0]])) {
+      finishConversation();
     } else {
-      setFinished(true);
-      emitEvent({
-        type: 'success'
+      var destination = lines.findIndex(function (line) {
+        return line.id === foundEdge[keys[1]];
       });
+
+      if (destination >= 0) {
+        setCurrentLine(destination);
+      } else {
+        finishConversation();
+      }
+    }
+  };
+
+  var handleClickNext = function handleClickNext(choice, reset) {
+    playSound('click-ui');
+
+    if (isBranched) {
+      if (choice) {
+        handleDecisionBranch(choice, reset);
+      } else {
+        handleBranchDirection();
+      }
+    } else {
+      var line = currentLine;
+      var maxLine = lines.length - 1;
+
+      if (line + 1 <= maxLine) {
+        setCurrentLine(line + 1);
+      } else {
+        finishConversation();
+      }
     }
   };
 
   var handleClickBack = function handleClickBack() {
     playSound('click-ui');
 
-    if (currentLine > 0) {
+    if (isBranched) {
+      handleBranchDirection(false);
+    } else if (currentLine > 0) {
       setCurrentLine(currentLine - 1);
     }
   };
@@ -279,6 +339,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   }, [stop]);
 
   var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
+    required: !isBranched,
+    branched: isBranched,
     onFinish: handleClickNext,
     emitEvent: emitEvent,
     soundActions: soundActions,
@@ -290,8 +352,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     }
   });
 
-  if (decision) {
-    return /*#__PURE__*/_react.default.createElement(_decisionComponent.default, decisionPayload);
+  if (isDecision) {
+    return /*#__PURE__*/_react.default.createElement(_decisionComponent.default, decisionPayload); // todo cambiar el decision para indicar la decisión escogida
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -309,8 +371,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   }) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: "conversation--controls"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "gat--btn__round ".concat(currentLine > 0 && !lastLine.decision ? '' : 'disabled'),
-    disabled: currentLine > 0 && !lastLine.decision ? '' : true,
+    className: "gat--btn__round ".concat(currentLine > 0 && (!lastLine.decision || isBranched) ? '' : 'disabled'),
+    disabled: currentLine > 0 && (!lastLine.decision || isBranched) ? '' : true,
     type: "button",
     onClick: handleClickBack
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -318,7 +380,9 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   })), /*#__PURE__*/_react.default.createElement("button", {
     className: "gat--btn__round",
     type: "button",
-    onClick: handleClickNext
+    onClick: function onClick() {
+      return handleClickNext();
+    }
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-next"
   }))))));

package/dist/components/conversational-pro-component/mocks/mockForStory.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withoutBackground = exports.voiceOverProps = exports.textToSpeechProps = exports.conversationPropsNoFeedbackNoRewards = exports.conversationPropsLodSettings = exports.conversationProps = exports.converOld = void 0;
+exports.withoutBackground = exports.voiceOverProps = exports.textToSpeechProps = exports.conversationPropsNoFeedbackNoRewards = exports.conversationPropsLodSettings = exports.conversationProps = exports.converOld = exports.branchedConver = void 0;
 
 var _mocker = require("helpers/mocker");
 
@@ -19,6 +19,300 @@ var animations = {
     url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/5981fca94d82290bcbe957fe/animation/5f06e116f9efdd00112fcc6f/male_missunderstand_1.glb'
   }
 };
+var branchedConver = {
+  emitEvent: _mocker.emitEvent,
+  soundActions: _mocker.soundActions,
+  lines: [{
+    id: 'line1',
+    type: 'conversationalPhrase',
+    flex: true,
+    slots: [{
+      emotion: '',
+      text: '',
+      uid: 'DbKslR',
+      talking: false,
+      alias: 'paco',
+      text_labelId: 'text_0_0_nlrZh8Np',
+      alias_labelId: 'alias_0_0_nlrZh2Iq'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_1_nlrZiNfB',
+      alias_labelId: 'alias_0_1_nlrZijhw'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_2_nlrZiBF3',
+      alias_labelId: 'alias_0_2_nlrZiR6G'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_3_nlrZinJN',
+      alias_labelId: 'alias_0_3_nlrZjLWB'
+    }, {
+      emotion: 'neutral',
+      text: 'Hola!',
+      uid: 'kjTHqt',
+      talking: true,
+      alias: 'manolo',
+      text_labelId: 'text_0_4_nlrZjUV9',
+      alias_labelId: 'alias_0_4_nlrZj81d'
+    }],
+    audioId: '5f1078861d84860011e179d0',
+    hasAlias: true,
+    text_labelId: 'text_0_nlrZj4Nr',
+    audioId_labelId: 'audioId_0_nlrZkkdo'
+  }, {
+    id: 'line2',
+    flex: true,
+    type: 'conversationalPhrase',
+    slots: [{
+      emotion: '',
+      text: '',
+      uid: 'DbKslR',
+      talking: false,
+      alias: 'paco',
+      text_labelId: 'text_0_0_nlrZh8Np',
+      alias_labelId: 'alias_0_0_nlrZh2Iq'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_1_nlrZiNfB',
+      alias_labelId: 'alias_0_1_nlrZijhw'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_2_nlrZiBF3',
+      alias_labelId: 'alias_0_2_nlrZiR6G'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_3_nlrZinJN',
+      alias_labelId: 'alias_0_3_nlrZjLWB'
+    }, {
+      emotion: 'neutral',
+      text: 'Hola!',
+      uid: 'kjTHqi',
+      talking: true,
+      alias: 'manolo',
+      text_labelId: 'text_0_4_nlrZjUV9',
+      alias_labelId: 'alias_0_4_nlrZj81d'
+    }],
+    audioId: '5f1078861d84860011e179d0',
+    hasAlias: true,
+    text_labelId: 'text_0_nlrZj4Nr',
+    audioId_labelId: 'audioId_0_nlrZkkdo'
+  }, {
+    id: 'line3',
+    flex: true,
+    type: 'conversationalPhrase',
+    slots: [{
+      emotion: '',
+      text: '',
+      uid: 'DbKslR',
+      talking: false,
+      alias: 'paco',
+      text_labelId: 'text_0_0_nlrZh8Np',
+      alias_labelId: 'alias_0_0_nlrZh2Iq'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_1_nlrZiNfB',
+      alias_labelId: 'alias_0_1_nlrZijhw'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_2_nlrZiBF3',
+      alias_labelId: 'alias_0_2_nlrZiR6G'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_3_nlrZinJN',
+      alias_labelId: 'alias_0_3_nlrZjLWB'
+    }, {
+      emotion: 'neutral',
+      text: 'Hola!',
+      uid: 'kjTHqx',
+      talking: true,
+      alias: 'manolo',
+      text_labelId: 'text_0_4_nlrZjUV9',
+      alias_labelId: 'alias_0_4_nlrZj81d'
+    }],
+    audioId: '5f1078861d84860011e179d0',
+    hasAlias: true,
+    text_labelId: 'text_0_nlrZj4Nr',
+    audioId_labelId: 'audioId_0_nlrZkkdo'
+  }, {
+    id: 'line3',
+    type: 'conversationalDecision',
+    payload: {
+      options: [{
+        id: 0,
+        right: false,
+        feedback: 'dfgsdfgsdfgsdfghdfgh',
+        text: 'Si',
+        rewards: [],
+        audioId: '',
+        text_labelId: 'text_3_0_u4s8j5fa',
+        feedback_labelId: 'feedback_3_0_u4s8jVTv',
+        audioId_labelId: 'audioId_3_0_u4s8jyiK'
+      }, {
+        id: 1,
+        right: false,
+        feedback: 'fasdfasdfg',
+        text: 'No',
+        rewards: [],
+        audioId: '',
+        text_labelId: 'text_3_1_u4s8jzBF',
+        feedback_labelId: 'feedback_3_1_u4s8jWNa',
+        audioId_labelId: 'audioId_3_1_u4s8jaJY'
+      }, {
+        id: 2,
+        right: true,
+        feedback: 'asdfasd',
+        text: 'Patata',
+        rewards: [],
+        audioId: '',
+        text_labelId: 'text_3_2_u4s8jA2Z',
+        feedback_labelId: 'feedback_3_2_u4s8jBIJ',
+        audioId_labelId: 'audioId_3_2_u4s8j23g'
+      }],
+      required: true,
+      question: 'Funciona la decisión',
+      question_labelId: 'question_3_u4s8i10a'
+    },
+    decision: true
+  }, {
+    id: 'line4',
+    flex: true,
+    type: 'conversationalPhrase',
+    slots: [{
+      emotion: 'angry',
+      text: '',
+      uid: 'DbKslR',
+      talking: false,
+      alias: 'paco',
+      text_labelId: 'text_0_0_nlrZh8Np',
+      alias_labelId: 'alias_0_0_nlrZh2Iq'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_1_nlrZiNfB',
+      alias_labelId: 'alias_0_1_nlrZijhw'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_2_nlrZiBF3',
+      alias_labelId: 'alias_0_2_nlrZiR6G'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_3_nlrZinJN',
+      alias_labelId: 'alias_0_3_nlrZjLWB'
+    }, {
+      emotion: 'neutral',
+      text: 'Hola!',
+      uid: 'kjTHqi',
+      talking: true,
+      alias: 'manolo',
+      text_labelId: 'text_0_4_nlrZjUV9',
+      alias_labelId: 'alias_0_4_nlrZj81d'
+    }],
+    audioId: '5f1078861d84860011e179d0',
+    hasAlias: true,
+    text_labelId: 'text_0_nlrZj4Nr',
+    audioId_labelId: 'audioId_0_nlrZkkdo'
+  }, {
+    id: 'line5',
+    type: 'conversationalNarration',
+    name: 'Narrador',
+    text: 'Probando el voice over',
+    audioId: '',
+    voiceOver: true,
+    text_labelId: 'text_2_nylZEurm',
+    audioId_labelId: 'audioId_2_nylZECnV'
+  }],
+  background: {
+    imgId: '605369a5901f3e00123b81ca',
+    imgName: 'b27bb40dcb1189d14012131a35b48a36.jpeg',
+    img: {
+      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/605369a5901f3e00123b81ca/b27bb40dcb1189d14012131a35b48a36.jpeg'
+    }
+  },
+  characters: [{
+    name: 'Testing',
+    resourceId: '5f68d7b6a373890011a78a11',
+    resource: {
+      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/5981fca94d82290bcbe957fe/object/5eff09c2085be00011aae087/pr0238_yacht_001.glb'
+    },
+    type: 'object',
+    uid: 'DbKslR'
+  }, {
+    name: 'Male senior dark-skinned 01',
+    resourceId: '5f5214cec39e26001123797f',
+    resource: {
+      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/5981fca94d82290bcbe957fe/character/5f5214cec39e26001123797f/ch0112_philip_001.glb',
+      animations: animations
+    },
+    type: 'character',
+    uid: 'kjTHqi'
+  }, {
+    name: 'Female senior light-skinned 01',
+    resourceId: '5f5214cec39e26001123797f',
+    resource: {
+      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/5981fca94d82290bcbe957fe/character/5f60759328beb100113b694c/ch0116_bima_001_rig_v01_llaveronuevo.glb',
+      animations: {
+        neutral: {
+          resource: {}
+        }
+      }
+    },
+    type: 'character',
+    uid: 'kjTHqt'
+  }, {
+    name: 'Taxi',
+    resourceId: '5f5214cec39e26001123797f',
+    resource: {
+      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/5981fca94d82290bcbe957fe/object/5e53b649ef1f60000fb9cc1c/draco_pr0065_car_004.glb'
+    },
+    type: 'object',
+    uid: 'kjTHqx'
+  }],
+  edges: [{
+    id: '1',
+    fromId: 'line1',
+    toId: 'line3'
+  }, {
+    id: '2',
+    fromId: 'line3',
+    toId: 'line2'
+  }]
+};
+exports.branchedConver = branchedConver;
 var converOld = {
   emitEvent: _mocker.emitEvent,
   soundActions: _mocker.soundActions,

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

@@ -55,7 +55,9 @@ var DecisionComponent = function DecisionComponent(_ref) {
       inheritProps = _props$inheritProps === void 0 ? {} : _props$inheritProps,
       required = props.required,
       question = props.question,
-      _onFinish = props.onFinish;
+      _onFinish = props.onFinish,
+      branched = props.branched,
+      simplifiedOptions = props.simplifiedOptions;
   var inherited = Object.keys(inheritProps).length > 0;
 
   var _useState = (0, _react.useState)('options'),
@@ -104,6 +106,7 @@ var DecisionComponent = function DecisionComponent(_ref) {
     selectedView: selectedView,
     emitEvent: emitEvent,
     inherited: inherited,
+    branched: branched,
     soundActions: soundActions,
     showingResults: selectedView === 'results',
     currentSelectedChoice: resultChoice,
@@ -136,24 +139,36 @@ var DecisionComponent = function DecisionComponent(_ref) {
 
       if (!failed && selectedView === 'results') {
         if (inherited) {
-          emitEvent({
-            type: 'addPoints',
-            payload: choice.rewards,
-            finish: true,
-            complex: true,
-            onFinish: function onFinish() {
-              if (_onFinish) {
-                _onFinish();
-              } else {
-                emitEvent({
-                  type: 'success'
-                });
-              }
-
-              setResultChoice({});
-              selectView('options');
+          if (simplifiedOptions) {
+            if (_onFinish) {
+              _onFinish(choice, function () {
+                setResultChoice({});
+                selectView('options');
+              });
             }
-          });
+          } else {
+            emitEvent({
+              type: 'addPoints',
+              payload: choice.rewards,
+              finish: true,
+              complex: true,
+              onFinish: function onFinish() {
+                if (_onFinish) {
+                  _onFinish(choice, function () {
+                    setResultChoice({});
+                    selectView('options');
+                  });
+                } else {
+                  emitEvent({
+                    type: 'success'
+                  });
+                }
+
+                setResultChoice({});
+                selectView('options');
+              }
+            });
+          }
         } else {
           emitEvent({
             type: 'addPoints',
@@ -163,32 +178,46 @@ var DecisionComponent = function DecisionComponent(_ref) {
           });
         }
       } else if (Object.keys(choice).length > 0) {
-        if (choice.right) {
-          playSound('score');
-        } else {
-          playSound('fail');
-
-          if (inherited) {
-            emitEvent({
-              type: 'addPoints',
-              payload: choice.rewards,
-              finish: false,
-              complex: true
-            });
-          } else if (!required) {
-            emitEvent({
-              type: 'addPoints',
-              payload: choice.rewards,
-              finish: true,
-              complex: true,
-              onFinish: _onFinish
-            });
+        if (!simplifiedOptions) {
+          if (choice.right) {
+            playSound('score');
+          } else {
+            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: true,
+                  complex: true,
+                  onFinish: _onFinish ? function () {
+                    return _onFinish(choice, function () {
+                      setResultChoice({});
+                      selectView('options');
+                    });
+                  } : null
+                });
+              }
+            }
           }
-        }
 
-        setResultChoice(choice);
-        playCurrentAudio(choice);
-        selectView('results');
+          setResultChoice(choice);
+          playCurrentAudio(choice);
+          selectView('results');
+        } else {
+          _onFinish(choice, function () {
+            setResultChoice({});
+            selectView('options');
+          });
+        }
       }
     },
     // onExit: () => {

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

@@ -67,6 +67,7 @@ var DialogComponent = function DialogComponent(_ref) {
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
       actors = _ref.actors,
+      edges = _ref.edges,
       soundActions = _ref.soundActions,
       zoomInActor = _ref.zoomInActor,
       autoPlay = _ref.autoPlay;
@@ -123,12 +124,17 @@ var DialogComponent = function DialogComponent(_ref) {
   var currentLine = lines[line];
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
+  var isBranched = !!edges;
+  var voiceOver = currentLine.voiceOver,
+      decision = currentLine.decision;
   var translate = (0, _react.useCallback)(function (id) {
     return emitEvent({
       type: 'translate',
       payload: id
     });
   }, [emitEvent]);
+  var isVoiceOver = voiceOver || currentLine.type === 'conversationalNarration';
+  var isDecision = decision || currentLine.type === 'conversationalDecision';
   var getVoice = (0, _react.useCallback)(function (_ref2) {
     var id = _ref2.id,
         _ref2$type = _ref2.type,
@@ -268,34 +274,88 @@ var DialogComponent = function DialogComponent(_ref) {
     messagePosition.current.parent = null;
     if (zoomInActor) animationStart.current = true;
   }, [zoomInActor]);
+  var finishConversation = (0, _react.useCallback)(function () {
+    resetAnims();
+    lastSet.current = true;
+    setCurrentMessage({});
+    resetCameraView();
+    setTimeout(function () {
+      emitEvent({
+        type: 'success'
+      });
+      camera.copy(defaultCamera.current);
+    });
+  }, [camera, emitEvent, resetAnims, resetCameraView]);
+  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.id;
+    });
+
+    if (!(foundEdge !== null && foundEdge !== void 0 && foundEdge[keys[0]])) {
+      finishConversation();
+    } else {
+      var destination = lines.findIndex(function (l) {
+        return l.id === foundEdge[keys[1]];
+      });
+
+      if (destination >= 0) {
+        setCurrentMessage({});
+        changeLine(destination);
+      } else {
+        finishConversation();
+      }
+    }
+  }, [currentLine.id, edges, finishConversation, lines]);
   var backLine = (0, _react.useCallback)(function () {
-    if (lastLine && !lastLine.decision) {
+    if (isBranched) {
+      handleBranchDirection(false);
+    } else if (lastLine && !(lastLine !== null && lastLine !== void 0 && lastLine.decision) || lastLine.type && !lastLine.type !== 'conversationalDecision') {
       setCurrentMessage({});
       changeLine(line - 1);
     }
-  }, [lastLine, line]);
-  var nextLine = (0, _react.useCallback)(function () {
-    if (line < lines.length - 1) {
+  }, [handleBranchDirection, isBranched, lastLine, line]);
+  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.id;
+    });
+    var currentEdge = optionsEdges.find(function (edge) {
+      return parseInt(edge.fromPointIndex) === currentId;
+    });
+    var destinationEdge = lines.findIndex(function (l) {
+      return l.id === currentEdge.toId;
+    });
+
+    if (currentEdge.fromId === currentEdge.toId) {
+      reset();
+    } else if (destinationEdge >= 0) {
       setCurrentMessage({});
-      changeLine(line + 1);
+      changeLine(destinationEdge);
     } else {
-      resetAnims();
-      lastSet.current = true;
+      finishConversation();
+    }
+  }, [currentLine.id, edges, finishConversation, lines]);
+  var nextLine = (0, _react.useCallback)(function (choice, reset) {
+    if (isBranched) {
+      if (choice) {
+        handleDecisionBranch(choice, reset);
+      } else {
+        handleBranchDirection();
+      }
+    } else if (line < lines.length - 1) {
       setCurrentMessage({});
-      resetCameraView();
-      setTimeout(function () {
-        emitEvent({
-          type: 'success'
-        });
-        camera.copy(defaultCamera.current);
-      }, currentLine.decision ? 0 : 1200);
+      changeLine(line + 1);
+    } else {
+      finishConversation();
     }
-  }, [camera, currentLine === null || currentLine === void 0 ? void 0 : currentLine.decision, emitEvent, line, lines.length, resetAnims, resetCameraView]); // Position bubble over talking character/and switch emotions
+  }, [isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]); // Position bubble over talking character/and switch emotions
 
   (0, _react.useEffect)(function () {
-    if (currentLine.decision) {
+    if (isDecision) {
       resetCameraView();
-    } else if (currentLine.voiceOver) {
+    } else if (isVoiceOver) {
       resetCameraView();
       setCurrentMessage({
         text: currentLine.text,
@@ -402,7 +462,7 @@ var DialogComponent = function DialogComponent(_ref) {
         });
       }
     }
-  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView]); // Sound logic
+  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver]); // Sound logic
 
   (0, _react.useEffect)(function () {
     var _currentLine$audio;
@@ -546,24 +606,25 @@ var DialogComponent = function DialogComponent(_ref) {
       }
     }
   });
-
-  var decisionPayload = _objectSpread(_objectSpread({}, currentLine.payload), {}, {
-    inheritProps: {
-      slots: [],
-      disableBackground: true
-    },
-    onFinish: nextLine,
-    emitEvent: emitEvent,
-    soundActions: soundActions
-  });
-
   var cleanStyle = {
     width: '100vw',
     height: '100vh',
     position: 'static'
   };
 
-  if (currentLine.decision) {
+  if (isDecision) {
+    var decisionPayload = _objectSpread(_objectSpread({}, currentLine.payload), {}, {
+      inheritProps: {
+        slots: [],
+        disableBackground: true
+      },
+      required: !isBranched,
+      branched: isBranched,
+      onFinish: nextLine,
+      emitEvent: emitEvent,
+      soundActions: soundActions
+    });
+
     return /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
       zIndexRange: [3, 3],
       style: cleanStyle,
@@ -602,16 +663,18 @@ var DialogComponent = function DialogComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "dialog-component-controls"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    disabled: line <= 0 || (lastLine === null || lastLine === void 0 ? void 0 : lastLine.decision),
+    disabled: line <= 0 || (lastLine === null || lastLine === void 0 ? void 0 : lastLine.decision) || isBranched,
     type: "button",
     onClick: backLine,
-    className: "gat--btn__round ".concat(line <= 0 || lastLine !== null && lastLine !== void 0 && lastLine.decision ? 'disabled' : '')
+    className: "gat--btn__round ".concat(line <= 0 || lastLine !== null && lastLine !== void 0 && lastLine.decision || isBranched ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-back"
   })), /*#__PURE__*/_react.default.createElement("button", {
     className: "gat--btn__round",
     type: "button",
-    onClick: nextLine
+    onClick: function onClick() {
+      return nextLine();
+    }
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-next"
   })))) : null);

package/dist/components/dialog-component/mocks/mockForStory.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mockScene = exports.mockProps = void 0;
+exports.mockScene = exports.mockProps = exports.branchedMockProps = void 0;
 
 var _bg001_street = _interopRequireDefault(require("test/mocks/bg001_street.json"));
 
@@ -275,6 +275,270 @@ var mockProps = {
   actors: []
 };
 exports.mockProps = mockProps;
+var branchedMockProps = {
+  emitEvent: _mocker.emitEvent,
+  soundActions: _mocker.soundActions,
+  autoPlay: false,
+  lines: [{
+    id: 'line1',
+    flex: true,
+    slots: [{
+      emotion: '',
+      text: '',
+      uid: null,
+      talking: false,
+      alias: 'paco',
+      text_labelId: 'text_0_0_nlrZh8Np',
+      alias_labelId: 'alias_0_0_nlrZh2Iq'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_1_nlrZiNfB',
+      alias_labelId: 'alias_0_1_nlrZijhw'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_2_nlrZiBF3',
+      alias_labelId: 'alias_0_2_nlrZiR6G'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_3_nlrZinJN',
+      alias_labelId: 'alias_0_3_nlrZjLWB'
+    }, {
+      emotion: 'neutral',
+      text: 'En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco. En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga an',
+      uid: 'snHJhg',
+      talking: true,
+      character: {
+        resource: {
+          animations: animations
+        }
+      },
+      alias: 'Manolo',
+      text_labelId: 'text_0_4_nlrZjUV9',
+      alias_labelId: 'alias_0_4_nlrZj81d'
+    }],
+    audioId: '5f1078861d84860011e179d0',
+    hasAlias: true,
+    text_labelId: 'text_0_nlrZj4Nr',
+    audioId_labelId: 'audioId_0_nlrZkkdo'
+  }, {
+    id: 'line2',
+    flex: true,
+    slots: [{
+      emotion: '',
+      text: '',
+      uid: null,
+      talking: false,
+      alias: 'paco',
+      text_labelId: 'text_0_0_nlrZh8Np',
+      alias_labelId: 'alias_0_0_nlrZh2Iq'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_1_nlrZiNfB',
+      alias_labelId: 'alias_0_1_nlrZijhw'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_2_nlrZiBF3',
+      alias_labelId: 'alias_0_2_nlrZiR6G'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_3_nlrZinJN',
+      alias_labelId: 'alias_0_3_nlrZjLWB'
+    }, {
+      emotion: 'neutral',
+      text: 'Hola!',
+      character: {
+        resource: {
+          animations: animations
+        }
+      },
+      uid: 'jLKRKJ',
+      talking: true,
+      alias: 'Manolo',
+      text_labelId: 'text_0_4_nlrZjUV9',
+      alias_labelId: 'alias_0_4_nlrZj81d'
+    }],
+    audioId: '5f1078861d84860011e179d0',
+    hasAlias: true,
+    text_labelId: 'text_0_nlrZj4Nr',
+    audioId_labelId: 'audioId_0_nlrZkkdo'
+  }, {
+    id: 'line3',
+    flex: true,
+    slots: [{
+      emotion: '',
+      text: '',
+      uid: null,
+      talking: false,
+      alias: 'paco',
+      text_labelId: 'text_0_0_nlrZh8Np',
+      alias_labelId: 'alias_0_0_nlrZh2Iq'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_1_nlrZiNfB',
+      alias_labelId: 'alias_0_1_nlrZijhw'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_2_nlrZiBF3',
+      alias_labelId: 'alias_0_2_nlrZiR6G'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_3_nlrZinJN',
+      alias_labelId: 'alias_0_3_nlrZjLWB'
+    }, {
+      emotion: 'neutral',
+      text: 'Hola!',
+      uid: 'snHJhg',
+      character: {
+        resource: {
+          animations: animations
+        }
+      },
+      talking: true,
+      alias: 'Manolo',
+      text_labelId: 'text_0_4_nlrZjUV9',
+      alias_labelId: 'alias_0_4_nlrZj81d'
+    }],
+    audioId: '5f1078861d84860011e179d0',
+    hasAlias: true,
+    text_labelId: 'text_0_nlrZj4Nr',
+    audioId_labelId: 'audioId_0_nlrZkkdo'
+  }, {
+    id: 'line4',
+    payload: {
+      options: [{
+        id: 0,
+        right: false,
+        feedback: 'dfgsdfgsdfgsdfghdfgh',
+        text: 'Si',
+        rewards: [],
+        audioId: '',
+        text_labelId: 'text_3_0_u4s8j5fa',
+        feedback_labelId: 'feedback_3_0_u4s8jVTv',
+        audioId_labelId: 'audioId_3_0_u4s8jyiK'
+      }, {
+        id: 1,
+        right: false,
+        feedback: 'fasdfasdfg',
+        text: 'No',
+        rewards: [],
+        audioId: '',
+        text_labelId: 'text_3_1_u4s8jzBF',
+        feedback_labelId: 'feedback_3_1_u4s8jWNa',
+        audioId_labelId: 'audioId_3_1_u4s8jaJY'
+      }, {
+        id: 2,
+        right: true,
+        feedback: 'asdfasd',
+        text: 'Patata',
+        rewards: [],
+        audioId: '',
+        text_labelId: 'text_3_2_u4s8jA2Z',
+        feedback_labelId: 'feedback_3_2_u4s8jBIJ',
+        audioId_labelId: 'audioId_3_2_u4s8j23g'
+      }],
+      required: true,
+      question: 'Funciona la decisión',
+      question_labelId: 'question_3_u4s8i10a'
+    },
+    decision: true
+  }, {
+    id: 'line5',
+    flex: true,
+    slots: [{
+      emotion: 'angry',
+      text: '',
+      uid: null,
+      talking: false,
+      alias: 'paco',
+      text_labelId: 'text_0_0_nlrZh8Np',
+      alias_labelId: 'alias_0_0_nlrZh2Iq'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_1_nlrZiNfB',
+      alias_labelId: 'alias_0_1_nlrZijhw'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_2_nlrZiBF3',
+      alias_labelId: 'alias_0_2_nlrZiR6G'
+    }, {
+      emotion: 'neutral',
+      text: '',
+      uid: null,
+      talking: false,
+      text_labelId: 'text_0_3_nlrZinJN',
+      alias_labelId: 'alias_0_3_nlrZjLWB'
+    }, {
+      emotion: 'neutral',
+      text: 'Hola!',
+      uid: 'snHJhg',
+      talking: true,
+      character: {
+        resource: {
+          animations: animations
+        }
+      },
+      alias: 'Manolo',
+      text_labelId: 'text_0_4_nlrZjUV9',
+      alias_labelId: 'alias_0_4_nlrZj81d'
+    }],
+    audioId: '5f1078861d84860011e179d0',
+    hasAlias: true,
+    text_labelId: 'text_0_nlrZj4Nr',
+    audioId_labelId: 'audioId_0_nlrZkkdo'
+  }],
+  background: {
+    imgId: '605369a5901f3e00123b81ca',
+    imgName: 'b27bb40dcb1189d14012131a35b48a36.jpeg',
+    img: {
+      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/605369a5901f3e00123b81ca/b27bb40dcb1189d14012131a35b48a36.jpeg'
+    }
+  },
+  characters: [],
+  actors: [],
+  edges: [{
+    id: '1',
+    fromId: 'line1',
+    toId: 'line3'
+  }, {
+    id: '2',
+    fromId: 'line3',
+    toId: 'line2'
+  }]
+};
+exports.branchedMockProps = branchedMockProps;
 var mockScene = {
   background: _bg001_street.default,
   elements: _characters.elements,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "main": "dist/index.js",
   "files": [
     "dist",