@gamepark/react-game 6.38.4 → 7.0.0-beta.0

package/dist/components/material/GameTable/DropPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropPreview.js","sourceRoot":"","sources":["../../../../src/components/material/GameTable/DropPreview.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropPreview.js","sourceRoot":"","sources":["../../../../src/components/material/GameTable/DropPreview.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,sCAA4D;AAC5D,wCAAoC;AACpC,iDAAwE;AACxE,+BAA6D;AAC7D,wCAAkE;AAClE,0DAAwD;AACxD,4DAA0D;AAEnD,IAAM,WAAW,GAAG,UAAC,KAAqC;;IAC/D,IAAM,OAAO,GAAG,IAAA,0BAAkB,GAAE,CAAA;IACpC,IAAM,UAAU,GAAG,IAAA,qBAAa,GAAE,CAAA;IAC5B,IAAA,KAAA,OAA0B,IAAA,gBAAQ,GAAgB,IAAA,EAAjD,QAAQ,QAAA,EAAE,WAAW,QAA4B,CAAA;IAClD,IAAA,KAAA,OAA0B,IAAA,gBAAQ,GAAY,IAAA,EAA7C,QAAQ,QAAA,EAAE,WAAW,QAAwB,CAAA;IACpD,IAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,cAAM,OAAA,WAAW,CAAC,SAAS,CAAC,EAAtB,CAAsB,EAAE,EAAE,CAAC,CAAA;IACjE,IAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,UAAC,KAAoB;QAClD,IAAI,KAAK,CAAC,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1D,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACtC,CAAC;QACD,WAAW,CAAC,IAAA,iCAAe,EAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAA;IAC1D,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAA;IACzB,IAAM,SAAS,GAAG,IAAA,mBAAW,EAAC,cAAM,OAAA,WAAW,CAAC,SAAS,CAAC,EAAtB,CAAsB,EAAE,EAAE,CAAC,CAAA;IAC/D,IAAA,oBAAa,EAAC,EAAE,WAAW,aAAA,EAAE,SAAS,WAAA,EAAE,UAAU,YAAA,EAAE,CAAC,CAAA;IAErD,IAAI,QAAQ,IAAI,IAAA,sBAAU,EAAC,QAAQ,CAAC,IAAI,QAAQ,KAAI,MAAA,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,0CAAE,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA,EAAE,CAAC;QACxH,IAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAA;QAC9B,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAA;QAChC,IAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QACxD,IAAM,UAAU,yBAAQ,IAAI,KAAE,QAAQ,aAAI,IAAI,EAAE,QAAQ,CAAC,IAAI,IAAK,QAAQ,CAAC,QAAQ,IAAI,CAAA;QACvF,IAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAE,CAAA;QAC3C,IAAM,WAAW,yBAAQ,OAAO,KAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,YAAY,EAAE,CAAC,GAAE,CAAA;QAChE,OAAO,2CAAS,KAAK,cACnB,uBAAC,qCAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,QACvE,KAAK,EAAE,EAAE,SAAS,EAAE,kBAAkB,GAAG,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAC3H,IACE,CAAA;IACR,CAAC;IAED,OAAO,2CAAS,KAAK,EAAQ,CAAA;AAC/B,CAAC,CAAA;AA9BY,QAAA,WAAW,eA8BvB;AAED,IAAM,UAAU,OAAG,WAAG,+FAAA,2BAErB,IAAA,CAAA;AAED,SAAS,cAAc,CAAuD,IAA0B;IACtG,OAAO,OAAO,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAA,KAAK,QAAQ,CAAA;AACvC,CAAC"}

package/dist/components/material/GameTable/DynamicItemsDisplay.d.ts

@@ -1,4 +1,4 @@
-import { Interpolation, Theme } from '@emotion/react';
-export declare const DynamicItemsDisplay: (props: {
-    css?: Interpolation<Theme>;
-}) => JSX.Element;
+import { Interpolation, Theme } from '@emotion/react';
+export declare const DynamicItemsDisplay: (props: {
+    css?: Interpolation<Theme>;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/material/GameTable/DynamicItemsDisplay.js

@@ -1,89 +1,89 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicItemsDisplay = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_i18next_1 = require("react-i18next");
-var hooks_1 = require("../../../hooks");
-var DraggableMaterial_1 = require("../DraggableMaterial");
-var focus_1 = require("./focus");
-var DynamicItemsDisplay = function (props) {
-    var context = (0, hooks_1.useMaterialContext)();
-    var items = context.rules.game.items;
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.entries(items).map(function (_a) {
-            var _b = __read(_a, 2), stringType = _b[0], items = _b[1];
-            return items && (0, jsx_runtime_1.jsx)(DynamicItemsTypeDisplay, __assign({ type: parseInt(stringType), items: items }, props), stringType);
-        }) });
-};
-exports.DynamicItemsDisplay = DynamicItemsDisplay;
-var DynamicItemsTypeDisplay = function (_a) {
-    var type = _a.type, items = _a.items, props = __rest(_a, ["type", "items"]);
-    var context = (0, hooks_1.useMaterialContext)();
-    var focus = (0, focus_1.useFocusContext)().focus;
-    var locators = context.locators;
-    var t = (0, react_i18next_1.useTranslation)().t;
-    var description = context.material[type];
-    if (!description)
-        return null;
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map(function (item, index) {
-            var _a;
-            var locator = locators[item.location.type];
-            return __spreadArray([], __read(Array((_a = item.quantity) !== null && _a !== void 0 ? _a : 1)), false).map(function (_, displayIndex) {
-                var _a;
-                var itemContext = __assign(__assign({}, context), { type: type, index: index, displayIndex: displayIndex });
-                if (locator === null || locator === void 0 ? void 0 : locator.hide(item, itemContext))
-                    return null;
-                var isFocused = focus === null || focus === void 0 ? void 0 : focus.materials.some(function (material) {
-                    return material.type === type && material.getIndexes().includes(index);
-                });
-                return (0, jsx_runtime_1.jsx)(DraggableMaterial_1.DraggableMaterial, __assign({ highlight: description.highlight(item, itemContext), type: type, index: index, displayIndex: displayIndex, isFocused: isFocused, title: (_a = description.getTooltip(item, t, itemContext)) !== null && _a !== void 0 ? _a : undefined }, props), "".concat(type, "_").concat(index, "_").concat(displayIndex));
-            });
-        }) });
-};
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicItemsDisplay = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_i18next_1 = require("react-i18next");
+var hooks_1 = require("../../../hooks");
+var DraggableMaterial_1 = require("../DraggableMaterial");
+var focus_1 = require("./focus");
+var DynamicItemsDisplay = function (props) {
+    var context = (0, hooks_1.useMaterialContext)();
+    var items = context.rules.game.items;
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.entries(items).map(function (_a) {
+            var _b = __read(_a, 2), stringType = _b[0], items = _b[1];
+            return items && (0, jsx_runtime_1.jsx)(DynamicItemsTypeDisplay, __assign({ type: parseInt(stringType), items: items }, props), stringType);
+        }) });
+};
+exports.DynamicItemsDisplay = DynamicItemsDisplay;
+var DynamicItemsTypeDisplay = function (_a) {
+    var type = _a.type, items = _a.items, props = __rest(_a, ["type", "items"]);
+    var context = (0, hooks_1.useMaterialContext)();
+    var focus = (0, focus_1.useFocusContext)().focus;
+    var locators = context.locators;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var description = context.material[type];
+    if (!description)
+        return null;
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map(function (item, index) {
+            var _a;
+            var locator = locators[item.location.type];
+            return __spreadArray([], __read(Array((_a = item.quantity) !== null && _a !== void 0 ? _a : 1)), false).map(function (_, displayIndex) {
+                var _a;
+                var itemContext = __assign(__assign({}, context), { type: type, index: index, displayIndex: displayIndex });
+                if (locator === null || locator === void 0 ? void 0 : locator.hide(item, itemContext))
+                    return null;
+                var isFocused = focus === null || focus === void 0 ? void 0 : focus.materials.some(function (material) {
+                    return material.type === type && material.getIndexes().includes(index);
+                });
+                return (0, jsx_runtime_1.jsx)(DraggableMaterial_1.DraggableMaterial, __assign({ highlight: description.highlight(item, itemContext), type: type, index: index, displayIndex: displayIndex, isFocused: isFocused, title: (_a = description.getTooltip(item, t, itemContext)) !== null && _a !== void 0 ? _a : undefined }, props), "".concat(type, "_").concat(index, "_").concat(displayIndex));
+            });
+        }) });
+};
 //# sourceMappingURL=DynamicItemsDisplay.js.map

package/dist/components/material/GameTable/GameMaterialDisplay.d.ts

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
-type GameMaterialDisplayProps = PropsWithChildren<{
-    left: number;
-    top: number;
-}>;
-export declare const GameMaterialDisplay: ({ left, top, children }: GameMaterialDisplayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+import { PropsWithChildren } from 'react';
+type GameMaterialDisplayProps = PropsWithChildren<{
+    left: number;
+    top: number;
+}>;
+export declare const GameMaterialDisplay: ({ left, top, children }: GameMaterialDisplayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/material/GameTable/GameMaterialDisplay.js

@@ -1,34 +1,34 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GameMaterialDisplay = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-var react_1 = require("@emotion/react");
-var rules_api_1 = require("@gamepark/rules-api");
-var hooks_1 = require("../../../hooks");
-var dialogs_1 = require("../../dialogs");
-var MaterialTutorialDisplay_1 = require("../../tutorial/MaterialTutorialDisplay");
-var DropPreview_1 = require("./DropPreview");
-var DynamicItemsDisplay_1 = require("./DynamicItemsDisplay");
-var focus_1 = require("./focus");
-var StaticItemsDisplay_1 = require("./StaticItemsDisplay");
-var StaticLocationsDisplay_1 = require("./StaticLocationsDisplay");
-var displayHelp = rules_api_1.MaterialMoveBuilder.displayHelp;
-var GameMaterialDisplay = function (_a) {
-    var left = _a.left, top = _a.top, children = _a.children;
-    var rules = (0, hooks_1.useRules)();
-    var play = (0, hooks_1.usePlay)();
-    if (!rules || !rules.game)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    var game = rules.game;
-    var position = defaultPosition(left, top);
-    return (0, jsx_runtime_1.jsxs)(focus_1.FocusProvider, { children: [(0, jsx_runtime_1.jsx)(StaticLocationsDisplay_1.StaticLocationsDisplay, { css: position }), (0, jsx_runtime_1.jsx)(StaticItemsDisplay_1.StaticItemsDisplay, { css: position }), (0, jsx_runtime_1.jsx)(DynamicItemsDisplay_1.DynamicItemsDisplay, { css: position }), (0, jsx_runtime_1.jsx)(DropPreview_1.DropPreview, { css: position }), (0, jsx_runtime_1.jsx)(dialogs_1.MaterialRulesDialog, { open: !!(game === null || game === void 0 ? void 0 : game.helpDisplay), close: function () { return play(displayHelp(undefined), { transient: true }); } }), (game === null || game === void 0 ? void 0 : game.tutorial) && (0, jsx_runtime_1.jsx)(MaterialTutorialDisplay_1.MaterialTutorialDisplay, {}), children] });
-};
-exports.GameMaterialDisplay = GameMaterialDisplay;
-var defaultPosition = function (left, top) { return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: ", "em;\n  top: ", "em;\n  transform-style: preserve-3d;\n"], ["\n  position: absolute;\n  left: ", "em;\n  top: ", "em;\n  transform-style: preserve-3d;\n"])), left, top); };
-var templateObject_1;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GameMaterialDisplay = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var rules_api_1 = require("@gamepark/rules-api");
+var hooks_1 = require("../../../hooks");
+var dialogs_1 = require("../../dialogs");
+var MaterialTutorialDisplay_1 = require("../../tutorial/MaterialTutorialDisplay");
+var DropPreview_1 = require("./DropPreview");
+var DynamicItemsDisplay_1 = require("./DynamicItemsDisplay");
+var focus_1 = require("./focus");
+var StaticItemsDisplay_1 = require("./StaticItemsDisplay");
+var StaticLocationsDisplay_1 = require("./StaticLocationsDisplay");
+var displayHelp = rules_api_1.MaterialMoveBuilder.displayHelp;
+var GameMaterialDisplay = function (_a) {
+    var left = _a.left, top = _a.top, children = _a.children;
+    var rules = (0, hooks_1.useRules)();
+    var play = (0, hooks_1.usePlay)();
+    if (!rules || !rules.game)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    var game = rules.game;
+    var position = defaultPosition(left, top);
+    return (0, jsx_runtime_1.jsxs)(focus_1.FocusProvider, { children: [(0, jsx_runtime_1.jsx)(StaticLocationsDisplay_1.StaticLocationsDisplay, { css: position }), (0, jsx_runtime_1.jsx)(StaticItemsDisplay_1.StaticItemsDisplay, { css: position }), (0, jsx_runtime_1.jsx)(DynamicItemsDisplay_1.DynamicItemsDisplay, { css: position }), (0, jsx_runtime_1.jsx)(DropPreview_1.DropPreview, { css: position }), (0, jsx_runtime_1.jsx)(dialogs_1.MaterialRulesDialog, { open: !!(game === null || game === void 0 ? void 0 : game.helpDisplay), close: function () { return play(displayHelp(undefined), { transient: true }); } }), (game === null || game === void 0 ? void 0 : game.tutorial) && (0, jsx_runtime_1.jsx)(MaterialTutorialDisplay_1.MaterialTutorialDisplay, {}), children] });
+};
+exports.GameMaterialDisplay = GameMaterialDisplay;
+var defaultPosition = function (left, top) { return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: ", "em;\n  top: ", "em;\n  transform-style: preserve-3d;\n"], ["\n  position: absolute;\n  left: ", "em;\n  top: ", "em;\n  transform-style: preserve-3d;\n"])), left, top); };
+var templateObject_1;
 //# sourceMappingURL=GameMaterialDisplay.js.map

package/dist/components/material/GameTable/GameTable.d.ts

@@ -1,20 +1,20 @@
-/** @jsxImportSource @emotion/react */
-import { CollisionDetection } from '@dnd-kit/core';
-import { FC, HTMLAttributes } from 'react';
-export type GameTableProps = {
-    collisionAlgorithm?: CollisionDetection;
-    snapToCenter?: boolean;
-    xMin: number;
-    xMax: number;
-    yMin: number;
-    yMax: number;
-    perspective?: number;
-    margin?: {
-        left: number;
-        top: number;
-        right: number;
-        bottom: number;
-    };
-    verticalCenter?: boolean;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const GameTable: FC<GameTableProps>;
+/** @jsxImportSource @emotion/react */
+import { CollisionDetection } from '@dnd-kit/core';
+import { FC, HTMLAttributes } from 'react';
+export type GameTableProps = {
+    collisionAlgorithm?: CollisionDetection;
+    snapToCenter?: boolean;
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+    perspective?: number;
+    margin?: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+    verticalCenter?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const GameTable: FC<GameTableProps>;

package/dist/components/material/GameTable/GameTable.js

@@ -1,144 +1,144 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GameTable = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-var core_1 = require("@dnd-kit/core");
-var modifiers_1 = require("@dnd-kit/modifiers");
-var react_1 = require("@emotion/react");
-var rules_api_1 = require("@gamepark/rules-api");
-var react_2 = require("react");
-var react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
-var css_1 = require("../../../css");
-var hooks_1 = require("../../../hooks");
-var zoom_pan_pinch_1 = require("../../../utilities/zoom-pan-pinch");
-var DraggableMaterial_1 = require("../DraggableMaterial");
-var getBestDropMove_1 = require("../utils/getBestDropMove");
-var GameMaterialDisplay_1 = require("./GameMaterialDisplay");
-var dropItemMove = rules_api_1.MaterialMoveBuilder.dropItemMove;
-var wheel = { step: 0.05 };
-var doubleClick = { disabled: true };
-var pointerSensorOptions = { activationConstraint: { distance: 2 } };
-var GameTable = function (_a) {
-    var collisionAlgorithm = _a.collisionAlgorithm, _b = _a.snapToCenter, snapToCenter = _b === void 0 ? true : _b, perspective = _a.perspective, xMin = _a.xMin, xMax = _a.xMax, yMin = _a.yMin, yMax = _a.yMax, _c = _a.margin, margin = _c === void 0 ? { left: 0, right: 0, top: 7, bottom: 0 } : _c, verticalCenter = _a.verticalCenter, children = _a.children, props = __rest(_a, ["collisionAlgorithm", "snapToCenter", "perspective", "xMin", "xMax", "yMin", "yMax", "margin", "verticalCenter", "children"]);
-    var _d = __read((0, react_2.useState)(false), 2), dragging = _d[0], setDragging = _d[1];
-    var sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, pointerSensorOptions));
-    var context = (0, hooks_1.useMaterialContext)();
-    var play = (0, hooks_1.usePlay)();
-    var legalMoves = (0, hooks_1.useLegalMoves)();
-    var onDragEnd = (0, react_2.useCallback)(function (event) {
-        var e_1, _a;
-        setDragging(false);
-        var move = (0, getBestDropMove_1.getBestDropMove)(event, context, legalMoves);
-        if (move !== undefined) {
-            if ((0, rules_api_1.isMoveItemsAtOnce)(move)) {
-                try {
-                    for (var _b = __values(move.indexes), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var index = _c.value;
-                        play(dropItemMove(move.itemType, index, 0), { transient: true });
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-            }
-            else if ((0, DraggableMaterial_1.dataIsDisplayedItem)(event.active.data.current)) {
-                var item = event.active.data.current;
-                var type = item.type, index = item.index, displayIndex = item.displayIndex;
-                play(dropItemMove(type, index, displayIndex), { transient: true });
-            }
-            play(move);
-        }
-    }, [context, play, legalMoves]);
-    var ref = (0, react_2.useRef)(null);
-    (0, react_2.useEffect)(function () {
-        var handler = function () {
-            var _a;
-            var zoomPanPinch = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.instance;
-            if (!(zoomPanPinch === null || zoomPanPinch === void 0 ? void 0 : zoomPanPinch.bounds))
-                return;
-            var _b = zoomPanPinch.transformState, positionX = _b.positionX, positionY = _b.positionY, scale = _b.scale;
-            var bounds = (0, zoom_pan_pinch_1.calculateBounds)(zoomPanPinch, scale);
-            var _c = (0, zoom_pan_pinch_1.getMouseBoundedPosition)(positionX, positionY, bounds, true, 0, 0, zoomPanPinch.wrapperComponent), x = _c.x, y = _c.y;
-            zoomPanPinch.setTransformState(scale, x, y);
-        };
-        window.addEventListener('resize', handler);
-        return function () {
-            window.removeEventListener('resize', handler);
-        };
-    }, []);
-    var hm = margin.left + margin.right;
-    var vm = margin.top + margin.bottom;
-    var tableFontSize = 5;
-    var minScale = (100 - vm) / tableFontSize / (yMax - yMin);
-    var maxScale = minScale > 0.9 ? minScale : 1;
-    var ratio = (xMax - xMin) / (yMax - yMin);
-    var ratioWithMargins = ((100 - vm) * ratio + hm) / 100;
-    var panning = (0, react_2.useMemo)(function () { return ({ disabled: dragging }); }, [dragging]);
-    var wrapperStyle = (0, react_2.useMemo)(function () { return computedWrapperClass(margin, vm, hm, ratio, verticalCenter); }, [margin, vm, hm, ratio]);
-    var modifiers = (0, react_2.useMemo)(function () { return snapToCenter ? [modifiers_1.snapCenterToCursor] : undefined; }, [snapToCenter]);
-    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, __assign({ collisionDetection: collisionAlgorithm, measuring: { draggable: { measure: core_1.getClientRect }, droppable: { measure: core_1.getClientRect } }, modifiers: modifiers, sensors: sensors, onDragStart: function () { return setDragging(true); }, onDragEnd: onDragEnd, onDragCancel: function () { return setDragging(false); } }, { children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: [ratioFontSize(ratioWithMargins), wrapperStyle] }), (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, __assign({ ref: ref, minScale: minScale, maxScale: maxScale, initialScale: minScale, centerOnInit: true, wheel: wheel, smooth: false, panning: panning, disablePadding: true, doubleClick: doubleClick }, { children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, __assign({ wrapperClass: "wrapperClass" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ css: [tableCss(xMin, xMax, yMin, yMax), (0, css_1.fontSizeCss)(tableFontSize), perspective && (0, css_1.perspectiveCss)(perspective)] }, props, { children: (0, jsx_runtime_1.jsx)(GameMaterialDisplay_1.GameMaterialDisplay, __assign({ left: -xMin, top: -yMin }, { children: children })) })) })) }))] })));
-};
-exports.GameTable = GameTable;
-var computedWrapperClass = function (margin, vm, hm, ratio, verticalCenter) { return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .wrapperClass {\n    position: absolute;\n    margin: ", "em ", "em ", "em ", "em;\n    transform-style: preserve-3d;\n    height: ", ";\n    height: ", ";\n    width: calc(100vw - ", "em);\n    width: calc(100dvw - ", "em);\n    overflow: visible;\n  }\n"], ["\n  .wrapperClass {\n    position: absolute;\n    margin: ", "em ", "em ", "em ", "em;\n    transform-style: preserve-3d;\n    height: ", ";\n    height: ", ";\n    width: calc(100vw - ", "em);\n    width: calc(100dvw - ", "em);\n    overflow: visible;\n  }\n"])), margin.top, margin.right, margin.bottom, margin.left, verticalCenter ? "calc(100% - ".concat(vm, "em)") : "min(100% - ".concat(vm, "em, (100vw - ").concat(hm, "em) / ").concat(ratio, ")"), verticalCenter ? "calc(100% - ".concat(vm, "em)") : "min(100% - ".concat(vm, "em, (100dvw - ").concat(hm, "em) / ").concat(ratio, ")"), hm, hm); };
-var ratioFontSize = function (ratio) { return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  body {\n    font-size: 1vh;\n    font-size: 1dvh;\n    @media (max-aspect-ratio: ", "/1) {\n      font-size: calc(1vw / ", ");\n      font-size: calc(1dvw / ", ");\n    }\n  }\n"], ["\n  body {\n    font-size: 1vh;\n    font-size: 1dvh;\n    @media (max-aspect-ratio: ", "/1) {\n      font-size: calc(1vw / ", ");\n      font-size: calc(1dvw / ", ");\n    }\n  }\n"])), ratio, ratio, ratio); };
-var tableCss = function (xMin, xMax, yMin, yMax) { return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n  width: ", "em;\n  height: ", "em;\n"], ["\n  transform-style: preserve-3d;\n  width: ", "em;\n  height: ", "em;\n"])), xMax - xMin, yMax - yMin); };
-var templateObject_1, templateObject_2, templateObject_3;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GameTable = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var core_1 = require("@dnd-kit/core");
+var modifiers_1 = require("@dnd-kit/modifiers");
+var react_1 = require("@emotion/react");
+var rules_api_1 = require("@gamepark/rules-api");
+var react_2 = require("react");
+var react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
+var css_1 = require("../../../css");
+var hooks_1 = require("../../../hooks");
+var zoom_pan_pinch_1 = require("../../../utilities/zoom-pan-pinch");
+var DraggableMaterial_1 = require("../DraggableMaterial");
+var getBestDropMove_1 = require("../utils/getBestDropMove");
+var GameMaterialDisplay_1 = require("./GameMaterialDisplay");
+var dropItemMove = rules_api_1.MaterialMoveBuilder.dropItemMove;
+var wheel = { step: 0.05 };
+var doubleClick = { disabled: true };
+var pointerSensorOptions = { activationConstraint: { distance: 2 } };
+var GameTable = function (_a) {
+    var collisionAlgorithm = _a.collisionAlgorithm, _b = _a.snapToCenter, snapToCenter = _b === void 0 ? true : _b, perspective = _a.perspective, xMin = _a.xMin, xMax = _a.xMax, yMin = _a.yMin, yMax = _a.yMax, _c = _a.margin, margin = _c === void 0 ? { left: 0, right: 0, top: 7, bottom: 0 } : _c, verticalCenter = _a.verticalCenter, children = _a.children, props = __rest(_a, ["collisionAlgorithm", "snapToCenter", "perspective", "xMin", "xMax", "yMin", "yMax", "margin", "verticalCenter", "children"]);
+    var _d = __read((0, react_2.useState)(false), 2), dragging = _d[0], setDragging = _d[1];
+    var sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, pointerSensorOptions));
+    var context = (0, hooks_1.useMaterialContext)();
+    var play = (0, hooks_1.usePlay)();
+    var legalMoves = (0, hooks_1.useLegalMoves)();
+    var onDragEnd = (0, react_2.useCallback)(function (event) {
+        var e_1, _a;
+        setDragging(false);
+        var move = (0, getBestDropMove_1.getBestDropMove)(event, context, legalMoves);
+        if (move !== undefined) {
+            if ((0, rules_api_1.isMoveItemsAtOnce)(move)) {
+                try {
+                    for (var _b = __values(move.indexes), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var index = _c.value;
+                        play(dropItemMove(move.itemType, index, 0), { transient: true });
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            else if ((0, DraggableMaterial_1.dataIsDisplayedItem)(event.active.data.current)) {
+                var item = event.active.data.current;
+                var type = item.type, index = item.index, displayIndex = item.displayIndex;
+                play(dropItemMove(type, index, displayIndex), { transient: true });
+            }
+            play(move);
+        }
+    }, [context, play, legalMoves]);
+    var ref = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(function () {
+        var handler = function () {
+            var _a;
+            var zoomPanPinch = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.instance;
+            if (!(zoomPanPinch === null || zoomPanPinch === void 0 ? void 0 : zoomPanPinch.bounds))
+                return;
+            var _b = zoomPanPinch.transformState, positionX = _b.positionX, positionY = _b.positionY, scale = _b.scale;
+            var bounds = (0, zoom_pan_pinch_1.calculateBounds)(zoomPanPinch, scale);
+            var _c = (0, zoom_pan_pinch_1.getMouseBoundedPosition)(positionX, positionY, bounds, true, 0, 0, zoomPanPinch.wrapperComponent), x = _c.x, y = _c.y;
+            zoomPanPinch.setTransformState(scale, x, y);
+        };
+        window.addEventListener('resize', handler);
+        return function () {
+            window.removeEventListener('resize', handler);
+        };
+    }, []);
+    var hm = margin.left + margin.right;
+    var vm = margin.top + margin.bottom;
+    var tableFontSize = 5;
+    var minScale = (100 - vm) / tableFontSize / (yMax - yMin);
+    var maxScale = minScale > 0.9 ? minScale : 1;
+    var ratio = (xMax - xMin) / (yMax - yMin);
+    var ratioWithMargins = ((100 - vm) * ratio + hm) / 100;
+    var panning = (0, react_2.useMemo)(function () { return ({ disabled: dragging }); }, [dragging]);
+    var wrapperStyle = (0, react_2.useMemo)(function () { return computedWrapperClass(margin, vm, hm, ratio, verticalCenter); }, [margin, vm, hm, ratio]);
+    var modifiers = (0, react_2.useMemo)(function () { return snapToCenter ? [modifiers_1.snapCenterToCursor] : undefined; }, [snapToCenter]);
+    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { collisionDetection: collisionAlgorithm, measuring: { draggable: { measure: core_1.getClientRect }, droppable: { measure: core_1.getClientRect } }, modifiers: modifiers, sensors: sensors, onDragStart: function () { return setDragging(true); }, onDragEnd: onDragEnd, onDragCancel: function () { return setDragging(false); }, children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: [ratioFontSize(ratioWithMargins), wrapperStyle] }), (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { ref: ref, minScale: minScale, maxScale: maxScale, initialScale: minScale, centerOnInit: true, wheel: wheel, smooth: false, panning: panning, disablePadding: true, doubleClick: doubleClick, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, { wrapperClass: "wrapperClass", children: (0, jsx_runtime_1.jsx)("div", __assign({ css: [tableCss(xMin, xMax, yMin, yMax), (0, css_1.fontSizeCss)(tableFontSize), perspective && (0, css_1.perspectiveCss)(perspective)] }, props, { children: (0, jsx_runtime_1.jsx)(GameMaterialDisplay_1.GameMaterialDisplay, { left: -xMin, top: -yMin, children: children }) })) }) })] }));
+};
+exports.GameTable = GameTable;
+var computedWrapperClass = function (margin, vm, hm, ratio, verticalCenter) { return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .wrapperClass {\n    position: absolute;\n    margin: ", "em ", "em ", "em ", "em;\n    transform-style: preserve-3d;\n    height: ", ";\n    height: ", ";\n    width: calc(100vw - ", "em);\n    width: calc(100dvw - ", "em);\n    overflow: visible;\n  }\n"], ["\n  .wrapperClass {\n    position: absolute;\n    margin: ", "em ", "em ", "em ", "em;\n    transform-style: preserve-3d;\n    height: ", ";\n    height: ", ";\n    width: calc(100vw - ", "em);\n    width: calc(100dvw - ", "em);\n    overflow: visible;\n  }\n"])), margin.top, margin.right, margin.bottom, margin.left, verticalCenter ? "calc(100% - ".concat(vm, "em)") : "min(100% - ".concat(vm, "em, (100vw - ").concat(hm, "em) / ").concat(ratio, ")"), verticalCenter ? "calc(100% - ".concat(vm, "em)") : "min(100% - ".concat(vm, "em, (100dvw - ").concat(hm, "em) / ").concat(ratio, ")"), hm, hm); };
+var ratioFontSize = function (ratio) { return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  body {\n    font-size: 1vh;\n    font-size: 1dvh;\n    @media (max-aspect-ratio: ", "/1) {\n      font-size: calc(1vw / ", ");\n      font-size: calc(1dvw / ", ");\n    }\n  }\n"], ["\n  body {\n    font-size: 1vh;\n    font-size: 1dvh;\n    @media (max-aspect-ratio: ", "/1) {\n      font-size: calc(1vw / ", ");\n      font-size: calc(1dvw / ", ");\n    }\n  }\n"])), ratio, ratio, ratio); };
+var tableCss = function (xMin, xMax, yMin, yMax) { return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n  width: ", "em;\n  height: ", "em;\n"], ["\n  transform-style: preserve-3d;\n  width: ", "em;\n  height: ", "em;\n"])), xMax - xMin, yMax - yMin); };
+var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=GameTable.js.map