@gamelearn/arcade-components 0.6.2 → 0.7.0

package/README.md

@@ -48,6 +48,38 @@ Para añadir un componente nuevo se recomienda usar el generador automático que
 
 `yarn generate`
 
+## How to link arcade-components in other repos (WIP)
+
+Para trabajar con arcade-components en local si necesidad de subir a git ni a npm no podemos trabajar con `yarn link` ya que da un error con los hooks de react.
+
+Cómo solución alternativa podemos instalar `yalc` que permite publicar el paquete en local e importarlo desde `arcade`.
+
+```bash
+yarn global add yalc
+```
+
+Para generar el paquete en el store local:
+
+```bash
+yarn
+yarn compile
+yalc publish
+```
+
+Después, en el repositorio de `arcade-components` tendremos que linkar el paquete generado de la siguiente forma:
+
+```bash
+yalc link @gamelearn/arcade-components
+```
+
+Y voilá, ya podremos trabajar con arcade y arcade-components en local sin publicar nada.
+
+Una vez terminemos de trabajar con el paquete linkado en `arcade`, no nos olvidemos de borrar el link:
+
+```bash
+yalc remove --all
+```
+
 ## License
 
 UNLICENSED © [gamelearn](https://github.com/gamelearn)

package/dist/components/arcade-render/element/index.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _fiber = require("@react-three/fiber");
 
+var _drei = require("@react-three/drei");
+
 var _AnimateElement = _interopRequireDefault(require("./AnimateElement"));
 
 var _SkeletonUtils = require("three/examples/jsm/utils/SkeletonUtils");
@@ -61,7 +63,8 @@ var Element = function Element(_ref) {
       type = _ref.type,
       _ref$onLoad = _ref.onLoad,
       onLoad = _ref$onLoad === void 0 ? function () {} : _ref$onLoad,
-      props = _objectWithoutProperties(_ref, ["url", "animationUrl", "position", "rotation", "scale", "size", "material", "layers", "type", "onLoad"]);
+      userData = _ref.userData,
+      props = _objectWithoutProperties(_ref, ["url", "animationUrl", "position", "rotation", "scale", "size", "material", "layers", "type", "onLoad", "userData"]);
 
   var _useGLB = (0, _useGLB2.default)(url),
       scene = _useGLB.scene;
@@ -93,7 +96,14 @@ var Element = function Element(_ref) {
           node.castShadow = true;
           node.material.roughness = 0.7;
           node.material.metalness = 0.5;
-          if (isCharacter) node.frustumCulled = false;
+
+          if (isCharacter) {
+            node.frustumCulled = false;
+          }
+
+          if (layers > 0) {
+            node.layers.set(layers);
+          }
 
           if (node.isSkinnedMesh) {
             node.material.skinned = true;
@@ -103,10 +113,6 @@ var Element = function Element(_ref) {
             (0, _fiber.applyProps)(node.material, material);
           }
 
-          if (layers > 0) {
-            node.layers.set(layers);
-          }
-
           if (node.material.map) node.material.map.encoding = _three.sRGBEncoding;
           if (node.material.emissiveMap) node.material.emissiveMap.encoding = _three.sRGBEncoding;
           node.material.needsUpdate = true;
@@ -120,12 +126,14 @@ var Element = function Element(_ref) {
     model: model,
     position: position,
     rotation: rotation,
-    scale: usingScale
+    scale: usingScale,
+    raycast: _drei.meshBounds
   }, props)) : /*#__PURE__*/_react.default.createElement("primitive", _extends({
     object: model,
     position: position,
     rotation: rotation,
-    scale: usingScale
+    scale: usingScale,
+    raycast: _drei.meshBounds
   }, props)), props.uid && /*#__PURE__*/_react.default.createElement(_Projection.default, {
     object: model,
     element: props

package/dist/components/arcade-render/scene/index.js

@@ -97,6 +97,7 @@ var Scene = function Scene(_ref3) {
     gl.gammaFactor = 2.2;
     gl.setClearColor(0xcccccc);
     gl.setPixelRatio(window.devicePixelRatio);
+    gl.setSize(window.innerWidth, window.innerHeight);
     gl.physicallyCorrectLights = true;
   };
 

package/dist/components/cards-selector-puzzle-component/components/Board/index.js

@@ -0,0 +1,195 @@
+"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 _coreJs = require("core-js");
+
+var _Card = _interopRequireDefault(require("../Card"));
+
+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 Board = function Board(_ref) {
+  var cards = _ref.cards,
+      currentOrder = _ref.currentOrder,
+      setCurrentOrder = _ref.setCurrentOrder,
+      handleError = _ref.handleError,
+      endPuzzle = _ref.endPuzzle,
+      feedbackIsShown = _ref.feedbackIsShown,
+      resolvePuzzle = _ref.resolvePuzzle;
+
+  var _useState = (0, _react.useState)(_toConsumableArray(Array(cards.length)).fill(false)),
+      _useState2 = _slicedToArray(_useState, 2),
+      flipped = _useState2[0],
+      setFlipped = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(_toConsumableArray(Array(cards.length)).fill(false)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      wrongOrder = _useState4[0],
+      setWrongOrder = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      correctCards = _useState6[0],
+      setCorrectCards = _useState6[1];
+
+  var numberOfCorrectCards = cards.filter(function (card) {
+    return card.correct === true;
+  }).length;
+  var isOrderBased = cards.filter(function (card) {
+    return card.order;
+  }).length > 0;
+
+  var reset = function reset() {
+    setFlipped(_toConsumableArray(Array(cards.length)).fill(false)); // reset it to the original length
+
+    setWrongOrder(_toConsumableArray(Array(cards.length)).fill(false));
+    setCorrectCards(1);
+    setCurrentOrder(1);
+  };
+
+  var timedReset = function timedReset() {
+    (0, _coreJs.setTimeout)(function () {
+      reset();
+    }, 3000);
+  };
+
+  function flipACard(index) {
+    var tempFlipped = Array.from(flipped);
+    tempFlipped[index] = index;
+    setFlipped(tempFlipped);
+  }
+
+  var timedFlipped = function timedFlipped(index) {
+    (0, _coreJs.setTimeout)(function () {
+      flipACard(index);
+    }, 3000);
+  };
+
+  var flipAllCorrect = (0, _react.useCallback)(function () {
+    var arrayToFlip = [];
+    cards.forEach(function (card, index) {
+      if (card.correct === true) {
+        arrayToFlip.push(index);
+      }
+    });
+    setFlipped(arrayToFlip);
+  }, [cards]);
+  (0, _react.useEffect)(function () {
+    if (resolvePuzzle) {
+      flipAllCorrect();
+    }
+  }, [flipAllCorrect, resolvePuzzle]);
+
+  var handleCorrect = function handleCorrect(index) {
+    flipACard(index);
+    setCorrectCards(correctCards + 1);
+
+    if (correctCards === numberOfCorrectCards) {
+      // random click, we check if correct if not reset
+      endPuzzle();
+    }
+  };
+
+  var _handleClick = function handleClick(index) {
+    if (!feedbackIsShown) {
+      if (cards[index].correct && !isOrderBased) {
+        handleCorrect(index);
+      } else if (isOrderBased) {
+        if (cards[index].order === currentOrder) {
+          // case with order // sneeds to hold already clicked
+          setCurrentOrder(currentOrder + 1);
+          handleCorrect(index);
+        } else {
+          if (cards[index].order !== currentOrder) {
+            var tempWrong = Array.from(wrongOrder);
+            tempWrong[index] = index;
+            setWrongOrder(tempWrong);
+            handleError();
+            timedReset();
+          }
+
+          flipACard(index);
+        }
+      } else {
+        // fails and resets
+        handleError();
+        flipACard(index);
+        timedFlipped();
+      }
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "cards-selector__content cards-selector__content-".concat(cards.length)
+  }, cards && cards.map(function (card, cardIndex) {
+    return /*#__PURE__*/_react.default.createElement(_Card.default, {
+      setCurrentOrder: setCurrentOrder,
+      card: card,
+      key: "cardPuzzle ".concat(cards.indexOf(card)),
+      handleClick: function handleClick() {
+        return _handleClick(cardIndex);
+      },
+      flipped: flipped.includes(cardIndex),
+      wrongOrder: wrongOrder.includes(cardIndex),
+      cardIndex: cardIndex
+    });
+  }));
+};
+
+Board.defaultProps = {
+  setCurrentOrder: function setCurrentOrder() {},
+  handleError: function handleError() {},
+  endPuzzle: function endPuzzle() {},
+  documentsDict: {},
+  resourcesHost: '',
+  cards: [],
+  currentOrder: 1,
+  resolvePuzzle: false,
+  feedbackIsShown: false
+};
+Board.propTypes = {
+  endPuzzle: _propTypes.default.func,
+  handleError: _propTypes.default.func,
+  feedbackIsShown: _propTypes.default.bool,
+  resolvePuzzle: _propTypes.default.bool,
+  currentOrder: _propTypes.default.number,
+  documentsDict: _propTypes.default.shape({}),
+  setCurrentOrder: _propTypes.default.func,
+  resourcesHost: _propTypes.default.string,
+  cards: _propTypes.default.arrayOf(_propTypes.default.shape)
+};
+var _default = Board;
+exports.default = _default;

package/dist/components/cards-selector-puzzle-component/components/Card/index.js

@@ -0,0 +1,134 @@
+"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 Card = function Card(_ref) {
+  var card = _ref.card,
+      handleClick = _ref.handleClick,
+      flipped = _ref.flipped,
+      cardIndex = _ref.cardIndex,
+      wrongOrder = _ref.wrongOrder;
+
+  var isEmpty = function isEmpty() {
+    if (card.img || card.text) {
+      return false;
+    }
+
+    return true;
+  };
+
+  var renderImage = function renderImage() {
+    var resource = card.img || {};
+    var resolvedIdImg = resource.url;
+    return /*#__PURE__*/_react.default.createElement("img", {
+      src: resolvedIdImg,
+      alt: ""
+    });
+  };
+
+  var renderText = function renderText() {
+    if (!card.text) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "card-selector-item__textbox ".concat(card.img ? '' : 'card-selector-item__textbox--noimage')
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "card-selector-item__text"
+    }, /*#__PURE__*/_react.default.createElement("span", null, card.text || '_')));
+  };
+
+  var canBeClicked = function canBeClicked() {
+    if (flipped && !card.correct || !flipped) return true;
+    return false;
+  };
+
+  var wrongCardClicked = function wrongCardClicked() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "card-selector-item__feedback card-selector-item__feedback--error"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "card-selector-item__feedbackicon"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "icon-error-circle-black"
+    })));
+  };
+
+  var orderNumber = function orderNumber() {
+    // Render name
+    if (card.order) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "card-selector-item__order"
+      }, /*#__PURE__*/_react.default.createElement("div", null, card.order));
+    }
+
+    return null;
+  };
+
+  var rightCardClicked = function rightCardClicked() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "card-selector-item__feedback  card-selector-item__feedback--success  "
+    }, orderNumber(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "card-selector-item__feedbackicon"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "icon-check-circle-black"
+    })));
+  };
+
+  var cardFeedbackContainer = function cardFeedbackContainer() {
+    if (!isEmpty() && flipped && card.correct && !wrongOrder) {
+      return rightCardClicked();
+    }
+
+    if (!isEmpty() && flipped) {
+      return wrongCardClicked();
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    order: card.order,
+    onClick: function onClick() {
+      if (!isEmpty() && canBeClicked()) {
+        handleClick(cardIndex);
+      }
+    },
+    className: "card-selector-item ".concat(isEmpty() ? 'card-selector-item--empty' : '')
+  }, renderImage(), renderText(), cardFeedbackContainer());
+};
+
+Card.defaultProps = {
+  handleClick: function handleClick() {},
+  documentsDict: {},
+  resourcesHost: '',
+  card: {},
+  flipped: false,
+  wrongOrder: false,
+  cardIndex: 0
+};
+Card.propTypes = {
+  wrongOrder: _propTypes.default.bool,
+  handleClick: _propTypes.default.func,
+  cardIndex: _propTypes.default.number,
+  flipped: _propTypes.default.bool,
+  documentsDict: _propTypes.default.shape({}),
+  resourcesHost: _propTypes.default.string,
+  card: _propTypes.default.shape({
+    correct: _propTypes.default.bool,
+    order: _propTypes.default.number,
+    text: _propTypes.default.string,
+    imgId: _propTypes.default.string,
+    status: _propTypes.default.string
+  })
+};
+var _default = Card;
+exports.default = _default;

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

@@ -0,0 +1,155 @@
+"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 _Board = _interopRequireDefault(require("./Board"));
+
+var _FeedbackComponent = _interopRequireDefault(require("../../feedback-component/components/FeedbackComponent"));
+
+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 CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
+  var emitEvent = _ref.emitEvent,
+      info = _ref.info,
+      cards = _ref.cards,
+      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)(1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentOrder = _useState4[0],
+      setCurrentOrder = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      feedbackResult = _useState6[0],
+      setFeedbackResult = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      feedbackIsShown = _useState8[0],
+      setFeedbackIsShown = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      accRewards = _useState10[0],
+      setRewards = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      resolvePuzzle = _useState12[0],
+      setResolvePuzzle = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(''),
+      _useState14 = _slicedToArray(_useState13, 2),
+      feedBackText = _useState14[0],
+      setFeedBackText = _useState14[1];
+
+  var _endPuzzle = function endPuzzle() {
+    setFeedbackResult(true);
+    setFeedBackText(info.solution.right.desc);
+    setFeedbackIsShown(true);
+    setFinished(true);
+    var rewards = info.solution.right.rewards;
+    var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards));
+    setTimeout(function () {
+      emitEvent({
+        type: 'addPoints',
+        payload: _toConsumableArray(rewardsData)
+      });
+    }, 3000);
+  };
+
+  var _handleError = function handleError() {
+    setFeedbackResult(false);
+    setFeedBackText(info.solution.wrong.desc);
+    setFeedbackIsShown(true);
+    disableExit(true);
+    setRewards([].concat(_toConsumableArray(accRewards), _toConsumableArray(info.solution.wrong.rewards)));
+    setTimeout(function () {
+      setFeedbackResult(false);
+      disableExit(false);
+      setFeedbackIsShown(false);
+    }, 3000);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (finished) {
+      disableExit(true);
+    }
+  }, [disableExit, finished]);
+  (0, _react.useEffect)(function () {
+    setResolveAction(function (resolve) {
+      setResolvePuzzle(true);
+      var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
+      setTimeout(function () {
+        emitEvent({
+          type: 'addPoints',
+          payload: _toConsumableArray(rewardsData)
+        });
+      }, 4000);
+    });
+    disableExit(true);
+  }, [setResolveAction, disableExit, accRewards, info.resolve.rewards, emitEvent]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cards-selector"
+  }, /*#__PURE__*/_react.default.createElement(_Board.default, {
+    setCurrentOrder: setCurrentOrder,
+    currentOrder: currentOrder,
+    cards: cards,
+    endPuzzle: function endPuzzle() {
+      return _endPuzzle();
+    },
+    handleError: function handleError() {
+      return _handleError();
+    },
+    feedbackIsShown: feedbackIsShown,
+    resolvePuzzle: resolvePuzzle
+  })), feedbackIsShown && /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
+    success: feedbackResult,
+    text: feedBackText
+  }));
+};
+
+CardsSelectorPuzzleComponent.defaultProps = {
+  cards: [],
+  info: {}
+};
+var _default = CardsSelectorPuzzleComponent;
+exports.default = _default;

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

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