@gamelearn/arcade-components 2.41.1 → 3.0.1

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

@@ -1,275 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _FeedbackComponent = _interopRequireDefault(require("../../feedback-component/components/FeedbackComponent"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
-  var _image$img, _image$img2;
-  var emitEvent = _ref.emitEvent,
-    image = _ref.image,
-    password = _ref.password,
-    keyboard = _ref.keyboard,
-    info = _ref.info,
-    disableExit = _ref.disableExit,
-    soundActions = _ref.soundActions,
-    setResolveAction = _ref.setResolveAction,
-    nodeId = _ref.nodeId,
-    keyboardControl = _ref.keyboardControl,
-    _ref$styles = _ref.styles,
-    styles = _ref$styles === void 0 ? 'default-theme' : _ref$styles;
-  var _useState = (0, _react.useState)(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    passClass = _useState2[0],
-    setPassClass = _useState2[1];
-  var _useState3 = (0, _react.useState)(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    inputPassword = _useState4[0],
-    setInputPassword = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    feedbackResult = _useState6[0],
-    setFeedbackResult = _useState6[1];
-  var _useState7 = (0, _react.useState)(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    feedBackText = _useState8[0],
-    setFeedBackText = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    feedbackIsShown = _useState10[0],
-    setFeedbackIsShown = _useState10[1];
-  var _useState11 = (0, _react.useState)([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    accRewards = _useState12[0],
-    setRewards = _useState12[1];
-  var translate = function translate(id) {
-    return emitEvent({
-      type: 'translate',
-      payload: id
-    });
-  };
-  var puzzleId = "keyboard-puzzle_".concat(nodeId);
-  var _soundActions = _slicedToArray(soundActions, 1),
-    playSound = _soundActions[0];
-  var closeFeedbackAndShowPoints = (0, _react.useCallback)(function (rewardsData) {
-    setFeedbackResult(false);
-    setFeedbackIsShown(false);
-    emitEvent({
-      type: 'hidePuzzleButtons',
-      payload: false
-    });
-    emitEvent({
-      type: 'addPoints',
-      complex: true,
-      finish: true,
-      payload: rewardsData
-    });
-  }, [emitEvent]);
-  var handleFeedbackFuncionOnClose = function handleFeedbackFuncionOnClose() {
-    if (feedbackResult) {
-      var rewards = info.solution.right.rewards;
-      var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards));
-      playSound('score');
-      closeFeedbackAndShowPoints(rewardsData);
-    } else {
-      emitEvent({
-        type: 'hidePuzzleButtons',
-        payload: false
-      });
-      setFeedbackResult(false);
-      disableExit(false);
-      setFeedbackIsShown(false);
-    }
-    setFeedBackText('');
-  };
-  var checkPass = function checkPass(current) {
-    if (current === password) {
-      disableExit(false);
-      setPassClass('success');
-      playSound('score');
-      emitEvent({
-        type: 'passPuzzle'
-      });
-      setFeedbackResult(true);
-      setFeedbackIsShown(true);
-      if (!info.solution.right.desc) {
-        setTimeout(function () {
-          var rewards = info.solution.right.rewards;
-          var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards));
-          closeFeedbackAndShowPoints(rewardsData);
-        }, 3000);
-      } else {
-        setFeedBackText(info.solution.right.desc);
-      }
-    } else {
-      setFeedbackIsShown(true);
-      setPassClass('failed');
-      playSound('fail');
-      emitEvent({
-        type: 'failPuzzle'
-      });
-      setFeedbackResult(false);
-      setRewards([].concat(_toConsumableArray(accRewards), _toConsumableArray(info.solution.wrong.rewards)));
-      emitEvent({
-        type: 'hidePuzzleButtons',
-        payload: false
-      });
-      setPassClass('');
-      setInputPassword('');
-      setFeedbackIsShown(true);
-      if (info.solution.wrong.desc) {
-        setFeedBackText(info.solution.wrong.desc);
-      } else {
-        setTimeout(function () {
-          handleFeedbackFuncionOnClose();
-        }, 3000);
-      }
-    }
-  };
-  (0, _react.useEffect)(function () {
-    setResolveAction(function () {
-      disableExit(false);
-      playSound('score');
-      setPassClass('success');
-      setFeedbackResult(true);
-      setFeedBackText(info.solution.right.desc);
-      setInputPassword(password);
-      var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
-      setTimeout(function () {
-        setFeedbackResult(false);
-        setFeedbackIsShown(false);
-        emitEvent({
-          type: 'hidePuzzleButtons',
-          payload: false
-        });
-        emitEvent({
-          type: 'puzzleAction',
-          action: 'resolve',
-          payload: {
-            element: puzzleId,
-            rewards: rewardsData,
-            finish: true
-          }
-        });
-      }, 2000);
-    });
-  }, [setResolveAction, disableExit, info.solution.right.desc, playSound, info.resolve.rewards, accRewards, password, emitEvent, puzzleId]);
-  var handleNumbClick = function handleNumbClick(row, col) {
-    var char = keyboard[row][col];
-    playSound('click-ui');
-    if (inputPassword.length < password.length + 1) {
-      setInputPassword(inputPassword + char);
-      if (inputPassword.length + 1 === password.length) {
-        checkPass(inputPassword + char);
-      }
-    }
-  };
-  var handleRemoveChar = function handleRemoveChar() {
-    playSound('click-ui');
-    setInputPassword(inputPassword.substring(0, inputPassword.length - 1));
-  };
-  var imageURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || '';
-  var styleForBackground = {
-    backgroundImage: "url(\"".concat(imageURL, "\")"),
-    backgroudPosition: 'center center'
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle-keyboard puzzle-keyboard--".concat(styles),
-    style: (_image$img2 = image.img) !== null && _image$img2 !== void 0 && _image$img2.url ? styleForBackground : null
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle-keyboard__header"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle-keyboard__digits"
-  }, password.split('').map(function (e, ind) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "puzzle-keyboard__digit ".concat(passClass),
-      key: "".concat(e + ind)
-    }, inputPassword.split('')[ind] ? inputPassword.split('')[ind] : '');
-  }), passClass !== '' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, passClass === 'success' ? /*#__PURE__*/_react.default.createElement("span", {
-    className: "puzzle-keyboard__positionatedToDigits icon-mini-check-circle"
-  }) : /*#__PURE__*/_react.default.createElement("span", {
-    className: "puzzle-keyboard__positionatedToDigits icon-mini-error-circle"
-  })) : /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    onClick: handleRemoveChar,
-    className: "puzzle-keyboard__positionatedToDigits  puzzle-keyboard__delete",
-    "aria-label": translate('puzzles.keyboard-puzzle.deleteButton')
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-delete-key-2023"
-  })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle-keyboard__keypad"
-  }, styles === 'scifi-theme' && /*#__PURE__*/_react.default.createElement("div", {
-    "aria-hidden": true,
-    className: "puzzle-keyboard__scifi-notch"
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/_react.default.createElement("g", {
-    transform: "translate(3 3)"
-  }, /*#__PURE__*/_react.default.createElement("circle", {
-    fill: "#1E282F",
-    cx: "5",
-    cy: "5",
-    r: "5"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M1.48 8.55a5 5 0 1 0 7.008-7.133",
-    fillOpacity: ".096",
-    fill: "#1DDDD8"
-  }), /*#__PURE__*/_react.default.createElement("circle", {
-    fill: "#1DDDD8",
-    opacity: ".359",
-    cx: "3",
-    cy: "3",
-    r: "2"
-  })), /*#__PURE__*/_react.default.createElement("circle", {
-    stroke: "#1E282F",
-    cx: "8",
-    cy: "8",
-    r: "7.5"
-  }))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "keyboard-keys keyboard-keys--".concat(styles)
-  }, keyboard.map(function (row, rowNumb) {
-    return (Array.isArray(row) ? row : Object.values(row)).map(function (col, colNumb) {
-      return /*#__PURE__*/_react.default.createElement("button", {
-        className: "keyboard-key keyboard-key--".concat(styles, "  ").concat(col === '*' ? 'keyboard-key--star' : ''),
-        type: "button",
-        onClick: function onClick() {
-          return handleNumbClick(rowNumb, colNumb);
-        },
-        key: col
-      }, /*#__PURE__*/_react.default.createElement("div", null, col));
-    });
-  })), styles === 'scifi-theme' && /*#__PURE__*/_react.default.createElement("hr", {
-    "aria-hidden": true,
-    className: "puzzle-keyboard__scifi-line"
-  })), feedbackIsShown && /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
-    translate: translate,
-    text: feedBackText,
-    success: feedbackResult,
-    functionOnClose: handleFeedbackFuncionOnClose,
-    keyboardControl: keyboardControl
-  }));
-};
-var _default = KeyboardPuzzleComponent;
-exports.default = _default;

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

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

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mockProps = exports.default = void 0;
-var _mocker = require("helpers/mocker");
-var mockProps = {
-  emitEvent: _mocker.emitEvent,
-  disableExit: function disableExit() {},
-  setResolveAction: function setResolveAction() {},
-  soundActions: _mocker.soundActions,
-  keyboardControl: _mocker.keyboardControl,
-  password: '1234',
-  keyboard: [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9'], ['*', '0', '#']],
-  image: {
-    img: {
-      // eslint-disable-next-line max-len
-      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/60508f84901f3e00123a0796/holamundo.jpg'
-    }
-  },
-  info: {
-    resolve: {
-      rewards: []
-    },
-    solution: {
-      right: {
-        desc: 'correctSolution',
-        rewards: []
-      },
-      wrong: {
-        desc: 'wrongSolution',
-        rewards: []
-      }
-    }
-  }
-};
-exports.mockProps = mockProps;
-var _default = mockProps;
-exports.default = _default;

package/dist/components/konva-components/Area/index.js

@@ -1,170 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactKonva = require("react-konva");
-var _reactKonvaUtils = require("react-konva-utils");
-var _deviceDetection = require("../../../helpers/deviceDetection");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var Area = function Area(_ref) {
-  var area = _ref.area,
-    finished = _ref.finished,
-    isClicked = _ref.isClicked,
-    isBad = _ref.isBad,
-    hasHighlights = _ref.hasHighlights,
-    completed = _ref.completed,
-    onClick = _ref.onClick,
-    onClickOutside = _ref.onClickOutside;
-  var areaRef = (0, _react.useRef)();
-  var _useState = (0, _react.useState)(),
-    _useState2 = _slicedToArray(_useState, 2),
-    projectionConfig = _useState2[0],
-    setProjectionConfig = _useState2[1];
-  var fillColor = isBad ? 'rgba(255, 99, 77, 0.32)' : 'rgba(75, 215, 169, 0.32)';
-  var strokeColor = isBad ? '#ff634d' : '#4bd7a9';
-  var isMobile = (0, _deviceDetection.DeviceDetection)();
-  var mouseEnterArea = function mouseEnterArea() {
-    if (hasHighlights && !completed && !isClicked) {
-      var _areaRef$current, _areaRef$current2, _areaRef$current3;
-      (_areaRef$current = areaRef.current) === null || _areaRef$current === void 0 ? void 0 : _areaRef$current.setAttr('fill', 'rgba(130, 134, 142, 0.4)');
-      (_areaRef$current2 = areaRef.current) === null || _areaRef$current2 === void 0 ? void 0 : _areaRef$current2.setAttr('stroke', 'rgba(255, 255, 255, 0.3)');
-      (_areaRef$current3 = areaRef.current) === null || _areaRef$current3 === void 0 ? void 0 : _areaRef$current3.to({
-        duration: 0.25,
-        opacity: 1
-      });
-    }
-  };
-  var mouseLeaveArea = function mouseLeaveArea() {
-    if (hasHighlights && !completed && !isClicked) {
-      var _areaRef$current4;
-      (_areaRef$current4 = areaRef.current) === null || _areaRef$current4 === void 0 ? void 0 : _areaRef$current4.to({
-        duration: 0.25,
-        opacity: 0
-      });
-    }
-  };
-  (0, _react.useEffect)(function () {
-    if (completed && !finished) {
-      if (!isBad) {
-        var _areaRef$current5, _areaRef$current6;
-        (_areaRef$current5 = areaRef.current) === null || _areaRef$current5 === void 0 ? void 0 : _areaRef$current5.to({
-          duration: 0.25,
-          opacity: 1
-        });
-        (_areaRef$current6 = areaRef.current) === null || _areaRef$current6 === void 0 ? void 0 : _areaRef$current6.globalCompositeOperation('destination-out');
-      } else {
-        var _areaRef$current7;
-        (_areaRef$current7 = areaRef.current) === null || _areaRef$current7 === void 0 ? void 0 : _areaRef$current7.to({
-          duration: 0.25,
-          opacity: 0
-        });
-      }
-    }
-  }, [completed, finished, isBad]);
-  var clickArea = function clickArea() {
-    if (!completed) {
-      var _areaRef$current8, _areaRef$current9;
-      if (isBad) {
-        onClickOutside(area);
-      } else {
-        onClick(area);
-      }
-      (_areaRef$current8 = areaRef.current) === null || _areaRef$current8 === void 0 ? void 0 : _areaRef$current8.setAttr('fill', fillColor);
-      (_areaRef$current9 = areaRef.current) === null || _areaRef$current9 === void 0 ? void 0 : _areaRef$current9.setAttr('stroke', strokeColor);
-    }
-  };
-  var scaleX = area.scaleX ? area.scaleX : 1;
-  var scaleY = area.scaleY ? area.scaleY : 1;
-  (0, _react.useLayoutEffect)(function () {
-    var stage = areaRef.current.getStage();
-    stage.on('stage-loaded', function () {
-      var rect = areaRef.current.getClientRect({
-        relativeTo: areaRef.current.getParent()
-      });
-      setProjectionConfig({
-        x: rect.x + rect.width / 2,
-        y: rect.y + rect.height / 2
-      });
-      stage.batchDraw();
-    });
-  }, [area]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, projectionConfig ? /*#__PURE__*/_react.default.createElement(_reactKonvaUtils.Html, {
-    transform: true,
-    groupProps: _objectSpread({
-      id: 'projection'
-    }, projectionConfig),
-    divProps: {
-      style: {
-        pointerEvents: 'none'
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width: '50px',
-      height: '50px',
-      pointerEvents: 'none'
-    },
-    id: area.id
-  })) : null, /*#__PURE__*/_react.default.createElement(_reactKonva.Line, {
-    name: area.id,
-    ref: areaRef,
-    onFocus: function onFocus() {
-      return mouseEnterArea(area);
-    },
-    onMouseOver: function onMouseOver() {
-      return mouseEnterArea(area);
-    },
-    onMouseLeave: mouseLeaveArea,
-    onClick: function onClick() {
-      return clickArea();
-    },
-    onTap: function onTap() {
-      return clickArea();
-    },
-    x: area.x,
-    y: area.y,
-    scale: {
-      x: scaleX,
-      y: scaleY
-    },
-    skew: {
-      x: area.skewX,
-      y: area.skewY
-    },
-    rotation: area.rotation,
-    points: area.points,
-    shape: "poly",
-    fill: finished ? '' : fillColor,
-    stroke: finished || isClicked ? strokeColor : '',
-    strokeWidth: isMobile ? 10 : 4,
-    opacity: finished || isClicked ? 1 : 0,
-    closed: true
-  }));
-};
-Area.defaultProps = {
-  finished: false,
-  isBad: false,
-  isClicked: false,
-  hasHighlights: false,
-  completed: false,
-  onClick: function onClick() {},
-  onClickOutside: function onClickOutside() {}
-};
-var _default = Area;
-exports.default = _default;