@gamelearn/arcade-components 2.5.2 → 2.5.5

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

@@ -45,6 +45,23 @@ var ChainedImageClickPuzzleComponent = function ChainedImageClickPuzzleComponent
       selected = _useState2[0],
       setSelected = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      index = _useState4[0],
+      setIndex = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      slidesCompleted = _useState6[0],
+      setSlidesCompleted = _useState6[1];
+
+  var puzzleId = "chained-image-click-puzzle_".concat(index, "_").concat(nodeId);
+  var loadPuzzleStatus = (0, _react.useMemo)(function () {
+    return emitEvent({
+      type: 'loadObjectStatus',
+      payload: puzzleId
+    });
+  }, [emitEvent, puzzleId]);
   var currentPuzzleProps = {
     list: list,
     description: description,
@@ -55,7 +72,12 @@ var ChainedImageClickPuzzleComponent = function ChainedImageClickPuzzleComponent
     soundActions: soundActions,
     setInfo: setInfo,
     setSelected: setSelected,
-    selected: selected
+    selected: selected,
+    index: index,
+    setIndex: setIndex,
+    slidesCompleted: slidesCompleted,
+    setSlidesCompleted: setSlidesCompleted,
+    loadPuzzleStatus: loadPuzzleStatus
   };
   var totalCorrects = list.reduce(function (acc, current) {
     return acc + current.areas.length;

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

@@ -46,8 +46,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
-  var _specificFeedbacks$co2;
-
   var list = _ref.list,
       description = _ref.description,
       nodeId = _ref.nodeId,
@@ -58,29 +56,20 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
       soundActions = _ref.soundActions,
       setSelected = _ref.setSelected,
       selected = _ref.selected,
-      pause = _ref.pause;
+      pause = _ref.pause,
+      loadPuzzleStatus = _ref.loadPuzzleStatus,
+      index = _ref.index,
+      setIndex = _ref.setIndex,
+      slidesCompleted = _ref.slidesCompleted,
+      setSlidesCompleted = _ref.setSlidesCompleted;
   var accRewards = (0, _react.useRef)([]);
   var correctClicked = (0, _react.useRef)(0);
   var currentSelected = (0, _react.useRef)(0);
-
-  var _useState = (0, _react.useState)(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      index = _useState2[0],
-      setIndex = _useState2[1];
-
-  var resolvedItems = (0, _react.useRef)({});
   var puzzleId = "chained-image-click-puzzle_".concat(index, "_").concat(nodeId);
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
-  var currentPuzzleStatus = (0, _react.useMemo)(function () {
-    return emitEvent({
-      type: 'loadObjectStatus',
-      payload: puzzleId
-    });
-  }, [emitEvent, puzzleId]);
-
   var setRewards = function setRewards(rewards) {
     accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(rewards));
   };
@@ -113,6 +102,8 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
     var correct = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var finish = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
+    var updatedCompleted = _objectSpread({}, slidesCompleted);
+
     if (correct) {
       var _specificFeedbacks$co;
 
@@ -135,6 +126,9 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
         } else {
           setIndex(index + 1);
         }
+
+        updatedCompleted = _objectSpread(_objectSpread({}, updatedCompleted), {}, _defineProperty({}, index, true));
+        setSlidesCompleted(updatedCompleted);
       }
 
       setRewards(rw);
@@ -144,18 +138,25 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
         payload: rw,
         finish: false
       });
+      emitEvent({
+        type: 'failPuzzle'
+      });
 
       if (currentImageProps.hasClickOrder) {
         setSelected(selected - correctClicked.current);
-        correctClicked.current = 0;
+
+        if (correctClicked.current === 0 && Object.entries(slidesCompleted).length === 0) {
+          setSelected(0);
+        } else {
+          correctClicked.current = 0;
+        }
       }
 
-      setSelected(0);
-      emitEvent({
-        type: 'failPuzzle'
-      });
+      if (Object.entries(slidesCompleted).length === 0 && currentImageProps.hasClickOrder && !selected) {
+        setSelected(0);
+      }
     }
-  }, [specificFeedbacks === null || specificFeedbacks === void 0 ? void 0 : (_specificFeedbacks$co2 = specificFeedbacks.correctFeedbacks) === null || _specificFeedbacks$co2 === void 0 ? void 0 : _specificFeedbacks$co2.length, currentImageProps.hasClickOnce, currentImageProps.areas.length, currentImageProps.hasClickOrder, index, list.length, handleFinish, emitEvent, setSelected, selected]);
+  }, [slidesCompleted, specificFeedbacks, currentImageProps.hasClickOnce, currentImageProps.areas.length, currentImageProps.hasClickOrder, selected, setSelected, index, list.length, setSlidesCompleted, handleFinish, setIndex, emitEvent]);
 
   var onResolve = function onResolve() {
     playSound('score');
@@ -176,16 +177,18 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
     }));
   }, [info, puzzleId, setInfo]);
   (0, _react.useEffect)(function () {
-    if (currentPuzzleStatus && !resolvedItems.current[puzzleId]) {
+    if (loadPuzzleStatus) {
       onComplete([], true, true);
-      resolvedItems.current[puzzleId] = true;
     }
-  }, [onComplete, puzzleId, currentPuzzleStatus]);
-  var checkSelectedAreas = (0, _react.useCallback)(function () {
+  }, [slidesCompleted, loadPuzzleStatus, onComplete]);
+
+  var checkSelectedAreas = function checkSelectedAreas() {
     var areasSelected = currentImageProps.hasClickOnce ? currentImageProps.areas.length : 1;
     currentSelected.current += areasSelected;
+    console.info('checkSelectedAreas', currentSelected.current);
     setSelected(selected + areasSelected);
-  }, [currentImageProps.areas.length, currentImageProps.hasClickOnce, selected, setSelected]);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_imageClickWrapperComponent.default, _extends({
     key: index
   }, currentImageProps, {
@@ -198,7 +201,7 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
     emitError: setRewards,
     emitResolve: onResolve,
     isLast: index + 1 === list.length,
-    defaultCompleted: currentPuzzleStatus,
+    defaultCompleted: slidesCompleted[index] || !!loadPuzzleStatus,
     hideContinue: !(index + 1 === list.length),
     handleClick: checkSelectedAreas,
     emitEvent: emitEvent,

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

@@ -90,12 +90,12 @@ var ComicComponent = function ComicComponent(_ref) {
     setStarted(false);
     setAudioFailed(false);
 
-    if (slideCount + 1 < slides.length) {
+    if (slideCount + 1 < slides.length && !pause) {
       setTransition('slide-animation');
       setCount(slideCount + 1);
       setStarted(true);
     }
-  }, [slideCount, slides === null || slides === void 0 ? void 0 : slides.length]);
+  }, [pause, slideCount, slides.length]);
   var goToPreviousSlide = (0, _react.useCallback)(function () {
     setStarted(false);
     setAudioFailed(false);

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

@@ -169,20 +169,19 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     }, area);
   });
   var startCountDown = (0, _react.useCallback)(function () {
-    var timeout = setInterval(function () {
-      setCountDownTime(function (t) {
-        return t - 1;
-      });
-    }, 1000);
-    intervalForCountDown.current = timeout;
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (pause) {
-      clearInterval(intervalForCountDown.current);
-    } else {
-      startCountDown();
+    if (!dialogForTimer) {
+      var timeout = setInterval(function () {
+        setCountDownTime(function (t) {
+          if (t > 1) {
+            return t - 1;
+          }
+
+          return 0;
+        });
+      }, 1000);
+      intervalForCountDown.current = timeout;
     }
-  }, [pause, startCountDown]);
+  }, [dialogForTimer]);
   var handleFinish = (0, _react.useCallback)(function (rewards, success) {
     if (emitFinish) {
       emitFinish(rewards, success);
@@ -212,28 +211,31 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     remainingTime.current = finalDate.current - pauseDate.current;
     clearListenerForActualDate();
   }, [clearListenerForActualDate]);
+  var feedbackError = (0, _react.useCallback)(function () {
+    setFeedbackData(function () {
+      var _info$timerFeedback, _info$timerFeedback2;
+
+      return {
+        show: true,
+        success: false,
+        text: info !== null && info !== void 0 && (_info$timerFeedback = info.timerFeedback) !== null && _info$timerFeedback !== void 0 && _info$timerFeedback.desc ? info.timerFeedback.desc : '',
+        rewards: info === null || info === void 0 ? void 0 : (_info$timerFeedback2 = info.timerFeedback) === null || _info$timerFeedback2 === void 0 ? void 0 : _info$timerFeedback2.rewards
+      };
+    });
+    setTimeExpired(true);
+    clearIntervalForCountDown();
+    clearListenerForActualDate();
+  }, [clearIntervalForCountDown, clearListenerForActualDate, (_info$timerFeedback3 = info.timerFeedback) === null || _info$timerFeedback3 === void 0 ? void 0 : _info$timerFeedback3.desc, (_info$timerFeedback4 = info.timerFeedback) === null || _info$timerFeedback4 === void 0 ? void 0 : _info$timerFeedback4.rewards]);
   var listenerForActualDate = (0, _react.useCallback)(function () {
     clearInterval(intervalForActualDate.current);
     intervalForActualDate.current = setInterval(function () {
       actualDate.current = Date.now(); // show timerFeedback when finish the time
 
       if (actualDate.current > finalDate.current) {
-        setFeedbackData(function () {
-          var _info$timerFeedback, _info$timerFeedback2;
-
-          return {
-            show: true,
-            success: false,
-            text: info !== null && info !== void 0 && (_info$timerFeedback = info.timerFeedback) !== null && _info$timerFeedback !== void 0 && _info$timerFeedback.desc ? info.timerFeedback.desc : '',
-            rewards: info === null || info === void 0 ? void 0 : (_info$timerFeedback2 = info.timerFeedback) === null || _info$timerFeedback2 === void 0 ? void 0 : _info$timerFeedback2.rewards
-          };
-        });
-        setTimeExpired(true);
-        clearIntervalForCountDown();
-        clearListenerForActualDate();
+        feedbackError();
       }
     }, 250);
-  }, [clearListenerForActualDate, clearIntervalForCountDown, (_info$timerFeedback3 = info.timerFeedback) === null || _info$timerFeedback3 === void 0 ? void 0 : _info$timerFeedback3.desc, (_info$timerFeedback4 = info.timerFeedback) === null || _info$timerFeedback4 === void 0 ? void 0 : _info$timerFeedback4.rewards]);
+  }, [feedbackError]);
   (0, _react.useEffect)(function () {
     if ((areas.length === clickedZones.length || hasClickOnce && clickedZones.length > 0) && !completed) {
       var _specificFeedbacks$co;
@@ -457,6 +459,17 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       }
     }
   }, [createStartAndEndDate, defaultCompleted, firstTryForFrame, puzzlesAutoCompleted, slideNumber, timer]);
+  (0, _react.useEffect)(function () {
+    if (timer && countDownTime === 0) feedbackError();
+  }, [countDownTime, feedbackError, timer]);
+  (0, _react.useEffect)(function () {
+    if (pause) {
+      clearIntervalForCountDown();
+      pauseTheCounter();
+    } else {
+      startCountDown();
+    }
+  }, [clearIntervalForCountDown, listenerForActualDate, pause, pauseTheCounter, startCountDown]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className
   }, feedbackData.show ? /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {

package/package.json

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