@gamelearn/arcade-components 1.3.5 → 1.3.7

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

@@ -46,7 +46,8 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
       disableExit = _ref.disableExit,
       setResolveAction = _ref.setResolveAction,
       soundActions = _ref.soundActions,
-      setShowPoints = _ref.setShowPoints;
+      setShowPoints = _ref.setShowPoints,
+      bgImg = _ref.bgImg;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -189,7 +190,12 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
     });
   }, [setResolveAction, disableExit, accRewards, info.resolve.rewards, emitEvent, setShowPoints, closeFeedbackAndShowPoints]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cards-selector"
+    className: "cards-selector",
+    style: bgImg ? {
+      backgroundImage: "url(".concat(bgImg, ")"),
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover'
+    } : {}
   }, /*#__PURE__*/_react.default.createElement(_Board.default, {
     setCurrentOrder: setCurrentOrder,
     currentOrder: currentOrder,
@@ -214,7 +220,8 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
 
 CardsSelectorPuzzleComponent.defaultProps = {
   cards: [],
-  info: {}
+  info: {},
+  bgImg: ''
 };
 var _default = CardsSelectorPuzzleComponent;
 exports.default = _default;

package/dist/components/cards-selector-puzzle-component/mocks/mockForStory.js

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
+exports.mockProps5 = exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
 
 var _mocker = require("helpers/mocker");
 
-/* eslint-disable max-len */
+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; }
+
 var mockProps = {
   emitEvent: _mocker.emitEvent,
   soundActions: _mocker.soundActions,
@@ -343,4 +348,10 @@ var mockProps4 = {
     }
   }
 };
-exports.mockProps4 = mockProps4;
+exports.mockProps4 = mockProps4;
+
+var mockProps5 = _objectSpread(_objectSpread({}, mockProps), {}, {
+  bgImg: 'https://i.imgur.com/DTFfovW.jpeg'
+});
+
+exports.mockProps5 = mockProps5;

package/dist/components/drag-item-puzzle-component/components/DragItemPuzzleComponent.js

@@ -13,6 +13,8 @@ var _interactjs = _interopRequireDefault(require("interactjs"));
 
 var _reactKonva = require("react-konva");
 
+var _reactKonvaUtils = require("react-konva-utils");
+
 var _Messages = require("./Messages");
 
 var _feedbackComponent = _interopRequireDefault(require("../../feedback-component"));
@@ -84,9 +86,14 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
       imageLoaded = _useState6[0],
       setImageLoaded = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(new window.Image()),
-      _useState8 = _slicedToArray(_useState7, 1),
-      currentImage = _useState8[0];
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      projectionConfig = _useState8[0],
+      setProjectionConfig = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(new window.Image()),
+      _useState10 = _slicedToArray(_useState9, 1),
+      currentImage = _useState10[0];
 
   var accRewards = (0, _react.useRef)([]);
 
@@ -325,6 +332,17 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
     }
   };
 
+  (0, _react.useLayoutEffect)(function () {
+    if (areaRef.current && imageLoaded) {
+      var rect = areaRef.current.getClientRect({
+        relativeTo: areaRef.current.getParent()
+      });
+      setProjectionConfig({
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2
+      });
+    }
+  }, [imageLoaded]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--drag__mask100"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -339,7 +357,24 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
     height: canvas.current.clientHeight
   }, /*#__PURE__*/_react.default.createElement(_reactKonva.Layer, null, /*#__PURE__*/_react.default.createElement(_reactKonva.Image, _extends({
     image: currentImage
-  }, layerConfig.current)), /*#__PURE__*/_react.default.createElement(_reactKonva.Group, layerConfig.current, /*#__PURE__*/_react.default.createElement(_reactKonva.Line, _extends({
+  }, layerConfig.current)), /*#__PURE__*/_react.default.createElement(_reactKonva.Group, layerConfig.current, 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: "object-area-projection"
+  })) : null, /*#__PURE__*/_react.default.createElement(_reactKonva.Line, _extends({
     onMouseEnter: mouseEnterArea,
     onMouseLeave: mouseLeaveArea,
     ref: handleAreaRef

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "main": "dist/index.js",
   "files": [
     "dist",