@gamelearn/arcade-components 0.2.0

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

@@ -0,0 +1,160 @@
+"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 _FeedbackMessage = _interopRequireDefault(require("./FeedbackMessage"));
+
+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 _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 defaultImage = 'https://min.gamelearn.io/css-resources/gamelearn/resources/keyboard.jpg';
+
+var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
+  var _image$img;
+
+  var emitEvent = _ref.emitEvent,
+      image = _ref.image,
+      password = _ref.password,
+      keyboard = _ref.keyboard,
+      info = _ref.info,
+      disableExit = _ref.disableExit,
+      setResolveAction = _ref.setResolveAction;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      finished = _useState2[0],
+      setFinished = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      failed = _useState4[0],
+      setFailed = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      passClass = _useState6[0],
+      setPassClass = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      inputPassword = _useState8[0],
+      setInputPassword = _useState8[1];
+
+  var imageURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || defaultImage;
+
+  var checkPass = function checkPass(current) {
+    if (current === password) {
+      disableExit(false);
+      setPassClass('success');
+      setFinished(true);
+      setTimeout(function () {
+        emitEvent({
+          type: 'addPoints',
+          payload: failed ? info.solution.wrong.rewards : info.solution.right.rewards
+        });
+      }, 4000);
+    } else {
+      setFailed(true);
+      setPassClass('failed');
+      setTimeout(function () {
+        setPassClass('');
+        setInputPassword('');
+      }, 2000);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    setResolveAction(function (resolve) {
+      disableExit(false);
+      setPassClass('success');
+      setFinished(true);
+      setTimeout(function () {
+        resolve();
+      }, 4000);
+    });
+  }, [setResolveAction, disableExit]);
+
+  var handleNumbClick = function handleNumbClick(row, col) {
+    var char = keyboard[row][col];
+
+    if (inputPassword.length < password.length + 1) {
+      setInputPassword(inputPassword + char);
+
+      if (inputPassword.length + 1 === password.length) {
+        checkPass(inputPassword + char);
+      }
+    }
+  };
+
+  var handleRemoveChar = function handleRemoveChar() {
+    setInputPassword(inputPassword.substring(0, inputPassword.length - 1));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--keyboard",
+    style: {
+      backgroundImage: "url(".concat(imageURL, ")")
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--keyboard__header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--keyboard__result"
+  }, password.split('').map(function (_, ind) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "puzzle--keyboard__result--item ".concat(passClass),
+      key: ind
+    }, inputPassword.split('')[ind] ? inputPassword.split('')[ind] : '');
+  }), finished ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-circle-check"
+  }) : /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: handleRemoveChar,
+    className: "puzzle--keyboard__delete"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-delete-keyboard"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--keyboard__block"
+  }, keyboard.map(function (row, rowNumb) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "puzzle--keyboard__row",
+      key: 'row_' + rowNumb
+    }, (Array.isArray(row) ? row : Object.values(row)).map(function (col, colNumb) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "puzzle--keyboard__character",
+        onClick: function onClick() {
+          return handleNumbClick(rowNumb, colNumb);
+        },
+        key: col
+      }, col);
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_FeedbackMessage.default, {
+    info: info,
+    passClass: passClass,
+    finished: finished
+  }));
+};
+
+var _default = KeyboardPuzzleComponent;
+exports.default = _default;

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps = void 0;
+
+var emitEvent = function emitEvent() {
+  console.log('Emit event called');
+};
+
+var mockProps = {
+  emitEvent: emitEvent,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  password: '1234',
+  keyboard: [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9'], ['*', '0', '#']],
+  image: {
+    img: {
+      url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/60508f84901f3e00123a0796/holamundo.jpg'
+    }
+  },
+  info: {
+    solution: {
+      right: {
+        desc: 'correctSolution',
+        rewards: []
+      },
+      wrong: {
+        desc: 'wrongSolution',
+        rewards: []
+      }
+    }
+  }
+};
+exports.mockProps = mockProps;

package/dist/components/lectures-component/components/LectureButtons.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var LectureButtons = function LectureButtons(_ref) {
+  var goToLecture = _ref.goToLecture,
+      close = _ref.close,
+      minutes = _ref.minutes,
+      seconds = _ref.seconds,
+      btnText = _ref.btnText;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "readings--buttons"
+  }, goToLecture ? /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn gat--btn__primary",
+    onClick: function onClick() {
+      return close();
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, btnText)) : /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn__count",
+    "data-testid": "countdown"
+  }, /*#__PURE__*/_react.default.createElement("span", null, minutes < 10 ? "0".concat(minutes) : minutes, ":", seconds < 10 ? "0".concat(seconds) : seconds)));
+};
+
+LectureButtons.defaultProps = {
+  goToLecture: false,
+  close: function close() {},
+  minutes: 0,
+  seconds: 0,
+  btnText: 'continue'
+};
+LectureButtons.propTypes = {
+  goToLecture: _propTypes.default.bool,
+  close: _propTypes.default.func,
+  minutes: _propTypes.default.number,
+  seconds: _propTypes.default.number,
+  btnText: _propTypes.default.string
+};
+var _default = LectureButtons;
+exports.default = _default;

package/dist/components/lectures-component/components/LecturesComponent.js

@@ -0,0 +1,140 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _LectureButtons = _interopRequireDefault(require("./LectureButtons"));
+
+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 _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 READING_TIME = 0.2;
+
+var LecturesComponent = function LecturesComponent(_ref) {
+  var emitEvent = _ref.emitEvent,
+      name = _ref.name,
+      required = _ref.required,
+      text = _ref.text,
+      visible = _ref.visible,
+      documentType = _ref.documentType,
+      viewed = _ref.viewed,
+      btnText = _ref.btnText;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      interval = _useState2[0],
+      saveInterval = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      time = _useState4[0],
+      setTime = _useState4[1];
+
+  var currentLecture = text;
+  var limit = Math.trunc(currentLecture.split(' ').length * READING_TIME);
+  var goToLecture = !required || required && time >= limit;
+  var close = (0, _react.useCallback)(function () {
+    if (goToLecture) {
+      emitEvent({
+        type: 'finishMedia',
+        payload: {
+          name: name,
+          text: text,
+          documentType: documentType
+        }
+      });
+    }
+  }, [documentType, emitEvent, goToLecture, name, text]);
+  (0, _react.useEffect)(function () {
+    if (!visible) {
+      close();
+    }
+
+    if (required && visible) {
+      var timeout = setInterval(function () {
+        setTime(function (t) {
+          return t + 1;
+        });
+      }, 1000);
+      saveInterval(timeout);
+      return function () {
+        clearInterval(timeout);
+      };
+    }
+
+    return undefined;
+  }, [close, required, visible]);
+  (0, _react.useEffect)(function () {
+    if (time === limit) {
+      clearInterval(interval);
+    }
+  }, [interval, time, limit]);
+  var formatTime = limit - time;
+  var minutes = Math.floor(formatTime / 60);
+  var seconds = formatTime % 60;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(viewed ? 'notes--results' : 'readings--container')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: viewed ? 'notes--results__text' : 'readings'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "readings--title"
+  }, name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "readings--text",
+    dangerouslySetInnerHTML: {
+      __html: currentLecture
+    }
+  }), !viewed ? /*#__PURE__*/_react.default.createElement(_LectureButtons.default, {
+    goToLecture: goToLecture,
+    close: close,
+    minutes: minutes,
+    seconds: seconds,
+    btnText: btnText
+  }) : null));
+};
+
+LecturesComponent.defaultProps = {
+  emitEvent: function emitEvent() {},
+  name: '',
+  text: '',
+  visible: false,
+  documentType: '',
+  viewed: false,
+  required: false,
+  context: {},
+  btnText: 'continue'
+};
+LecturesComponent.propTypes = {
+  emitEvent: _propTypes.default.func,
+  name: _propTypes.default.string,
+  text: _propTypes.default.string,
+  documentType: _propTypes.default.string,
+  visible: _propTypes.default.bool,
+  required: _propTypes.default.bool,
+  viewed: _propTypes.default.bool,
+  btnText: _propTypes.default.string
+};
+var _default = LecturesComponent;
+exports.default = _default;

package/dist/components/lectures-component/index.js

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

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps = void 0;
+
+var emitEvent = function emitEvent() {
+  console.log('Emit event called');
+};
+
+var mockProps = {
+  emitEvent: emitEvent,
+  name: 'lecture',
+  required: true,
+  text: "<p>hola</p><div>soy un hermoso trozo de hmtl</div><div>y yo otro</div>",
+  visible: true,
+  documentType: 'text',
+  viewed: false,
+  btnText: 'continua'
+};
+exports.mockProps = mockProps;

package/dist/components/login-puzzle-component/components/LoginPuzzleComponent.js

@@ -0,0 +1,170 @@
+"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() { 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 _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 imagenPorDefecto = 'https://min.gamelearn.io/css-resources/gamelearn/resources/puzzle-login-low.png';
+
+var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
+  var _image$img;
+
+  var emitEvent = _ref.emitEvent,
+      info = _ref.info,
+      user = _ref.user,
+      login = _ref.login,
+      password = _ref.password,
+      image = _ref.image;
+
+  var translate = function translate(id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  };
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputUser = _useState2[0],
+      setUser = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inputPassword = _useState4[0],
+      setPassword = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      successClass = _useState6[0],
+      setSuccessClass = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      finished = _useState8[0],
+      setFinished = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      errorMessage = _useState10[0],
+      setErrorMessage = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      failed = _useState12[0],
+      setFailed = _useState12[1];
+
+  var imgURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || imagenPorDefecto;
+
+  var handleFinish = function handleFinish() {
+    var rewards = info.solution.right.rewards;
+    var wrongRewards = info.solution.wrong.rewards;
+    emitEvent({
+      type: 'addPoints',
+      payload: failed ? wrongRewards : rewards
+    });
+  };
+
+  var checkInput = function checkInput() {
+    var guessed = {
+      login: true,
+      password: false
+    };
+
+    if (login) {
+      guessed.login = user === inputUser;
+    }
+
+    guessed.password = password === inputPassword;
+    var correctGuess = guessed.login && guessed.password;
+
+    if (correctGuess) {
+      setSuccessClass('success');
+      setFinished(true);
+      setErrorMessage(false);
+      setTimeout(function () {
+        handleFinish();
+      }, 2000);
+    } else {
+      setFailed(true);
+      setSuccessClass('failed');
+      setErrorMessage(true);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--layer",
+    style: {
+      backgroundImage: "url(\"".concat(imgURL, "\")")
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--login"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-login-puzzle"
+  }, " "), !finished && /*#__PURE__*/_react.default.createElement("span", {
+    className: "puzzle--login__title"
+  }, translate('puzzle.initSession')), /*#__PURE__*/_react.default.createElement("div", null, login && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--login__label"
+  }, translate('puzzle.user')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--login__group"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    disabled: finished,
+    "data-testid": "username",
+    className: "puzzle--login__input ".concat(successClass),
+    type: "text",
+    placeholder: translate('puzzle.user'),
+    onChange: function onChange(e) {
+      setUser(e.target.value);
+      setSuccessClass('');
+      setErrorMessage(false);
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-circle-check"
+  }, " "))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--login__label"
+  }, /*#__PURE__*/_react.default.createElement("span", null, translate('puzzle.password'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--login__group"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    disabled: finished,
+    "data-testid": "password",
+    className: "puzzle--login__input ".concat(successClass),
+    type: "password",
+    placeholder: translate('puzzle.password'),
+    onChange: function onChange(e) {
+      setPassword(e.target.value);
+      setSuccessClass('');
+      setErrorMessage(false);
+    }
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-circle-check"
+  }, " ")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn gat--btn__primary ".concat(inputPassword.length !== 0 && !finished ? '' : 'disabled'),
+    onClick: checkInput
+  }, translate('puzzle.loginIn'))), errorMessage && info.solution.wrong.desc !== '' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--login__label--error"
+  }, info.solution.wrong.desc)));
+};
+
+var _default = LoginPuzzleComponent;
+exports.default = _default;

package/dist/components/login-puzzle-component/index.js

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

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps = void 0;
+
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
+
+  if (type === 'translate') {
+    return payload;
+  }
+};
+
+var mockProps = {
+  emitEvent: emitEvent,
+  user: "pepe",
+  password: "1234",
+  login: true,
+  info: {
+    solution: {
+      right: {
+        rewards: []
+      },
+      wrong: {
+        rewards: []
+      }
+    }
+  },
+  image: {
+    img: {
+      url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/60508f84901f3e00123a0796/holamundo.jpg'
+    }
+  }
+};
+exports.mockProps = mockProps;