@gamelearn/arcade-components 1.11.7 → 1.11.8

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

@@ -60,7 +60,8 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       emitResetPuzzle = _ref.emitResetPuzzle,
       firstTryForFrame = _ref.firstTryForFrame,
       setPuzzlesAutoCompleted = _ref.setPuzzlesAutoCompleted,
-      puzzlesAutoCompleted = _ref.puzzlesAutoCompleted;
+      puzzlesAutoCompleted = _ref.puzzlesAutoCompleted,
+      emitOpenPopupCounterInfo = _ref.emitOpenPopupCounterInfo;
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
@@ -173,7 +174,8 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
     slideNumber: index,
     emitResetPuzzle: handleResetPuzzle,
     firstTryForFrame: firstTryForFrame,
-    puzzlesAutoCompleted: puzzlesAutoCompleted
+    puzzlesAutoCompleted: puzzlesAutoCompleted,
+    emitOpenPopupCounterInfo: emitOpenPopupCounterInfo
   }));
 };
 

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

@@ -124,7 +124,13 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
   };
 
   var onClickCounter = function onClickCounter() {
-    setHideTooltipRef(false);
+    setHideTooltipRef(true);
+  };
+
+  var onInitPuzzle = function onInitPuzzle() {
+    if (index === 0) {
+      setHideTooltipRef(false);
+    }
   };
 
   var currentPuzzleProps = {
@@ -151,7 +157,8 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     nodeId: nodeId,
     emitResetPuzzle: resetPuzzle,
     setPuzzlesAutoCompleted: setPuzzlesAutoCompleted,
-    puzzlesAutoCompleted: puzzlesAutoCompleted
+    puzzlesAutoCompleted: puzzlesAutoCompleted,
+    emitOpenPopupCounterInfo: onInitPuzzle
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle-frame"
@@ -172,7 +179,7 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Counter.default, {
     current: selected,
     total: totalCorrects,
-    tooltip: hideTooltip,
+    tooltip: !hideTooltip,
     emitEvent: emitEvent
   })) : null));
 };

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

@@ -84,7 +84,8 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       slideNumber = props.slideNumber,
       emitResetPuzzle = props.emitResetPuzzle,
       firstTryForFrame = props.firstTryForFrame,
-      puzzlesAutoCompleted = props.puzzlesAutoCompleted;
+      puzzlesAutoCompleted = props.puzzlesAutoCompleted,
+      emitOpenPopupCounterInfo = props.emitOpenPopupCounterInfo;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -109,8 +110,9 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   }),
       _useState8 = _slicedToArray(_useState7, 2),
       feedbackData = _useState8[0],
-      setFeedbackData = _useState8[1]; // timer stuffs
+      setFeedbackData = _useState8[1];
 
+  var popupCounterVisible = (0, _react.useRef)(false); // timer stuffs
 
   var _useState9 = (0, _react.useState)(true),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -174,6 +176,34 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   (0, _react.useEffect)(function () {
     setCompleted(defaultCompleted);
   }, [defaultCompleted]);
+  var clearListenerForActualDate = (0, _react.useCallback)(function () {
+    clearInterval(intervalForActualDate.current);
+  }, []);
+  var pauseTheCounter = (0, _react.useCallback)(function () {
+    pauseDate.current = Date.now();
+    remainingTime.current = finalDate.current - pauseDate.current;
+    clearListenerForActualDate();
+  }, [clearListenerForActualDate]);
+  var listenerForActualDate = (0, _react.useCallback)(function () {
+    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);
+        clearListenerForActualDate();
+      }
+    }, 0);
+  }, [clearListenerForActualDate, info === null || info === void 0 ? void 0 : (_info$timerFeedback3 = info.timerFeedback) === null || _info$timerFeedback3 === void 0 ? void 0 : _info$timerFeedback3.desc, info === null || info === void 0 ? void 0 : (_info$timerFeedback4 = info.timerFeedback) === null || _info$timerFeedback4 === void 0 ? void 0 : _info$timerFeedback4.rewards]);
   (0, _react.useEffect)(function () {
     if ((areas.length === clickedZones.length || hasClickOnce && clickedZones.length > 0) && !completed) {
       var _specificFeedbacks$co;
@@ -285,11 +315,6 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     }
   };
 
-  var pauseTheCounter = (0, _react.useCallback)(function () {
-    pauseDate.current = Date.now();
-    remainingTime.current = finalDate.current - pauseDate.current;
-    clearListenerForActualDate();
-  }, [clearListenerForActualDate]);
   var handleOnClose = (0, _react.useCallback)(function () {
     whenCloseFeedbackDate.current = Date.now();
     var newFinalDate = whenCloseFeedbackDate.current + remainingTime.current;
@@ -367,45 +392,26 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     }
   };
 
-  var clearListenerForActualDate = (0, _react.useCallback)(function () {
-    clearInterval(intervalForActualDate.current);
-  }, []);
-  var listenerForActualDate = (0, _react.useCallback)(function () {
-    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);
-        clearListenerForActualDate();
-      }
-    }, 0);
-  }, [clearListenerForActualDate, info === null || info === void 0 ? void 0 : (_info$timerFeedback3 = info.timerFeedback) === null || _info$timerFeedback3 === void 0 ? void 0 : _info$timerFeedback3.desc, info === null || info === void 0 ? void 0 : (_info$timerFeedback4 = info.timerFeedback) === null || _info$timerFeedback4 === void 0 ? void 0 : _info$timerFeedback4.rewards]);
   var createStartAndEndDate = (0, _react.useCallback)(function () {
+    if (!popupCounterVisible.current && firstTryForFrame) {
+      emitOpenPopupCounterInfo();
+    }
+
     setDialogForTimer(false);
     startDate.current = Date.now();
     finalDate.current = startDate.current + timer * 1000;
     listenerForActualDate();
-  }, [listenerForActualDate, timer]);
+  }, [emitOpenPopupCounterInfo, firstTryForFrame, listenerForActualDate, timer]);
   (0, _react.useEffect)(function () {
     // start automatically the time
     if (timer && slideNumber > 0) {
-      if (puzzlesAutoCompleted[slideNumber - 1]) {
+      if (firstTryForFrame && Object.keys(puzzlesAutoCompleted).length && puzzlesAutoCompleted[slideNumber - 1]) {
         setDialogForTimer(true);
       } else {
         createStartAndEndDate();
       }
     }
-  }, [createStartAndEndDate, puzzlesAutoCompleted, slideNumber, timer]);
+  }, [createStartAndEndDate, defaultCompleted, firstTryForFrame, puzzlesAutoCompleted, slideNumber, timer]);
   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": "1.11.7",
+  "version": "1.11.8",
   "main": "dist/index.js",
   "files": [
     "dist",