@gamelearn/arcade-components 0.22.7 → 0.22.9

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

@@ -57,6 +57,26 @@ var ImageReview = function ImageReview() {
 };
 
 var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
+  // Common config
+  var soundActions = props.soundActions,
+      emitEvent = props.emitEvent,
+      disableExit = props.disableExit,
+      setResolveAction = props.setResolveAction,
+      info = props.info,
+      image = props.image,
+      areas = props.areas,
+      badAreas = props.badAreas,
+      hasClickOrder = props.hasClickOrder,
+      hasClickOnce = props.hasClickOnce,
+      hasHighlights = props.hasHighlights,
+      hasImageReview = props.hasImageReview,
+      defaultCompleted = props.defaultCompleted,
+      className = props.className,
+      emitFinish = props.emitFinish,
+      emitResolve = props.emitResolve,
+      translateFromParent = props.translateFromParent,
+      specificFeedbacks = props.specificFeedbacks;
+
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
       clickedZones = _useState2[0],
@@ -72,33 +92,15 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       finished = _useState6[0],
       setFinished = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)({
+    show: false,
+    success: false,
+    text: '',
+    rewards: []
+  }),
       _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
-
-
-  var soundActions = props.soundActions,
-      emitEvent = props.emitEvent,
-      disableExit = props.disableExit,
-      setResolveAction = props.setResolveAction,
-      info = props.info,
-      image = props.image,
-      areas = props.areas,
-      badAreas = props.badAreas,
-      hasClickOrder = props.hasClickOrder,
-      hasHighlights = props.hasHighlights,
-      hasImageReview = props.hasImageReview,
-      defaultCompleted = props.defaultCompleted,
-      className = props.className,
-      emitFinish = props.emitFinish,
-      emitResolve = props.emitResolve,
-      translateFromParent = props.translateFromParent;
+      feedbackData = _useState8[0],
+      setFeedbackData = _useState8[1];
 
   var translate = function translate(id) {
     if (translateFromParent) return translateFromParent(id); // when there is no emitEvent pass the Translate
@@ -109,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];
 
@@ -131,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);
@@ -152,16 +147,26 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     setCompleted(defaultCompleted);
   }, [defaultCompleted]);
   (0, _react.useEffect)(function () {
-    if (areas.length === clickedZones.length && !completed) {
+    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, handleFinish, completed, info.solution.right.desc, emitEvent]);
+  }, [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();
@@ -174,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, {
@@ -254,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);
@@ -272,6 +308,7 @@ ImageClickWrapperComponent.defaultProps = {
   badAreas: [],
   className: 'puzzle--image__click',
   hasClickOrder: false,
+  hasClickOnce: false,
   hasHighlights: false,
   hasImageReview: false,
   defaultCompleted: false,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
+exports.mockPropsOnce = exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
 
 var emitEvent = function emitEvent(_ref) {
   var type = _ref.type,
@@ -346,4 +346,79 @@ var mockProps4 = {
   hasClickOrder: false,
   hasHighlights: false
 };
-exports.mockProps4 = mockProps4;
+exports.mockProps4 = mockProps4;
+var mockPropsOnce = {
+  emitEvent: emitEvent,
+  soundActions: soundActions,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  transitionEffects: null,
+  audioId: '',
+  itemOrder: 1,
+  info: {
+    hint: {
+      active: true,
+      desc: 'hint',
+      rewards: []
+    },
+    resolve: {
+      rewards: []
+    },
+    solution: {
+      right: {
+        desc: 'correctSolution',
+        desc_labelId: 'alfalfa01',
+        rewards: []
+      },
+      wrong: {
+        desc: 'wrongSolution',
+        desc_labelId: 'fabada01',
+        rewards: [{
+          id: 'grade',
+          name: 'grade',
+          points: -17,
+          type: 'grade'
+        }]
+      }
+    },
+    instructions: 'instructions'
+  },
+  image: {
+    imgName: 'gato5.jpg',
+    img: {
+      url: 'https://min.gamelearn.io/css-resources/gamelearn/resources/image-click.jpg',
+      imgName: 'gato5.jpg',
+      resourceId: '6007f80eac41ad001120f135'
+    },
+    width: 1280,
+    height: 720
+  },
+  areas: [{
+    id: '1601910616179',
+    name: 'a',
+    x: 0,
+    y: 0,
+    draggable: true,
+    points: [74.1584158415841, 423.99133663366337, 229.20792079207916, 366.96163366336634, 516.1386138613861, 482.8032178217822, 644.4554455445544, 710.9220297029703, 56.33663366336629, 712.7042079207921],
+    strokeWidth: 2,
+    stroke: '#44d7ab',
+    fill: 'rgba(68, 215, 171, 0.56)',
+    closed: true
+  }, {
+    id: '1601910626254',
+    name: 'b',
+    x: 0,
+    y: 0,
+    draggable: true,
+    points: [607.0297029702971, 343.79331683168317, 783.4653465346535, 388.3477722772277, 865.4455445544554, 539.8329207920792, 1138.118811881188, 593.2982673267327, 1262.871287128713, 358.0507425742574, 1262.871287128713, 46.16955445544554, 1193.3663366336634, 12.308168316831683, 1018.7128712871288, 19.43688118811881, 746.0396039603961, 213.69430693069307, 555.3465346534654, 268.94183168316835],
+    strokeWidth: 2,
+    stroke: '#44d7ab',
+    fill: 'rgba(68, 215, 171, 0.56)',
+    closed: true
+  }],
+  badAreas: [],
+  hasClickOrder: false,
+  hasClickOnce: true,
+  hasHighlights: true
+};
+exports.mockPropsOnce = mockPropsOnce;

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/dist/components/text-click-puzzle-component/components/TextClickPuzzleComponent.js

@@ -107,8 +107,11 @@ var TextClickPuzzleComponent = function TextClickPuzzleComponent(_ref) {
     });
   }, [emitEvent]);
   var parsedText = (0, _react.useRef)(null);
+  var isCompleted = (0, _react.useCallback)(function () {
+    return correctTextFragmentsPartial.current === list[currentSlide].correctTexts.length || list[currentSlide].hasClickOnce && correctTextFragmentsPartial.current >= 1;
+  }, [currentSlide, list]);
   var goForward = (0, _react.useCallback)(function () {
-    if (correctTextFragmentsPartial.current === list[currentSlide].correctTexts.length) {
+    if (isCompleted()) {
       setFeedbackData(function (prevState) {
         return _objectSpread(_objectSpread({}, prevState), {}, {
           result: false
@@ -140,7 +143,7 @@ var TextClickPuzzleComponent = function TextClickPuzzleComponent(_ref) {
         }, 1200);
       }
     }
-  }, [list, currentSlide, correctTextFragmentsAccumulated, numberAllCorrectFragments, setShowPoints]);
+  }, [isCompleted, correctTextFragmentsAccumulated, numberAllCorrectFragments, setShowPoints, currentSlide]);
   var handleFeedbackFuncionOnClose = (0, _react.useCallback)(function () {
     emitEvent({
       type: 'hidePuzzleButtons',
@@ -174,7 +177,7 @@ var TextClickPuzzleComponent = function TextClickPuzzleComponent(_ref) {
 
     if ((_list$currentSlide$in = list[currentSlide].info.solution.right) !== null && _list$currentSlide$in !== void 0 && _list$currentSlide$in.desc) {
       //solo muestra la caja verde y suma puntos cuando resuelves todos los fragmentos correctos
-      if (correctTextFragmentsPartial.current === list[currentSlide].correctTexts.length) {
+      if (isCompleted()) {
         accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(list[currentSlide].info.solution.right.rewards));
         setFeedbackData(function (prevState) {
           return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -205,7 +208,7 @@ var TextClickPuzzleComponent = function TextClickPuzzleComponent(_ref) {
           if (list[currentSlide].specificFeedbacks.specificCorrectFeedbacks) {
             accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(specificFeedback === null || specificFeedback === void 0 ? void 0 : specificFeedback.rewards));
 
-            if (correctTextFragmentsPartial.current === list[currentSlide].correctTexts.length) {
+            if (isCompleted()) {
               setFeedbackData(function (prevState) {
                 return _objectSpread(_objectSpread({}, prevState), {}, {
                   show: true,
@@ -216,7 +219,7 @@ var TextClickPuzzleComponent = function TextClickPuzzleComponent(_ref) {
             }
           } // si tiene puntos generales
           else {
-              if (correctTextFragmentsPartial.current === list[currentSlide].correctTexts.length) {
+              if (isCompleted()) {
                 accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(list[currentSlide].info.solution.right.rewards));
                 setFeedbackData(function (prevState) {
                   return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -228,7 +231,7 @@ var TextClickPuzzleComponent = function TextClickPuzzleComponent(_ref) {
               }
             }
         }
-  }, [correctTextFragmentsAccumulated, emitEvent, playSound, list, currentSlide]);
+  }, [correctTextFragmentsAccumulated, emitEvent, playSound, list, currentSlide, isCompleted]);
   var handleIncorrectClick = (0, _react.useCallback)(function (allDataTextIds, specificFeedback) {
     allDataTextIds.forEach(function (el) {
       return el.classList.add('text-click__failed');
@@ -368,18 +371,25 @@ var TextClickPuzzleComponent = function TextClickPuzzleComponent(_ref) {
     var counter = 0;
 
     for (var i = 0; i < list.length; i++) {
-      for (var j = 0; j < list[i].correctTexts.length; j++) {
+      if (list[i].hasClickOnce) {
         counter++;
         setNumberAllCorrectFragments(counter);
+      } else {
+        for (var j = 0; j < list[i].correctTexts.length; j++) {
+          counter++;
+          setNumberAllCorrectFragments(counter);
+        }
       }
     }
   }, [list]);
   (0, _react.useEffect)(function () {
-    setInfo(_objectSpread(_objectSpread({}, list[currentSlide].info), {}, {
+    var _list$currentSlide3;
+
+    (list === null || list === void 0 ? void 0 : list[currentSlide]) && setInfo(_objectSpread(_objectSpread({}, list[currentSlide].info), {}, {
       description: description
     }));
 
-    if (list[currentSlide].text) {
+    if ((_list$currentSlide3 = list[currentSlide]) !== null && _list$currentSlide3 !== void 0 && _list$currentSlide3.text) {
       var jsx = (0, _htmlReactParser.default)(list[currentSlide].text);
       parsedText.current = recursiveStuff(jsx);
       getnumberAllCorrectFragments();