@gamelearn/arcade-components 1.27.12 → 1.28.1

package/dist/components/drag-item-puzzle-component/components/DragItemPuzzleComponent.js

@@ -195,7 +195,6 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
     });
   }, [consume, emitEvent, resolveObject.name, resolveObject.uid]);
   var handleClose = (0, _react.useCallback)(function () {
-    playSound('score');
     setResolveClass('success');
     emitEvent({
       type: 'hidePuzzleButtons',
@@ -205,13 +204,12 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
     setTimeout(function () {
       handleFinish();
     }, 2000);
-  }, [emitEvent, handleFinish, playSound, solution.right.rewards]);
+  }, [emitEvent, handleFinish, solution.right.rewards]);
   var handleFail = (0, _react.useCallback)(function () {
     emitEvent({
       type: 'closeUI',
       ui: 'inventory'
     });
-    playSound('fail');
     setResolveClass('');
     emitEvent({
       type: 'hidePuzzleButtons',
@@ -221,7 +219,7 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
       type: 'failPuzzle'
     });
     accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(solution.wrong.rewards));
-  }, [emitEvent, playSound, solution.wrong.rewards]);
+  }, [emitEvent, solution.wrong.rewards]);
   var handleDrop = (0, _react.useCallback)(function (e) {
     e.dragEvent.stopPropagation();
     e.dragEvent.preventDefault();
@@ -414,6 +412,7 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
     text: info.solution[resolvedClass === 'success' ? 'right' : 'wrong'].desc,
     success: resolvedClass === 'success',
     translate: translate,
+    playSound: playSound,
     functionOnClose: handleFeedbackFuncionOnClose
   }) : null);
 };

package/dist/components/feedback-component/components/FeedbackComponent.js

@@ -46,7 +46,7 @@ var FeedbackComponent = function FeedbackComponent(_ref) {
   (0, _react.useEffect)(function () {
     var timerForShowExplain;
 
-    if (text && playSound) {
+    if (playSound) {
       playSound(success ? 'score' : 'fail');
     }
 

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/terminal-puzzle-component/components/Visor/index.js

@@ -23,6 +23,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var ICONS = {
   image: 'image-icon',
   video: 'video-icon',
@@ -47,6 +59,10 @@ var Visor = function Visor(_ref) {
       soundActions = _ref.soundActions;
   var fileId = file.fileId;
   var url = ((_file$document = file.document) === null || _file$document === void 0 ? void 0 : _file$document.url) || '';
+
+  var _soundActions = _slicedToArray(soundActions, 1),
+      playSound = _soundActions[0];
+
   var COMPONENTS = {
     image: {
       component: _Image.default,
@@ -105,6 +121,7 @@ var Visor = function Visor(_ref) {
     className: "puzzle--terminal__visor"
   }, /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
     shortText: true,
+    playSound: playSound,
     success: fileId === solutionId,
     text: fileId === solutionId ? info.solution.right.desc : info.solution.wrong.desc,
     functionOnClose: fileId === solutionId ? resolvePuzzle : backFile,

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.12",
+  "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",