@gamelearn/arcade-components 0.16.4 → 0.17.0

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

@@ -13,6 +13,18 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 && (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 FeedbackComponent = function FeedbackComponent(_ref) {
   var text = _ref.text,
       success = _ref.success,
@@ -20,34 +32,54 @@ var FeedbackComponent = function FeedbackComponent(_ref) {
       additionalStyle = _ref.additionalStyle,
       functionOnClose = _ref.functionOnClose,
       secondText = _ref.secondText,
-      _ref$puzzleHeaderClas = _ref.puzzleHeaderClass,
-      puzzleHeaderClass = _ref$puzzleHeaderClas === void 0 ? "puzzle--image__result" : _ref$puzzleHeaderClas;
+      translate = _ref.translate,
+      shortText = _ref.shortText;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      explain = _useState2[0],
+      setExplain = _useState2[1];
+
   (0, _react.useEffect)(function () {
+    var timerForShowExplain;
+
     if (text && playSound) {
       playSound(success ? 'score' : 'fail');
     }
-  }, [playSound, success, text]);
 
-  if (!text) {
-    return null;
-  }
+    if (text && !shortText) {
+      timerForShowExplain = setTimeout(function () {
+        setExplain(true);
+      }, 1000);
+    }
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(puzzleHeaderClass, " ").concat(additionalStyle, " ").concat(success ? 'success' : 'failed')
+    return function () {
+      if (timerForShowExplain) clearTimeout(timerForShowExplain);
+    };
+  }, [playSound, success, shortText, text]);
+  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 ? additionalStyle : '', " ").concat(success ? 'success' : 'failed')
   }, secondText && /*#__PURE__*/_react.default.createElement("span", {
     className: "puzzle--terminal__visor--file"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "puzzle--terminal__icon ".concat(additionalStyle)
+    className: "puzzle--terminal__icon ".concat(additionalStyle ? additionalStyle : '')
   }), /*#__PURE__*/_react.default.createElement("span", null, secondText)), /*#__PURE__*/_react.default.createElement("span", {
-    className: "title"
-  }, text), functionOnClose && /*#__PURE__*/_react.default.createElement("span", {
+    className: "feedback-layer__maintitle"
+  }, !shortText ? translate("tooltip.".concat(success ? 'correct' : 'incorrect')) : text), text && functionOnClose && explain && /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "feedback-layer__closeX",
     onClick: function onClick() {
       return functionOnClose();
-    },
-    className: "puzzle--terminal__folder--close"
+    }
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-close"
-  })));
+  }))), !shortText && text !== '' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "feedback-layer__explainwrap"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "feedback-layer__explain"
+  }, /*#__PURE__*/_react.default.createElement("div", null, text)))));
 };
 
 FeedbackComponent.defaultProps = {

package/dist/components/feedback-component/mocks/mockForStory.js

@@ -3,18 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mockProps2 = exports.mockProps = void 0;
+exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
 var soundActions = [function (sound) {
   console.log('PlaySound called :', sound);
 }, function () {}];
+
+var translate = function translate(payload) {
+  return payload;
+};
+
 var mockProps = {
+  functionOnClose: {},
   soundActions: soundActions,
-  text: 'Feedback Text Success',
-  success: true
+  success: true,
+  translate: translate,
+  text: '500A while back I needed to count the amount of letters that a piece of text in an email template had (to avoid passing any character limits)asd asdf sdf  A while back I needed to count the amount of letters that a piece of text in an email template had (to avoid passing any character limits)asd asdf sdf  A while back I needed to count the amount of letters that a piece of text in an email template had (to avoid passing any character limits)asd asdf sdf  A while back I needed to count thea sf as'
 };
 exports.mockProps = mockProps;
 var mockProps2 = {
+  functionOnClose: {},
+  soundActions: soundActions,
+  translate: translate,
+  text: '500A while back I needed to count the amount of letters that a piece of text in an email template had (to avoid passing any character limits)asd asdf sdf  A while back I needed to count the amount of letters that a piece of text in an email template had (to avoid passing any character limits)asd asdf sdf  A while back I needed to count the amount of letters that a piece of text in an email template had (to avoid passing any character limits)asd asdf sdf  A while back I needed to count thea sf as'
+};
+exports.mockProps2 = mockProps2;
+var mockProps3 = {
+  success: true,
+  soundActions: soundActions,
+  translate: translate
+};
+exports.mockProps3 = mockProps3;
+var mockProps4 = {
   soundActions: soundActions,
-  text: 'Feedback Text Failed'
+  translate: translate
 };
-exports.mockProps2 = mockProps2;
+exports.mockProps4 = mockProps4;

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

@@ -52,7 +52,8 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       soundActions = _ref.soundActions,
       setResolveAction = _ref.setResolveAction,
       disableExit = _ref.disableExit,
-      description = _ref.description;
+      description = _ref.description,
+      translateFromParent = _ref.translateFromParent;
   var props = list[index];
   var info = props.info;
   info.description = description;
@@ -110,10 +111,10 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
     hideContinue: true,
     disableInfo: puzzlesCompiledRef.current > 1,
     defaultCompleted: framesCompleted[index] || !!loadPuzzleStatus,
-    isLast: Object.values(framesCompleted).length - 1 === list.length - 1,
     soundActions: soundActions,
     setResolveAction: setResolveAction,
-    disableExit: disableExit
+    disableExit: disableExit,
+    translateFromParent: translateFromParent
   }));
 };
 

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

@@ -111,6 +111,14 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
       }
     });
   }, [accRewards, emitEvent, puzzleId]);
+
+  var translateFromParent = function translateFromParent(id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  };
+
   var currentPuzzleProps = {
     list: list,
     description: description,
@@ -126,7 +134,8 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     loadPuzzleStatus: loadPuzzleStatus,
     soundActions: soundActions,
     setResolveAction: setResolveAction,
-    disableExit: disableExit
+    disableExit: disableExit,
+    translateFromParent: translateFromParent
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle-frame"

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps = void 0;
 
-var emitEvent = function emitEvent() {
-  console.log('Emit event called');
+var emitEvent = function emitEvent(type) {
+  console.log('Emit event called', type);
 };
 
 var soundActions = [function (sound) {

package/dist/components/hacker-puzzle-component/mocks/mockForStory.js

@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
 
-var emitEvent = function emitEvent() {
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
   console.log('Emit event called');
+
+  if (type === 'translate') {
+    return payload;
+  }
 };
 
 var mockProps = {

package/dist/components/hanged-puzzle-component/components/HangedPuzzleComponent.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _feedbackComponent = _interopRequireDefault(require("../../feedback-component"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("../utils");
@@ -15,6 +17,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -127,10 +131,28 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
       disabled = _useState12[0],
       setDisable = _useState12[1];
 
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      feedbackResult = _useState14[0],
+      setFeedbackResult = _useState14[1];
+
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = _slicedToArray(_useState15, 2),
+      accRewards = _useState16[0],
+      setRewards = _useState16[1];
+
   var translatedAnswer = answer.toUpperCase().split('');
   var answerPanel = translatedAnswer.filter(function (char) {
     return (0, _utils.restrictCharacters)(char, 'and');
   });
+
+  var translate = function translate(id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  };
+
   var resetPool = (0, _react.useCallback)(function () {
     var newPool = answerPanel.map(function (char) {
       return {
@@ -292,6 +314,25 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
     }
   };
 
+  var handleClose = function handleClose() {
+    disableExit(true);
+    var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
+    playSound('score');
+    emitEvent({
+      type: 'addPoints',
+      payload: _toConsumableArray(rewardsData)
+    });
+  };
+
+  var handleFail = function handleFail() {
+    playSound('fail');
+    setRewards([].concat(_toConsumableArray(accRewards), _toConsumableArray(info.solution.wrong.rewards)));
+    setFailed(true);
+    setResolveClass('');
+    setDisable(false);
+    setFeedbackResult(false);
+  };
+
   var resolvePuzzle = function resolvePuzzle(newAnswer, newPool) {
     var restoredCharacters = [];
     setDisable(true);
@@ -313,26 +354,32 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
     }).length;
 
     if (correctLetters === translatedAnswer.length) {
-      var rewards = info.solution.right.rewards;
-      var wrongRewards = info.solution.wrong.rewards;
-      disableExit(false);
-      playSound('score');
       setResolveClass('success');
-      setTimeout(function () {
-        emitEvent({
-          type: 'addPoints',
-          payload: failed ? wrongRewards : rewards
-        });
-      }, 2000);
+
+      if (info.solution.right.desc === '') {
+        setTimeout(function () {
+          handleClose();
+        }, 2000);
+      }
     } else {
-      playSound('fail');
       setResolveClass('failed');
-      setFailed(true);
-      setTimeout(function () {
-        setResolveClass('');
-        setDisable(false);
-        restore(evaluatedAnswer, newPool, restoredCharacters);
-      }, 1000);
+      restore(evaluatedAnswer, newPool, restoredCharacters);
+
+      if (info.solution.wrong.desc === '') {
+        setTimeout(function () {
+          handleFail();
+        }, 2000);
+      }
+    }
+
+    setFeedbackResult(true);
+  };
+
+  var handleFeedbackFuncionOnClose = function handleFeedbackFuncionOnClose() {
+    if (resolvedClass === 'success') {
+      handleClose();
+    } else {
+      handleFail();
     }
   };
 
@@ -347,7 +394,13 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
     style: {
       backgroundImage: "url(\"".concat(imgURL, "\")")
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, resolvedClass ? /*#__PURE__*/_react.default.createElement(_feedbackComponent.default, {
+    playSound: playSound,
+    text: info.solution[resolvedClass === 'success' ? 'right' : 'wrong'].desc,
+    success: resolvedClass === 'success',
+    translate: translate,
+    functionOnClose: handleFeedbackFuncionOnClose
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--hanged__content"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--hanged__controls"

package/dist/components/hanged-puzzle-component/mocks/mockForStory.js

@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps = void 0;
 
-var emitEvent = function emitEvent() {
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
   console.log('Emit event called');
+
+  if (type === "translate") {
+    return payload;
+  }
 };
 
 var soundActions = [function (sound) {

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

@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
 
-var emitEvent = function emitEvent() {
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
   console.log('Emit event called');
+
+  if (type === 'translate') {
+    return payload;
+  }
 };
 
 var soundActions = [function (sound) {

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

@@ -47,34 +47,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var defaultImg = 'https://min.gamelearn.io/css-resources/gamelearn/resources/puzzle-login-low.png';
 
-var CompletedMessage = function CompletedMessage(_ref) {
-  var text = _ref.text,
-      playSound = _ref.playSound;
-  return /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
-    playSound: playSound,
-    text: text,
-    success: true
-  });
-};
-
-var FailedMessage = function FailedMessage(_ref2) {
-  var onClose = _ref2.onClose,
-      text = _ref2.text,
-      playSound = _ref2.playSound;
-  (0, _react.useEffect)(function () {
-    var timeout = setTimeout(function () {
-      onClose();
-    }, 2000);
-    return function () {
-      clearTimeout(timeout);
-    };
-  }, [onClose]);
-  return /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
-    text: text,
-    playSound: playSound
-  });
-};
-
 var ImageReview = function ImageReview() {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--image__preview"
@@ -123,21 +95,33 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       hasHighlights = props.hasHighlights,
       hasImageReview = props.hasImageReview,
       defaultCompleted = props.defaultCompleted,
-      isLast = props.isLast,
       hideContinue = props.hideContinue,
       className = props.className,
-      emitFinish = props.emitFinish;
+      emitFinish = props.emitFinish,
+      translateFromParent = props.translateFromParent;
 
   var translate = function translate(id) {
+    if (translateFromParent) return translateFromParent(id); // when there is no emitEvent pass the Translate
+
     return emitEvent({
       type: 'translate',
       payload: id
     });
   };
 
+  var _useState11 = (0, _react.useState)(''),
+      _useState12 = _slicedToArray(_useState11, 2),
+      resolvedClass = _useState12[0],
+      setResolveClass = _useState12[1];
+
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
+  var _useState13 = (0, _react.useState)([]),
+      _useState14 = _slicedToArray(_useState13, 2),
+      accRewards = _useState14[0],
+      setAccRewards = _useState14[1];
+
   var solution = info.solution;
   var imageUrl = image.img.url || defaultImg;
   var areasList = areas.map(function (area, index) {
@@ -154,16 +138,17 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   });
   var handleFinish = (0, _react.useCallback)(function () {
     var rewards = solution.right.rewards;
+    var fullRewards = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards));
 
     if (emitFinish) {
-      emitFinish(rewards);
+      emitFinish(fullRewards);
     } else {
       emitEvent({
         type: 'addPoints',
-        payload: rewards
+        payload: fullRewards
       });
     }
-  }, [emitEvent, emitFinish, solution.right]);
+  }, [accRewards, emitEvent, emitFinish, solution.right]);
   (0, _react.useEffect)(function () {
     if (completed) {
       disableExit(true);
@@ -178,9 +163,12 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     if (areas.length === clickedZones.length) {
       setCompleted(true);
       setDisableClick(true);
+      setResolveClass('success');
+      console.log('añañaña');
 
-      if (hideContinue) {
+      if (info.solution.right.desc === '') {
         timeout = setTimeout(function () {
+          setResolveClass('');
           handleFinish();
         }, 2000);
       }
@@ -191,8 +179,9 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
         clearTimeout(timeout);
       }
     };
-  }, [clickedZones, areas.length, handleFinish, hideContinue]);
+  }, [clickedZones, areas.length, handleFinish, hideContinue, info.solution.right.desc]);
   (0, _react.useEffect)(function () {
+    //autoResolve
     setResolveAction(function (resolve) {
       setCompleted(true);
       setDisableClick(true);
@@ -218,26 +207,31 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
         setClickedZones([]);
       }
 
-      if (feedback) {
-        setShowWrongFeedback(true);
-      } else {
-        emitEvent({
-          type: 'addPoints',
-          payload: wrongRewards,
-          finish: false
-        });
+      setShowWrongFeedback(true);
+      setResolveClass('wrong');
+
+      if (!feedback) {
+        setTimeout(function () {
+          setShowWrongFeedback(false);
+          setResolveClass('');
+          !emitFinish ? emitEvent({
+            type: 'addPoints',
+            payload: wrongRewards,
+            finish: false
+          }) : setAccRewards([].concat(_toConsumableArray(accRewards), _toConsumableArray(wrongRewards)));
+        }, 2000);
       }
     }
   };
 
-  var handleOncloseWrongFeedback = (0, _react.useCallback)(function () {
+  var handleOnClose = function handleOnClose() {
+    if (completed && !finished && resolvedClass === 'success') {
+      handleFinish();
+    }
+
+    setResolveClass('');
     setShowWrongFeedback(false);
-    !!emitEvent && emitEvent({
-      type: 'addPoints',
-      payload: solution.wrong.rewards,
-      finish: false
-    });
-  }, [emitEvent, solution]);
+  };
 
   var handleAreaClick = function handleAreaClick(area) {
     if (!clickedZones.some(function (zone) {
@@ -256,6 +250,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
 
         if (feedback) {
           setShowWrongFeedback(true);
+          setResolveClass('wrong');
         } else {
           emitEvent({
             type: 'addPoints',
@@ -269,20 +264,13 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className
-  }, showWrongFeedback ? /*#__PURE__*/_react.default.createElement(FailedMessage, {
-    playSound: playSound,
-    onClose: handleOncloseWrongFeedback,
-    text: info.solution.wrong.desc
-  }) : null, completed ? /*#__PURE__*/_react.default.createElement(CompletedMessage, {
+  }, resolvedClass !== "" ? /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
     playSound: playSound,
-    text: info.solution.right.desc
-  }) : null, completed && !finished && !hideContinue ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "position--absolute bottom center puzzle--image__continue"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: "gat--btn gat--btn__primary green",
-    onClick: handleFinish
-  }, isLast ? translate('tests.finish') : translate('puzzles.continue'))) : null, /*#__PURE__*/_react.default.createElement(_KonvaMapper.default, {
+    text: info.solution[resolvedClass === 'success' ? 'right' : 'wrong'].desc,
+    success: resolvedClass === 'success',
+    translate: translate,
+    functionOnClose: handleOnClose
+  }) : null, /*#__PURE__*/_react.default.createElement(_KonvaMapper.default, {
     completed: completed,
     imageUrl: imageUrl,
     areas: areasList,
@@ -310,7 +298,6 @@ ImageClickWrapperComponent.defaultProps = {
   hasImageReview: false,
   defaultCompleted: false,
   hideContinue: false,
-  isLast: true,
   emitAreaClick: function emitAreaClick() {}
 };
 var _default = ImageClickWrapperComponent;

package/dist/components/image-click-wrapper-component/mocks/mockForStory.js

@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
 
-var emitEvent = function emitEvent() {
-  console.log('Emit event called');
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
+  console.log('Emit event called', type);
+
+  if (type === 'translate') {
+    return payload;
+  }
 };
 
 var soundActions = [function (sound) {

package/dist/components/image-component/mocks/mockForStory.js

@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockWithImageNotViewed = exports.mockWithNotVisible = exports.mockProps = void 0;
 
-var emitEvent = function emitEvent() {
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
   console.log('Emit Event');
+
+  if (type === 'translate') {
+    return payload;
+  }
 };
 
 var mockProps = {

package/dist/components/keyboard-puzzle-component/components/KeyboardPuzzleComponent.js

@@ -78,6 +78,13 @@ var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
       feedbackIsShown = _useState14[0],
       setFeedbackIsShown = _useState14[1];
 
+  var translate = function translate(id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  };
+
   var imageURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || defaultImage;
 
   var _soundActions = _slicedToArray(soundActions, 1),
@@ -184,9 +191,10 @@ var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
       }, col);
     }));
   })), feedbackIsShown && /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
+    shortText: true,
+    translate: translate,
     text: feedBackText,
-    success: feedbackResult,
-    additionalStyle: "bottom"
+    success: feedbackResult
   }));
 };
 

package/dist/components/keyboard-puzzle-component/mocks/mockForStory.js

@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps = void 0;
 
-var emitEvent = function emitEvent() {
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
   console.log('Emit event called');
+
+  if (type === "translate") {
+    return payload;
+  }
 };
 
 var mockProps = {