@gamelearn/arcade-components 1.9.3 → 1.10.0

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

@@ -35,7 +35,8 @@ var FeedbackComponent = function FeedbackComponent(_ref) {
       translate = _ref.translate,
       shortText = _ref.shortText,
       hasTimeout = _ref.hasTimeout,
-      delay = _ref.delay;
+      delay = _ref.delay,
+      timeExpired = _ref.timeExpired;
 
   var _useState = (0, _react.useState)(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -70,10 +71,32 @@ var FeedbackComponent = function FeedbackComponent(_ref) {
       if (timeout) clearTimeout(timeout);
     };
   }, [delay, functionOnClose, hasTimeout]);
+
+  var statusColor = function statusColor() {
+    if (success) {
+      return 'success';
+    }
+
+    return 'failed';
+  };
+
+  var statusIcon = function statusIcon() {
+    if (success) {
+      return 'icon-check-circle-black';
+    }
+
+    if (timeExpired) {
+      return 'icon-times-up';
+    }
+
+    return 'icon-error-circle-black';
+  };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "feedback-layer ".concat(explain ? 'feedback-layer--withexplain' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "feedback-layer__header ".concat(additionalStyle || '', " ").concat(success ? 'success' : 'failed')
+    // eslint-disable-next-line prettier/prettier
+    className: "feedback-layer__header ".concat(additionalStyle || '', " ").concat(statusColor())
   }, secondText && /*#__PURE__*/_react.default.createElement("span", {
     className: "puzzle--terminal__visor--file"
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -82,7 +105,7 @@ var FeedbackComponent = function FeedbackComponent(_ref) {
     className: "feedback-layer__maintitle"
   }, !shortText ? /*#__PURE__*/_react.default.createElement("div", {
     title: translate("tooltip.".concat(success ? 'correct' : 'incorrect')),
-    className: "".concat(success ? 'icon-check-circle-black' : 'icon-error-circle-black')
+    className: "".concat(statusIcon())
   }) : text), text && functionOnClose && explain && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "feedback-layer__closeX",

package/dist/components/feedback-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.mockProps6 = exports.mockProps5 = exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
 
 var _mocker = require("helpers/mocker");
 
@@ -33,4 +33,15 @@ var mockProps4 = {
   playSound: _mocker.soundActions[0],
   translate: _mocker.translate
 };
-exports.mockProps4 = mockProps4;
+exports.mockProps4 = mockProps4;
+var mockProps5 = {
+  translate: _mocker.translate,
+  timeExpired: true
+};
+exports.mockProps5 = mockProps5;
+var mockProps6 = {
+  translate: _mocker.translate,
+  text: 'story with timer finish feedback',
+  timeExpired: true
+};
+exports.mockProps6 = mockProps6;

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

@@ -56,7 +56,11 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       emitEvent = _ref.emitEvent,
       nodeId = _ref.nodeId,
       setSelected = _ref.setSelected,
-      selected = _ref.selected;
+      selected = _ref.selected,
+      emitResetPuzzle = _ref.emitResetPuzzle,
+      firstTryForFrame = _ref.firstTryForFrame,
+      setPuzzlesAutoCompleted = _ref.setPuzzlesAutoCompleted,
+      puzzlesAutoCompleted = _ref.puzzlesAutoCompleted;
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
@@ -125,6 +129,9 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       type: 'hidePuzzleButtons',
       payload: false
     });
+    setPuzzlesAutoCompleted(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, _defineProperty({}, index, true));
+    });
     emitEvent({
       type: 'puzzleAction',
       action: 'resolve',
@@ -133,12 +140,17 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
         rewards: info.resolve.rewards
       }
     });
-  }, [emitEvent, puzzleId, playSound, info.resolve.rewards]);
+  }, [playSound, emitEvent, setPuzzlesAutoCompleted, puzzleId, info.resolve.rewards, index]);
+  var handleResetPuzzle = (0, _react.useCallback)(function () {
+    setFramesCompleted({});
+    correctClicked.current = 0;
+    emitResetPuzzle();
+  }, [emitResetPuzzle, setFramesCompleted]);
   (0, _react.useEffect)(function () {
     if (loadPuzzleStatus) {
       onComplete([], true, true);
     }
-  }, [loadPuzzleStatus, onComplete]);
+  }, [framesCompleted, loadPuzzleStatus, onComplete]);
   return /*#__PURE__*/_react.default.createElement(_imageClickWrapperComponent.default, _extends({
     key: index
   }, _objectSpread({}, props), {
@@ -157,7 +169,11 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
     setResolveAction: setResolveAction,
     disableExit: disableExit,
     translateFromParent: translateFromParent,
-    emitEvent: emitEvent
+    emitEvent: emitEvent,
+    slideNumber: index,
+    emitResetPuzzle: handleResetPuzzle,
+    firstTryForFrame: firstTryForFrame,
+    puzzlesAutoCompleted: puzzlesAutoCompleted
   }));
 };
 

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

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _CurrentFramePuzzle = _interopRequireDefault(require("./CurrentFramePuzzle"));
 
-var _PlayButton = _interopRequireDefault(require("./PlayButton"));
-
 var _Counter = _interopRequireDefault(require("./Counter"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -51,28 +49,40 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
       disableExit = _ref.disableExit,
       setResolveAction = _ref.setResolveAction,
       setInfo = _ref.setInfo;
-  var accRewards = (0, _react.useRef)([]);
 
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)({}),
       _useState2 = _slicedToArray(_useState, 2),
-      index = _useState2[0],
-      setIndex = _useState2[1];
+      puzzlesAutoCompleted = _useState2[0],
+      setPuzzlesAutoCompleted = _useState2[1];
+
+  var accRewards = (0, _react.useRef)([]);
 
-  var _useState3 = (0, _react.useState)({}),
+  var _useState3 = (0, _react.useState)(0),
       _useState4 = _slicedToArray(_useState3, 2),
-      framesCompleted = _useState4[0],
-      setFramesCompleted = _useState4[1];
+      index = _useState4[0],
+      setIndex = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(0),
+  var _useState5 = (0, _react.useState)({}),
       _useState6 = _slicedToArray(_useState5, 2),
-      selected = _useState6[0],
-      setSelected = _useState6[1];
+      framesCompleted = _useState6[0],
+      setFramesCompleted = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selected = _useState8[0],
+      setSelected = _useState8[1];
 
   var puzzlesCompiledRef = (0, _react.useRef)(0);
-  var hideTooltipRef = (0, _react.useRef)(false);
 
-  var _soundActions = _slicedToArray(soundActions, 1),
-      playSound = _soundActions[0];
+  var _useState9 = (0, _react.useState)(true),
+      _useState10 = _slicedToArray(_useState9, 2),
+      hideTooltip = _useState10[0],
+      setHideTooltipRef = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(true),
+      _useState12 = _slicedToArray(_useState11, 2),
+      firstTryForFrame = _useState12[0],
+      setFirstTryForFrame = _useState12[1];
 
   var totalCorrects = list.reduce(function (acc, current) {
     return acc + current.areas.length;
@@ -97,24 +107,14 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
       payload: [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(rewards))
     });
   }, [emitEvent]);
-
-  var handlePlaying = function handlePlaying() {
-    setIndex(index + 1);
-  };
-
-  var handleBack = function handleBack() {
-    if (index > 0) {
-      playSound('click-ui');
-      setIndex(index - 1);
-    }
-  };
-
-  var handleForw = function handleForw() {
-    if (index !== list.length - 1) {
-      playSound('click-ui');
-      setIndex(index + 1);
-    }
-  };
+  var resetPuzzle = (0, _react.useCallback)(function () {
+    setFirstTryForFrame(false);
+    accRewards.current = [];
+    setSelected(0);
+    setIndex(0);
+    setFramesCompleted({});
+    setHideTooltipRef(true);
+  }, []);
 
   var translateFromParent = function translateFromParent(id) {
     return emitEvent({
@@ -123,7 +123,12 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     });
   };
 
+  var onClickCounter = function onClickCounter() {
+    setHideTooltipRef(false);
+  };
+
   var currentPuzzleProps = {
+    firstTryForFrame: firstTryForFrame,
     list: list,
     description: description,
     index: index,
@@ -143,7 +148,10 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     translateFromParent: translateFromParent,
     setInfo: setInfo,
     emitEvent: emitEvent,
-    nodeId: nodeId
+    nodeId: nodeId,
+    emitResetPuzzle: resetPuzzle,
+    setPuzzlesAutoCompleted: setPuzzlesAutoCompleted,
+    puzzlesAutoCompleted: puzzlesAutoCompleted
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle-frame"
@@ -151,20 +159,7 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     className: "puzzle-frame__content"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle-frame__controls"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    onClick: handleBack,
-    className: "icon-video-backward ".concat(index <= 0 ? 'disabled' : '')
-  }), /*#__PURE__*/_react.default.createElement(_PlayButton.default, {
-    canPlay: index < list.length - 1,
-    emitPlaying: handlePlaying,
-    onClick: function onClick() {
-      playSound('click-ui');
-      hideTooltipRef.current = true;
-    }
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    onClick: handleForw,
-    className: "icon-video-forward ".concat(index === list.length - 1 ? 'disabled' : '')
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle-frame__progress"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -172,11 +167,12 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     },
     className: "puzzle-frame__progress--handle"
   }))), showFrames ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle-frame__info"
+    className: "puzzle-frame__info",
+    onClick: onClickCounter
   }, /*#__PURE__*/_react.default.createElement(_Counter.default, {
     current: selected,
     total: totalCorrects,
-    tooltip: !hideTooltipRef.current,
+    tooltip: hideTooltip,
     emitEvent: emitEvent
   })) : null));
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mockPropsOnce = exports.mockProps2 = exports.mockProps = void 0;
+exports.mockPropsOnce = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
 
 var _mocker = require("helpers/mocker");
 
@@ -563,4 +563,142 @@ var mockProps2 = {
     }
   }]
 };
-exports.mockProps2 = mockProps2;
+exports.mockProps2 = mockProps2;
+var mockProps3 = {
+  nodeId: 'xxas',
+  description: 'Dale al arma',
+  isFrame: true,
+  showFrames: true,
+  setInfo: function setInfo() {},
+  emitEvent: _mocker.emitEvent,
+  soundActions: _mocker.soundActions,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  list: [{
+    info: {
+      hint: {
+        active: true,
+        desc: 'hint',
+        rewards: []
+      },
+      resolve: {
+        rewards: []
+      },
+      solution: {
+        right: {
+          desc: 'Estupendo',
+          desc_labelId: 'alfalfa01',
+          rewards: []
+        },
+        wrong: {
+          desc: 'BUUUU',
+          desc_labelId: 'fabada01',
+          rewards: [{
+            id: 'grade',
+            name: 'grade',
+            points: -17,
+            type: 'grade'
+          }]
+        }
+      },
+      instructions: 'instructions',
+      timerFeedback: {
+        desc: 'Tiempo agotado',
+        desc_labelId: 'alfalfa01',
+        rewards: [{
+          id: 'grade',
+          name: 'grade',
+          points: -17,
+          type: 'grade'
+        }]
+      }
+    },
+    itemOrder: 1,
+    image: {
+      imgName: 'Paz-Vizla-Concept.png',
+      img: {
+        url: 'https://gl-lms-storage.s3-eu-west-1.amazonaws.com/development/clients/58dccfba26561500117caf53/image/609a9b30901f3e001247c031/Paz-Vizla-Concept.png',
+        imgName: 'Paz-Vizla-Concept.png',
+        resourceId: '609a9b30901f3e001247c031'
+      },
+      width: 1920,
+      height: 1097
+    },
+    areas: [{
+      id: 'Uno',
+      name: 'Uno',
+      x: 0,
+      y: 0,
+      fill: 'rgba(255, 255, 255, 0.1)',
+      draggable: true,
+      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
+    }],
+    badAreas: [{
+      id: 'AllArea',
+      name: 'BadArea',
+      x: 0,
+      y: 0,
+      fill: 'rgba(255, 255, 255, 0.1)',
+      draggable: true,
+      points: [0, 0, 1920, 0, 1920, 1097, 0, 1097, 0, 0],
+      stroke: '#ff634d',
+      strokeWidth: 2,
+      closed: true
+    }],
+    hasClickOrder: false,
+    timer: 4,
+    hasHighlights: true,
+    specificFeedbacks: {
+      correctFeedbacks: [{
+        id: 'Uno',
+        desc: 'specificFeedbacks 1 correcto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }, {
+        id: 'Dos',
+        desc: 'specificFeedbacks 2 correcto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }, {
+        id: 'Tres',
+        desc: 'specificFeedbacks 3 correcto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }],
+      wrongFeedbacks: [{
+        id: 'Uno_bad',
+        desc: 'specificFeedbacks 1 incorrecto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: -10,
+          type: 'score'
+        }]
+      }, {
+        id: 'Dos_bad',
+        desc: 'specificFeedbacks 2 incorrecto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: -10,
+          type: 'score'
+        }]
+      }]
+    }
+  }]
+};
+exports.mockProps3 = mockProps3;

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

@@ -13,6 +13,8 @@ var _KonvaMapper = _interopRequireDefault(require("../../konva-components/KonvaM
 
 var _FeedbackComponent = _interopRequireDefault(require("../../feedback-component/components/FeedbackComponent"));
 
+var _TimerDialog = _interopRequireDefault(require("./TimerDialog"));
+
 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); }
@@ -67,6 +69,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       areas = props.areas,
       badAreas = props.badAreas,
       hasClickOrder = props.hasClickOrder,
+      timer = props.timer,
       hasClickOnce = props.hasClickOnce,
       hasHighlights = props.hasHighlights,
       hasImageReview = props.hasImageReview,
@@ -75,7 +78,11 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       emitFinish = props.emitFinish,
       emitResolve = props.emitResolve,
       translateFromParent = props.translateFromParent,
-      specificFeedbacks = props.specificFeedbacks;
+      specificFeedbacks = props.specificFeedbacks,
+      slideNumber = props.slideNumber,
+      emitResetPuzzle = props.emitResetPuzzle,
+      firstTryForFrame = props.firstTryForFrame,
+      puzzlesAutoCompleted = props.puzzlesAutoCompleted;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -100,7 +107,26 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   }),
       _useState8 = _slicedToArray(_useState7, 2),
       feedbackData = _useState8[0],
-      setFeedbackData = _useState8[1];
+      setFeedbackData = _useState8[1]; // timer stuffs
+
+
+  var _useState9 = (0, _react.useState)(true),
+      _useState10 = _slicedToArray(_useState9, 2),
+      dialogForTimer = _useState10[0],
+      setDialogForTimer = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      timeExpired = _useState12[0],
+      setTimeExpired = _useState12[1];
+
+  var startDate = (0, _react.useRef)(null);
+  var actualDate = (0, _react.useRef)(null);
+  var intervalForActualDate = (0, _react.useRef)(null);
+  var finalDate = (0, _react.useRef)(null);
+  var pauseDate = (0, _react.useRef)(null);
+  var whenCloseFeedbackDate = (0, _react.useRef)(null);
+  var remainingTime = (0, _react.useRef)(null);
 
   var translate = function translate(id) {
     if (translateFromParent) return translateFromParent(id); // when there is no emitEvent pass the Translate
@@ -167,11 +193,32 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
             rewards: lastSpecific ? lastSpecific.rewards : info.solution.right.rewards
           });
         });
+
+        if (timer) {
+          pauseTheCounter();
+        }
       }
     }
-  }, [clickedZones, areas.length, specificFeedbacks, hasClickOnce, completed, info.solution.right]);
+  }, [clickedZones, areas.length, specificFeedbacks, hasClickOnce, completed, info.solution.right, pauseTheCounter, timer]);
   (0, _react.useEffect)(function () {
     setResolveAction(function (resolve) {
+      if (timer) {
+        setDialogForTimer(false);
+
+        if (feedbackData.show) {
+          setFeedbackData(function (oldState) {
+            return _objectSpread(_objectSpread({}, oldState), {}, {
+              show: false,
+              success: false,
+              text: '',
+              rewards: []
+            });
+          });
+        } else {
+          clearListenerForActualDate();
+        }
+      }
+
       setCompleted(true);
       setFinished(true);
       setTimeout(function () {
@@ -182,7 +229,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
         }
       }, 4000);
     });
-  }, [setResolveAction, emitResolve, playSound]);
+  }, [setResolveAction, emitResolve, playSound, timer, feedbackData.show, clearListenerForActualDate]);
   (0, _react.useEffect)(function () {
     if (finished) {
       disableExit(true);
@@ -220,6 +267,10 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
         }
       }
 
+      if (timer) {
+        pauseTheCounter();
+      }
+
       setFeedbackData(function (oldState) {
         return _objectSpread(_objectSpread({}, oldState), {}, {
           show: true,
@@ -232,7 +283,27 @@ 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;
+    actualDate.current = null;
+    finalDate.current = newFinalDate;
+
+    if (timer || timeExpired) {
+      if (!feedbackData.success) {
+        setClickedZones([]);
+        setDialogForTimer(true);
+        emitResetPuzzle();
+      } else {
+        listenerForActualDate();
+      }
+    }
+
     handleFinish(feedbackData.rewards, feedbackData.success);
     playSound('click-ui');
     setFeedbackData(function (oldState) {
@@ -243,7 +314,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
         rewards: []
       });
     });
-  }, [feedbackData.rewards, feedbackData.success, handleFinish, playSound]);
+  }, [emitResetPuzzle, feedbackData.rewards, feedbackData.success, handleFinish, listenerForActualDate, playSound, timeExpired, timer]);
 
   var handleCorrectAreaClick = function handleCorrectAreaClick(area) {
     if (!clickedZones.some(function (zone) {
@@ -280,6 +351,10 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
                 rewards: rewards
               });
             });
+
+            if (timer) {
+              pauseTheCounter();
+            }
           }
         }
 
@@ -290,6 +365,43 @@ 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 () {
+          return {
+            show: true,
+            success: false,
+            text: info.timerFeedback.desc ? info.timerFeedback.desc : '',
+            rewards: info.timerFeedback.rewards
+          };
+        });
+        setTimeExpired(true);
+        clearListenerForActualDate();
+      }
+    }, 0);
+  }, [clearListenerForActualDate, info.timerFeedback.desc, info.timerFeedback.rewards]);
+  var createStartAndEndDate = (0, _react.useCallback)(function () {
+    setDialogForTimer(false);
+    startDate.current = Date.now();
+    finalDate.current = startDate.current + timer * 1000;
+    listenerForActualDate();
+  }, [listenerForActualDate, timer]);
+  (0, _react.useEffect)(function () {
+    // start automatically the time
+    if (slideNumber > 0) {
+      if (puzzlesAutoCompleted[slideNumber - 1]) {
+        setDialogForTimer(true);
+      } else {
+        createStartAndEndDate();
+      }
+    }
+  }, [createStartAndEndDate, puzzlesAutoCompleted, slideNumber]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className
   }, feedbackData.show ? /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
@@ -298,8 +410,9 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     success: feedbackData.success,
     translate: translate,
     hasTimeout: !feedbackData.text,
-    delay: 2000,
-    functionOnClose: handleOnClose
+    delay: timer ? 1000 : 2000,
+    functionOnClose: handleOnClose,
+    timeExpired: timeExpired
   }) : null, /*#__PURE__*/_react.default.createElement(_KonvaMapper.default, {
     completed: completed,
     imageUrl: imageUrl,
@@ -310,7 +423,11 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     onClickOutside: handleIncorrectAreaClick,
     hasHighlights: hasHighlights,
     emitEvent: emitEvent
-  }), hasImageReview ? /*#__PURE__*/_react.default.createElement(ImageReview, null) : null);
+  }), hasImageReview ? /*#__PURE__*/_react.default.createElement(ImageReview, null) : null, timer && dialogForTimer ? /*#__PURE__*/_react.default.createElement(_TimerDialog.default, {
+    retry: firstTryForFrame || puzzlesAutoCompleted[slideNumber - 1],
+    translate: translate,
+    onInit: createStartAndEndDate
+  }) : null);
 };
 
 ImageClickWrapperComponent.defaultProps = {

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

@@ -0,0 +1,30 @@
+"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 TimerDialog = function TimerDialog(_ref) {
+  var retry = _ref.retry,
+      translate = _ref.translate,
+      onInit = _ref.onInit;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "timer-dialog"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "timer-dialog__container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "timer-dialog__title"
+  }, translate('storylines.misc.ready')), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn gat--btn__primary",
+    onClick: onInit
+  }, /*#__PURE__*/_react.default.createElement("span", null, !retry ? translate('storylines.misc.retry') : translate('storylines.misc.start')))));
+};
+
+var _default = TimerDialog;
+exports.default = _default;

package/dist/components/konva-components/KonvaMapper.js

@@ -131,7 +131,8 @@ var KonvaMapper = function KonvaMapper(_ref) {
     ref: stageRef,
     width: width,
     height: height,
-    onClick: handleStageClick
+    onClick: handleStageClick,
+    onTouchEnd: handleStageClick
   }, /*#__PURE__*/_react.default.createElement(_reactKonva.Layer, null, /*#__PURE__*/_react.default.createElement(_reactKonva.Image, {
     ref: imageRef,
     image: currentImage

package/package.json

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

package/dist/components/frame-click-puzzle-component/components/PlayButton/index.js

@@ -1,76 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 PlayButton = function PlayButton(_ref) {
-  var onClick = _ref.onClick,
-      canPlay = _ref.canPlay,
-      emitPlaying = _ref.emitPlaying;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      play = _useState2[0],
-      setPlay = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      playingTime = _useState4[0],
-      setPlayingTime = _useState4[1];
-
-  var timeOut = (0, _react.useRef)(null);
-
-  var playAction = function playAction() {
-    if (canPlay) {
-      setPlay(!play);
-      onClick();
-    }
-  };
-
-  (0, _react.useEffect)(function () {
-    if (play) {
-      timeOut.current = setTimeout(function () {
-        setPlayingTime(playingTime + 1);
-        emitPlaying();
-      }, 2000);
-    }
-  }, [emitPlaying, play, playingTime]);
-  (0, _react.useEffect)(function () {
-    if (!canPlay) {
-      setPlay(false);
-
-      if (timeOut.current) {
-        clearTimeout(timeOut.current);
-      }
-    }
-  }, [canPlay]);
-  return /*#__PURE__*/_react.default.createElement("span", {
-    onClick: playAction,
-    className: " ".concat(play ? 'icon-pause' : 'icon-play')
-  });
-};
-
-var _default = PlayButton;
-exports.default = _default;