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

package/dist/components/dialogs/ResultDialog/useScoringTable.d.ts

@@ -1,2 +1,2 @@
-export declare const useScoringHeader: () => (JSX.Element | null)[];
-export declare const usePlayerScoring: (playerId: number) => (JSX.Element | null)[];
+export declare const useScoringHeader: () => (import("react/jsx-runtime").JSX.Element | null)[];
+export declare const usePlayerScoring: (playerId: number) => (import("react/jsx-runtime").JSX.Element | null)[];

package/dist/components/dialogs/ResultDialog/useScoringTable.js

@@ -1,43 +1,43 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlayerScoring = exports.useScoringHeader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var hooks_1 = require("../../../hooks");
-var GameProvider_1 = require("../../GameProvider");
-var useScoringHeader = function () {
-    var rules = (0, hooks_1.useRules)();
-    var context = (0, react_1.useContext)(GameProvider_1.gameContext);
-    var scoring = context.scoring;
-    return (0, react_1.useMemo)(function () {
-        var _a;
-        if (!rules || !scoring)
-            return [];
-        var keys = (_a = scoring.getScoringKeys(rules)) !== null && _a !== void 0 ? _a : [];
-        return keys
-            .map(function (key) { return scoring.getScoringHeader(key, rules); })
-            .map(ensureComponent);
-    }, [rules, scoring]);
-};
-exports.useScoringHeader = useScoringHeader;
-var usePlayerScoring = function (playerId) {
-    var rules = (0, hooks_1.useRules)();
-    var context = (0, react_1.useContext)(GameProvider_1.gameContext);
-    var scoring = context.scoring;
-    return (0, react_1.useMemo)(function () {
-        var _a;
-        if (!rules || !scoring)
-            return [];
-        var keys = (_a = scoring.getScoringKeys(rules)) !== null && _a !== void 0 ? _a : [];
-        return keys
-            .map(function (key) { return scoring.getScoringPlayerData(key, playerId, rules); })
-            .map(ensureComponent);
-    }, [rules, scoring]);
-};
-exports.usePlayerScoring = usePlayerScoring;
-var ensureComponent = function (content) {
-    if (typeof content === 'string' || typeof content === 'number')
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content });
-    return content;
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlayerScoring = exports.useScoringHeader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var GameProvider_1 = require("../../GameProvider");
+var useScoringHeader = function () {
+    var rules = (0, hooks_1.useRules)();
+    var context = (0, react_1.useContext)(GameProvider_1.gameContext);
+    var scoring = context.scoring;
+    return (0, react_1.useMemo)(function () {
+        var _a;
+        if (!rules || !scoring)
+            return [];
+        var keys = (_a = scoring.getScoringKeys(rules)) !== null && _a !== void 0 ? _a : [];
+        return keys
+            .map(function (key) { return scoring.getScoringHeader(key, rules); })
+            .map(ensureComponent);
+    }, [rules, scoring]);
+};
+exports.useScoringHeader = useScoringHeader;
+var usePlayerScoring = function (playerId) {
+    var rules = (0, hooks_1.useRules)();
+    var context = (0, react_1.useContext)(GameProvider_1.gameContext);
+    var scoring = context.scoring;
+    return (0, react_1.useMemo)(function () {
+        var _a;
+        if (!rules || !scoring)
+            return [];
+        var keys = (_a = scoring.getScoringKeys(rules)) !== null && _a !== void 0 ? _a : [];
+        return keys
+            .map(function (key) { return scoring.getScoringPlayerData(key, playerId, rules); })
+            .map(ensureComponent);
+    }, [rules, scoring]);
+};
+exports.usePlayerScoring = usePlayerScoring;
+var ensureComponent = function (content) {
+    if (typeof content === 'string' || typeof content === 'number')
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content });
+    return content;
+};
 //# sourceMappingURL=useScoringTable.js.map

package/dist/components/dialogs/RulesDialog/LocationRulesDialogContent.d.ts

@@ -1,5 +1,5 @@
-import { LocationHelpDisplay } from '@gamepark/rules-api';
-export type LocationRulesDialogContentProps<P extends number = number, L extends number = number> = {
-    helpDisplay: LocationHelpDisplay<P, L>;
-};
-export declare const LocationRulesDialogContent: <P extends number = number, M extends number = number, L extends number = number>({ helpDisplay: { location } }: LocationRulesDialogContentProps<P, L>) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+import { LocationHelpDisplay } from '@gamepark/rules-api';
+export type LocationRulesDialogContentProps<P extends number = number, L extends number = number> = {
+    helpDisplay: LocationHelpDisplay<P, L>;
+};
+export declare const LocationRulesDialogContent: <P extends number = number, M extends number = number, L extends number = number>({ helpDisplay: { location } }: LocationRulesDialogContentProps<P, L>) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/dialogs/RulesDialog/LocationRulesDialogContent.js

@@ -1,45 +1,36 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LocationRulesDialogContent = 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 css_1 = require("../../../css");
-var hooks_1 = require("../../../hooks");
-var RulesHelpDialogContent_1 = require("./RulesHelpDialogContent");
-var displayHelp = rules_api_1.MaterialMoveBuilder.displayHelp;
-var LocationRulesDialogContent = function (_a) {
-    var location = _a.helpDisplay.location;
-    var play = (0, hooks_1.usePlay)();
-    var context = (0, hooks_1.useMaterialContext)();
-    var locator = (0, hooks_1.useItemLocator)(location.type);
-    var description = locator === null || locator === void 0 ? void 0 : locator.getLocationDescription(location, context);
-    if (!(description === null || description === void 0 ? void 0 : description.help))
-        return null;
-    var image = description.getHelpImage(location, context);
-    var _b = description.getLocationSize(location, context), width = _b.width, height = _b.height;
-    return (0, jsx_runtime_1.jsxs)("div", __assign({ css: flex }, { children: [!!image &&
-                (0, jsx_runtime_1.jsx)("div", { css: [noShrink, (0, css_1.fontSizeCss)(Math.min(75 / height, 75 / width, 10)), backgroundImage(image, height, width)] }), (0, jsx_runtime_1.jsx)("div", __assign({ css: RulesHelpDialogContent_1.helpDialogContentCss }, { children: (0, jsx_runtime_1.jsx)(description.help, { location: location, closeDialog: function () { return play(displayHelp(undefined), { transient: true }); } }) }))] }));
-};
-exports.LocationRulesDialogContent = LocationRulesDialogContent;
-var flex = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  padding: 3em 1em 3em 3em;\n  max-width: inherit;\n  max-height: inherit;\n"], ["\n  display: flex;\n  padding: 3em 1em 3em 3em;\n  max-width: inherit;\n  max-height: inherit;\n"])));
-var noShrink = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"])));
-var backgroundImage = function (image, height, width) { return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-image: url(", ");\n  background-size: cover;\n  height: ", "em;\n  width: ", "em;\n"], ["\n  background-image: url(", ");\n  background-size: cover;\n  height: ", "em;\n  width: ", "em;\n"])), image, height, width); };
-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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocationRulesDialogContent = 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 css_1 = require("../../../css");
+var hooks_1 = require("../../../hooks");
+var RulesHelpDialogContent_1 = require("./RulesHelpDialogContent");
+var displayHelp = rules_api_1.MaterialMoveBuilder.displayHelp;
+var LocationRulesDialogContent = function (_a) {
+    var _b, _c;
+    var location = _a.helpDisplay.location;
+    var play = (0, hooks_1.usePlay)();
+    var context = (0, hooks_1.useMaterialContext)();
+    var locator = (0, hooks_1.useItemLocator)(location.type);
+    var description = locator === null || locator === void 0 ? void 0 : locator.getLocationDescription(location, context);
+    var Help = (_b = description === null || description === void 0 ? void 0 : description.help) !== null && _b !== void 0 ? _b : locator === null || locator === void 0 ? void 0 : locator.help;
+    if (!Help)
+        return null;
+    var image = description === null || description === void 0 ? void 0 : description.getHelpImage(location, context);
+    var _d = (_c = description === null || description === void 0 ? void 0 : description.getLocationSize(location, context)) !== null && _c !== void 0 ? _c : { width: 0, height: 0 }, width = _d.width, height = _d.height;
+    return (0, jsx_runtime_1.jsxs)("div", { css: flex, children: [!!image &&
+                (0, jsx_runtime_1.jsx)("div", { css: [noShrink, (0, css_1.fontSizeCss)(Math.min(75 / height, 75 / width, 10)), backgroundImage(image, height, width)] }), (0, jsx_runtime_1.jsx)("div", { css: RulesHelpDialogContent_1.helpDialogContentCss, children: (0, jsx_runtime_1.jsx)(Help, { location: location, closeDialog: function () { return play(displayHelp(undefined), { transient: true }); } }) })] });
+};
+exports.LocationRulesDialogContent = LocationRulesDialogContent;
+var flex = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  padding: 3em 1em 3em 3em;\n  max-width: inherit;\n  max-height: inherit;\n"], ["\n  display: flex;\n  padding: 3em 1em 3em 3em;\n  max-width: inherit;\n  max-height: inherit;\n"])));
+var noShrink = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"])));
+var backgroundImage = function (image, height, width) { return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-image: url(", ");\n  background-size: cover;\n  height: ", "em;\n  width: ", "em;\n"], ["\n  background-image: url(", ");\n  background-size: cover;\n  height: ", "em;\n  width: ", "em;\n"])), image, height, width); };
+var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=LocationRulesDialogContent.js.map

package/dist/components/dialogs/RulesDialog/LocationRulesDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocationRulesDialogContent.js","sourceRoot":"","sources":["../../../../src/components/dialogs/RulesDialog/LocationRulesDialogContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAAoC;AACpC,iDAA8E;AAC9E,oCAA0C;AAC1C,wCAA4E;AAC5E,mEAA+D;AAC/D,IAAO,WAAW,GAAG,+BAAmB,CAAC,WAAW,CAAA;AAM7C,IAAM,0BAA0B,GAAG,UACxC,EAAoE;QAAnD,QAAQ,0BAAA;IAEzB,IAAM,IAAI,GAAG,IAAA,eAAO,GAAE,CAAA;IACtB,IAAM,OAAO,GAAG,IAAA,0BAAkB,GAAW,CAAA;IAC7C,IAAM,OAAO,GAAG,IAAA,sBAAc,EAAU,QAAQ,CAAC,IAAI,CAAC,CAAA;IACtD,IAAM,WAAW,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sBAAsB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IACtE,IAAI,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAA;QAAE,OAAO,IAAI,CAAA;IACnC,IAAM,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IACnD,IAAA,KAAoB,WAAW,CAAC,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAhE,KAAK,WAAA,EAAE,MAAM,YAAmD,CAAA;IACxE,OAAO,0CAAK,GAAG,EAAE,IAAI,iBAClB,CAAC,CAAC,KAAK;gBACN,gCAAK,GAAG,EAAE,CAAC,QAAQ,EAAE,IAAA,iBAAW,EAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,GAAG,EAEpH,yCAAK,GAAG,EAAE,6CAAoB,gBAC5B,uBAAC,WAAW,CAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAM,OAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAjD,CAAiD,GAAG,IACzG,KACF,CAAA;AACR,CAAC,CAAA;AAlBY,QAAA,0BAA0B,8BAkBtC;AAED,IAAM,IAAI,OAAG,WAAG,sKAAA,kGAKf,IAAA,CAAA;AAED,IAAM,QAAQ,OAAG,WAAG,2FAAA,uBAEnB,IAAA,CAAA;AAED,IAAM,eAAe,GAAG,UAAC,KAAa,EAAE,MAAc,EAAE,KAAa,IAAK,WAAA,WAAG,wKAAA,4BACnD,EAAK,2CAEnB,EAAM,gBACP,EAAK,OACf,KAJyB,KAAK,EAEnB,MAAM,EACP,KAAK,GAJ0D,CAKzE,CAAA"}
+{"version":3,"file":"LocationRulesDialogContent.js","sourceRoot":"","sources":["../../../../src/components/dialogs/RulesDialog/LocationRulesDialogContent.tsx"],"names":[],"mappings":";;;;;;;;AAAA,sCAAsC;AACtC,wCAAoC;AACpC,iDAA8E;AAC9E,oCAA0C;AAC1C,wCAA4E;AAC5E,mEAA+D;AAC/D,IAAO,WAAW,GAAG,+BAAmB,CAAC,WAAW,CAAA;AAM7C,IAAM,0BAA0B,GAAG,UACxC,EAAoE;;QAAnD,QAAQ,0BAAA;IAEzB,IAAM,IAAI,GAAG,IAAA,eAAO,GAAE,CAAA;IACtB,IAAM,OAAO,GAAG,IAAA,0BAAkB,GAAW,CAAA;IAC7C,IAAM,OAAO,GAAG,IAAA,sBAAc,EAAU,QAAQ,CAAC,IAAI,CAAC,CAAA;IACtD,IAAM,WAAW,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sBAAsB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IACtE,IAAM,IAAI,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA;IAC/C,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IACtB,IAAM,KAAK,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IACpD,IAAA,KAAoB,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,mCAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAA5F,KAAK,WAAA,EAAE,MAAM,YAA+E,CAAA;IACpG,OAAO,iCAAK,GAAG,EAAE,IAAI,aAClB,CAAC,CAAC,KAAK;gBACN,gCAAK,GAAG,EAAE,CAAC,QAAQ,EAAE,IAAA,iBAAW,EAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,GAAG,EAEpH,gCAAK,GAAG,EAAE,6CAAoB,YAC5B,uBAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAM,OAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAjD,CAAiD,GAAG,GAC7F,IACF,CAAA;AACR,CAAC,CAAA;AAnBY,QAAA,0BAA0B,8BAmBtC;AAED,IAAM,IAAI,OAAG,WAAG,sKAAA,kGAKf,IAAA,CAAA;AAED,IAAM,QAAQ,OAAG,WAAG,2FAAA,uBAEnB,IAAA,CAAA;AAED,IAAM,eAAe,GAAG,UAAC,KAAa,EAAE,MAAc,EAAE,KAAa,IAAK,WAAA,WAAG,wKAAA,4BACnD,EAAK,2CAEnB,EAAM,gBACP,EAAK,OACf,KAJyB,KAAK,EAEnB,MAAM,EACP,KAAK,GAJ0D,CAKzE,CAAA"}

package/dist/components/dialogs/RulesDialog/MaterialRulesDialog.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
-import { RulesDialogProps } from '../index';
-export declare const MaterialRulesDialog: FC<RulesDialogProps>;
+import { FC } from 'react';
+import { RulesDialogProps } from '../index';
+export declare const MaterialRulesDialog: FC<RulesDialogProps>;

package/dist/components/dialogs/RulesDialog/MaterialRulesDialog.js

@@ -1,40 +1,40 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaterialRulesDialog = 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 index_1 = require("../index");
-var LocationRulesDialogContent_1 = require("./LocationRulesDialogContent");
-var MaterialRulesDialogContent_1 = require("./MaterialRulesDialogContent");
-var RulesHelpDialogContent_1 = require("./RulesHelpDialogContent");
-var MaterialRulesDialog = function (props) {
-    var game = (0, hooks_1.useGame)();
-    if (!(game === null || game === void 0 ? void 0 : game.helpDisplay))
-        return null;
-    return ((0, jsx_runtime_1.jsxs)(index_1.RulesDialog, __assign({}, props, { css: inlineImg }, { children: [game.helpDisplay.type === rules_api_1.HelpDisplayType.Material &&
-                (0, jsx_runtime_1.jsx)(MaterialRulesDialogContent_1.MaterialRulesDialogContent, { helpDisplay: game.helpDisplay }), game.helpDisplay.type === rules_api_1.HelpDisplayType.Location &&
-                (0, jsx_runtime_1.jsx)(LocationRulesDialogContent_1.LocationRulesDialogContent, { helpDisplay: game.helpDisplay }), game.helpDisplay.type === rules_api_1.HelpDisplayType.Rules &&
-                (0, jsx_runtime_1.jsx)(RulesHelpDialogContent_1.RulesHelpDialogContent, { helpDisplay: game.helpDisplay })] })));
-};
-exports.MaterialRulesDialog = MaterialRulesDialog;
-var inlineImg = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  p img {\n    height: 1em;\n    position: relative;\n    top: 0.1em;\n  }\n"], ["\n  p img {\n    height: 1em;\n    position: relative;\n    top: 0.1em;\n  }\n"])));
-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;
+};
+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.MaterialRulesDialog = 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 index_1 = require("../index");
+var LocationRulesDialogContent_1 = require("./LocationRulesDialogContent");
+var MaterialRulesDialogContent_1 = require("./MaterialRulesDialogContent");
+var RulesHelpDialogContent_1 = require("./RulesHelpDialogContent");
+var MaterialRulesDialog = function (props) {
+    var game = (0, hooks_1.useGame)();
+    if (!(game === null || game === void 0 ? void 0 : game.helpDisplay))
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(index_1.RulesDialog, __assign({}, props, { css: inlineImg, children: [game.helpDisplay.type === rules_api_1.HelpDisplayType.Material &&
+                (0, jsx_runtime_1.jsx)(MaterialRulesDialogContent_1.MaterialRulesDialogContent, { helpDisplay: game.helpDisplay }), game.helpDisplay.type === rules_api_1.HelpDisplayType.Location &&
+                (0, jsx_runtime_1.jsx)(LocationRulesDialogContent_1.LocationRulesDialogContent, { helpDisplay: game.helpDisplay }), game.helpDisplay.type === rules_api_1.HelpDisplayType.Rules &&
+                (0, jsx_runtime_1.jsx)(RulesHelpDialogContent_1.RulesHelpDialogContent, { helpDisplay: game.helpDisplay })] })));
+};
+exports.MaterialRulesDialog = MaterialRulesDialog;
+var inlineImg = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  p img {\n    height: 1em;\n    position: relative;\n    top: 0.1em;\n  }\n"], ["\n  p img {\n    height: 1em;\n    position: relative;\n    top: 0.1em;\n  }\n"])));
+var templateObject_1;
 //# sourceMappingURL=MaterialRulesDialog.js.map

package/dist/components/dialogs/RulesDialog/MaterialRulesDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaterialRulesDialog.js","sourceRoot":"","sources":["../../../../src/components/dialogs/RulesDialog/MaterialRulesDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAAoC;AACpC,iDAAmE;AAEnE,wCAAwC;AACxC,kCAAwD;AACxD,2EAAyE;AACzE,2EAAyE;AACzE,mEAAiE;AAE1D,IAAM,mBAAmB,GAAyB,UAAC,KAAuB;IAC/E,IAAM,IAAI,GAAG,IAAA,eAAO,GAAgB,CAAA;IACpC,IAAI,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA;QAAE,OAAO,IAAI,CAAA;IACnC,OAAO,CACL,wBAAC,mBAAW,eAAK,KAAK,IAAE,GAAG,EAAE,SAAS,iBACnC,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,2BAAe,CAAC,QAAQ;gBACjD,uBAAC,uDAA0B,IAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,EAE7D,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,2BAAe,CAAC,QAAQ;gBACjD,uBAAC,uDAA0B,IAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,EAE7D,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,2BAAe,CAAC,KAAK;gBAC9C,uBAAC,+CAAsB,IAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,KAE9C,CACf,CAAA;AACH,CAAC,CAAA;AAhBY,QAAA,mBAAmB,uBAgB/B;AAED,IAAM,SAAS,OAAG,WAAG,oJAAA,gFAMpB,IAAA,CAAA"}
+{"version":3,"file":"MaterialRulesDialog.js","sourceRoot":"","sources":["../../../../src/components/dialogs/RulesDialog/MaterialRulesDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,wCAAoC;AACpC,iDAAmE;AAEnE,wCAAwC;AACxC,kCAAwD;AACxD,2EAAyE;AACzE,2EAAyE;AACzE,mEAAiE;AAE1D,IAAM,mBAAmB,GAAyB,UAAC,KAAuB;IAC/E,IAAM,IAAI,GAAG,IAAA,eAAO,GAAgB,CAAA;IACpC,IAAI,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA;QAAE,OAAO,IAAI,CAAA;IACnC,OAAO,CACL,wBAAC,mBAAW,eAAK,KAAK,IAAE,GAAG,EAAE,SAAS,aACnC,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,2BAAe,CAAC,QAAQ;gBACjD,uBAAC,uDAA0B,IAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,EAE7D,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,2BAAe,CAAC,QAAQ;gBACjD,uBAAC,uDAA0B,IAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,EAE7D,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,2BAAe,CAAC,KAAK;gBAC9C,uBAAC,+CAAsB,IAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,KAE9C,CACf,CAAA;AACH,CAAC,CAAA;AAhBY,QAAA,mBAAmB,uBAgB/B;AAED,IAAM,SAAS,OAAG,WAAG,oJAAA,gFAMpB,IAAA,CAAA"}

package/dist/components/dialogs/RulesDialog/MaterialRulesDialogContent.d.ts

@@ -1,5 +1,5 @@
-import { MaterialHelpDisplay } from '@gamepark/rules-api';
-export type MaterialRulesDialogContentProps<Player extends number = number, MaterialType extends number = number, LocationType extends number = number> = {
-    helpDisplay: MaterialHelpDisplay<Player, MaterialType, LocationType>;
-};
-export declare const MaterialRulesDialogContent: <P extends number = number, M extends number = number, L extends number = number>({ helpDisplay }: MaterialRulesDialogContentProps<P, M, L>) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+import { MaterialHelpDisplay } from '@gamepark/rules-api';
+export type MaterialRulesDialogContentProps<Player extends number = number, MaterialType extends number = number, LocationType extends number = number> = {
+    helpDisplay: MaterialHelpDisplay<Player, MaterialType, LocationType>;
+};
+export declare const MaterialRulesDialogContent: <P extends number = number, M extends number = number, L extends number = number>({ helpDisplay }: MaterialRulesDialogContentProps<P, M, L>) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/dialogs/RulesDialog/MaterialRulesDialogContent.js

@@ -1,140 +1,140 @@
-"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 __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.MaterialRulesDialogContent = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-var react_1 = require("@emotion/react");
-var faChevronLeft_1 = require("@fortawesome/free-solid-svg-icons/faChevronLeft");
-var faChevronRight_1 = require("@fortawesome/free-solid-svg-icons/faChevronRight");
-var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-var rules_api_1 = require("@gamepark/rules-api");
-var react_2 = require("react");
-var css_1 = require("../../../css");
-var hooks_1 = require("../../../hooks");
-var useLocators_1 = require("../../../hooks/useLocators");
-var material_1 = require("../../material");
-var LocationDisplay_1 = require("../../material/locations/LocationDisplay");
-var RulesHelpDialogContent_1 = require("./RulesHelpDialogContent");
-var displayHelp = rules_api_1.MaterialMoveBuilder.displayHelp;
-var displayMaterialHelp = rules_api_1.MaterialMoveBuilder.displayMaterialHelp;
-var useMaterialNavigation = function (helpDisplay, context) {
-    var rules = (0, hooks_1.useRules)();
-    var play = (0, hooks_1.usePlay)();
-    var helpItem = helpDisplay.item;
-    var locators = (0, useLocators_1.useLocators)();
-    var material = (0, react_2.useMemo)(function () {
-        var _a;
-        if (!helpItem.location)
-            return;
-        var itemOnSameLocation = rules
-            .material(helpDisplay.itemType)
-            .location(function (location) { return (0, rules_api_1.isSameLocationArea)(location, helpItem.location); });
-        var locator = locators[helpItem.location.type];
-        var sorts = (_a = locator === null || locator === void 0 ? void 0 : locator.getNavigationSorts(context)) !== null && _a !== void 0 ? _a : [];
-        if (!sorts.length)
-            return;
-        return itemOnSameLocation.sort.apply(itemOnSameLocation, __spreadArray([], __read(sorts), false));
-    }, [rules.game]);
-    (0, hooks_1.useKeyDown)('ArrowRight', function () { return nextMove ? play(nextMove, { local: true }) : undefined; });
-    (0, hooks_1.useKeyDown)('ArrowLeft', function () { return previousMove ? play(previousMove, { local: true }) : undefined; });
-    var materialIndexes = (0, react_2.useMemo)(function () { return material === null || material === void 0 ? void 0 : material.getIndexes(); }, [material]);
-    if (!material || !materialIndexes)
-        return { previous: undefined, next: undefined };
-    var currentIndex = materialIndexes.indexOf(helpDisplay.itemIndex);
-    var previous = material.index(materialIndexes[currentIndex - 1]);
-    var next = material.index(materialIndexes[currentIndex + 1]);
-    var previousMove = previous.length ? displayMaterialHelp(helpDisplay.itemType, previous.getItem(), previous.getIndex()) : undefined;
-    var nextMove = next.length ? displayMaterialHelp(helpDisplay.itemType, next.getItem(), next.getIndex()) : undefined;
-    return {
-        previous: previous.length ? displayMaterialHelp(helpDisplay.itemType, previous.getItem(), previous.getIndex()) : undefined,
-        next: next.length ? displayMaterialHelp(helpDisplay.itemType, next.getItem(), next.getIndex()) : undefined
-    };
-};
-var MaterialRulesDialogContent = function (_a) {
-    var _b, _c;
-    var helpDisplay = _a.helpDisplay;
-    var play = (0, hooks_1.usePlay)();
-    var context = (0, hooks_1.useMaterialContext)();
-    var description = (0, hooks_1.useMaterialDescription)(helpDisplay.itemType);
-    var itemContext = __assign(__assign({}, context), { type: helpDisplay.itemType, index: helpDisplay.itemIndex, displayIndex: helpDisplay.displayIndex });
-    var _d = useMaterialNavigation(helpDisplay, itemContext), previous = _d.previous, next = _d.next;
-    var closeDialog = function () { return play(displayHelp(undefined), { transient: true }); };
-    (0, hooks_1.useKeyDown)('Escape', closeDialog);
-    if (!description)
-        return null;
-    var item = helpDisplay.item;
-    var _e = description.getSize(item.id), width = _e.width, height = _e.height;
-    var hasNavigation = previous || next;
-    var locations = item.location ? (_c = (_b = context.material[helpDisplay.itemType]) === null || _b === void 0 ? void 0 : _b.getLocations(item, itemContext)) !== null && _c !== void 0 ? _c : [] : [];
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ css: [flex, hasNavigation && fullSize] }, { children: [(0, jsx_runtime_1.jsx)(material_1.MaterialComponent, __assign({ type: helpDisplay.itemType, itemId: item.id, itemIndex: helpDisplay.itemIndex, css: [
-                            noShrink, (0, css_1.fontSizeCss)(Math.min(75 / height, 75 / width, 10)),
-                            description.getHelpDisplayExtraCss(item, itemContext)
-                        ] }, { children: locations.map(function (location) {
-                            var _a;
-                            var locationDescription = (_a = context.locators[location.type]) === null || _a === void 0 ? void 0 : _a.getLocationDescription(location, context);
-                            if (!locationDescription || !locationDescription.displayInParentItemHelp)
-                                return null;
-                            return (0, jsx_runtime_1.jsx)(LocationDisplay_1.LocationDisplay, { location: location, description: locationDescription }, JSON.stringify(location));
-                        }) })), (0, jsx_runtime_1.jsx)("div", __assign({ css: RulesHelpDialogContent_1.helpDialogContentCss }, { children: description.help && (0, jsx_runtime_1.jsx)(description.help, __assign({}, helpDisplay, { closeDialog: closeDialog })) }))] })), previous && (0, jsx_runtime_1.jsx)(PreviousArrow, { onPrevious: function () { return play(previous, { transient: true }); } }), next && (0, jsx_runtime_1.jsx)(NextArrow, { onNext: function () { return play(next, { transient: true }); } })] });
-};
-exports.MaterialRulesDialogContent = MaterialRulesDialogContent;
-var NextArrow = function (props) {
-    var onNext = props.onNext;
-    var theme = (0, react_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ tabIndex: 2, css: [navigationArrow(theme), nextArrow], onClick: onNext }, { children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faChevronRight_1.faChevronRight }) })));
-};
-var PreviousArrow = function (props) {
-    var onPrevious = props.onPrevious;
-    var theme = (0, react_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ tabIndex: 1, css: [navigationArrow(theme), previousArrow], onClick: onPrevious }, { children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faChevronLeft_1.faChevronLeft }) })));
-};
-var navigationArrow = function (theme) { return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  z-index: -1;\n  transform: translateY(-50%);\n  background-color: ", ";\n  color: ", ";\n  font-size: 4em;\n  display: flex;\n  align-items: center;\n  border-radius: 1.4em;\n  justify-content: center;\n  box-shadow: 0 0 0.2em black;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n"], ["\n  position: absolute;\n  top: 50%;\n  z-index: -1;\n  transform: translateY(-50%);\n  background-color: ", ";\n  color: ", ";\n  font-size: 4em;\n  display: flex;\n  align-items: center;\n  border-radius: 1.4em;\n  justify-content: center;\n  box-shadow: 0 0 0.2em black;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n"])), theme.dialog.backgroundColor, theme.dialog.color); };
-var previousAnimation = (0, react_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  70% {\n    left: -2.4em\n  }\n  100% {\n    left: -1.7em;\n  }\n"], ["\n  70% {\n    left: -2.4em\n  }\n  100% {\n    left: -1.7em;\n  }\n"])));
-var previousArrow = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0.7em 3em 0.7em 0.7em;\n  left: -1.7em;\n\n  &:focus:not(:active) {\n    animation: ", " 0.2s forwards;\n  }\n"], ["\n  padding: 0.7em 3em 0.7em 0.7em;\n  left: -1.7em;\n\n  &:focus:not(:active) {\n    animation: ", " 0.2s forwards;\n  }\n"])), previousAnimation);
-var nextAnimation = (0, react_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  70% {\n    right: -2.4em\n  }\n  100% {\n    right: -1.7em;\n  }\n"], ["\n  70% {\n    right: -2.4em\n  }\n  100% {\n    right: -1.7em;\n  }\n"])));
-var nextArrow = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 0.7em 0.7em 0.7em 3em;\n  right: -1.7em;\n\n  &:focus:not(:active) {\n    animation: ", " 0.2s forwards;\n  }\n"], ["\n  padding: 0.7em 0.7em 0.7em 3em;\n  right: -1.7em;\n\n  &:focus:not(:active) {\n    animation: ", " 0.2s forwards;\n  }\n"])), nextAnimation);
-var flex = (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  padding: 3em 1em 3em 3em;\n  max-width: inherit;\n  max-height: inherit;\n"], ["\n  display: flex;\n  padding: 3em 1em 3em 3em;\n  max-width: inherit;\n  max-height: inherit;\n"])));
-var noShrink = (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"])));
-var fullSize = (0, react_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 80vw;\n  width: 80dvw;\n"], ["\n  width: 80vw;\n  width: 80dvw;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_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++) {
+            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 __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.MaterialRulesDialogContent = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = require("@emotion/react");
+var faChevronLeft_1 = require("@fortawesome/free-solid-svg-icons/faChevronLeft");
+var faChevronRight_1 = require("@fortawesome/free-solid-svg-icons/faChevronRight");
+var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+var rules_api_1 = require("@gamepark/rules-api");
+var react_2 = require("react");
+var css_1 = require("../../../css");
+var hooks_1 = require("../../../hooks");
+var useLocators_1 = require("../../../hooks/useLocators");
+var material_1 = require("../../material");
+var LocationDisplay_1 = require("../../material/locations/LocationDisplay");
+var RulesHelpDialogContent_1 = require("./RulesHelpDialogContent");
+var displayHelp = rules_api_1.MaterialMoveBuilder.displayHelp;
+var displayMaterialHelp = rules_api_1.MaterialMoveBuilder.displayMaterialHelp;
+var useMaterialNavigation = function (helpDisplay, context) {
+    var rules = (0, hooks_1.useRules)();
+    var play = (0, hooks_1.usePlay)();
+    var helpItem = helpDisplay.item;
+    var locators = (0, useLocators_1.useLocators)();
+    var material = (0, react_2.useMemo)(function () {
+        var _a;
+        if (!helpItem.location)
+            return;
+        var itemOnSameLocation = rules
+            .material(helpDisplay.itemType)
+            .location(function (location) { return (0, rules_api_1.isSameLocationArea)(location, helpItem.location); });
+        var locator = locators[helpItem.location.type];
+        var sorts = (_a = locator === null || locator === void 0 ? void 0 : locator.getNavigationSorts(context)) !== null && _a !== void 0 ? _a : [];
+        if (!sorts.length)
+            return;
+        return itemOnSameLocation.sort.apply(itemOnSameLocation, __spreadArray([], __read(sorts), false));
+    }, [rules.game]);
+    (0, hooks_1.useKeyDown)('ArrowRight', function () { return nextMove ? play(nextMove, { local: true }) : undefined; });
+    (0, hooks_1.useKeyDown)('ArrowLeft', function () { return previousMove ? play(previousMove, { local: true }) : undefined; });
+    var materialIndexes = (0, react_2.useMemo)(function () { return material === null || material === void 0 ? void 0 : material.getIndexes(); }, [material]);
+    if (!material || !materialIndexes)
+        return { previous: undefined, next: undefined };
+    var currentIndex = materialIndexes.indexOf(helpDisplay.itemIndex);
+    var previous = material.index(materialIndexes[currentIndex - 1]);
+    var next = material.index(materialIndexes[currentIndex + 1]);
+    var previousMove = previous.length ? displayMaterialHelp(helpDisplay.itemType, previous.getItem(), previous.getIndex()) : undefined;
+    var nextMove = next.length ? displayMaterialHelp(helpDisplay.itemType, next.getItem(), next.getIndex()) : undefined;
+    return {
+        previous: previous.length ? displayMaterialHelp(helpDisplay.itemType, previous.getItem(), previous.getIndex()) : undefined,
+        next: next.length ? displayMaterialHelp(helpDisplay.itemType, next.getItem(), next.getIndex()) : undefined
+    };
+};
+var MaterialRulesDialogContent = function (_a) {
+    var _b, _c;
+    var helpDisplay = _a.helpDisplay;
+    var play = (0, hooks_1.usePlay)();
+    var context = (0, hooks_1.useMaterialContext)();
+    var description = (0, hooks_1.useMaterialDescription)(helpDisplay.itemType);
+    var itemContext = __assign(__assign({}, context), { type: helpDisplay.itemType, index: helpDisplay.itemIndex, displayIndex: helpDisplay.displayIndex });
+    var _d = useMaterialNavigation(helpDisplay, itemContext), previous = _d.previous, next = _d.next;
+    var closeDialog = function () { return play(displayHelp(undefined), { transient: true }); };
+    (0, hooks_1.useKeyDown)('Escape', closeDialog);
+    if (!description)
+        return null;
+    var item = helpDisplay.item;
+    var _e = description.getSize(item.id), width = _e.width, height = _e.height;
+    var hasNavigation = previous || next;
+    var locations = item.location ? (_c = (_b = context.material[helpDisplay.itemType]) === null || _b === void 0 ? void 0 : _b.getLocations(item, itemContext)) !== null && _c !== void 0 ? _c : [] : [];
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { css: [flex, hasNavigation && fullSize], children: [(0, jsx_runtime_1.jsx)(material_1.MaterialComponent, { type: helpDisplay.itemType, itemId: item.id, itemIndex: helpDisplay.itemIndex, css: [
+                            noShrink, (0, css_1.fontSizeCss)(Math.min(75 / height, 75 / width, 10)),
+                            description.getHelpDisplayExtraCss(item, itemContext)
+                        ], children: locations.map(function (location) {
+                            var _a;
+                            var locationDescription = (_a = context.locators[location.type]) === null || _a === void 0 ? void 0 : _a.getLocationDescription(location, context);
+                            if (!locationDescription || !locationDescription.displayInParentItemHelp)
+                                return null;
+                            return (0, jsx_runtime_1.jsx)(LocationDisplay_1.LocationDisplay, { location: location, description: locationDescription }, JSON.stringify(location));
+                        }) }), (0, jsx_runtime_1.jsx)("div", { css: RulesHelpDialogContent_1.helpDialogContentCss, children: description.help && (0, jsx_runtime_1.jsx)(description.help, __assign({}, helpDisplay, { closeDialog: closeDialog })) })] }), previous && (0, jsx_runtime_1.jsx)(PreviousArrow, { onPrevious: function () { return play(previous, { transient: true }); } }), next && (0, jsx_runtime_1.jsx)(NextArrow, { onNext: function () { return play(next, { transient: true }); } })] });
+};
+exports.MaterialRulesDialogContent = MaterialRulesDialogContent;
+var NextArrow = function (props) {
+    var onNext = props.onNext;
+    var theme = (0, react_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)("div", { tabIndex: 2, css: [navigationArrow(theme), nextArrow], onClick: onNext, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faChevronRight_1.faChevronRight }) }));
+};
+var PreviousArrow = function (props) {
+    var onPrevious = props.onPrevious;
+    var theme = (0, react_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)("div", { tabIndex: 1, css: [navigationArrow(theme), previousArrow], onClick: onPrevious, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faChevronLeft_1.faChevronLeft }) }));
+};
+var navigationArrow = function (theme) { return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  z-index: -1;\n  transform: translateY(-50%);\n  background-color: ", ";\n  color: ", ";\n  font-size: 4em;\n  display: flex;\n  align-items: center;\n  border-radius: 1.4em;\n  justify-content: center;\n  box-shadow: 0 0 0.2em black;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n"], ["\n  position: absolute;\n  top: 50%;\n  z-index: -1;\n  transform: translateY(-50%);\n  background-color: ", ";\n  color: ", ";\n  font-size: 4em;\n  display: flex;\n  align-items: center;\n  border-radius: 1.4em;\n  justify-content: center;\n  box-shadow: 0 0 0.2em black;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n"])), theme.dialog.backgroundColor, theme.dialog.color); };
+var previousAnimation = (0, react_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  70% {\n    left: -2.4em\n  }\n  100% {\n    left: -1.7em;\n  }\n"], ["\n  70% {\n    left: -2.4em\n  }\n  100% {\n    left: -1.7em;\n  }\n"])));
+var previousArrow = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0.7em 3em 0.7em 0.7em;\n  left: -1.7em;\n\n  &:focus:not(:active) {\n    animation: ", " 0.2s forwards;\n  }\n"], ["\n  padding: 0.7em 3em 0.7em 0.7em;\n  left: -1.7em;\n\n  &:focus:not(:active) {\n    animation: ", " 0.2s forwards;\n  }\n"])), previousAnimation);
+var nextAnimation = (0, react_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  70% {\n    right: -2.4em\n  }\n  100% {\n    right: -1.7em;\n  }\n"], ["\n  70% {\n    right: -2.4em\n  }\n  100% {\n    right: -1.7em;\n  }\n"])));
+var nextArrow = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 0.7em 0.7em 0.7em 3em;\n  right: -1.7em;\n\n  &:focus:not(:active) {\n    animation: ", " 0.2s forwards;\n  }\n"], ["\n  padding: 0.7em 0.7em 0.7em 3em;\n  right: -1.7em;\n\n  &:focus:not(:active) {\n    animation: ", " 0.2s forwards;\n  }\n"])), nextAnimation);
+var flex = (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  padding: 3em 1em 3em 3em;\n  max-width: inherit;\n  max-height: inherit;\n"], ["\n  display: flex;\n  padding: 3em 1em 3em 3em;\n  max-width: inherit;\n  max-height: inherit;\n"])));
+var noShrink = (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"])));
+var fullSize = (0, react_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 80vw;\n  width: 80dvw;\n"], ["\n  width: 80vw;\n  width: 80dvw;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 //# sourceMappingURL=MaterialRulesDialogContent.js.map