@gamelearn/arcade-components 0.22.7 → 0.22.9

package/dist/components/chained-image-click-puzzle-component/components/CurrentImagePuzzle.js

@@ -58,6 +58,7 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
       selected = _ref.selected,
       setShowPoints = _ref.setShowPoints;
   var accRewards = (0, _react.useRef)([]);
+  var correctClicked = (0, _react.useRef)(0);
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -89,7 +90,8 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
     setShowPoints([].concat(_toConsumableArray(accRewards.current), _toConsumableArray(rewards)));
   }, [playSound, emitEvent, setShowPoints]);
   var currentImageProps = list[index];
-  var info = currentImageProps.info;
+  var info = currentImageProps.info,
+      specificFeedbacks = currentImageProps.specificFeedbacks;
   info.description = description;
   var handleResolve = (0, _react.useCallback)(function () {
     emitEvent({
@@ -101,18 +103,47 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
       }
     });
   }, [emitEvent, puzzleId, info.resolve.rewards]);
+  (0, _react.useEffect)(function () {
+    correctClicked.current = 0;
+  }, [index]);
   var onComplete = (0, _react.useCallback)(function (rw) {
-    if (index + 1 >= list.length) {
-      handleFinish(rw);
-    } else {
+    var correct = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+    if (correct) {
+      var _specificFeedbacks$co;
+
+      if ((_specificFeedbacks$co = specificFeedbacks.correctFeedbacks) !== null && _specificFeedbacks$co !== void 0 && _specificFeedbacks$co.length) {
+        correctClicked.current += 1;
+        setSelected(selected + 1);
+      } else {
+        correctClicked.current += currentImageProps.areas.length;
+        setSelected(selected + currentImageProps.areas.length);
+      }
+
+      if (correctClicked.current === currentImageProps.areas.length) {
+        if (index + 1 >= list.length) {
+          handleFinish(rw);
+        } else {
+          setIndex(index + 1);
+        }
+      }
+
       setRewards(rw);
-      setIndex(index + 1);
+    } else {
+      emitEvent({
+        type: 'addPoints',
+        payload: rw,
+        finish: false
+      });
+
+      if (currentImageProps.hasClickOrder) {
+        setSelected(selected - correctClicked.current);
+        correctClicked.current = 0;
+      }
     }
+  }, [index, list.length, currentImageProps.hasClickOrder, currentImageProps.areas.length, handleFinish, specificFeedbacks, setSelected, selected, emitEvent]);
 
-    setSelected(selected + currentImageProps.areas.length);
-  }, [index, list.length, selected, currentImageProps.areas.length, handleFinish, setSelected]);
-
-  var onResolve = function onResolve(resolve) {
+  var onResolve = function onResolve() {
     playSound('score');
     setTimeout(function () {
       handleResolve();
@@ -146,6 +177,7 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
       name: puzzleId,
       component: 'chained-image-click-puzzle'
     },
+    specificFeedbacks: specificFeedbacks,
     emitFinish: onComplete,
     emitError: setRewards,
     emitResolve: onResolve,

package/dist/components/chained-image-click-puzzle-component/mocks/mockForStory.js

@@ -3,10 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mockProps = void 0;
+exports.mockProps2 = exports.mockProps = void 0;
 
-var emitEvent = function emitEvent(type) {
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
   console.log('Emit event called', type);
+
+  if (type === 'translate') {
+    return payload;
+  }
 };
 
 var soundActions = [function (sound) {
@@ -17,6 +23,7 @@ var mockProps = {
   description: 'Dale al arma',
   showFrames: true,
   setInfo: function setInfo() {},
+  setShowPoints: function setShowPoints() {},
   emitEvent: emitEvent,
   soundActions: soundActions,
   disableExit: function disableExit() {},
@@ -62,6 +69,7 @@ var mockProps = {
       height: 1097
     },
     areas: [{
+      id: 'Uno',
       name: 'Uno',
       x: 0,
       y: 0,
@@ -126,6 +134,7 @@ var mockProps = {
       height: 1099
     },
     areas: [{
+      id: 'Dos',
       name: 'Uno',
       x: 0,
       y: 0,
@@ -135,6 +144,7 @@ var mockProps = {
       stroke: 'rgb(101,154,93)',
       closed: true
     }, {
+      id: 'Tres',
       name: 'Dos',
       x: 0,
       y: 0,
@@ -160,4 +170,255 @@ var mockProps = {
     hasHighlights: true
   }]
 };
-exports.mockProps = mockProps;
+exports.mockProps = mockProps;
+var mockProps2 = {
+  nodeId: 'xxas',
+  description: 'Dale al arma',
+  showFrames: true,
+  setInfo: function setInfo() {},
+  emitEvent: emitEvent,
+  soundActions: soundActions,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  setShowPoints: function setShowPoints() {},
+  list: [{
+    info: {
+      hint: {
+        active: true,
+        desc: 'hint',
+        rewards: []
+      },
+      resolve: {
+        rewards: []
+      },
+      solution: {
+        right: {
+          desc: 'Estupendo',
+          desc_labelId: 'alfalfa01',
+          rewards: []
+        },
+        wrong: {
+          desc: 'BUUUU',
+          desc_labelId: 'fabada01',
+          rewards: [{
+            id: 'grade',
+            name: 'grade',
+            points: -17,
+            type: 'grade'
+          }]
+        }
+      },
+      instructions: 'instructions'
+    },
+    itemOrder: 1,
+    image: {
+      imgName: 'Paz-Vizla-Concept.png',
+      img: {
+        url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/609a9b30901f3e001247c031/Paz-Vizla-Concept.png',
+        imgName: 'Paz-Vizla-Concept.png',
+        resourceId: '609a9b30901f3e001247c031'
+      },
+      width: 1920,
+      height: 1097
+    },
+    areas: [{
+      id: 'Uno',
+      name: 'Uno',
+      x: 0,
+      y: 0,
+      fill: 'rgba(255, 255, 255, 0.1)',
+      draggable: true,
+      points: [1150.0742574257429, 217.48228650990103, 1570.95297029703, 65.42288056930694, 1704.0049504950498, 195.7595142326733, 1576.383663366337, 421.13327660891093, 1247.8267326732675, 510.73971225247533],
+      stroke: 'rgb(101,154,93)',
+      closed: true
+    }],
+    badAreas: [{
+      id: 'AllArea',
+      name: 'BadArea',
+      x: 0,
+      y: 0,
+      fill: 'rgba(255, 255, 255, 0.1)',
+      draggable: true,
+      points: [0, 0, 1920, 0, 1920, 1097, 0, 1097, 0, 0],
+      stroke: '#ff634d',
+      strokeWidth: 2,
+      closed: true
+    }],
+    hasClickOrder: false,
+    hasHighlights: true,
+    specificFeedbacks: {
+      correctFeedbacks: [{
+        id: 'Uno',
+        desc: 'specificFeedbacks 1 correcto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }, {
+        id: 'Dos',
+        desc: 'specificFeedbacks 2 correcto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }, {
+        id: 'Tres',
+        desc: 'specificFeedbacks 3 correcto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }],
+      wrongFeedbacks: [{
+        id: 'Uno_bad',
+        desc: 'specificFeedbacks 1 incorrecto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: -10,
+          type: 'score'
+        }]
+      }, {
+        id: 'Dos_bad',
+        desc: 'specificFeedbacks 2 incorrecto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: -10,
+          type: 'score'
+        }]
+      }]
+    }
+  }, {
+    info: {
+      hint: {
+        active: true,
+        desc: 'hint',
+        rewards: []
+      },
+      resolve: {
+        rewards: []
+      },
+      solution: {
+        right: {
+          desc: 'Estupendo',
+          desc_labelId: 'alfalfa01',
+          rewards: []
+        },
+        wrong: {
+          desc: 'BUUUU',
+          desc_labelId: 'fabada01',
+          rewards: [{
+            id: 'grade',
+            name: 'grade',
+            points: -17,
+            type: 'grade'
+          }]
+        }
+      },
+      instructions: 'instructions'
+    },
+    itemOrder: 2,
+    image: {
+      imgName: 'pablo-carpio-slave2.jpeg',
+      img: {
+        url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/609e3d358782ea00116a7eee/pablo-carpio-slave2.jpeg',
+        imgName: 'Paz-Vizla-Concept.png',
+        resourceId: '609e3d358782ea00116a7eee'
+      },
+      width: 1920,
+      height: 1099
+    },
+    areas: [{
+      id: 'Dos',
+      name: 'Uno',
+      x: 0,
+      y: 0,
+      fill: 'rgba(68, 215, 171, 0.56)',
+      draggable: true,
+      points: [1305.4777227722775, 606.8812654702971, 1455.094059405941, 593.2797803217823, 1463.2549504950498, 941.4778001237626, 1346.282178217822, 1012.2055228960397, 1275.5544554455448, 906.1139387376239],
+      stroke: 'rgb(101,154,93)',
+      closed: true
+    }, {
+      id: 'Tres',
+      name: 'Dos',
+      x: 0,
+      y: 0,
+      fill: 'rgba(68, 215, 171, 0.56)',
+      draggable: true,
+      points: [171.1138613861387, 506.23027537128723, 312.5693069306932, 519.8317605198021, 304.4084158415843, 593.2797803217823, 157.51237623762387, 585.1188892326734],
+      stroke: 'rgb(101,154,93)',
+      closed: true
+    }],
+    badAreas: [{
+      id: 'AllArea',
+      name: 'BadArea',
+      x: 0,
+      y: 0,
+      fill: 'rgba(255, 255, 255, 0.1)',
+      draggable: true,
+      points: [0, 0, 1920, 0, 1920, 1099, 0, 1099, 0, 0],
+      stroke: '#ff634d',
+      strokeWidth: 2,
+      closed: true
+    }],
+    hasClickOrder: true,
+    hasHighlights: true,
+    specificFeedbacks: {
+      correctFeedbacks: [{
+        id: 'Uno',
+        desc: 'specificFeedbacks 1 correcto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }, {
+        id: 'Dos',
+        desc: 'specificFeedbacks 2 correcto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }, {
+        id: 'Tres',
+        desc: 'specificFeedbacks 3 correcto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }],
+      wrongFeedbacks: [{
+        id: 'Uno_bad',
+        desc: 'specificFeedbacks 1 incorrecto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: -10,
+          type: 'score'
+        }]
+      }, {
+        id: 'Dos_bad',
+        desc: 'specificFeedbacks 2 incorrecto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: -10,
+          type: 'score'
+        }]
+      }]
+    }
+  }]
+};
+exports.mockProps2 = mockProps2;

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

@@ -19,9 +19,7 @@ var Message = function Message(_ref) {
     className: "conversation--message ".concat(voiceOver ? 'voice--over' : '')
   }, voiceOver ? /*#__PURE__*/_react.default.createElement("div", {
     className: "conversation--voice__over"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-voice-over"
-  }), /*#__PURE__*/_react.default.createElement("span", null, current.name ? current.name : 'Voice-Over')) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, current.name ? current.name : 'Voice-Over')) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("span", {
     className: "conversation--main__text"
   }, currentText));
 };

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

@@ -44,7 +44,6 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       framesCompleted = _ref.framesCompleted,
       handleFinish = _ref.handleFinish,
       setRewards = _ref.setRewards,
-      accRewards = _ref.accRewards,
       setIndex = _ref.setIndex,
       setFramesCompleted = _ref.setFramesCompleted,
       loadPuzzleStatus = _ref.loadPuzzleStatus,
@@ -55,14 +54,18 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       translateFromParent = _ref.translateFromParent,
       setInfo = _ref.setInfo,
       emitEvent = _ref.emitEvent,
-      nodeId = _ref.nodeId;
+      nodeId = _ref.nodeId,
+      setSelected = _ref.setSelected,
+      selected = _ref.selected;
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
   var props = list[index];
-  var info = props.info;
+  var info = props.info,
+      specificFeedbacks = props.specificFeedbacks;
   info.description = description;
+  var correctClicked = (0, _react.useRef)(0);
   var puzzleId = "frame-image-click-puzzle_".concat(index, "_").concat(nodeId);
   (0, _react.useEffect)(function () {
     puzzlesCompiledRef.current += 1;
@@ -72,18 +75,49 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       hintId: puzzleId
     }));
   }, [setInfo, info, puzzleId]);
+  (0, _react.useEffect)(function () {
+    correctClicked.current = 0;
+  }, [index]);
   var onComplete = (0, _react.useCallback)(function (rw) {
-    var updatedCompleted = _objectSpread(_objectSpread({}, framesCompleted), {}, _defineProperty({}, index, true));
+    var correct = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+    var updatedCompleted = _objectSpread({}, framesCompleted);
+
+    if (correct) {
+      var _specificFeedbacks$co;
+
+      if ((_specificFeedbacks$co = specificFeedbacks.correctFeedbacks) !== null && _specificFeedbacks$co !== void 0 && _specificFeedbacks$co.length) {
+        correctClicked.current += 1;
+        setSelected(selected + 1);
+      } else {
+        correctClicked.current += props.areas.length;
+        setSelected(selected + props.areas.length);
+      }
+
+      if (correctClicked.current === props.areas.length) {
+        if (index + 1 >= list.length) {
+          handleFinish(rw);
+        }
+
+        updatedCompleted = _objectSpread(_objectSpread({}, updatedCompleted), {}, _defineProperty({}, index, true));
+        setFramesCompleted(updatedCompleted);
+        setIndex(index + 1 > list.length - 1 ? 0 : index + 1);
+      }
 
-    if (Object.keys(updatedCompleted).length === list.length) {
-      handleFinish(rw);
-    } else {
       setRewards(rw);
-      setIndex(index + 1 > list.length - 1 ? 0 : index + 1);
+    } else {
+      emitEvent({
+        type: 'addPoints',
+        payload: rw,
+        finish: false
+      });
+
+      if (props.hasClickOrder) {
+        setSelected(selected - correctClicked.current);
+        correctClicked.current = 0;
+      }
     }
-
-    setFramesCompleted(updatedCompleted);
-  }, [framesCompleted, handleFinish, index, list.length, setFramesCompleted, setIndex, setRewards]);
+  }, [emitEvent, specificFeedbacks, framesCompleted, props.hasClickOrder, props.areas.length, list.length, selected, setSelected, setRewards, index, setFramesCompleted, setIndex, handleFinish]);
   var handleResolve = (0, _react.useCallback)(function () {
     playSound('score');
     emitEvent({
@@ -114,6 +148,7 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       name: "",
       component: 'frame-click-puzzle'
     },
+    specificFeedbacks: specificFeedbacks,
     emitFinish: onComplete,
     emitResolve: handleResolve,
     hideContinue: true,

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

@@ -63,6 +63,11 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
       framesCompleted = _useState4[0],
       setFramesCompleted = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selected = _useState6[0],
+      setSelected = _useState6[1];
+
   var puzzlesCompiledRef = (0, _react.useRef)(0);
   var hideTooltipRef = (0, _react.useRef)(false);
 
@@ -125,6 +130,8 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     handleFinish: handleFinish,
     setRewards: setRewards,
     accRewards: accRewards,
+    setSelected: setSelected,
+    selected: selected,
     setIndex: setIndex,
     setFramesCompleted: setFramesCompleted,
     loadPuzzleStatus: loadPuzzleStatus,
@@ -165,7 +172,7 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
   }))), showFrames ? /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle-frame__info"
   }, /*#__PURE__*/_react.default.createElement(_Counter.default, {
-    current: Object.values(framesCompleted).length,
+    current: selected,
     total: totalCorrects,
     tooltip: !hideTooltipRef.current,
     emitEvent: emitEvent