@gamelearn/arcade-components 0.2.0

package/dist/components/cracker-puzzle-component/components/CrackerPuzzleComponent.js

@@ -0,0 +1,316 @@
+"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 _helpers = require("./helpers");
+
+var _DrawGrid = _interopRequireDefault(require("./DrawGrid"));
+
+var _colors = require("./colors");
+
+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 _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 VELOCITY_MAP = {
+  slow: 2,
+  fast: 5,
+  fastest: 10
+};
+var DIFFICULTY_MAP = {
+  easy: {
+    visibleRows: 'auto',
+    visibleColumns: 40,
+    totalRows: 25
+  },
+  medium: {
+    visibleRows: 'auto',
+    visibleColumns: 40,
+    totalRows: 40
+  },
+  hard: {
+    visibleRows: 'auto',
+    visibleColumns: 40,
+    totalRows: 80
+  }
+};
+
+var CrackerPuzzleComponent = function CrackerPuzzleComponent(_ref) {
+  var emitEvent = _ref.emitEvent,
+      info = _ref.info,
+      velocity = _ref.velocity,
+      password = _ref.password,
+      disableExit = _ref.disableExit,
+      difficulty = _ref.difficulty,
+      setResolveAction = _ref.setResolveAction;
+
+  var translate = function translate(id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  };
+
+  var requestRef = _react.default.useRef();
+
+  var previousTimeRef = _react.default.useRef(); // Common PuzzleComponent
+
+
+  var solution = info.solution;
+
+  var _useState = (0, _react.useState)(password.toLowerCase()),
+      _useState2 = _slicedToArray(_useState, 2),
+      remainingPassword = _useState2[0],
+      setRemainingPassword = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      passwordPosition = _useState4[0],
+      setPasswordPosition = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(Array(password.toLowerCase().length).fill('')),
+      _useState6 = _slicedToArray(_useState5, 2),
+      paintSolution = _useState6[0],
+      setPaintSolution = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      finished = _useState8[0],
+      setFinished = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([0, 0]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      cursorPosition = _useState10[0],
+      setCursorPosition = _useState10[1];
+
+  var crackedPasswordMsg = translate('puzzle.cracker.crackedPassword');
+  var feedbackMessage = info.solution.right.desc && info.solution.right.desc !== '' ? translate(info.solution.right.desc) : '';
+  var congratulationsMsg = translate('puzzle.cracker.congratulations');
+
+  var _useState11 = (0, _react.useState)([[]]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      grid = _useState12[0],
+      setGrid = _useState12[1];
+
+  var _DIFFICULTY_MAP$diffi = DIFFICULTY_MAP[difficulty],
+      visibleRows = _DIFFICULTY_MAP$diffi.visibleRows,
+      numberOfColumns = _DIFFICULTY_MAP$diffi.visibleColumns;
+  var numberOfRows = visibleRows === 'auto' ? Math.ceil(window.innerHeight * 0.025) : visibleRows;
+  numberOfRows = numberOfRows >= 20 ? numberOfRows : 20;
+  (0, _react.useEffect)(function () {
+    if (finished) {
+      disableExit(true);
+    }
+  }, [finished]);
+  (0, _react.useEffect)(function () {
+    setResolveAction(function (resolve) {
+      setFinished(true);
+      setTimeout(function () {
+        resolve();
+      }, 4000);
+    });
+  }, [setResolveAction]);
+
+  var handleFinish = function handleFinish() {
+    emitEvent({
+      type: 'playSound',
+      payload: 'click-ui'
+    });
+    var rewards = solution.right.rewards;
+    emitEvent({
+      type: 'addPoints',
+      payload: rewards
+    });
+  };
+
+  var generatePasswordPositions = function generatePasswordPositions() {
+    var tempArray = password.toLowerCase().split('');
+    return tempArray.map(function (char, index) {
+      return {
+        char: char,
+        index: index,
+        used: false
+      };
+    });
+  };
+
+  var getRemainingPassword = function getRemainingPassword(positions) {
+    return positions.filter(function (obj) {
+      return obj.used === false;
+    }).map(function (word) {
+      return word.char;
+    }).join('');
+  };
+
+  var handleSetGrid = function handleSetGrid(prevGrid) {
+    if (prevGrid[0].length > 0 && !finished) {
+      var shiftedGrid = _toConsumableArray(prevGrid);
+
+      shiftedGrid.push(shiftedGrid.shift());
+      return shiftedGrid;
+    }
+
+    return prevGrid;
+  };
+
+  var ms = 0;
+
+  var loop = function loop(time) {
+    if (previousTimeRef.current !== undefined) {
+      var deltaTime = time - previousTimeRef.current;
+      ms += deltaTime;
+
+      if (ms > 1000 / VELOCITY_MAP[velocity]) {
+        setGrid(handleSetGrid);
+        ms = 0;
+      }
+    }
+
+    previousTimeRef.current = time;
+    requestRef.current = requestAnimationFrame(loop);
+  };
+
+  (0, _react.useEffect)(function () {
+    setRemainingPassword(password.toLowerCase());
+    var generatedGrid = (0, _helpers.makeSomeNoise)({
+      numberOfColumns: numberOfColumns,
+      numberOfRows: numberOfRows,
+      password: password.toLowerCase()
+    });
+    setGrid(generatedGrid);
+    setPasswordPosition(generatePasswordPositions());
+    requestRef.current = requestAnimationFrame(loop);
+    return function () {
+      return cancelAnimationFrame(requestRef.current);
+    };
+  }, []);
+
+  var handleMouseOver = function handleMouseOver() {
+    if (grid.length <= 1) return;
+
+    var _cursorPosition = _slicedToArray(cursorPosition, 2),
+        gridX = _cursorPosition[0],
+        gridY = _cursorPosition[1];
+
+    var currentElement = grid[gridX][gridY];
+
+    if (currentElement.hiddenColor === _colors.GREEN) {
+      var char = passwordPosition.filter(function (obj) {
+        return obj.char === currentElement.value.toLowerCase() && obj.used === false;
+      })[0];
+
+      if (char) {
+        var index = char.index; // emitEvent({ type: 'playSound', payload: 'score' }); // Mirar problema con rerenderizado
+
+        var newPasswordPosition = passwordPosition;
+        newPasswordPosition[index].used = true;
+        setPasswordPosition(newPasswordPosition);
+
+        var currentPaintSolution = _toConsumableArray(paintSolution);
+
+        currentPaintSolution[index] = currentElement.value;
+        var newRemainPswd = getRemainingPassword(newPasswordPosition);
+        setRemainingPassword(newRemainPswd);
+        var repaintedGrid = (0, _helpers.repaintGridPassword)(grid, newRemainPswd, numberOfRows, numberOfColumns);
+        setGrid(repaintedGrid);
+        setPaintSolution(currentPaintSolution);
+      }
+    }
+
+    if (remainingPassword <= 0) {
+      emitEvent({
+        type: 'playSound',
+        payload: 'finish-level'
+      });
+      setFinished(true);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (!finished) handleMouseOver();
+  }, [cursorPosition]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--cracker__container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--cracker__header"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, "Dcoder.exe"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--pieces"
+  }, paintSolution.map(function (char, ind) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: ind,
+      className: "puzzle--pieces__item"
+    }, char && /*#__PURE__*/_react.default.createElement("span", {
+      className: "character success-transition-animation",
+      "data-testid": "solution".concat(ind)
+    }, char));
+  }))), /*#__PURE__*/_react.default.createElement(_DrawGrid.default, {
+    grid: finished ? [[]] : grid,
+    cursorPosition: cursorPosition,
+    setCursorPosition: setCursorPosition
+  }), finished && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTypist.default, {
+    avgTypingDelay: 110,
+    cursor: {
+      hideWhenDone: true
+    },
+    className: "puzzle--cracker__result"
+  }, /*#__PURE__*/_react.default.createElement(_reactTypist.default.Delay, {
+    ms: 300
+  }), /*#__PURE__*/_react.default.createElement("span", null, "".concat(crackedPasswordMsg, ": ").concat(password.toLowerCase())), /*#__PURE__*/_react.default.createElement("span", null, congratulationsMsg), feedbackMessage !== '' && /*#__PURE__*/_react.default.createElement("span", null, feedbackMessage)), /*#__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')))));
+};
+
+CrackerPuzzleComponent.defaultProps = {
+  velocity: 'slow',
+  difficulty: 'easy',
+  context: {},
+  info: {}
+};
+CrackerPuzzleComponent.propTypes = {
+  password: _propTypes.default.string.isRequired,
+  velocity: _propTypes.default.string,
+  difficulty: _propTypes.default.string,
+  context: _propTypes.default.shape({}),
+  info: _propTypes.default.shape({})
+};
+var _default = CrackerPuzzleComponent;
+exports.default = _default;

package/dist/components/cracker-puzzle-component/components/DrawGrid/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = _interopRequireDefault(require("../DrawRow/index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable react/no-array-index-key */
+// Draws the characters map
+var DrawGrid = function DrawGrid(_ref) {
+  var grid = _ref.grid,
+      cursorPosition = _ref.cursorPosition,
+      setCursorPosition = _ref.setCursorPosition;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--cracker__canvas"
+  }, grid.map(function (row, rowIndex) {
+    return /*#__PURE__*/_react.default.createElement(_index.default, {
+      key: rowIndex,
+      row: row,
+      rowIndex: rowIndex,
+      cursorPosition: cursorPosition,
+      setCursorPosition: setCursorPosition
+    });
+  }));
+};
+
+DrawGrid.defaultProps = {
+  setCursorPosition: function setCursorPosition() {}
+};
+DrawGrid.propTypes = {
+  grid: _propTypes.default.arrayOf(_propTypes.default.array).isRequired,
+  cursorPosition: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+  setCursorPosition: _propTypes.default.func
+};
+var _default = DrawGrid;
+exports.default = _default;

package/dist/components/cracker-puzzle-component/components/DrawItem/index.js

@@ -0,0 +1,53 @@
+"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 }; }
+
+// Draws the square of colors around item
+var DrawItem = function DrawItem(_ref) {
+  var item = _ref.item,
+      rowIndex = _ref.rowIndex,
+      columnIndex = _ref.columnIndex,
+      setCursorPosition = _ref.setCursorPosition,
+      cursorPosition = _ref.cursorPosition;
+  var isNear = Math.abs(rowIndex - cursorPosition[0]) < 3 && Math.abs(columnIndex - cursorPosition[1]) < 3;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "puzzle--cracker__item",
+    style: {
+      backgroundColor: "".concat(isNear ? item.hiddenColor : item.color),
+      flexGrow: 1,
+      textAlign: 'center'
+    },
+    onMouseOver: function onMouseOver() {
+      setCursorPosition([rowIndex, columnIndex]);
+    },
+    onFocus: function onFocus() {
+      setCursorPosition([rowIndex, columnIndex]);
+    }
+  }, item.value);
+};
+
+DrawItem.defaultProps = {
+  setCursorPosition: function setCursorPosition() {}
+};
+DrawItem.propTypes = {
+  item: _propTypes.default.shape({
+    color: _propTypes.default.string,
+    hiddenColor: _propTypes.default.string,
+    value: _propTypes.default.string
+  }).isRequired,
+  rowIndex: _propTypes.default.number.isRequired,
+  columnIndex: _propTypes.default.number.isRequired,
+  cursorPosition: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+  setCursorPosition: _propTypes.default.func
+};
+var _default = DrawItem;
+exports.default = _default;

package/dist/components/cracker-puzzle-component/components/DrawRow/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _DrawItem = _interopRequireDefault(require("../DrawItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable react/no-array-index-key */
+// Draws the characters map
+var DrawRow = function DrawRow(_ref) {
+  var row = _ref.row,
+      rowIndex = _ref.rowIndex,
+      setCursorPosition = _ref.setCursorPosition,
+      cursorPosition = _ref.cursorPosition;
+  if (!row.length) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--cracker"
+  }, row.map(function (item, columnIndex) {
+    return /*#__PURE__*/_react.default.createElement(_DrawItem.default, {
+      key: columnIndex,
+      item: item,
+      rowIndex: rowIndex,
+      columnIndex: columnIndex,
+      setCursorPosition: setCursorPosition,
+      cursorPosition: cursorPosition
+    });
+  }));
+};
+
+DrawRow.defaultProps = {
+  row: []
+};
+DrawRow.propTypes = {
+  row: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  rowIndex: _propTypes.default.number.isRequired,
+  setCursorPosition: _propTypes.default.func.isRequired,
+  cursorPosition: _propTypes.default.arrayOf(_propTypes.default.number).isRequired
+};
+var _default = DrawRow;
+exports.default = _default;

package/dist/components/cracker-puzzle-component/components/colors.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RED = exports.ORANGE = exports.GREEN = void 0;
+var GREEN = '#44d7ab';
+exports.GREEN = GREEN;
+var ORANGE = '#FFB34B';
+exports.ORANGE = ORANGE;
+var RED = '#FF634D';
+exports.RED = RED;

package/dist/components/cracker-puzzle-component/components/helpers.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.repaintGridPassword = exports.makeSomeNoise = void 0;
+
+var _colors = require("./colors");
+
+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 _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; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+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; }
+
+var getDistance = function getDistance(point1, point2) {
+  return Math.max(Math.abs(point1[0] - point2[0]), Math.abs(point1[1] - point2[1]));
+};
+
+var generatePasswordPositions = function generatePasswordPositions(grid, password, numberOfRows, numberOfColumns) {
+  var passwordPositions = [];
+  var tempGrid = grid;
+
+  var _iterator = _createForOfIteratorHelper(password.toLowerCase()),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var char = _step.value;
+      var randomRow = Math.floor(Math.random() * numberOfRows);
+      var randomColumn = Math.floor(Math.random() * numberOfColumns);
+      tempGrid[randomRow][randomColumn].value = char;
+      passwordPositions.push({
+        char: char,
+        position: [randomRow, randomColumn]
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return [tempGrid, passwordPositions];
+};
+
+var paintedGridPassword = function paintedGridPassword(blackGrid, numberOfRows, numberOfColumns, passwordPositions) {
+  var coloredGrid = blackGrid;
+
+  var _loop = function _loop(rowIndex) {
+    var _loop2 = function _loop2(columnIndex) {
+      var distanceToPassword = passwordPositions.reduce(function (acc, cur) {
+        var gridPosition = [rowIndex, columnIndex];
+        var distance = getDistance(cur.position, gridPosition);
+        return distance < acc ? distance : acc;
+      }, 9999);
+
+      switch (distanceToPassword) {
+        case 0:
+          coloredGrid[rowIndex][columnIndex].hiddenColor = _colors.GREEN;
+          break;
+
+        case 1:
+          coloredGrid[rowIndex][columnIndex].hiddenColor = _colors.ORANGE;
+          break;
+
+        case 2:
+          coloredGrid[rowIndex][columnIndex].hiddenColor = _colors.RED;
+          break;
+
+        default:
+          break;
+      }
+    };
+
+    for (var columnIndex = 0; columnIndex < numberOfColumns; columnIndex += 1) {
+      _loop2(columnIndex);
+    }
+  };
+
+  for (var rowIndex = 0; rowIndex < numberOfRows; rowIndex += 1) {
+    _loop(rowIndex);
+  }
+
+  return coloredGrid;
+};
+
+var resetColors = function resetColors(numberOfRows, numberOfColumns, actualGrid) {
+  var cleanGrid = actualGrid;
+
+  for (var rowIndex = 0; rowIndex < numberOfRows; rowIndex += 1) {
+    for (var columnIndex = 0; columnIndex < numberOfColumns; columnIndex += 1) {
+      cleanGrid[rowIndex][columnIndex].color = '';
+      cleanGrid[rowIndex][columnIndex].hiddenColor = _colors.RED;
+    }
+  }
+
+  return cleanGrid;
+};
+
+var repaintGridPassword = function repaintGridPassword(actualGrid, newPassword, numberOfRows, numberOfColumns) {
+  var resetedColorsGrid = resetColors(numberOfRows, numberOfColumns, actualGrid);
+
+  var _generatePasswordPosi = generatePasswordPositions(resetedColorsGrid, newPassword, numberOfRows, numberOfColumns),
+      _generatePasswordPosi2 = _slicedToArray(_generatePasswordPosi, 2),
+      blackGrid = _generatePasswordPosi2[0],
+      passwordPositions = _generatePasswordPosi2[1];
+
+  var paintedGrid = paintedGridPassword(blackGrid, numberOfRows, numberOfColumns, passwordPositions);
+  return paintedGrid;
+};
+
+exports.repaintGridPassword = repaintGridPassword;
+
+var prepareAcceptedChars = function prepareAcceptedChars(password) {
+  return '0123456789abcdefghijklmnopqrstuvwxyz'.split('').filter(function (character) {
+    return !password.includes(character);
+  }).join('');
+};
+
+var generateBasicGrid = function generateBasicGrid(numberOfRows, numberOfColumns, acceptedChars) {
+  var basicGrid = [];
+
+  for (var rowIndex = 0; rowIndex < numberOfRows; rowIndex += 1) {
+    var row = [];
+
+    for (var columnIndex = 0; columnIndex < numberOfColumns; columnIndex += 1) {
+      var cell = {
+        color: '',
+        hiddenColor: _colors.RED,
+        value: acceptedChars[Math.floor(Math.random() * acceptedChars.length)]
+      };
+      row.push(cell);
+    }
+
+    basicGrid.push(row);
+  }
+
+  return basicGrid;
+}; // generates the character map with the password and puts colors attribute
+
+
+var makeSomeNoise = function makeSomeNoise(_ref) {
+  var numberOfColumns = _ref.numberOfColumns,
+      numberOfRows = _ref.numberOfRows,
+      password = _ref.password;
+  var acceptedChars = prepareAcceptedChars(password);
+  var grid = generateBasicGrid(numberOfRows, numberOfColumns, acceptedChars);
+
+  var _generatePasswordPosi3 = generatePasswordPositions(grid, password, numberOfRows, numberOfColumns),
+      _generatePasswordPosi4 = _slicedToArray(_generatePasswordPosi3, 2),
+      blackGrid = _generatePasswordPosi4[0],
+      passwordPositions = _generatePasswordPosi4[1];
+
+  var paintedGrid = paintedGridPassword(blackGrid, numberOfRows, numberOfColumns, passwordPositions);
+  return paintedGrid;
+}; // eslint-disable-next-line import/prefer-default-export
+
+
+exports.makeSomeNoise = makeSomeNoise;

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

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