@gamelearn/arcade-components 2.41.1 → 3.0.2

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

@@ -1,387 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _feedbackComponent = _interopRequireDefault(require("../../feedback-component"));
-var _utils = require("../utils");
-var _LangIsRtl = _interopRequireDefault(require("../../../helpers/LangIsRtl"));
-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); }
-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 _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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) 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,
-    setInfo = _ref.setInfo,
-    setResolveAction = _ref.setResolveAction,
-    keyboardControl = _ref.keyboardControl,
-    backgroundImage = _ref.backgroundImage;
-  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 isCompleted = (0, _react.useCallback)(function () {
-    return correctTextFragmentsPartial.current === list[currentSlide].correctTexts.length || list[currentSlide].hasClickOnce && correctTextFragmentsPartial.current >= 1;
-  }, [currentSlide, list]);
-  var modifyFeedbackData = (0, _react.useCallback)(function (show, data) {
-    if (show) emitEvent({
-      type: 'hidePuzzleButtons',
-      payload: true
-    });
-    setFeedbackData(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        show: show
-      }, data);
-    });
-  }, [emitEvent]);
-  var goForward = (0, _react.useCallback)(function () {
-    if (isCompleted()) {
-      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(_objectSpread({}, current));
-          }
-          return acc;
-        }, []);
-        emitEvent({
-          type: 'addPoints',
-          complex: true,
-          finish: true,
-          payload: totalRewards
-        });
-        emitEvent({
-          type: 'passPuzzle'
-        });
-      } else {
-        parsedText.current = null;
-        setCurrentSlide(currentSlide + 1);
-        setOrderCounter(0);
-        setTransitionToNextSlide(true);
-        setTimeout(function () {
-          setTransitionToNextSlide(false);
-        }, 1200);
-      }
-    }
-  }, [isCompleted, correctTextFragmentsAccumulated, numberAllCorrectFragments, emitEvent, currentSlide]);
-  var handleFeedbackFuncionOnClose = (0, _react.useCallback)(function () {
-    emitEvent({
-      type: 'hidePuzzleButtons',
-      payload: false
-    });
-    goForward();
-    setFeedbackData(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        show: false,
-        text: ''
-      });
-    });
-    var allElementsWithClassTextClickFailed = document.querySelectorAll('.text-click__failed');
-    if (allElementsWithClassTextClickFailed.length > 0) {
-      allElementsWithClassTextClickFailed.forEach(function (el) {
-        return el.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');
-    });
-    setCorrectTextFragmentsAccumulated(correctTextFragmentsAccumulated + 1);
-    correctTextFragmentsPartial.current += 1;
-    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) {
-      // solo muestra la caja verde y suma puntos cuando resuelves todos los fragmentos correctos
-      if (isCompleted()) {
-        accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(list[currentSlide].info.solution.right.rewards));
-        modifyFeedbackData(true, {
-          result: true,
-          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);
-      modifyFeedbackData(true, {
-        result: true,
-        text: specificFeedback.desc,
-        timeout: false
-      });
-    }
-    // si no tiene feedback general ni specificFeedbacks,
-    // solo muestra la caja verde y suma puntos cuando resuelves todos los fragmentos correctos
-    else if (list[currentSlide].specificFeedbacks.specificCorrectFeedbacks) {
-      // si tiene puntos definidos por feedbacks correctos
-      accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(specificFeedback === null || specificFeedback === void 0 ? void 0 : specificFeedback.rewards));
-      if (isCompleted()) {
-        modifyFeedbackData(true, {
-          result: true,
-          timeout: true
-        });
-      }
-    }
-    // si tiene puntos generales
-    else if (isCompleted()) {
-      accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(list[currentSlide].info.solution.right.rewards));
-      modifyFeedbackData(true, {
-        result: true,
-        timeout: true
-      });
-    }
-  }, [correctTextFragmentsAccumulated, playSound, list, currentSlide, isCompleted, modifyFeedbackData]);
-  var handleIncorrectClick = (0, _react.useCallback)(function (allDataTextIds, specificFeedback) {
-    allDataTextIds.forEach(function (el) {
-      return el.classList.add('text-click__failed');
-    });
-    playSound('fail');
-    emitEvent({
-      type: 'failPuzzle'
-    });
-    // 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));
-      modifyFeedbackData(true, {
-        result: false,
-        text: list[currentSlide].info.solution.wrong.desc,
-        timeout: false
-      });
-    }
-    // si no tiene feedback general pero tiene specificFeedbacks definido
-    else if (list[currentSlide].info.solution.wrong.desc === '' && specificFeedback !== null && specificFeedback !== void 0 && specificFeedback.desc) {
-      var _specificFeedback$rew2;
-      accRewards.current = specificFeedback !== null && specificFeedback !== void 0 && (_specificFeedback$rew2 = specificFeedback.rewards) !== null && _specificFeedback$rew2 !== void 0 && _specificFeedback$rew2.length ? [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(specificFeedback === null || specificFeedback === void 0 ? void 0 : specificFeedback.rewards)) : _toConsumableArray(accRewards.current);
-      modifyFeedbackData(true, {
-        result: false,
-        text: specificFeedback.desc,
-        timeout: false
-      });
-    }
-    // si no tiene feedback general ni specificFeedbacks definido
-    else if (list[currentSlide].specificFeedbacks.specificWrongFeedbacks) {
-      // si tiene puntos definidos por feedbacks negativos
-      accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(specificFeedback === null || specificFeedback === void 0 ? void 0 : specificFeedback.rewards));
-      modifyFeedbackData(true, {
-        result: false,
-        timeout: true
-      });
-    }
-    // si tiene puntos generales definidos por feedbacks negativo
-    else {
-      accRewards.current = [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(list[currentSlide].info.solution.wrong.rewards));
-      modifyFeedbackData(true, {
-        result: false,
-        timeout: true
-      });
-    }
-  }, [playSound, emitEvent, list, currentSlide, modifyFeedbackData]);
-  var onClickMark = (0, _react.useCallback)(function (e, id) {
-    var _list$currentSlide, _list$currentSlide$sp, _list$currentSlide2, _list$currentSlide2$s;
-    e.stopPropagation();
-    var currentTextDom = document.querySelectorAll("[data-text-id=\"".concat(id, "\"]"));
-    var allDataTextIds = document.querySelectorAll("[data-text-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;
-    });
-    playSound('click-ui');
-    // 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(currentTextDom, specificCorrectFeedback);
-      } 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
-        allDataTextIds.forEach(function (el) {
-          return el.classList.remove('text-click__success');
-        });
-        setOrderCounter(0);
-        setCorrectTextFragmentsAccumulated(0);
-        correctTextFragmentsPartial.current = 0;
-        modifyFeedbackData(true, {
-          result: false,
-          text: list[currentSlide].info.orderFeedback.desc || translate('puzzles.incorrectOrder'),
-          timeout: false
-        });
-        setCurrentSlide(0);
-      } else {
-        // si has click en mala repuesta
-        handleIncorrectClick(currentTextDom, specificWrongFeedback);
-      }
-    } else if ((feedbackCorrect === null || feedbackCorrect === void 0 ? void 0 : feedbackCorrect.id) === id) {
-      // si no va en orden
-      // si la opción clickada es correcta
-      handleCorrectClick(currentTextDom, specificCorrectFeedback);
-    } else if ((feedbackIncorrect === null || feedbackIncorrect === void 0 ? void 0 : feedbackIncorrect.id) === id || id === 'allWrong') {
-      // si la opción clickada es incorrecta
-      handleIncorrectClick(currentTextDom, specificWrongFeedback);
-    }
-  }, [list, currentSlide, playSound, orderCounter, handleCorrectClick, modifyFeedbackData, translate, handleIncorrectClick]);
-  var recursiveStuff = (0, _react.useCallback)(function (jsx) {
-    return (0, _utils.getRecursiveJSX)(jsx, 0, list[currentSlide], onClickMark);
-  }, [currentSlide, list, onClickMark]);
-  var getnumberAllCorrectFragments = (0, _react.useCallback)(function () {
-    var counter = 0;
-    for (var i = 0; i < list.length; i += 1) {
-      if (list[i].hasClickOnce) {
-        counter += 1;
-        setNumberAllCorrectFragments(counter);
-      } else {
-        for (var j = 0; j < list[i].correctTexts.length; j += 1) {
-          counter += 1;
-          setNumberAllCorrectFragments(counter);
-        }
-      }
-    }
-  }, [list]);
-  (0, _react.useEffect)(function () {
-    var _list$currentSlide3;
-    if (list !== null && list !== void 0 && list[currentSlide]) {
-      setInfo(_objectSpread(_objectSpread({}, list[currentSlide].info), {}, {
-        description: description
-      }));
-    }
-    if ((_list$currentSlide3 = list[currentSlide]) !== null && _list$currentSlide3 !== void 0 && _list$currentSlide3.text) {
-      var jsx = (0, _htmlReactParser.default)(list[currentSlide].text);
-      parsedText.current = recursiveStuff(jsx);
-      getnumberAllCorrectFragments();
-    } else {
-      parsedText.current = '';
-    }
-  }, [currentSlide, description, getnumberAllCorrectFragments, list, recursiveStuff, setInfo]);
-  (0, _react.useEffect)(function () {
-    setResolveAction(function (callback) {
-      emitEvent({
-        type: 'hidePuzzleButtons',
-        payload: true
-      });
-      setTimeout(function () {
-        emitEvent({
-          type: 'hidePuzzleButtons',
-          payload: false
-        });
-        callback();
-      }, 2000);
-    });
-  }, [setResolveAction, emitEvent, list, currentSlide]);
-  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, backgroundImage !== null && backgroundImage !== void 0 && backgroundImage.url ? {
-      backgroundImage: "url(\"".concat(backgroundImage.url, "\")")
-    } : {})
-  }, /*#__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__body"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-click__scroll",
-    dir: (0, _LangIsRtl.default)() ? 'rtl' : 'auto'
-  }, 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,
-    keyboardControl: keyboardControl
-  }));
-};
-var _default = TextClickPuzzleComponent;
-exports.default = _default;

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

@@ -1,10 +0,0 @@
-"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;