@gamepark/react-game 6.0.0-alpha.0 → 6.1.0

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

@@ -1,8 +1,4 @@
 "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++) {
@@ -32,47 +28,62 @@ var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var rules_api_1 = require("@gamepark/rules-api");
-var pickBy_1 = __importDefault(require("lodash/pickBy"));
-var utils_1 = require("../utils");
 var MaterialComponent_1 = require("../MaterialComponent");
 var css_1 = require("../../../css");
 var DraggableMaterial_1 = require("../DraggableMaterial");
 var dialogs_1 = require("../../dialogs");
-var core_1 = require("@dnd-kit/core");
-var react_2 = require("@emotion/react");
-var GameProvider_1 = require("../../GameProvider");
+var MaterialTutorialDisplay_1 = require("../../tutorial/MaterialTutorialDisplay");
+var useTutorialStep_1 = require("../../../hooks/useTutorialStep");
+var tutorial_1 = require("../../tutorial");
+var locations_1 = require("../locations");
+var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
+var react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
 var GameMaterialDisplay = function () {
-    var _a, _b;
-    var context = (0, react_1.useContext)(GameProvider_1.gameContext);
-    var material = (_a = context.material) !== null && _a !== void 0 ? _a : {};
-    var locators = (_b = context.locators) !== null && _b !== void 0 ? _b : {};
-    var player = (0, hooks_1.usePlayerId)();
+    var context = (0, hooks_1.useMaterialContext)();
+    var material = context.material;
+    var locators = context.locators;
     var rules = (0, hooks_1.useRules)();
-    var legalMoves = (0, hooks_1.useLegalMoves)();
     var play = (0, hooks_1.usePlay)();
-    var _c = (0, react_1.useState)(), draggedItem = _c[0], setDraggedItem = _c[1];
-    (0, core_1.useDndMonitor)({
-        onDragStart: function (event) { return (0, DraggableMaterial_1.isDraggedItem)(event.active.data.current) && setDraggedItem(event.active.data.current); },
-        onDragEnd: function () { return setDraggedItem(undefined); }
-    });
+    var zoomToElements = (0, hooks_1.useZoomToElements)();
+    var resetTransform = (0, react_zoom_pan_pinch_1.useControls)().resetTransform;
+    var focusRefs = (0, react_1.useRef)(new Set());
+    var tutorialStep = (0, useTutorialStep_1.useTutorialStep)();
+    var tutorialPopup = !(rules === null || rules === void 0 ? void 0 : rules.game.tutorialPopupClosed) && (tutorialStep === null || tutorialStep === void 0 ? void 0 : tutorialStep.popup);
+    var tutorialFocus = (0, react_1.useMemo)(function () {
+        var _a;
+        focusRefs.current = new Set();
+        var tutorialFocus = (rules === null || rules === void 0 ? void 0 : rules.game) ? (_a = tutorialStep === null || tutorialStep === void 0 ? void 0 : tutorialStep.focus) === null || _a === void 0 ? void 0 : _a.call(tutorialStep, rules.game) : undefined;
+        if (!tutorialFocus) {
+            resetTransform(1000);
+        }
+        return tutorialFocus;
+    }, [tutorialStep]);
+    var addFocusRef = (0, react_1.useCallback)(function (ref) {
+        if (!ref || focusRefs.current.has(ref))
+            return;
+        focusRefs.current.add(ref);
+        if ((0, tutorial_1.countTutorialFocusRefs)(tutorialFocus) === focusRefs.current.size) {
+            var elements_1 = Array.from(focusRefs.current);
+            setTimeout(function () { return zoomToElements(elements_1, undefined, 1000); });
+        }
+    }, [tutorialFocus]);
     if (!rules)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     var game = rules === null || rules === void 0 ? void 0 : rules.game;
-    var commonContext = { game: game, player: player, material: material, locators: locators };
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(material).map(function (_a) {
                 var stringType = _a[0], description = _a[1];
-                if (!description.items)
-                    return null;
                 var type = parseInt(stringType);
-                var innerLocators = (0, pickBy_1.default)(locators, function (locator) { return locator.parentItemType === type; });
-                var innerLocations = Object.keys(innerLocators).map(function (type) { return parseInt(type); });
-                return description.items(game, player).map(function (item) {
+                return description.getStaticItems(context).map(function (item, index) {
                     var _a;
-                    var legalMovesTo = innerLocations.length > 0 ? legalMoves.filter(function (move) { return rules.isMoveTrigger(move, function (move) { return (0, utils_1.isMoveOnItem)(move, item.id, innerLocations); }); }) : undefined;
                     var locator = locators[item.location.type];
-                    return __spreadArray([], Array((_a = item.quantity) !== null && _a !== void 0 ? _a : 1), true).map(function (_, index) {
-                        var context = __assign(__assign({}, commonContext), { type: type, index: index });
-                        return (0, jsx_runtime_1.jsx)(MaterialComponent_1.MaterialComponent, { type: type, itemId: item.id, withLocations: true, legalMovesTo: legalMovesTo, css: [css_1.pointerCursorCss, css_1.transformCss.apply(void 0, locator.transformItem(item, context))], onShortClick: function () { return play((0, rules_api_1.displayMaterialRules)(type, index, item), { local: true }); } }, "".concat(stringType, "_").concat(index));
+                    return __spreadArray([], Array((_a = item.quantity) !== null && _a !== void 0 ? _a : 1), true).map(function (_, displayIndex) {
+                        var itemContext = __assign(__assign({}, context), { type: type, index: index, displayIndex: displayIndex });
+                        var innerLocations = description.getLocations(item, itemContext);
+                        var focus = (0, tutorial_1.isStaticItemFocus)(type, item, tutorialFocus);
+                        var locationsFocus = tutorialPopup ? getLocationsFocus(tutorialFocus).filter(function (location) { return innerLocations.some(function (innerLocation) { return (0, fast_deep_equal_1.default)(innerLocation, location); }); }) : [];
+                        return (0, jsx_runtime_1.jsxs)(MaterialComponent_1.MaterialComponent, __assign({ type: type, itemId: item.id, playDown: tutorialPopup && !focus && !locationsFocus.length, ref: focus ? addFocusRef : undefined, css: [css_1.pointerCursorCss, css_1.transformCss.apply(void 0, locator.transformItem(item, itemContext))], onShortClick: function () { return play((0, rules_api_1.displayMaterialRules)(type, item), { local: true }); } }, { children: [(0, jsx_runtime_1.jsx)(locations_1.LocationsMask, { locations: locationsFocus }), innerLocations.map(function (location) {
+                                    return (0, jsx_runtime_1.jsx)(locations_1.SimpleDropArea, { location: location, ref: (0, tutorial_1.isLocationFocus)(location, tutorialFocus) ? addFocusRef : undefined }, JSON.stringify(location));
+                                })] }), "".concat(type, "_").concat(index, "_").concat(displayIndex));
                     });
                 });
             }), rules && game && Object.entries(game.items).map(function (_a) {
@@ -83,25 +94,33 @@ var GameMaterialDisplay = function () {
                 return items.map(function (item, index) {
                     var _a;
                     var locator = locators[item.location.type];
+                    var description = material[type];
+                    var focus = (0, tutorial_1.isItemFocus)(type, index, tutorialFocus);
                     return __spreadArray([], Array((_a = item.quantity) !== null && _a !== void 0 ? _a : 1), true).map(function (_, displayIndex) {
-                        var context = __assign(__assign({}, commonContext), { type: type, index: displayIndex });
-                        if (locator.hide(item, context))
+                        var itemContext = __assign(__assign({}, context), { type: type, index: index, displayIndex: displayIndex });
+                        if (locator.hide(item, itemContext))
                             return null;
-                        var itemMoves = legalMoves.filter(function (move) { return rules.isMoveTrigger(move, function (move) { return (0, utils_1.isMoveThisItem)(move, type, index); }); });
-                        var draggingToSameLocation = !!draggedItem && legalMoves.some(function (move) {
-                            return (0, utils_1.isMoveThisItemToLocation)(move, draggedItem.type, draggedItem.index, item.location);
-                        });
-                        return (0, jsx_runtime_1.jsx)(DraggableMaterial_1.DraggableMaterial, { type: type, item: item, index: index, displayIndex: displayIndex, withLocations: true, disabled: !itemMoves.length, postTransform: locator.transformItem(item, context).join(' '), css: draggingToSameLocation && noPointerEvents, onShortClick: function () { return play((0, rules_api_1.displayMaterialRules)(type, index, item), { local: true }); }, onLongClick: itemMoves.length === 1 ?
-                                function () { return play(itemMoves[0], { delayed: rules.isUnpredictableMove(itemMoves[0], player) }); }
-                                : undefined }, "".concat(type, "_").concat(index, "_").concat(displayIndex));
+                        var innerLocations = description.getLocations(item, itemContext);
+                        var locationsFocus = tutorialPopup ? getLocationsFocus(tutorialFocus).filter(function (location) { return innerLocations.some(function (innerLocation) { return (0, fast_deep_equal_1.default)(innerLocation, location); }); }) : [];
+                        return (0, jsx_runtime_1.jsxs)(DraggableMaterial_1.DraggableMaterial, __assign({ type: type, index: index, displayIndex: displayIndex, playDown: tutorialPopup && !focus && !locationsFocus.length, ref: focus ? addFocusRef : undefined, onShortClick: function () { return play((0, rules_api_1.displayMaterialRules)(type, item, index), { local: true }); } }, { children: [(0, jsx_runtime_1.jsx)(locations_1.LocationsMask, { locations: locationsFocus }), innerLocations.map(function (location) {
+                                    return (0, jsx_runtime_1.jsx)(locations_1.SimpleDropArea, { location: location, ref: (0, tutorial_1.isLocationFocus)(location, tutorialFocus) ? addFocusRef : undefined }, JSON.stringify(location));
+                                })] }), "".concat(type, "_").concat(index, "_").concat(displayIndex));
                     });
                 });
-            }), Object.entries(locators).map(function (_a) {
-                var locator = _a[1];
-                return locator.createLocations(legalMoves, rules, commonContext);
-            }), (0, jsx_runtime_1.jsx)(dialogs_1.MaterialRulesDialog, { open: !!(game === null || game === void 0 ? void 0 : game.rulesDisplay), close: function () { return play(rules_api_1.closeRulesDisplay, { local: true }); } })] });
+            }), Object.values(locators).map(function (locator) {
+                var _a;
+                return (_a = locator.locationDescription) === null || _a === void 0 ? void 0 : _a.getLocations(context).map(function (location) {
+                    return (0, jsx_runtime_1.jsx)(locations_1.SimpleDropArea, { location: location, ref: (0, tutorial_1.isLocationFocus)(location, tutorialFocus) ? addFocusRef : undefined }, JSON.stringify(location));
+                });
+            }), (0, jsx_runtime_1.jsx)(dialogs_1.MaterialRulesDialog, { open: !!(game === null || game === void 0 ? void 0 : game.rulesDisplay), close: function () { return play(rules_api_1.closeRulesDisplay, { local: true }); } }), (game === null || game === void 0 ? void 0 : game.tutorialStep) !== undefined && (0, jsx_runtime_1.jsx)(MaterialTutorialDisplay_1.MaterialTutorialDisplay, {})] });
 };
 exports.GameMaterialDisplay = GameMaterialDisplay;
-var noPointerEvents = (0, react_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
-var templateObject_1;
+var getLocationsFocus = function (focus) {
+    if (!focus)
+        return [];
+    if (Array.isArray(focus)) {
+        return focus.filter(tutorial_1.isLocationBuilder).map(function (builder) { return builder.location; });
+    }
+    return (0, tutorial_1.isLocationBuilder)(focus) ? [focus.location] : [];
+};
 //# sourceMappingURL=GameMaterialDisplay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GameMaterialDisplay.js","sourceRoot":"","sources":["../../../../src/components/material/GameTable/GameMaterialDisplay.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GameMaterialDisplay.js","sourceRoot":"","sources":["../../../../src/components/material/GameTable/GameMaterialDisplay.tsx"],"names":[],"mappings":"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"}

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

@@ -1,12 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { FC } from 'react';
+import { CollisionDetection } from '@dnd-kit/core';
 export type GameTableProps = {
+    collisionAlgorithm?: CollisionDetection;
     xMin: number;
     xMax: number;
     yMin: number;
     yMax: number;
-    zoomMin?: number;
-    zoomMax?: number;
     perspective?: number;
     margin?: {
         left: number;

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

@@ -1,4 +1,8 @@
 "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++) {
@@ -10,6 +14,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GameTable = void 0;
 var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -20,34 +27,75 @@ var react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
 var hooks_1 = require("../../../hooks");
 var core_1 = require("@dnd-kit/core");
 var modifiers_1 = require("@dnd-kit/modifiers");
-var utils_1 = require("../utils");
-var GameTableContent_1 = require("./GameTableContent");
-var useStocks_1 = require("../../../hooks/useStocks");
 var DraggableMaterial_1 = require("../DraggableMaterial");
-var DropAreas_1 = require("../DropAreas");
+var react_2 = require("@emotion/react");
+var emotion_normalize_1 = __importDefault(require("emotion-normalize"));
+var css_1 = require("../../../css");
+var GameMaterialDisplay_1 = require("./GameMaterialDisplay");
+var bounds_util_1 = require("../../../utilities/bounds.util");
 var wheel = { step: 0.05 };
 var doubleClick = { disabled: true };
-var GameTable = function (props) {
-    var _a = props.zoomMin, zoomMin = _a === void 0 ? 1 : _a, _b = props.zoomMax, zoomMax = _b === void 0 ? 1 : _b;
+var GameTable = function (_a) {
+    var collisionAlgorithm = _a.collisionAlgorithm, perspective = _a.perspective, xMin = _a.xMin, xMax = _a.xMax, yMin = _a.yMin, yMax = _a.yMax, _b = _a.margin, margin = _b === void 0 ? { left: 0, right: 0, top: 7, bottom: 0 } : _b;
     var _c = (0, react_1.useState)(false), dragging = _c[0], setDragging = _c[1];
+    var context = (0, hooks_1.useMaterialContext)();
     var play = (0, hooks_1.usePlay)();
-    var playerId = (0, hooks_1.usePlayerId)();
-    var rules = (0, hooks_1.useRules)();
     var legalMoves = (0, hooks_1.useLegalMoves)();
-    var stocks = (0, useStocks_1.useStocks)();
     var onDragEnd = (0, react_1.useCallback)(function (event) {
         setDragging(false);
-        if (event.over && (0, DraggableMaterial_1.isDraggedItem)(event.active.data.current) && (0, DropAreas_1.isDropLocation)(event.over.data.current)) {
-            var _a = event.active.data.current, type_1 = _a.type, index_1 = _a.index, displayIndex = _a.displayIndex;
+        if (event.over && (0, DraggableMaterial_1.dataIsDisplayedItem)(event.active.data.current) && dataIsLocation(event.over.data.current)) {
+            var item_1 = event.active.data.current;
+            var type = item_1.type, index = item_1.index, displayIndex = item_1.displayIndex;
+            var description_1 = context.material[type];
             var location_1 = event.over.data.current;
-            var moves = legalMoves.filter(function (move) { return rules.isMoveTrigger(move, function (move) { return (0, utils_1.isMoveThisItemToLocation)(move, type_1, index_1, location_1, stocks); }); });
+            var locator_1 = context.locators[location_1.type];
+            var moves = legalMoves.filter(function (move) {
+                return description_1.canDrag(move, __assign(__assign({}, context), item_1)) && locator_1.locationDescription.canDrop(move, location_1, context);
+            });
             if (moves.length === 1) {
-                play((0, rules_api_1.dropItemMove)(type_1, index_1, displayIndex), { local: true });
-                play(moves[0], { delayed: rules.isUnpredictableMove(moves[0], playerId) });
+                play((0, rules_api_1.dropItemMove)(type, index, displayIndex), { local: true });
+                play(moves[0]);
             }
         }
-    }, [play, rules, legalMoves]);
-    return ((0, jsx_runtime_1.jsx)(core_1.DndContext, __assign({ measuring: { draggable: { measure: core_1.getClientRect }, droppable: { measure: core_1.getClientRect } }, modifiers: [modifiers_1.snapCenterToCursor], onDragStart: function () { return setDragging(true); }, onDragEnd: onDragEnd, onDragCancel: function () { return setDragging(false); } }, { children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, __assign({ minScale: zoomMin / zoomMax, maxScale: 1, initialScale: zoomMin / zoomMax, centerOnInit: true, wheel: wheel, panning: { disabled: dragging }, disablePadding: true, doubleClick: doubleClick }, { children: (0, jsx_runtime_1.jsx)(GameTableContent_1.GameTableContent, __assign({}, props)) })) })));
+    }, [context, play, legalMoves]);
+    var ref = (0, react_1.useRef)(null);
+    (0, react_1.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, bounds_util_1.calculateBounds)(zoomPanPinch, scale);
+            var _c = (0, bounds_util_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 = 8;
+    var minScale = (100 - vm) / tableFontSize / (yMax - yMin);
+    var ratio = (xMax - xMin) / (yMax - yMin);
+    var ratioWithMargins = ((100 - vm) * ratio + hm) / 100;
+    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_1.snapCenterToCursor], onDragStart: function () { return setDragging(true); }, onDragEnd: onDragEnd, onDragCancel: function () { return setDragging(false); } }, { children: [(0, jsx_runtime_1.jsx)(react_2.Global, { styles: [emotion_normalize_1.default, globalStyle, globalFontSize(ratioWithMargins)] }), (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, __assign({ ref: ref, minScale: minScale, maxScale: 1, initialScale: minScale, centerOnInit: true, wheel: wheel, smooth: false, panning: { disabled: dragging }, disablePadding: true, doubleClick: doubleClick }, { children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, __assign({ wrapperStyle: {
+                        position: 'absolute',
+                        margin: "".concat(margin.top, "em ").concat(margin.right, "em ").concat(margin.bottom, "em ").concat(margin.left, "em"),
+                        transformStyle: 'preserve-3d',
+                        height: "min(100% - ".concat(vm, "em, (100vw - ").concat(hm, "em) / ").concat(ratio, ")"),
+                        width: "calc(100vw - ".concat(hm, "em)"),
+                        overflow: 'visible'
+                    } }, { 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)] }, { children: (0, jsx_runtime_1.jsx)(GameMaterialDisplay_1.GameMaterialDisplay, {}) })) })) }))] })));
 };
 exports.GameTable = GameTable;
+function dataIsLocation(data) {
+    return typeof (data === null || data === void 0 ? void 0 : data.type) === 'number';
+}
+var globalStyle = (0, react_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  html {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n\n  *, *::before, *::after {\n    -webkit-box-sizing: inherit;\n    -moz-box-sizing: inherit;\n    box-sizing: inherit;\n  }\n\n  body {\n    margin: 0;\n    font-family: 'Oswald', \"Roboto Light\", serif;\n  }\n\n  #root {\n    position: absolute;\n    height: 100vh;\n    width: 100vw;\n    user-select: none;\n    overflow: hidden;\n    background-image: url(", ");\n    background-color: white;\n    background-size: cover;\n    background-position: center;\n    color: #eee;\n\n    &:before {\n      content: '';\n      display: block;\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.8);\n    }\n  }\n"], ["\n  html {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n\n  *, *::before, *::after {\n    -webkit-box-sizing: inherit;\n    -moz-box-sizing: inherit;\n    box-sizing: inherit;\n  }\n\n  body {\n    margin: 0;\n    font-family: 'Oswald', \"Roboto Light\", serif;\n  }\n\n  #root {\n    position: absolute;\n    height: 100vh;\n    width: 100vw;\n    user-select: none;\n    overflow: hidden;\n    background-image: url(", ");\n    background-color: white;\n    background-size: cover;\n    background-position: center;\n    color: #eee;\n\n    &:before {\n      content: '';\n      display: block;\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.8);\n    }\n  }\n"])), process.env.PUBLIC_URL + '/cover-1920.jpg');
+var globalFontSize = function (ratio) { return (0, react_2.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  body {\n    font-size: 1vh;\n    @media (max-aspect-ratio: ", "/1) {\n      font-size: calc(1vw / ", ");\n    }\n  }\n"], ["\n  body {\n    font-size: 1vh;\n    @media (max-aspect-ratio: ", "/1) {\n      font-size: calc(1vw / ", ");\n    }\n  }\n"])), ratio, ratio); };
+var tableCss = function (xMin, xMax, yMin, yMax) { return (0, react_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n  width: ", "em;\n  height: ", "em;\n\n  > * {\n    position: absolute;\n    top: ", "em;\n    left: ", "em;\n    transform-style: preserve-3d;\n  }\n"], ["\n  transform-style: preserve-3d;\n  width: ", "em;\n  height: ", "em;\n\n  > * {\n    position: absolute;\n    top: ", "em;\n    left: ", "em;\n    transform-style: preserve-3d;\n  }\n"])), xMax - xMin, yMax - yMin, -yMin, -xMin); };
+var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=GameTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GameTable.js","sourceRoot":"","sources":["../../../../src/components/material/GameTable/GameTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GameTable.js","sourceRoot":"","sources":["../../../../src/components/material/GameTable/GameTable.tsx"],"names":[],"mappings":"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"}

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

@@ -14,6 +14,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GameTableContent = void 0;
 var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -23,26 +26,38 @@ var react_2 = require("@emotion/react");
 var react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
 var css_1 = require("../../../css");
 var GameMaterialDisplay_1 = require("./GameMaterialDisplay");
+var bounds_util_1 = require("../../../utilities/bounds.util");
+var emotion_normalize_1 = __importDefault(require("emotion-normalize"));
 var GameTableContent = function (props) {
-    var perspective = props.perspective, xMin = props.xMin, xMax = props.xMax, yMin = props.yMin, yMax = props.yMax, _a = props.zoomMax, zoomMax = _a === void 0 ? 1 : _a, _b = props.margin, margin = _b === void 0 ? { left: 0, right: 0, top: 7, bottom: 0 } : _b;
-    var centerView = (0, react_zoom_pan_pinch_1.useControls)().centerView;
+    var perspective = props.perspective, xMin = props.xMin, xMax = props.xMax, yMin = props.yMin, yMax = props.yMax, _a = props.margin, margin = _a === void 0 ? { left: 0, right: 0, top: 7, bottom: 0 } : _a;
+    var ratio = (xMax - xMin) / (yMax - yMin);
+    var context = (0, react_zoom_pan_pinch_1.useTransformContext)();
     (0, react_1.useEffect)(function () {
-        var handler = function () { return centerView(); };
+        var handler = function () {
+            if (!context.bounds)
+                return;
+            var _a = context.transformState, positionX = _a.positionX, positionY = _a.positionY, scale = _a.scale;
+            var bounds = (0, bounds_util_1.calculateBounds)(context, scale);
+            var _b = (0, bounds_util_1.getMouseBoundedPosition)(positionX, positionY, bounds, true, 0, 0, context.wrapperComponent), x = _b.x, y = _b.y;
+            context.setTransformState(scale, x, y);
+        };
         window.addEventListener('resize', handler);
         return function () {
             window.removeEventListener('resize', handler);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, __assign({ wrapperStyle: {
+    return ((0, jsx_runtime_1.jsxs)(react_zoom_pan_pinch_1.TransformComponent, __assign({ wrapperStyle: {
             position: 'absolute',
             margin: "".concat(margin.top, "em ").concat(margin.right, "em ").concat(margin.bottom, "em ").concat(margin.left, "em"),
             transformStyle: 'preserve-3d',
-            height: "calc(100% - ".concat(margin.top + margin.bottom, "em)"),
+            height: "min(100% - ".concat((margin.top + margin.bottom), "em, 100vw / ").concat(ratio, ")"),
             width: "calc(100% - ".concat(margin.left + margin.right, "em)"),
             overflow: 'visible'
-        } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ css: [tableCss(xMin, xMax, yMin, yMax), (0, css_1.fontSizeCss)(zoomMax), perspective && (0, css_1.perspectiveCss)(perspective)] }, { children: (0, jsx_runtime_1.jsx)(GameMaterialDisplay_1.GameMaterialDisplay, {}) })) })));
+        } }, { children: [(0, jsx_runtime_1.jsx)(react_2.Global, { styles: [emotion_normalize_1.default, globalStyle, globalFontSize(xMax - xMin + margin.left + margin.right, yMax - yMin + margin.top + margin.bottom)] }), (0, jsx_runtime_1.jsx)("div", __assign({ css: [tableCss(xMin, xMax, yMin, yMax), perspective && (0, css_1.perspectiveCss)(perspective)] }, { children: (0, jsx_runtime_1.jsx)(GameMaterialDisplay_1.GameMaterialDisplay, {}) }))] })));
 };
 exports.GameTableContent = GameTableContent;
 var tableCss = function (xMin, xMax, yMin, yMax) { return (0, react_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform-style: preserve-3d;\n  width: ", "em;\n  height: ", "em;\n\n  > * {\n    position: absolute;\n    top: ", "em;\n    left: ", "em;\n    transform-style: preserve-3d;\n  }\n"], ["\n  transform-style: preserve-3d;\n  width: ", "em;\n  height: ", "em;\n\n  > * {\n    position: absolute;\n    top: ", "em;\n    left: ", "em;\n    transform-style: preserve-3d;\n  }\n"])), xMax - xMin, yMax - yMin, -yMin, -xMin); };
-var templateObject_1;
+var globalStyle = (0, react_2.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  html {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n\n  *, *::before, *::after {\n    -webkit-box-sizing: inherit;\n    -moz-box-sizing: inherit;\n    box-sizing: inherit;\n  }\n\n  body {\n    margin: 0;\n    font-family: 'Oswald', \"Roboto Light\", serif;\n  }\n\n  #root {\n    position: absolute;\n    height: 100vh;\n    width: 100vw;\n    user-select: none;\n    overflow: hidden;\n    background-image: url(", ");\n    background-color: white;\n    background-size: cover;\n    background-position: center;\n    color: #eee;\n\n    &:before {\n      content: '';\n      display: block;\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.8);\n    }\n  }\n"], ["\n  html {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n\n  *, *::before, *::after {\n    -webkit-box-sizing: inherit;\n    -moz-box-sizing: inherit;\n    box-sizing: inherit;\n  }\n\n  body {\n    margin: 0;\n    font-family: 'Oswald', \"Roboto Light\", serif;\n  }\n\n  #root {\n    position: absolute;\n    height: 100vh;\n    width: 100vw;\n    user-select: none;\n    overflow: hidden;\n    background-image: url(", ");\n    background-color: white;\n    background-size: cover;\n    background-position: center;\n    color: #eee;\n\n    &:before {\n      content: '';\n      display: block;\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.8);\n    }\n  }\n"])), process.env.PUBLIC_URL + '/cover-1920.jpg');
+var globalFontSize = function (width, height) { return (0, react_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  body {\n    font-size: 1vh;\n    @media (max-aspect-ratio: ", "/", ") {\n      font-size: calc(", "vw / ", ");\n    }\n  }\n"], ["\n  body {\n    font-size: 1vh;\n    @media (max-aspect-ratio: ", "/", ") {\n      font-size: calc(", "vw / ", ");\n    }\n  }\n"])), width, height, height, width); };
+var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=GameTableContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GameTableContent.js","sourceRoot":"","sources":["../../../../src/components/material/GameTable/GameTableContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,+BAAqC;AACrC,wCAAoC;AACpC,6DAAsE;AACtE,oCAA0D;AAC1D,6DAA2D;AAapD,IAAM,gBAAgB,GAA8B,UAAC,KAAK;IACvD,IAAA,WAAW,GAA6F,KAAK,YAAlG,EAAE,IAAI,GAAuF,KAAK,KAA5F,EAAE,IAAI,GAAiF,KAAK,KAAtF,EAAE,IAAI,GAA2E,KAAK,KAAhF,EAAE,IAAI,GAAqE,KAAK,KAA1E,EAAE,KAAmE,KAAK,QAA7D,EAAX,OAAO,mBAAG,CAAC,KAAA,EAAE,KAAsD,KAAK,OAAV,EAAjD,MAAM,mBAAG,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAA,CAAU;IAE7G,IAAA,UAAU,GAAK,IAAA,kCAAW,GAAE,WAAlB,CAAkB;IACpC,IAAA,iBAAS,EAAC;QACR,IAAM,OAAO,GAAG,cAAM,OAAA,UAAU,EAAE,EAAZ,CAAY,CAAA;QAClC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;QAC1C,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;QAC/C,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,uBAAC,yCAAkB,aAAC,YAAY,EAAE;YAChC,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,UAAG,MAAM,CAAC,GAAG,gBAAM,MAAM,CAAC,KAAK,gBAAM,MAAM,CAAC,MAAM,gBAAM,MAAM,CAAC,IAAI,OAAI;YAC/E,cAAc,EAAE,aAAa;YAC7B,MAAM,EAAE,sBAAe,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,QAAK;YACtD,KAAK,EAAE,sBAAe,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,QAAK;YACrD,QAAQ,EAAE,SAAS;SACpB,gBACC,yCAAK,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,IAAA,iBAAW,EAAC,OAAO,CAAC,EAAE,WAAW,IAAI,IAAA,oBAAc,EAAC,WAAW,CAAC,CAAC,gBAC5G,uBAAC,yCAAmB,KAAE,IAClB,IACa,CACtB,CAAA;AACH,CAAC,CAAA;AA1BY,QAAA,gBAAgB,oBA0B5B;AAED,IAAM,QAAQ,GAAG,UAAC,IAAY,EAAE,IAAY,EAAE,IAAY,EAAE,IAAY,IAAK,WAAA,WAAG,+PAAA,8CAErE,EAAW,iBACV,EAAW,oDAIZ,EAAK,iBACJ,EAAK,+CAGhB,KATU,IAAI,GAAG,IAAI,EACV,IAAI,GAAG,IAAI,EAIZ,CAAC,IAAI,EACJ,CAAC,IAAI,GAR4D,CAW5E,CAAA"}
+{"version":3,"file":"GameTableContent.js","sourceRoot":"","sources":["../../../../src/components/material/GameTable/GameTableContent.tsx"],"names":[],"mappings":"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"}

package/dist/components/material/ImageLoader/MaterialImageLoader.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ImagesLoaderProps } from '../../ImagesLoader';
+type MaterialImageLoaderProps = Omit<ImagesLoaderProps, 'images'>;
+declare const MaterialImageLoader: FC<MaterialImageLoaderProps>;
+export { MaterialImageLoader };

package/dist/components/material/ImageLoader/MaterialImageLoader.js

@@ -0,0 +1,33 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaterialImageLoader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ImagesLoader_1 = require("../../ImagesLoader");
+var useMaterials_1 = require("../../../hooks/useMaterials");
+var useMaterialImages = function () {
+    var descriptions = (0, useMaterials_1.useMaterials)();
+    return (0, react_1.useMemo)(function () {
+        if (!descriptions) {
+            return [];
+        }
+        return Object.values(descriptions).flatMap(function (description) { return description.getImages(); });
+    }, [descriptions]);
+};
+var MaterialImageLoader = function (props) {
+    var images = useMaterialImages();
+    return (0, jsx_runtime_1.jsx)(ImagesLoader_1.ImagesLoader, __assign({ images: images }, props));
+};
+exports.MaterialImageLoader = MaterialImageLoader;
+//# sourceMappingURL=MaterialImageLoader.js.map

package/dist/components/material/ImageLoader/MaterialImageLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaterialImageLoader.js","sourceRoot":"","sources":["../../../../src/components/material/ImageLoader/MaterialImageLoader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAAmC;AACnC,mDAAoE;AACpE,4DAA0D;AAI1D,IAAM,iBAAiB,GAAG;IACxB,IAAM,YAAY,GAAG,IAAA,2BAAY,GAAE,CAAA;IACnC,OAAO,IAAA,eAAO,EAAC;QACb,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO,EAAE,CAAA;SACV;QACD,OAAO,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,UAAC,WAAW,IAAK,OAAA,WAAW,CAAC,SAAS,EAAE,EAAvB,CAAuB,CAAC,CAAA;IACtF,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;AACpB,CAAC,CAAA;AAED,IAAM,mBAAmB,GAAiC,UAAC,KAAK;IAC9D,IAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAElC,OAAO,uBAAC,2BAAY,aAAC,MAAM,EAAE,MAAM,IAAM,KAAK,EAAI,CAAA;AACpD,CAAC,CAAA;AAGC,kDAAmB"}

package/dist/components/material/ImageLoader/index.d.ts

@@ -0,0 +1 @@
+export * from './MaterialImageLoader';

package/dist/components/material/{Token → ImageLoader}/index.js

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Token"), exports);
+__exportStar(require("./MaterialImageLoader"), exports);
 //# sourceMappingURL=index.js.map

package/dist/components/material/ImageLoader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/material/ImageLoader/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wDAAqC"}

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

@@ -1,24 +1,21 @@
 import { Animation, AnimationContext, Animations } from '@gamepark/react-client';
-import { CreateItem, DeleteItem, DisplayedItem, ItemMove, MaterialGame, MaterialMove, MaterialRules, MoveItem } from '@gamepark/rules-api';
-import { Interpolation, Theme } from '@emotion/react';
-import { ItemLocator } from '../../locators';
+import { CreateItem, DeleteItem, ItemMove, MaterialGame, MaterialMove, MaterialRules, MoveItem } from '@gamepark/rules-api';
+import { Interpolation, Keyframes, Theme } from '@emotion/react';
+import { ItemContext, ItemLocator } from '../../locators';
 import { MaterialDescription } from './MaterialDescription';
 export declare class MaterialAnimations<P extends number = number, M extends number = number, L extends number = number> extends Animations<MaterialGame<P, M, L>, ItemMove<P, M, L>, P> {
     getPreDuration(move: ItemMove<P, M, L>, context: AnimationContext<MaterialGame<P, M, L>, MaterialMove<P, M, L>, P>): number;
     getPostDuration(move: ItemMove<P, M, L>, context: AnimationContext<MaterialGame<P, M, L>, MaterialMove<P, M, L>, P>): number;
     moveDuration(_move: ItemMove<P, M, L>, _context: AnimationContext<MaterialGame<P, M, L>, MaterialMove<P, M, L>, P>): number;
-    getItemAnimation(item: DisplayedItem<M>, animation: Animation<ItemMove<P, M, L>>, context: ItemAnimationContext<P, M, L>): Interpolation<Theme>;
-    protected getCreateItemAnimation(item: DisplayedItem<M>, animation: Animation<CreateItem<P, M, L>>, context: ItemAnimationContext<P, M, L>): Interpolation<Theme>;
+    isItemToAnimate({ game, type, index, displayIndex, locators }: ItemContext<P, M, L>, animation: Animation<MaterialMove<P, M, L>>): boolean;
+    getItemAnimation(context: ItemContext<P, M, L>, animation: Animation<MaterialMove<P, M, L>>): Interpolation<Theme>;
+    protected getCreateItemAnimation(context: ItemContext<P, M, L>, animation: Animation<CreateItem<P, M, L>>): Interpolation<Theme>;
     protected fadein(duration: number): import("@emotion/utils").SerializedStyles;
-    protected getStockLocation(itemType: M, { rules, ...context }: ItemAnimationContext<P, M, L>): string;
-    protected getKeyframesFromOrigin(origin: string, _item: DisplayedItem<M>, _animation: Animation<ItemMove<P, M, L>>, _context: ItemAnimationContext<P, M, L>): import("@emotion/serialize").Keyframes;
-    protected getMoveItemAnimation(item: DisplayedItem<M>, animation: Animation<MoveItem<P, M, L>>, context: ItemAnimationContext<P, M, L>): Interpolation<Theme>;
-    private closestItemRotation;
-    private transformItem;
-    private closestRotation;
-    private getRotation;
-    protected getKeyframesToDestination(destination: string, _item: DisplayedItem<M>, _animation: Animation<ItemMove<P, M, L>>, _context: ItemAnimationContext<P, M, L>): import("@emotion/serialize").Keyframes;
-    protected getDeleteItemAnimation(item: DisplayedItem<M>, animation: Animation<DeleteItem<M>>, context: ItemAnimationContext<P, M, L>): Interpolation<Theme>;
+    protected getFirstStockItemTransforms(context: ItemContext<P, M, L>): string[];
+    protected getKeyframesFromOrigin(origin: string, _animation: Animation<ItemMove<P, M, L>>, _context: ItemContext<P, M, L>): Keyframes;
+    protected getMoveItemAnimation(context: ItemContext<P, M, L>, animation: Animation<MoveItem<P, M, L>>): Interpolation<Theme>;
+    protected getKeyframesToDestination(destination: string, _animation: Animation<ItemMove<P, M, L>>, _context: ItemContext<P, M, L>): Keyframes;
+    protected getDeleteItemAnimation(context: ItemContext<P, M, L>, animation: Animation<DeleteItem<M>>): Interpolation<Theme>;
 }
 export type ItemAnimationContext<P extends number = number, M extends number = number, L extends number = number> = {
     material: Record<M, MaterialDescription<P, M, L>>;