@gamelearn/arcade-components 0.19.0 → 0.19.2

package/dist/components/cards-selector-puzzle-component/components/CardsSelectorPuzzleComponent.js

@@ -124,14 +124,14 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
       var rewards = info.solution.right.rewards;
       var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards));
       playSound('score');
-      emitEvent({
-        type: 'addPoints',
-        payload: _toConsumableArray(rewardsData)
-      });
       emitEvent({
         type: 'hidePuzzleButtons',
         payload: false
       });
+      emitEvent({
+        type: 'addPoints',
+        payload: _toConsumableArray(rewardsData)
+      });
     } else {
       setFeedbackResult(false);
       disableExit(false);

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

@@ -34,6 +34,8 @@ var FeedbackComponent = function FeedbackComponent(_ref) {
       secondText = _ref.secondText,
       translate = _ref.translate,
       shortText = _ref.shortText,
+      hasTimeout = _ref.hasTimeout,
+      delay = _ref.delay,
       simpleClose = _ref.simpleClose;
 
   var _useState = (0, _react.useState)(),
@@ -58,6 +60,17 @@ var FeedbackComponent = function FeedbackComponent(_ref) {
       if (timerForShowExplain) clearTimeout(timerForShowExplain);
     };
   }, [playSound, success, shortText, text]);
+  (0, _react.useEffect)(function () {
+    var timeout;
+
+    if (hasTimeout && functionOnClose) {
+      timeout = setTimeout(functionOnClose, delay);
+    }
+
+    return function () {
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [delay, functionOnClose, hasTimeout]);
   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", {
@@ -93,6 +106,8 @@ var FeedbackComponent = function FeedbackComponent(_ref) {
 
 FeedbackComponent.defaultProps = {
   text: '',
+  hasTimeout: false,
+  delay: 3000,
   success: false
 };
 var _default = FeedbackComponent;

package/dist/components/index.js

@@ -203,6 +203,12 @@ Object.defineProperty(exports, "PatternComponent", {
     return _patternComponent.default;
   }
 });
+Object.defineProperty(exports, "TextClickPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _textClickPuzzleComponent.default;
+  }
+});
 
 var _scene = _interopRequireDefault(require("./arcade-render/scene"));
 
@@ -268,6 +274,8 @@ var _autoEvaluationComponent = _interopRequireDefault(require("./auto-evaluation
 
 var _patternComponent = _interopRequireDefault(require("./pattern-component"));
 
+var _textClickPuzzleComponent = _interopRequireDefault(require("./text-click-puzzle-component"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 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; }

package/dist/components/text-click-puzzle-component/components/TextClickPuzzleComponent.js

@@ -0,0 +1,389 @@
+"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"));
+
+var _feedbackComponent = _interopRequireDefault(require("../../feedback-component"));
+
+var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+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 && (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 TextClickPuzzleComponent = function TextClickPuzzleComponent(_ref) {
+  var emitEvent = _ref.emitEvent,
+      showFrames = _ref.showFrames,
+      styles = _ref.styles,
+      list = _ref.list,
+      soundActions = _ref.soundActions,
+      description = _ref.description,
+      info = _ref.info,
+      setInfo = _ref.setInfo;
+
+  var _useState = (0, _react.useState)({
+    result: null,
+    show: false,
+    text: '',
+    timeout: false
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      feedbackData = _useState2[0],
+      setFeedbackData = _useState2[1];
+
+  var _soundActions = _slicedToArray(soundActions, 1),
+      playSound = _soundActions[0];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentSlide = _useState4[0],
+      setCurrentSlide = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      numberAllCorrectFragments = _useState6[0],
+      setNumberAllCorrectFragments = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      correctTextFragmentsAccumulated = _useState8[0],
+      setCorrectTextFragmentsAccumulated = _useState8[1];
+
+  var correctTextFragmentsPartial = (0, _react.useRef)(0);
+  var accRewards = (0, _react.useRef)([]);
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      orderCounter = _useState10[0],
+      setOrderCounter = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      transitionToNextSlide = _useState12[0],
+      setTransitionToNextSlide = _useState12[1];
+
+  var translate = (0, _react.useCallback)(function (id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  }, [emitEvent]);
+  var parsedText = (0, _react.useRef)(null);
+  var onHoverMark = (0, _react.useCallback)(function (id) {
+    for (var i = 0; i < list[currentSlide].correctTexts.length; i++) {
+      if (id === list[currentSlide].correctTexts[i].id) {
+        var allDataTextIds = document.querySelectorAll("[data-text-id=\"".concat(id, "\"]"));
+        allDataTextIds.forEach(function (el) {
+          return el.classList.add('text-click__hover-correct');
+        });
+      }
+    }
+  }, [currentSlide, list]);
+  var goForward = (0, _react.useCallback)(function () {
+    if (correctTextFragmentsPartial.current === list[currentSlide].correctTexts.length) {
+      setFeedbackData(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          result: false
+        });
+      });
+      correctTextFragmentsPartial.current = 0;
+
+      if (correctTextFragmentsAccumulated === numberAllCorrectFragments) {
+        var totalRewards = accRewards.current.reduce(function (acc, current) {
+          var existing = acc.findIndex(function (r) {
+            return r.id === current.id;
+          });
+
+          if (existing >= 0) {
+            acc[existing].points += current.points;
+          } else {
+            acc.push(current);
+          }
+
+          return acc;
+        }, []);
+        emitEvent({
+          type: 'addPoints',
+          payload: totalRewards
+        });
+      } else {
+        parsedText.current = null;
+        setCurrentSlide(currentSlide + 1);
+        setTransitionToNextSlide(true);
+        setTimeout(function () {
+          setTransitionToNextSlide(false);
+        }, 1200);
+      }
+    }
+  }, [correctTextFragmentsAccumulated, currentSlide, list, numberAllCorrectFragments, emitEvent]);
+  var handleFeedbackFuncionOnClose = (0, _react.useCallback)(function () {
+    emitEvent({
+      type: 'hidePuzzleButtons',
+      payload: false
+    });
+    goForward();
+    setFeedbackData(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        show: false,
+        text: ''
+      });
+    });
+
+    if (document.querySelector('.text-click__failed')) {
+      document.querySelector('.text-click__failed').classList.remove('text-click__failed');
+    }
+  }, [emitEvent, goForward]);
+  var handleCorrectClick = (0, _react.useCallback)(function (allDataTextIds, specificFeedback) {
+    var _list$currentSlide$in;
+
+    allDataTextIds.forEach(function (el) {
+      return el.classList.add('text-click__success');
+    });
+    setFeedbackData(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        result: 'success',
+        timeout: true
+      });
+    });
+    setCorrectTextFragmentsAccumulated(correctTextFragmentsAccumulated + 1);
+    correctTextFragmentsPartial.current += 1;
+    emitEvent({
+      type: 'hidePuzzleButtons',
+      payload: true
+    });
+    playSound('score'); // si tiene feedback general definido
+
+    if ((_list$currentSlide$in = list[currentSlide].info.solution.right) !== null && _list$currentSlide$in !== void 0 && _list$currentSlide$in.desc) {
+      accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(list[currentSlide].info.solution.right.rewards));
+      setFeedbackData(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          text: list[currentSlide].info.solution.right.desc,
+          timeout: false
+        });
+      });
+    } // si no tiene feedback general y tiene specificFeedbacks definido
+    else if (list[currentSlide].info.solution.right.desc === '' && specificFeedback !== null && specificFeedback !== void 0 && specificFeedback.desc) {
+        var _specificFeedback$rew;
+
+        accRewards.current = !!(specificFeedback !== null && specificFeedback !== void 0 && (_specificFeedback$rew = specificFeedback.rewards) !== null && _specificFeedback$rew !== void 0 && _specificFeedback$rew.length) ? [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(specificFeedback === null || specificFeedback === void 0 ? void 0 : specificFeedback.rewards)) : _toConsumableArray(accRewards.current);
+        setFeedbackData(function (prevState) {
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            text: specificFeedback.desc,
+            timeout: false
+          });
+        });
+      } else {
+        accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(list[currentSlide].info.solution.right.rewards));
+      }
+  }, [correctTextFragmentsAccumulated, emitEvent, playSound, list, currentSlide]);
+  var handleIncorrectClick = (0, _react.useCallback)(function (allDataTextIds, specificFeedback) {
+    allDataTextIds.forEach(function (el) {
+      return el.classList.add('text-click__failed');
+    });
+    emitEvent({
+      type: 'hidePuzzleButtons',
+      payload: true
+    });
+    playSound('fail');
+    setFeedbackData(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        result: null,
+        timeout: true
+      });
+    }); // si tiene feedback general definido
+
+    if (list[currentSlide].info.solution.wrong.desc !== '') {
+      accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(list[currentSlide].info.solution.wrong.rewards));
+      setFeedbackData(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          text: list[currentSlide].info.solution.wrong.desc,
+          timeout: false
+        });
+      });
+    } // si no tiene feedback general y tiene specificFeedbacks definido
+    else if (list[currentSlide].info.solution.wrong.desc === '' && specificFeedback.desc !== '') {
+        accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(specificFeedback === null || specificFeedback === void 0 ? void 0 : specificFeedback.rewards)); // accRewards.current = [...accRewards.current, ...feedbackIncorrect.rewards];
+
+        setFeedbackData(function (prevState) {
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            text: specificFeedback.desc,
+            timeout: false
+          });
+        });
+      } else {
+        accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(list[currentSlide].info.solution.wrong.rewards));
+      }
+  }, [emitEvent, playSound, list, currentSlide]);
+  var onClickMark = (0, _react.useCallback)(function (e, id) {
+    var _list$currentSlide, _list$currentSlide$sp, _list$currentSlide2, _list$currentSlide2$s;
+
+    setFeedbackData(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        show: true
+      });
+    });
+    e.stopPropagation();
+    var allDataTextIds = document.querySelectorAll("[data-text-id=\"".concat(id, "\"]"));
+    var feedbackCorrect = list[currentSlide].correctTexts.find(function (element) {
+      return element.id === id;
+    });
+    var feedbackIncorrect = list[currentSlide].wrongTexts.find(function (element) {
+      return element.id === id;
+    });
+    var specificCorrectFeedback = (_list$currentSlide = list[currentSlide]) === null || _list$currentSlide === void 0 ? void 0 : (_list$currentSlide$sp = _list$currentSlide.specificFeedbacks) === null || _list$currentSlide$sp === void 0 ? void 0 : _list$currentSlide$sp.correctFeedbacks.find(function (fb) {
+      return fb.id === id;
+    });
+    var specificWrongFeedback = (_list$currentSlide2 = list[currentSlide]) === null || _list$currentSlide2 === void 0 ? void 0 : (_list$currentSlide2$s = _list$currentSlide2.specificFeedbacks) === null || _list$currentSlide2$s === void 0 ? void 0 : _list$currentSlide2$s.wrongFeedbacks.find(function (fb) {
+      return fb.id === id;
+    }); // si va en orden
+
+    if (list[currentSlide].hasClickOrder) {
+      // y lo has hecho bien
+      if (list[currentSlide].correctTexts[orderCounter].id === id) {
+        setOrderCounter(orderCounter + 1); // hacer verde 🎉
+
+        handleCorrectClick(allDataTextIds, specificWrongFeedback);
+      } else if (list[currentSlide].correctTexts.find(function (c) {
+        return c.id === id;
+      }) && list[currentSlide].correctTexts[orderCounter].id !== id) {
+        // si has dado buena fuera de orden
+        emitEvent({
+          type: 'hidePuzzleButtons',
+          payload: true
+        });
+        setFeedbackData(function (prevState) {
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            result: null,
+            text: list[currentSlide].info.orderFeedback.desc || translate('puzzles.incorrectOrder'),
+            timeout: false
+          });
+        });
+      } else {
+        //si has click en mala repuesta
+        handleIncorrectClick(allDataTextIds, specificCorrectFeedback);
+      }
+    } else {
+      // si no va en orden
+      //si la opción clickada es correcta
+      if ((feedbackCorrect === null || feedbackCorrect === void 0 ? void 0 : feedbackCorrect.id) === id) {
+        handleCorrectClick(allDataTextIds, specificCorrectFeedback);
+      } //si la opción clickada es incorrecta
+      else if ((feedbackIncorrect === null || feedbackIncorrect === void 0 ? void 0 : feedbackIncorrect.id) === id) {
+          handleIncorrectClick(allDataTextIds, specificWrongFeedback); // si no tiene ni feedback general ni specificFeedbacks definido
+        } else if (id === 'allWrong') {
+          // si tiene feedback general definido
+          setFeedbackData(function (prevState) {
+            return _objectSpread(_objectSpread({}, prevState), {}, {
+              timeout: true
+            });
+          });
+
+          if (list[currentSlide].info.solution.wrong.desc !== '') {
+            setFeedbackData(function (prevState) {
+              return _objectSpread(_objectSpread({}, prevState), {}, {
+                text: list[currentSlide].info.solution.wrong.desc,
+                timeout: false
+              });
+            });
+          } // si no tiene ni feedback general ni specificFeedbacks definido
+
+        }
+    }
+  }, [list, currentSlide, orderCounter, handleCorrectClick, emitEvent, translate, handleIncorrectClick]);
+  var recursiveStuff = (0, _react.useCallback)(function (jsx) {
+    return (0, _utils.getRecursiveJSX)(jsx, 0, list[currentSlide], onClickMark, onHoverMark);
+  }, [currentSlide, list, onClickMark, onHoverMark]);
+  var getnumberAllCorrectFragments = (0, _react.useCallback)(function () {
+    var counter = 0;
+
+    for (var i = 0; i < list.length; i++) {
+      for (var j = 0; j < list[i].correctTexts.length; j++) {
+        counter++;
+        setNumberAllCorrectFragments(counter);
+      }
+    }
+  }, [list]);
+  (0, _react.useEffect)(function () {
+    setInfo(_objectSpread(_objectSpread({}, list[currentSlide].info), {}, {
+      description: description
+    }));
+
+    if (list[currentSlide].text) {
+      var jsx = (0, _htmlReactParser.default)(list[currentSlide].text);
+      parsedText.current = recursiveStuff(jsx);
+      getnumberAllCorrectFragments();
+    } else {
+      parsedText.current = '';
+    }
+  }, [currentSlide, description, getnumberAllCorrectFragments, info, list, recursiveStuff, setInfo]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-click text-click--".concat(styles),
+    style: feedbackData.show ? {
+      pointerEvents: 'none'
+    } : null
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-click__overlay"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-click__container ".concat(transitionToNextSlide ? 'slideInLeft' : '', " ")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-click__title"
+  }, translate('puzzles.text-click-puzzle.title')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-click__body"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-click__scroll"
+  }, parsedText.current)))), showFrames && /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-click__paginator"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-click__icon-check-circle-black"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-check-circle-black"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text-click__slide"
+  }, correctTextFragmentsAccumulated, " / ", numberAllCorrectFragments))), feedbackData.show && /*#__PURE__*/_react.default.createElement(_feedbackComponent.default, {
+    playSound: playSound,
+    success: feedbackData.result,
+    text: feedbackData.text,
+    translate: translate,
+    functionOnClose: handleFeedbackFuncionOnClose,
+    hasTimeout: feedbackData.timeout
+  }));
+};
+
+var _default = TextClickPuzzleComponent;
+exports.default = _default;

package/dist/components/text-click-puzzle-component/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _TextClickPuzzleComponent = _interopRequireDefault(require("./components/TextClickPuzzleComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _TextClickPuzzleComponent.default;
+exports.default = _default;

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

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps = exports.messages = void 0;
+
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
+
+  if (type === 'translate') {
+    return payload;
+  }
+
+  console.log('Emit event called');
+};
+
+var messages = {
+  fullText1: '<div><p><strong>Texto de prueba:</strong></p><p>Con <span data-text-id="text-click-0">un texto correcto normal</span></p><p>Con <span data-text-id="text-click-2">un texto incorrecto normal</span></p><p>Con un texto <span data-text-id="text-click-1">corr</span></p><p><span data-text-id="text-click-1">ecto partido</span></p></div>',
+  fullText2: '<div><mark data-text-id="text-click-4">FRAGMENTO <strong>CORRECTO</strong> id4</mark> que <mark data-text-id="text-click-7">FRAGMENTO <strong>CORRECTO id7</strong> 4</mark> en <mark data-text-id="text-click-6">FRAGMENTO <strong>inCORRECTO id6</strong> 4</mark> asdf asdf asf <mark data-text-id="text-click-5">FRAGMENTO <strong>INCORRECTO id5</strong></mark></div>',
+  fullText3: '<div>Todo es incorrecto salvo <span data-text-id="text-click-8">alguna cosa</span></div>'
+};
+exports.messages = messages;
+var mockProps = {
+  emitEvent: emitEvent,
+  showFrames: true,
+  soundActions: [function () {}, function () {}],
+  styles: 'chalkboard',
+  list: [{
+    allWrong: true,
+    correctTexts: [{
+      id: 'text-click-0',
+      value: 'este value no le hace falta a arcade'
+    }, {
+      id: 'text-click-1',
+      value: 'este value no le hace falta a arcade'
+    }],
+    hasClickOrder: false,
+    hasHighlights: true,
+    info: {
+      solution: {
+        right: {
+          desc: '',
+          rewards: [{
+            id: 'k2koxnkq',
+            name: 'Power',
+            points: 10,
+            type: 'score'
+          }]
+        },
+        wrong: {
+          desc: '',
+          rewards: [{
+            id: 'k2koxnkq',
+            name: 'Power',
+            points: -10,
+            type: 'score'
+          }]
+        }
+      },
+      hint: {
+        active: false,
+        desc: '',
+        rewards: []
+      },
+      resolve: {
+        rewards: []
+      }
+    },
+    itemOrder: 1,
+    specificFeedbacks: {
+      correctFeedbacks: [{
+        id: 'text-click-0',
+        desc: '',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }, {
+        id: 'text-click-1',
+        desc: 'specificFeedbacks text-click-1 correcto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }],
+      wrongFeedbacks: [{
+        id: 'text-click-2',
+        desc: 'specificFeedbacks text-click-2 incorrecto',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: -10,
+          type: 'score'
+        }]
+      }]
+    },
+    text: messages.fullText1,
+    wrongTexts: [{
+      id: "text-click-2",
+      value: "este value no le hace falta a arcade"
+    }]
+  }, {
+    allWrong: false,
+    correctTexts: [{
+      id: 'text-click-4',
+      value: 'este value no le hace falta a arcade'
+    }, {
+      id: 'text-click-7',
+      value: 'este value no le hace falta a arcade'
+    }],
+    hasClickOrder: false,
+    hasHighlights: true,
+    info: {
+      solution: {
+        right: {
+          desc: '',
+          rewards: [{
+            id: 'k2koxnkq',
+            name: 'Power',
+            points: 10,
+            type: 'score'
+          }]
+        },
+        wrong: {
+          desc: '',
+          rewards: [{
+            id: 'k2koxnkq',
+            name: 'Power',
+            points: 10,
+            type: 'score'
+          }]
+        }
+      },
+      hint: {
+        active: false,
+        desc: '',
+        rewards: []
+      },
+      resolve: {
+        rewards: []
+      }
+    },
+    itemOrder: 2,
+    specificFeedbacks: {
+      correctFeedbacks: [{
+        id: 'text-click-4',
+        desc: 'item 2 specificFeedbacks correctFeedbacks 4 (1)',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }, {
+        id: 'text-click-7',
+        desc: '',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: -10,
+          type: 'score'
+        }]
+      }],
+      wrongFeedbacks: [{
+        id: 'text-click-6',
+        desc: 'item 6 specificFeedbacks wrongFeedbacks 6 (1)',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: -10,
+          type: 'score'
+        }]
+      }, {
+        id: 'text-click-5',
+        desc: 'item 5 specificFeedbacks wrongFeedbacks 5 (1)',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: -10,
+          type: 'score'
+        }]
+      }]
+    },
+    text: messages.fullText2,
+    wrongTexts: [{
+      id: 'text-click-5',
+      value: "este value no le hace falta a arcade"
+    }, {
+      id: 'text-click-6',
+      value: "este value no le hace falta a arcade"
+    }]
+  }, {
+    allWrong: true,
+    correctTexts: [{
+      id: 'text-click-8',
+      value: 'este value no le hace falta a arcade'
+    }],
+    hasClickOrder: false,
+    hasHighlights: false,
+    info: {
+      solution: {
+        right: {
+          desc: '',
+          rewards: [{
+            id: 'k2koxnkq',
+            name: 'Power',
+            points: 10,
+            type: 'score'
+          }]
+        },
+        wrong: {
+          desc: '',
+          rewards: [{
+            id: 'k2koxnkq',
+            name: 'Power',
+            points: -10,
+            type: 'score'
+          }]
+        }
+      },
+      hint: {
+        active: false,
+        desc: '',
+        rewards: []
+      },
+      resolve: {
+        rewards: []
+      }
+    },
+    itemOrder: 3,
+    specificFeedbacks: {
+      correctFeedbacks: [{
+        id: 'text-click-8',
+        desc: 'text-click-8',
+        rewards: [{
+          id: 'k2koxnkq',
+          name: 'Power',
+          points: 10,
+          type: 'score'
+        }]
+      }],
+      wrongFeedbacks: []
+    },
+    text: messages.fullText3,
+    wrongTexts: []
+  }]
+};
+exports.mockProps = mockProps;

package/dist/components/text-click-puzzle-component/utils/index.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRecursiveJSX = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var getRecursiveJSX = function getRecursiveJSX(jsx) {
+  var _jsx$props;
+
+  var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var slide = arguments.length > 2 ? arguments[2] : undefined;
+  var onClick = arguments.length > 3 ? arguments[3] : undefined;
+  var onHover = arguments.length > 4 ? arguments[4] : undefined;
+
+  if ((_jsx$props = jsx.props) !== null && _jsx$props !== void 0 && _jsx$props.children) {
+    var Type = jsx.type; // Tipo de marcado
+
+    var _jsx$props2 = jsx.props,
+        children = _jsx$props2.children,
+        props = _objectWithoutProperties(_jsx$props2, ["children"]); // Obtenemos el hijo y los props por separado
+
+
+    if (jsx.props['data-text-id']) {
+      props.onClick = function (e) {
+        return onClick(e, props['data-text-id'] || -1);
+      };
+
+      if (slide !== null && slide !== void 0 && slide.hasHighlights) {
+        props.onMouseEnter = function () {
+          return onHover(props['data-text-id'] || -1);
+        };
+      }
+    } else if (slide !== null && slide !== void 0 && slide.allWrong && !jsx.props['data-text-id']) {
+      props.onClick = function (e) {
+        return onClick(e, 'allWrong');
+      };
+    } // Si hay varios hijos los recorremos y llamamos a la función recursiva
+
+
+    if (Array.isArray(children)) {
+      // Mantenemos el marcado y los props
+      return /*#__PURE__*/_react.default.createElement(Type, _extends({
+        key: "".concat(jsx.type, "_").concat(i)
+      }, props), children.map(function (child, i) {
+        return getRecursiveJSX(child, i, slide, onClick, onHover);
+      }));
+    } // Nodo sin hijos
+
+
+    return /*#__PURE__*/_react.default.createElement(Type, _extends({
+      key: "".concat(jsx.type, "_").concat(i)
+    }, props), getRecursiveJSX(children, i, slide, onClick, onHover));
+  } // console.log('🐮', jsx);
+
+
+  return jsx.split(' ').filter(function (word) {
+    return word !== '';
+  }).map(function (word, i) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: i
+    }, word);
+  });
+};
+
+exports.getRecursiveJSX = getRecursiveJSX;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mock6 = exports.mock5 = exports.mock4 = exports.mock3 = exports.mock2 = exports.mock = exports.messages = void 0;
+exports.mock8 = exports.mock7 = exports.mock6 = exports.mock5 = exports.mock4 = exports.mock3 = exports.mock2 = exports.mock = exports.messages = void 0;
 
 var emitEvent = function emitEvent(_ref) {
   var type = _ref.type,
@@ -191,6 +191,7 @@ var mock = {
 exports.mock = mock;
 var mock2 = {
   emitEvent: emitEvent,
+  soundActions: [function () {}, function () {}],
   texts: [{
     type: 'fixed',
     fullText: messages.fullText1
@@ -375,6 +376,7 @@ var mock2 = {
 exports.mock2 = mock2;
 var mock3 = {
   emitEvent: emitEvent,
+  soundActions: [function () {}, function () {}],
   texts: [{
     type: 'fixed',
     fullText: messages.fullText1
@@ -529,6 +531,7 @@ var mock3 = {
 exports.mock3 = mock3;
 var mock4 = {
   emitEvent: emitEvent,
+  soundActions: [function () {}, function () {}],
   texts: [{
     type: 'fixed',
     fullText: messages.fullText1
@@ -713,6 +716,7 @@ var mock4 = {
 exports.mock4 = mock4;
 var mock5 = {
   emitEvent: emitEvent,
+  soundActions: [function () {}, function () {}],
   texts: [{
     type: 'fixed',
     fullText: messages.fullText11
@@ -798,6 +802,7 @@ var mock5 = {
 exports.mock5 = mock5;
 var mock6 = {
   emitEvent: emitEvent,
+  soundActions: [function () {}, function () {}],
   texts: [{
     type: 'fixed',
     fullText: messages.fullText11
@@ -880,4 +885,176 @@ var mock6 = {
   skip: false,
   documentTitle: messages.documentTitle6
 };
-exports.mock6 = mock6;
+exports.mock6 = mock6;
+var mock7 = {
+  emitEvent: emitEvent,
+  soundActions: [function () {}, function () {}],
+  texts: [{
+    type: 'fixed',
+    fullText: messages.fullText11
+  }, {
+    type: 'election',
+    electionTexts: [{
+      previewText: messages.previewText1,
+      correct: false,
+      fullText: messages.fullText3,
+      feedback: {
+        title: null,
+        body: null,
+        rewards: []
+      }
+    }, {
+      previewText: messages.previewText2,
+      correct: false,
+      fullText: messages.fullText4,
+      feedback: {
+        title: null,
+        body: null,
+        rewards: []
+      }
+    }, {
+      previewText: '',
+      correct: false,
+      fullText: messages.fullText5,
+      feedback: {
+        title: null,
+        body: null,
+        rewards: []
+      }
+    }]
+  }, {
+    type: 'fixed',
+    fullText: messages.fullText6
+  }],
+  info: {
+    solution: {
+      right: {
+        desc: 'Great!!',
+        rewards: [],
+        desc_labelId: 'desc_bEo7Tp88'
+      },
+      wrong: {
+        desc: 'Boooo',
+        rewards: [],
+        desc_labelId: 'desc_bEo7TrDd'
+      }
+    },
+    hint: {
+      active: true,
+      desc: 'Just choose',
+      rewards: [{
+        id: 'k7d3gq9i',
+        name: 'asdasd',
+        rewards: -10,
+        type: 'score'
+      }],
+      desc_labelId: 'desc_bEo7TTUl'
+    },
+    resolve: {
+      rewards: [{
+        id: 'k7d3gq9i',
+        name: 'asdasd',
+        rewards: 100,
+        type: 'score'
+      }]
+    },
+    title: 'Writter Title',
+    instructions: 'Instructions for doing this Puzzle',
+    description: 'This is a puzzle about writting',
+    title_labelId: 'title_bEo7SRDk',
+    instructions_labelId: 'instructions_bEo7TDEq'
+  },
+  styles: 'whatsapp-ligth',
+  type: 'view',
+  visible: true,
+  retry: false,
+  skip: false,
+  documentTitle: messages.documentTitle6
+};
+exports.mock7 = mock7;
+var mock8 = {
+  emitEvent: emitEvent,
+  soundActions: [function () {}, function () {}],
+  texts: [{
+    type: 'fixed',
+    fullText: messages.fullText11
+  }, {
+    type: 'election',
+    electionTexts: [{
+      previewText: messages.previewText1,
+      correct: false,
+      fullText: messages.fullText3,
+      feedback: {
+        title: null,
+        body: null,
+        rewards: []
+      }
+    }, {
+      previewText: messages.previewText2,
+      correct: false,
+      fullText: messages.fullText4,
+      feedback: {
+        title: null,
+        body: null,
+        rewards: []
+      }
+    }, {
+      previewText: '',
+      correct: false,
+      fullText: messages.fullText5,
+      feedback: {
+        title: null,
+        body: null,
+        rewards: []
+      }
+    }]
+  }, {
+    type: 'fixed',
+    fullText: messages.fullText6
+  }],
+  info: {
+    solution: {
+      right: {
+        desc: 'Great!!',
+        rewards: [],
+        desc_labelId: 'desc_bEo7Tp88'
+      },
+      wrong: {
+        desc: 'Boooo',
+        rewards: [],
+        desc_labelId: 'desc_bEo7TrDd'
+      }
+    },
+    hint: {
+      active: true,
+      desc: 'Just choose',
+      rewards: [{
+        id: 'k7d3gq9i',
+        name: 'asdasd',
+        rewards: -10,
+        type: 'score'
+      }],
+      desc_labelId: 'desc_bEo7TTUl'
+    },
+    resolve: {
+      rewards: [{
+        id: 'k7d3gq9i',
+        name: 'asdasd',
+        rewards: 100,
+        type: 'score'
+      }]
+    },
+    title: 'Writter Title',
+    instructions: 'Instructions for doing this Puzzle',
+    description: 'This is a puzzle about writting',
+    title_labelId: 'title_bEo7SRDk',
+    instructions_labelId: 'instructions_bEo7TDEq'
+  },
+  styles: 'whatsapp-dark',
+  type: 'view',
+  visible: true,
+  retry: false,
+  skip: false,
+  documentTitle: messages.documentTitle6
+};
+exports.mock8 = mock8;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -55,7 +55,7 @@
     "@babel/cli": "7.12.10",
     "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
-    "@gamelearn/ui-components-core": "5.35.0",
+    "@gamelearn/ui-components-core": "5.38.0",
     "@react-three/test-renderer": "6.0.6",
     "@storybook/addon-actions": "6.1.11",
     "@storybook/addon-essentials": "6.1.11",