@gamelearn/arcade-components 0.2.0

package/dist/components/decision-component/components/Feedback.js

@@ -0,0 +1,83 @@
+"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 _Rewards = _interopRequireDefault(require("./Rewards"));
+
+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; }
+
+var FeedBack = function FeedBack(_ref) {
+  var choice = _ref.choice,
+      inherited = _ref.inherited,
+      rewards = _ref.rewards,
+      addPoints = _ref.addPoints;
+  var noFeedBack = choice.feedback === '' || !choice.feedback;
+  var centerRewards = noFeedBack;
+
+  var Wrapper = function Wrapper(_ref2) {
+    var children = _ref2.children;
+    return inherited ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "conversation--feedback ".concat(centerRewards ? 'only--rewards' : '')
+    }, children) : centerRewards ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "popup__basicDecision__only--rewards only--rewards"
+    }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  };
+
+  var noRewards = rewards.filter(function (reward) {
+    return reward.type !== 'grade';
+  }).length === 0;
+  (0, _react.useEffect)(function () {
+    if (rewards.filter(function (reward) {
+      return reward.type === 'grade';
+    }).length === rewards.length) {
+      addPoints();
+    }
+  }, [addPoints, rewards]);
+  return noFeedBack && noRewards ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null) : /*#__PURE__*/_react.default.createElement(Wrapper, null, !noFeedBack ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--feedback__title"
+  }, "Feedback"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--feedback__text"
+  }, choice.right ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-check-circle-black color--success"
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-error-circle-black color--error"
+  }), /*#__PURE__*/_react.default.createElement("p", null, choice.feedback))) : null, !noRewards ? /*#__PURE__*/_react.default.createElement(_Rewards.default, {
+    rewards: choice.right ? rewards : choice.rewards
+  }) : null);
+};
+
+FeedBack.defaultProps = {
+  addPoints: function addPoints() {},
+  rewards: [],
+  choice: {},
+  inherited: false,
+  nodeId: 0
+};
+FeedBack.propTypes = {
+  inherited: _propTypes.default.bool,
+  addPoints: _propTypes.default.func,
+  rewards: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  choice: _propTypes.default.shape({
+    id: _propTypes.default.number,
+    rewards: _propTypes.default.arrayOf(_propTypes.default.shape()),
+    feedback: _propTypes.default.string,
+    slot: _propTypes.default.bool,
+    right: _propTypes.default.bool,
+    text: _propTypes.default.string
+  })
+};
+var _default = FeedBack;
+exports.default = _default;

package/dist/components/decision-component/components/Options.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Options = function Options(_ref) {
+  var inherited = _ref.inherited,
+      options = _ref.options,
+      selectedChoice = _ref.selectedChoice,
+      selectChoice = _ref.selectChoice;
+  return options.filter(function (option) {
+    return option.text;
+  }).map(function (option) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: option.id,
+      className: inherited ? 'conversation--question' : 'radio'
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "radio",
+      name: option.id,
+      defaultChecked: selectedChoice.id === option.id
+    }), /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: option.id,
+      onClick: function onClick() {
+        selectChoice(option);
+      }
+    }, option.text));
+  });
+};
+
+var _default = Options;
+exports.default = _default;

package/dist/components/decision-component/components/Rewards.js

@@ -0,0 +1,203 @@
+"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"));
+
+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 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 Rewards = function Rewards(_ref) {
+  var rewards = _ref.rewards,
+      addPoints = _ref.addPoints,
+      indicators = _ref.indicators;
+  // Constantes para carrousel
+  var itemRef = (0, _react.useRef)();
+  var carouselContentRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      itemWidth = _useState2[0],
+      setItemWidth = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      carouselContentWidth = _useState4[0],
+      setCarouselContentWidth = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      offset = _useState6[0],
+      setOffset = _useState6[1];
+
+  var _useState7 = (0, _react.useState)("translateX(0px)"),
+      _useState8 = _slicedToArray(_useState7, 2),
+      transform = _useState8[0],
+      setTransform = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      itemsLeft = _useState10[0],
+      setItemsLeft = _useState10[1];
+
+  var onlyGrade = rewards.filter(function (reward) {
+    return reward.type === 'grade';
+  }).length === rewards.length;
+  var filteredRewards = rewards.filter(function (reward) {
+    return reward.type !== 'grade';
+  });
+  var rewardsUnified = [];
+  filteredRewards.forEach(function (currentReward) {
+    var found = rewardsUnified.findIndex(function (reward) {
+      return currentReward.id === reward.id;
+    });
+
+    if (found >= 0) {
+      rewardsUnified[found].points += currentReward.points;
+    } else {
+      rewardsUnified.push(_objectSpread({}, currentReward));
+    }
+  });
+  var filteredRewardsUnified = rewardsUnified.filter(function (reward) {
+    return reward.points !== 0;
+  });
+  var noRewards = filteredRewardsUnified.length === 0;
+  (0, _react.useEffect)(function () {
+    if (onlyGrade) {
+      addPoints();
+    }
+  }, [onlyGrade, addPoints]);
+  (0, _react.useEffect)(function () {
+    if (carouselContentRef.current) {
+      setCarouselContentWidth(carouselContentRef.current.offsetWidth);
+    }
+  }, [carouselContentRef]);
+  (0, _react.useEffect)(function () {
+    var itemInScreen = Math.floor(carouselContentWidth / itemWidth);
+    var currentItemsLeft = filteredRewardsUnified.length - itemInScreen - offset;
+    setItemsLeft(currentItemsLeft);
+  }, [carouselContentWidth, itemWidth, offset, filteredRewardsUnified.length]);
+  (0, _react.useEffect)(function () {
+    setTransform("translateX(-".concat(itemWidth * offset, "px)"));
+  }, [itemWidth, offset]);
+  (0, _react.useEffect)(function () {
+    if (itemRef.current) {
+      var separatorWidth = Number.parseInt(window.getComputedStyle(itemRef.current).getPropertyValue('margin-right').split('px')[0], 0);
+      var iWidth = Number.parseInt(itemRef.current.offsetWidth, 0);
+      setItemWidth(separatorWidth + iWidth);
+    }
+  }, [carouselContentRef, itemRef]);
+
+  var onClickPrev = function onClickPrev() {
+    if (offset <= 0) return;
+    setOffset(offset - 1);
+  };
+
+  var onClickNext = function onClickNext() {
+    if (itemsLeft <= 1) {
+      return;
+    }
+
+    setOffset(offset + 1);
+  };
+
+  if (onlyGrade || noRewards) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "test--results__rewards"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: onClickPrev,
+    className: "icon-back ".concat(filteredRewardsUnified.length < 4 ? 'visibility--hidden' : '', " ").concat(offset <= 0 ? 'disabled' : '')
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: carouselContentRef,
+    className: "test--results__carrousel"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "test--results__carrousel--list test--results__centered",
+    style: {
+      transform: transform
+    }
+  }, filteredRewardsUnified.map(function (reward, i) {
+    var group = indicators.find(function (g) {
+      return g.type === reward.type;
+    });
+
+    if (!group) {
+      return null;
+    }
+
+    var indicator = group.records.find(function (r) {
+      return r.id === reward.id;
+    });
+
+    if (!indicator) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: indicator.name,
+      ref: itemRef,
+      className: "test--results__carrousel--item"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "test--rewards__icons"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: indicator.icon
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "test--rewards__indicator\n                  ".concat(reward.points > 0 ? 'success' : 'failed')
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(reward.points > 0 ? 'icon-up' : 'icon-down')
+    }))), /*#__PURE__*/_react.default.createElement("span", {
+      className: "test--rewards__text"
+    }, /*#__PURE__*/_react.default.createElement("b", null, reward.points > 0 ? '+' : '', reward.points), ":", indicator.name));
+  }))), /*#__PURE__*/_react.default.createElement("span", {
+    onClick: onClickNext,
+    className: "icon-next ".concat(filteredRewardsUnified.length < 4 ? 'visibility--hidden' : '', " ").concat(itemsLeft <= 1 ? 'disabled' : '')
+  }));
+};
+
+Rewards.defaultProps = {
+  rewards: [],
+  indicators: [],
+  addPoints: function addPoints() {}
+};
+Rewards.propTypes = {
+  indicators: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  rewards: _propTypes.default.arrayOf(_propTypes.default.shape({
+    type: _propTypes.default.string,
+    id: _propTypes.default.string,
+    name: _propTypes.default.string,
+    points: _propTypes.default.number
+  })),
+  addPoints: _propTypes.default.func
+};
+var _default = Rewards;
+exports.default = _default;

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

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

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decisionProps = void 0;
+var decisionProps = {
+  options: [{
+    id: 0,
+    right: false,
+    feedback: 'dfgsdfgsdfgsdfghdfgh',
+    text: 'Si',
+    rewards: [],
+    audioId: '',
+    text_labelId: 'text_3_0_u4s8j5fa',
+    feedback_labelId: 'feedback_3_0_u4s8jVTv',
+    audioId_labelId: 'audioId_3_0_u4s8jyiK'
+  }, {
+    id: 1,
+    right: false,
+    feedback: 'fasdfasdfg',
+    text: 'No',
+    rewards: [],
+    audioId: '',
+    text_labelId: 'text_3_1_u4s8jzBF',
+    feedback_labelId: 'feedback_3_1_u4s8jWNa',
+    audioId_labelId: 'audioId_3_1_u4s8jaJY'
+  }, {
+    id: 2,
+    right: true,
+    feedback: 'asdfasd',
+    text: 'Patata',
+    rewards: [],
+    audioId: '',
+    text_labelId: 'text_3_2_u4s8jA2Z',
+    feedback_labelId: 'feedback_3_2_u4s8jBIJ',
+    audioId_labelId: 'audioId_3_2_u4s8j23g'
+  }],
+  required: true,
+  question: 'Funciona la decisión',
+  question_labelId: 'question_3_u4s8i10a'
+};
+exports.decisionProps = decisionProps;

package/dist/components/hacker-puzzle-component/components/HackerPuzzleComponent.js

@@ -0,0 +1,294 @@
+"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 _reactTypist = _interopRequireDefault(require("react-typist"));
+
+var _languages = _interopRequireDefault(require("./languages"));
+
+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 themes = {
+  theme1: {
+    bg: 1,
+    color: 1,
+    typo: 2
+  },
+  theme2: {
+    bg: 3,
+    color: 2,
+    typo: 3
+  },
+  theme3: {
+    bg: 5,
+    color: 4,
+    typo: 1
+  },
+  theme4: {
+    bg: 1,
+    color: 3,
+    typo: 2
+  },
+  theme5: {
+    bg: 2,
+    color: 5,
+    typo: 1
+  },
+  theme6: {
+    bg: 5,
+    color: 6,
+    typo: 2
+  },
+  theme7: {
+    bg: 1,
+    color: 7,
+    typo: 3
+  }
+};
+
+var HackerPuzzleComponent = function HackerPuzzleComponent(_ref) {
+  var emitEvent = _ref.emitEvent,
+      info = _ref.info,
+      themeNumber = _ref.themeNumber,
+      type = _ref.type,
+      writingSpeed = _ref.writingSpeed,
+      disableExit = _ref.disableExit,
+      setResolveAction = _ref.setResolveAction;
+
+  var translate = function translate(id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  };
+
+  var solution = info.solution;
+  var defaultTheme = 1;
+  var currentTheme = themes['theme' + (themeNumber || defaultTheme)];
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      codeContainer = _useState2[0],
+      setCodeContainer = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentLine = _useState4[0],
+      setCurrentLine = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      progress = _useState6[0],
+      setProgress = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      finished = _useState8[0],
+      setFinished = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({
+    start: 0,
+    end: 0
+  }),
+      _useState10 = _slicedToArray(_useState9, 2),
+      lettersGroup = _useState10[0],
+      setLettersGroup = _useState10[1];
+
+  var el = (0, _react.useRef)();
+  var code = (0, _react.useRef)();
+  var hackerPuzzleCompleted = translate('puzzle.hacker.crackedPassword');
+
+  var checkEnd = function checkEnd(end, actual) {
+    return end > actual.length ? actual.length : end;
+  };
+
+  var renderProgressBar = function renderProgressBar() {
+    var lines = _languages.default[type];
+
+    if (lines) {
+      var totalLength = lines.reduce(function (acc, current) {
+        return (acc.length ? acc.length : acc) + current.length;
+      });
+      var percentage = Math.floor(progress * 100 / totalLength);
+      var classProgressLabel = percentage === 100 ? 'puzzle--hacker__percentage percentage--label' : 'puzzle--hacker__percentage';
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "puzzle--hacker__progress"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "puzzle--hacker__progress--item",
+        style: {
+          width: "".concat(Math.floor(progress * 100 / totalLength), "%")
+        }
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: classProgressLabel
+      }, percentage, "%")));
+    }
+
+    return null;
+  };
+
+  var renderCode = function renderCode() {
+    var text = codeContainer;
+    var split = text.split('<br>');
+
+    if (split.length > 0) {
+      return split.map(function (line, ind) {
+        var newLine = line.replace(/ /g, "\xA0");
+        return /*#__PURE__*/_react.default.createElement("p", {
+          key: "line_".concat(ind)
+        }, newLine);
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement("p", null, text);
+  };
+
+  var handleFinish = function handleFinish() {
+    emitEvent({
+      type: 'playSound',
+      payload: 'click-ui'
+    });
+    var rewards = solution.right.rewards;
+    emitEvent({
+      type: 'addPoints',
+      payload: rewards
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    if (finished) {
+      disableExit(true);
+    }
+  }, [finished]);
+  (0, _react.useEffect)(function () {
+    setResolveAction(function (resolve) {
+      setFinished(true);
+      setTimeout(function () {
+        resolve();
+      }, 4000);
+    });
+  }, [setResolveAction]);
+
+  var writeCode = function writeCode() {
+    if (_languages.default[type] && !finished) {
+      if (code.current) code.current.scrollTop = el.current.scrollHeight;
+      var lines = _languages.default[type];
+      var line = lines[currentLine];
+      var totalLength = lines.reduce(function (acc, current) {
+        return (acc.length ? acc.length : acc) + current.length;
+      });
+      var speed = writingSpeed > 0 ? writingSpeed : Math.floor(totalLength / 50) + currentLine;
+
+      if (line) {
+        var letters = line.split('');
+        var currentTextEnd = checkEnd(lettersGroup.end, letters);
+        var currentText = letters.slice(lettersGroup.start, currentTextEnd);
+        var text = codeContainer + currentText.join('');
+        setProgress(progress + currentText.join('').length);
+        setCodeContainer(text);
+
+        if (currentTextEnd === letters.length) {
+          if (currentLine + 1 >= lines.length) {
+            emitEvent({
+              type: 'playSound',
+              payload: 'finish-level'
+            });
+            setFinished(true);
+          } else {
+            setCurrentLine(currentLine + 1);
+            setCodeContainer("".concat(codeContainer + currentText.join(''), "<br>"));
+            setLettersGroup({
+              start: 0,
+              end: checkEnd(speed, letters)
+            });
+          }
+        } else {
+          setLettersGroup({
+            start: currentTextEnd,
+            end: checkEnd(currentTextEnd + speed, letters)
+          });
+        }
+      }
+    }
+  };
+
+  var handleKeyPress = function handleKeyPress(event) {
+    event.preventDefault();
+    writeCode();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    tabIndex: "0",
+    "data-testid": "hacker",
+    ref: el,
+    onKeyPress: handleKeyPress,
+    onTouchStart: handleKeyPress,
+    className: "puzzle--hacker__container background-hacker-".concat(currentTheme.bg)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--hacker__header"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, "Console")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--hacker__body color-hacker-".concat(currentTheme.color, " typography-hacker-").concat(currentTheme.typo)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--hacker__code",
+    ref: code
+  }, renderCode(), finished && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTypist.default, {
+    avgTypingDelay: 110,
+    onCharacterTyped: function onCharacterTyped() {
+      if (code.current) code.current.scrollTop = el.current.scrollHeight;
+    },
+    cursor: {
+      hideWhenDone: true
+    },
+    className: "puzzle--hacker__result"
+  }, /*#__PURE__*/_react.default.createElement(_reactTypist.default.Delay, {
+    ms: 300
+  }), /*#__PURE__*/_react.default.createElement("span", null, "".concat(hackerPuzzleCompleted)), /*#__PURE__*/_react.default.createElement("br", null), solution.right.desc ? solution.right.desc : ''))), renderProgressBar()), finished && /*#__PURE__*/_react.default.createElement("div", {
+    className: "position--absolute bottom center"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn gat--btn__primary gat--btn__cracker",
+    onClick: handleFinish()
+  }, translate('screens.continue'))));
+};
+
+HackerPuzzleComponent.defaultProps = {
+  type: '',
+  writingSpeed: 0,
+  context: {},
+  info: {},
+  themeNumber: 1
+};
+HackerPuzzleComponent.propTypes = {
+  type: _propTypes.default.string,
+  writingSpeed: _propTypes.default.number,
+  themeNumber: _propTypes.default.number,
+  info: _propTypes.default.shape({})
+};
+var _default = HackerPuzzleComponent;
+exports.default = _default;