@gamelearn/arcade-components 0.22.8 → 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) {
@@ -63,6 +69,7 @@ var mockProps = {
       height: 1097
     },
     areas: [{
+      id: 'Uno',
       name: 'Uno',
       x: 0,
       y: 0,
@@ -127,6 +134,7 @@ var mockProps = {
       height: 1099
     },
     areas: [{
+      id: 'Dos',
       name: 'Uno',
       x: 0,
       y: 0,
@@ -136,6 +144,7 @@ var mockProps = {
       stroke: 'rgb(101,154,93)',
       closed: true
     }, {
+      id: 'Tres',
       name: 'Dos',
       x: 0,
       y: 0,
@@ -161,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,12 +63,21 @@ 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);
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
+  var totalCorrects = list.reduce(function (acc, current) {
+    return acc + current.areas.length;
+  }, 0);
+
   var setRewards = function setRewards(rw) {
     accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(rw));
   };
@@ -121,6 +130,8 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     handleFinish: handleFinish,
     setRewards: setRewards,
     accRewards: accRewards,
+    setSelected: setSelected,
+    selected: selected,
     setIndex: setIndex,
     setFramesCompleted: setFramesCompleted,
     loadPuzzleStatus: loadPuzzleStatus,
@@ -161,8 +172,8 @@ 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,
-    total: list.length,
+    current: selected,
+    total: totalCorrects,
     tooltip: !hideTooltipRef.current,
     emitEvent: emitEvent
   })) : null));

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

@@ -3,15 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mockPropsOnce = exports.mockProps = void 0;
+exports.mockProps2 = exports.mockPropsOnce = exports.mockProps = void 0;
+
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
+
+  if (type === 'translate') {
+    return payload;
+  }
 
-var emitEvent = function emitEvent(type) {
   console.log('Emit event called', type);
 };
 
-var soundActions = [function (sound) {
-  console.log('PlaySound called :', sound);
-}, function () {}];
+var soundActions = [function () {}, function () {}];
 var mockProps = {
   nodeId: 'xxas',
   description: 'Dale al arma',
@@ -63,6 +68,7 @@ var mockProps = {
       height: 1097
     },
     areas: [{
+      id: 'Uno',
       name: 'Uno',
       x: 0,
       y: 0,
@@ -127,6 +133,7 @@ var mockProps = {
       height: 1099
     },
     areas: [{
+      id: 'Dos',
       name: 'Uno',
       x: 0,
       y: 0,
@@ -136,6 +143,7 @@ var mockProps = {
       stroke: 'rgb(101,154,93)',
       closed: true
     }, {
+      id: 'Tres',
       name: 'Dos',
       x: 0,
       y: 0,
@@ -313,4 +321,255 @@ var mockPropsOnce = {
     hasClickOnce: true
   }]
 };
-exports.mockPropsOnce = mockPropsOnce;
+exports.mockPropsOnce = mockPropsOnce;
+var mockProps2 = {
+  nodeId: 'xxas',
+  description: 'Dale al arma',
+  isFrame: true,
+  showFrames: true,
+  setInfo: function setInfo() {},
+  emitEvent: emitEvent,
+  soundActions: soundActions,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  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://gl-lms-storage.s3-eu-west-1.amazonaws.com/development/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://gl-lms-storage.s3-eu-west-1.amazonaws.com/development/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/image-click-puzzle-component/mocks/mockForStory.js

@@ -8,7 +8,7 @@ exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps
 var emitEvent = function emitEvent(_ref) {
   var type = _ref.type,
       payload = _ref.payload;
-  console.log('Emit event called');
+  console.log('Emit event called', type);
 
   if (type === 'translate') {
     return payload;

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

@@ -57,32 +57,7 @@ var ImageReview = function ImageReview() {
 };
 
 var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
-  var _useState = (0, _react.useState)([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      clickedZones = _useState2[0],
-      setClickedZones = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      completed = _useState4[0],
-      setCompleted = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      finished = _useState6[0],
-      setFinished = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      showWrongFeedback = _useState8[0],
-      setShowWrongFeedback = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      disableClick = _useState10[0],
-      setDisableClick = _useState10[1]; // Common config
-
-
+  // Common config
   var soundActions = props.soundActions,
       emitEvent = props.emitEvent,
       disableExit = props.disableExit,
@@ -99,7 +74,33 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       className = props.className,
       emitFinish = props.emitFinish,
       emitResolve = props.emitResolve,
-      translateFromParent = props.translateFromParent;
+      translateFromParent = props.translateFromParent,
+      specificFeedbacks = props.specificFeedbacks;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      clickedZones = _useState2[0],
+      setClickedZones = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      completed = _useState4[0],
+      setCompleted = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      finished = _useState6[0],
+      setFinished = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({
+    show: false,
+    success: false,
+    text: '',
+    rewards: []
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      feedbackData = _useState8[0],
+      setFeedbackData = _useState8[1];
 
   var translate = function translate(id) {
     if (translateFromParent) return translateFromParent(id); // when there is no emitEvent pass the Translate
@@ -110,11 +111,6 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     });
   };
 
-  var _useState11 = (0, _react.useState)(''),
-      _useState12 = _slicedToArray(_useState11, 2),
-      resolvedClass = _useState12[0],
-      setResolveClass = _useState12[1];
-
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
@@ -132,18 +128,16 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       shape: 'poly'
     }, area);
   });
-  var handleFinish = (0, _react.useCallback)(function () {
-    var rewards = solution.right.rewards;
-
+  var handleFinish = (0, _react.useCallback)(function (rewards) {
     if (emitFinish) {
-      emitFinish(rewards);
+      emitFinish(rewards, feedbackData.success);
     } else {
       emitEvent({
         type: 'addPoints',
         payload: rewards
       });
     }
-  }, [emitEvent, emitFinish, solution.right]);
+  }, [emitEvent, emitFinish, feedbackData.success]);
   (0, _react.useEffect)(function () {
     if (completed) {
       disableExit(true);
@@ -154,15 +148,25 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   }, [defaultCompleted]);
   (0, _react.useEffect)(function () {
     if (areas.length === clickedZones.length && !completed || hasClickOnce && clickedZones.length > 0) {
+      var _specificFeedbacks$co;
+
       setCompleted(true);
-      setDisableClick(true);
-      setResolveClass('success');
+
+      if (!((_specificFeedbacks$co = specificFeedbacks.correctFeedbacks) !== null && _specificFeedbacks$co !== void 0 && _specificFeedbacks$co.length)) {
+        setFeedbackData(function (oldState) {
+          return _objectSpread(_objectSpread({}, oldState), {}, {
+            show: true,
+            success: true,
+            text: info.solution.right.desc,
+            rewards: info.solution.right.rewards
+          });
+        });
+      }
     }
-  }, [clickedZones, areas.length, completed, info.solution.right.desc, emitEvent, hasClickOnce]);
+  }, [clickedZones, areas.length, specificFeedbacks, hasClickOnce, completed, info.solution.right]);
   (0, _react.useEffect)(function () {
     setResolveAction(function (resolve) {
       setCompleted(true);
-      setDisableClick(true);
       setFinished(true);
       setTimeout(function () {
         emitResolve ? emitResolve(resolve) : resolve();
@@ -175,78 +179,109 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     }
   }, [finished, disableExit]);
 
-  var handleClickOutSide = function handleClickOutSide() {
-    if (!disableClick && !defaultCompleted) {
-      var wrongRewards = solution.wrong.rewards;
+  var handleIncorrectAreaClick = function handleIncorrectAreaClick(area) {
+    if (!completed) {
+      var _specificFeedbacks$wr;
+
+      var _solution$wrong = solution.wrong,
+          wrongRewards = _solution$wrong.rewards,
+          desc = _solution$wrong.desc;
+      var feedback = desc;
+      var rewards = wrongRewards;
       emitEvent({
         type: 'hidePuzzleButtons',
         payload: true
       });
+      var specific = (_specificFeedbacks$wr = specificFeedbacks.wrongFeedbacks) === null || _specificFeedbacks$wr === void 0 ? void 0 : _specificFeedbacks$wr.find(function (feed) {
+        return feed.id === area.id;
+      });
+
+      if (specific) {
+        feedback = specific.desc;
+        rewards = specific.rewards;
+      }
+
+      if (emitFinish) {
+        emitFinish(wrongRewards, false);
+      }
 
       if (hasClickOrder) {
         setClickedZones([]);
       }
 
-      setShowWrongFeedback(true);
-      setResolveClass('wrong');
-      playSound('fail');
-      setTimeout(function () {
-        setShowWrongFeedback(false);
-        setResolveClass('');
-        emitEvent({
-          type: 'addPoints',
-          payload: wrongRewards,
-          finish: false
+      setFeedbackData(function (oldState) {
+        return _objectSpread(_objectSpread({}, oldState), {}, {
+          show: true,
+          success: false,
+          text: feedback,
+          rewards: rewards
         });
-      }, 2000);
+      });
+      playSound('fail');
     }
   };
 
   var handleOnClose = function handleOnClose() {
-    handleFinish();
+    handleFinish(feedbackData.rewards);
     playSound('click-ui');
-    setResolveClass('');
-    setShowWrongFeedback(false);
+    setFeedbackData(function (oldState) {
+      return _objectSpread(_objectSpread({}, oldState), {}, {
+        show: false,
+        success: false,
+        text: '',
+        rewards: []
+      });
+    });
   };
 
-  var handleAreaClick = function handleAreaClick(area) {
+  var handleCorrectAreaClick = function handleCorrectAreaClick(area) {
     if (!clickedZones.some(function (zone) {
       return zone.index === area.index;
-    }) && !defaultCompleted && !showWrongFeedback && !disableClick) {
-      var updatedClickedZones = [].concat(_toConsumableArray(clickedZones), [area]);
+    }) && !feedbackData.show && !completed) {
       playSound('click-ui');
+      var feedback = solution.right.desc;
+      var rewards = solution.right.rewards;
 
       if (hasClickOrder && area.index === clickedZones.length || !hasClickOrder) {
-        setClickedZones(updatedClickedZones);
-      } else {
-        var _solution$wrong = solution.wrong,
-            wrongRewards = _solution$wrong.rewards,
-            feedback = _solution$wrong.desc;
-        setClickedZones([]);
-        updatedClickedZones = [];
-
-        if (feedback) {
-          setShowWrongFeedback(true);
-          setResolveClass('wrong');
-        } else {
-          emitEvent({
-            type: 'addPoints',
-            payload: wrongRewards,
-            finish: false
+        var _specificFeedbacks$co2;
+
+        if ((_specificFeedbacks$co2 = specificFeedbacks.correctFeedbacks) !== null && _specificFeedbacks$co2 !== void 0 && _specificFeedbacks$co2.length) {
+          var _specificFeedbacks$co3;
+
+          var specific = (_specificFeedbacks$co3 = specificFeedbacks.correctFeedbacks) === null || _specificFeedbacks$co3 === void 0 ? void 0 : _specificFeedbacks$co3.find(function (feed) {
+            return feed.id === area.id;
+          });
+
+          if (specific) {
+            feedback = specific.desc;
+            rewards = specific.rewards;
+          }
+
+          setFeedbackData(function (oldState) {
+            return _objectSpread(_objectSpread({}, oldState), {}, {
+              show: true,
+              success: true,
+              text: feedback,
+              rewards: rewards
+            });
           });
         }
+
+        setClickedZones([].concat(_toConsumableArray(clickedZones), [area]));
+      } else {
+        handleIncorrectAreaClick(area);
       }
     }
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className
-  }, resolvedClass ? /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
+  }, feedbackData.show ? /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
     playSound: playSound,
-    text: info.solution[resolvedClass === 'success' ? 'right' : 'wrong'].desc,
-    success: resolvedClass === 'success',
+    text: feedbackData.text,
+    success: feedbackData.success,
     translate: translate,
-    hasTimeout: !info.solution.right.desc,
+    hasTimeout: !feedbackData.text,
     delay: 2000,
     functionOnClose: handleOnClose
   }) : null, /*#__PURE__*/_react.default.createElement(_KonvaMapper.default, {
@@ -255,8 +290,8 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     areas: areasList,
     badAreas: badAreasList,
     clickedZones: clickedZones,
-    onClick: handleAreaClick,
-    onClickOutside: handleClickOutSide,
+    onClick: handleCorrectAreaClick,
+    onClickOutside: handleIncorrectAreaClick,
     hasHighlights: hasHighlights,
     emitEvent: emitEvent
   }), hasImageReview ? /*#__PURE__*/_react.default.createElement(ImageReview, null) : null);

package/dist/components/konva-components/Area/index.js

@@ -68,7 +68,7 @@ var Area = function Area(_ref) {
   var clickArea = function clickArea() {
     if (!completed) {
       if (isBad) {
-        onClickOutside();
+        onClickOutside(area);
       } else {
         onClick(area);
       }

package/dist/components/konva-components/KonvaMapper.js

@@ -96,7 +96,7 @@ var KonvaMapper = function KonvaMapper(_ref) {
 
   var handleStageClick = function handleStageClick(a) {
     if (incorrectArea && !a.target.attrs.shape) {
-      onClickOutside();
+      onClickOutside(incorrectArea);
     }
   };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "0.22.8",
+  "version": "0.22.9",
   "main": "dist/index.js",
   "files": [
     "dist",