@gamelearn/arcade-components 1.27.13 → 1.28.1

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

@@ -634,6 +634,16 @@ var mockProps3 = {
       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
+    }, {
+      id: 'Dos',
+      name: 'Dos',
+      x: 0,
+      y: 0,
+      fill: 'rgba(255, 255, 255, 0.1)',
+      draggable: true,
+      points: [121.11881188118804, 1017.7722772277228, 254.1881188118811, 856.1881188118813, 637.5544554455446, 1144.5049504950496, 406.2673267326732, 1264.90099009901],
+      stroke: 'rgb(101,154,93)',
+      closed: true
     }],
     badAreas: [{
       id: 'AllArea',
@@ -648,7 +658,7 @@ var mockProps3 = {
       closed: true
     }],
     hasClickOrder: false,
-    timer: 4,
+    timer: 15,
     hasHighlights: true,
     specificFeedbacks: {
       correctFeedbacks: [{

package/dist/components/image-click-wrapper-component/components/CountDown/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var CountDown = function CountDown(_ref) {
+  var time = _ref.time;
+  var minutes = Math.floor(time / 60);
+  var seconds = time % 60;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "count-down count-down--in-puzzle-frame ".concat(time < 10 ? 'count-down--finalseconds' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", null, minutes < 10 ? "0".concat(minutes) : minutes, " : ", seconds < 10 ? "0".concat(Math.floor(seconds)) : Math.floor(seconds)));
+};
+
+var _default = CountDown;
+exports.default = _default;

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

@@ -15,6 +15,8 @@ var _FeedbackComponent = _interopRequireDefault(require("../../feedback-componen
 
 var _TimerDialog = _interopRequireDefault(require("./TimerDialog"));
 
+var _CountDown = _interopRequireDefault(require("./CountDown"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -131,6 +133,12 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   var pauseDate = (0, _react.useRef)(null);
   var whenCloseFeedbackDate = (0, _react.useRef)(null);
   var remainingTime = (0, _react.useRef)(null);
+  var intervalForCountDown = (0, _react.useRef)(null);
+
+  var _useState13 = (0, _react.useState)(timer),
+      _useState14 = _slicedToArray(_useState13, 2),
+      countDownTime = _useState14[0],
+      setCountDownTime = _useState14[1];
 
   var translate = function translate(id) {
     if (translateFromParent) return translateFromParent(id); // when there is no emitEvent pass the Translate
@@ -158,6 +166,14 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       shape: 'poly'
     }, area);
   });
+  var startCountDown = (0, _react.useCallback)(function () {
+    var timeout = setInterval(function () {
+      setCountDownTime(function (t) {
+        return t - 1;
+      });
+    }, 1000);
+    intervalForCountDown.current = timeout;
+  }, []);
   var handleFinish = (0, _react.useCallback)(function (rewards, success) {
     if (emitFinish) {
       emitFinish(rewards, success);
@@ -179,6 +195,9 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   var clearListenerForActualDate = (0, _react.useCallback)(function () {
     clearInterval(intervalForActualDate.current);
   }, []);
+  var clearIntervalForCountDown = (0, _react.useCallback)(function () {
+    clearInterval(intervalForCountDown.current);
+  }, []);
   var pauseTheCounter = (0, _react.useCallback)(function () {
     pauseDate.current = Date.now();
     remainingTime.current = finalDate.current - pauseDate.current;
@@ -201,10 +220,11 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
           };
         });
         setTimeExpired(true);
+        clearIntervalForCountDown();
         clearListenerForActualDate();
       }
     }, 250);
-  }, [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]);
+  }, [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]);
   (0, _react.useEffect)(function () {
     if ((areas.length === clickedZones.length || hasClickOnce && clickedZones.length > 0) && !completed) {
       var _specificFeedbacks$co;
@@ -236,6 +256,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   (0, _react.useEffect)(function () {
     setResolveAction(function (resolve) {
       if (timer) {
+        clearIntervalForCountDown();
         setDialogForTimer(false);
 
         if (feedbackData.show) {
@@ -262,7 +283,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
         }
       }, 4000);
     });
-  }, [setResolveAction, emitResolve, playSound, timer, feedbackData.show, clearListenerForActualDate]);
+  }, [setResolveAction, emitResolve, playSound, timer, feedbackData.show, clearListenerForActualDate, clearIntervalForCountDown]);
   (0, _react.useEffect)(function () {
     if (finished) {
       disableExit(true);
@@ -301,6 +322,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       }
 
       if (timer) {
+        clearIntervalForCountDown();
         pauseTheCounter();
       }
 
@@ -327,7 +349,11 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
         setClickedZones([]);
         setDialogForTimer(true);
         emitResetPuzzle();
+      } else if (areas.length === clickedZones.length || hasClickOnce && clickedZones.length > 0) {
+        clearIntervalForCountDown();
       } else {
+        setCountDownTime(remainingTime.current * 0.001);
+        startCountDown();
         listenerForActualDate();
       }
     }
@@ -342,7 +368,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
         rewards: []
       });
     });
-  }, [emitResetPuzzle, feedbackData.rewards, feedbackData.success, handleFinish, listenerForActualDate, playSound, timeExpired, timer]);
+  }, [timer, timeExpired, handleFinish, feedbackData.rewards, feedbackData.success, playSound, areas.length, clickedZones.length, hasClickOnce, emitResetPuzzle, clearIntervalForCountDown, startCountDown, listenerForActualDate]);
 
   var handleCorrectAreaClick = function handleCorrectAreaClick(area) {
     if (!clickedZones.some(function (zone) {
@@ -381,6 +407,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
             });
 
             if (timer) {
+              clearIntervalForCountDown();
               pauseTheCounter();
             }
           }
@@ -394,6 +421,10 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   };
 
   var createStartAndEndDate = (0, _react.useCallback)(function () {
+    clearIntervalForCountDown();
+    setCountDownTime(timer);
+    startCountDown();
+
     if (!popupCounterVisible.current && firstTryForFrame) {
       emitOpenPopupCounterInfo();
     }
@@ -402,7 +433,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     startDate.current = Date.now();
     finalDate.current = startDate.current + timer * 1000;
     listenerForActualDate();
-  }, [emitOpenPopupCounterInfo, firstTryForFrame, listenerForActualDate, timer]);
+  }, [clearIntervalForCountDown, timer, startCountDown, firstTryForFrame, listenerForActualDate, emitOpenPopupCounterInfo]);
   (0, _react.useEffect)(function () {
     // start automatically the time
     if (timer && slideNumber > 0) {
@@ -438,6 +469,8 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     retry: firstTryForFrame || puzzlesAutoCompleted[slideNumber - 1],
     translate: translate,
     onInit: createStartAndEndDate
+  }) : null, timer ? /*#__PURE__*/_react.default.createElement(_CountDown.default, {
+    time: countDownTime
   }) : null);
 };
 

package/dist/components/test-component/components/Container.js

@@ -134,7 +134,7 @@ var Container = function Container(_ref) {
     className: "test--questions__count"
   }, (0, _LangIsRtl.default)() ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentQuestionId + 1, "/", questions.length, " ", /*#__PURE__*/_react.default.createElement("span", null, translate('tests.question'))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, translate('tests.question')), " ", currentQuestionId + 1, "/", questions.length)), time >= 0 ? /*#__PURE__*/_react.default.createElement("div", {
     dir: "ltr",
-    className: "test--timer ".concat(time < 10 ? 'test--timer--finalseconds' : '')
+    className: "count-down ".concat(time < 10 ? 'count-down--finalseconds' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "test-time"
   }, minutes < 10 ? "0".concat(minutes) : minutes, " : ", seconds < 10 ? "0".concat(seconds) : seconds)) : null), /*#__PURE__*/_react.default.createElement(_Questions.default, {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.27.13",
+  "version": "1.28.1",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -13,7 +13,7 @@
     "url": "https://github.com/gamelearn/arcade-components"
   },
   "dependencies": {
-    "@gamelearn/arcade-styles": "0.13.2",
+    "@gamelearn/arcade-styles": "0.14.0",
     "@gamelearn/arcade-three-core": "1.14.5",
     "@react-three/drei": "9.4.3",
     "@react-three/fiber": "8.0.17",