@gamepark/react-game 6.38.7 → 7.0.0-beta.3

package/dist/components/dialogs/index.js

@@ -1,21 +1,5 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-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("./RulesDialog"), exports);
-__exportStar(require("./Dialog"), exports);
-__exportStar(require("./FailuresDialog"), exports);
-__exportStar(require("./ResultDialog"), exports);
+export * from './RulesDialog';
+export * from './Dialog';
+export * from './FailuresDialog';
+export * from './ResultDialog';
 //# sourceMappingURL=index.js.map

package/dist/components/dialogs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/dialogs/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA6B;AAC7B,2CAAwB;AACxB,mDAAgC;AAChC,iDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/dialogs/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA"}

package/dist/components/index.d.ts

@@ -1,17 +1,17 @@
-export * from './buttons';
-export * from './dialogs';
-export * from './GameProvider';
-export * from './Header';
-export * from './ImagesLoader';
-export * from './JournalTabs';
-export * from './Letterbox';
-export * from './LoadingScreen';
-export * from './material';
-export * from './menus';
-export * from './Picture';
-export * from './PlayerPanel';
-export * from './PlayerTimer';
-export * from './Scoring';
-export * from './tutorial';
-export * from './Avatar';
-export * from './Log';
+export * from './buttons';
+export * from './dialogs';
+export * from './GameProvider';
+export * from './Header';
+export * from './ImagesLoader';
+export * from './JournalTabs';
+export * from './Letterbox';
+export * from './LoadingScreen';
+export * from './material';
+export * from './menus';
+export * from './Picture';
+export * from './PlayerPanel';
+export * from './PlayerTimer';
+export * from './Scoring';
+export * from './tutorial';
+export * from './Avatar';
+export * from './Log';

package/dist/components/index.js

@@ -1,34 +1,18 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-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("./buttons"), exports);
-__exportStar(require("./dialogs"), exports);
-__exportStar(require("./GameProvider"), exports);
-__exportStar(require("./Header"), exports);
-__exportStar(require("./ImagesLoader"), exports);
-__exportStar(require("./JournalTabs"), exports);
-__exportStar(require("./Letterbox"), exports);
-__exportStar(require("./LoadingScreen"), exports);
-__exportStar(require("./material"), exports);
-__exportStar(require("./menus"), exports);
-__exportStar(require("./Picture"), exports);
-__exportStar(require("./PlayerPanel"), exports);
-__exportStar(require("./PlayerTimer"), exports);
-__exportStar(require("./Scoring"), exports);
-__exportStar(require("./tutorial"), exports);
-__exportStar(require("./Avatar"), exports);
-__exportStar(require("./Log"), exports);
+export * from './buttons';
+export * from './dialogs';
+export * from './GameProvider';
+export * from './Header';
+export * from './ImagesLoader';
+export * from './JournalTabs';
+export * from './Letterbox';
+export * from './LoadingScreen';
+export * from './material';
+export * from './menus';
+export * from './Picture';
+export * from './PlayerPanel';
+export * from './PlayerTimer';
+export * from './Scoring';
+export * from './tutorial';
+export * from './Avatar';
+export * from './Log';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAAyB;AACzB,4CAAyB;AACzB,iDAA8B;AAC9B,2CAAwB;AACxB,iDAA8B;AAC9B,gDAA6B;AAC7B,8CAA2B;AAC3B,kDAA+B;AAC/B,6CAA0B;AAC1B,0CAAuB;AACvB,4CAAyB;AACzB,gDAA6B;AAC7B,gDAA6B;AAC7B,4CAAyB;AACzB,6CAA0B;AAC1B,2CAAwB;AACxB,wCAAqB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA"}

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

@@ -1,52 +1,52 @@
-import { ItemMoveType } from '@gamepark/rules-api';
-import { MaterialSoundConfig } from './sound';
-/**
- * Base class for components displayed on the game table by the framework.
- * Contains all features common to items and locations display.
- */
-export declare abstract class ComponentDescription<Id = any> {
-    constructor(clone?: Partial<Pick<ComponentDescription, 'height' | 'width' | 'ratio' | 'borderRadius'>>);
-    /**
-     * All the sounds for each move type
-     */
-    sounds?: Partial<Record<ItemMoveType, string | MaterialSoundConfig>>;
-    /**
-     * All the images that can be used to display the component, and therefore should be preloaded with the web page.
-     */
-    abstract getImages(): string[];
-    /**
-     * Height of the component.
-     */
-    height?: number;
-    /**
-     * Width of the component.
-     */
-    width?: number;
-    /**
-     * Ratio (width/height) of the component.
-     */
-    ratio?: number;
-    /**
-     * Returns the size of component. Default will be process from {@link width}, {@link height} and {@link ratio}.
-     * @param _id id of the component to display (material or location).
-     * @returns {ComponentSize} The size
-     */
-    getSize(_id: Id): ComponentSize;
-    /**
-     * Border radius of the component.
-     */
-    borderRadius: number;
-    /**
-     * Returns the border radius of the component. Default to {@link borderRadius}
-     * @param _id id of the component to display (material or location).
-     * @returns {number | undefined} The border radius
-     */
-    getBorderRadius(_id: Id): number;
-}
-/**
- * Size of a component on the game table, in centimeters.
- */
-export type ComponentSize = {
-    width: number;
-    height: number;
-};
+import { ItemMoveType } from '@gamepark/rules-api';
+import { MaterialSoundConfig } from './sound';
+/**
+ * Base class for components displayed on the game table by the framework.
+ * Contains all features common to items and locations display.
+ */
+export declare abstract class ComponentDescription<Id = any> {
+    constructor(clone?: Partial<Pick<ComponentDescription, 'height' | 'width' | 'ratio' | 'borderRadius'>>);
+    /**
+     * All the sounds for each move type
+     */
+    sounds?: Partial<Record<ItemMoveType, string | MaterialSoundConfig>>;
+    /**
+     * All the images that can be used to display the component, and therefore should be preloaded with the web page.
+     */
+    abstract getImages(): string[];
+    /**
+     * Height of the component.
+     */
+    height?: number;
+    /**
+     * Width of the component.
+     */
+    width?: number;
+    /**
+     * Ratio (width/height) of the component.
+     */
+    ratio?: number;
+    /**
+     * Returns the size of component. Default will be process from {@link width}, {@link height} and {@link ratio}.
+     * @param _id id of the component to display (material or location).
+     * @returns {ComponentSize} The size
+     */
+    getSize(_id: Id): ComponentSize;
+    /**
+     * Border radius of the component.
+     */
+    borderRadius: number;
+    /**
+     * Returns the border radius of the component. Default to {@link borderRadius}
+     * @param _id id of the component to display (material or location).
+     * @returns {number | undefined} The border radius
+     */
+    getBorderRadius(_id: Id): number;
+}
+/**
+ * Size of a component on the game table, in centimeters.
+ */
+export type ComponentSize = {
+    width: number;
+    height: number;
+};

package/dist/components/material/ComponentDescription.js

@@ -1,41 +1,55 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentDescription = void 0;
-/**
- * Base class for components displayed on the game table by the framework.
- * Contains all features common to items and locations display.
- */
-var ComponentDescription = /** @class */ (function () {
-    function ComponentDescription(clone) {
-        var _a;
-        this.height = clone === null || clone === void 0 ? void 0 : clone.height;
-        this.width = clone === null || clone === void 0 ? void 0 : clone.width;
-        this.ratio = clone === null || clone === void 0 ? void 0 : clone.ratio;
-        this.borderRadius = (_a = clone === null || clone === void 0 ? void 0 : clone.borderRadius) !== null && _a !== void 0 ? _a : 0;
-    }
-    /**
-     * Returns the size of component. Default will be process from {@link width}, {@link height} and {@link ratio}.
-     * @param _id id of the component to display (material or location).
-     * @returns {ComponentSize} The size
-     */
-    ComponentDescription.prototype.getSize = function (_id) {
-        if (this.width && this.height)
-            return { width: this.width, height: this.height };
-        if (this.ratio && this.width)
-            return { width: this.width, height: this.width / this.ratio };
-        if (this.ratio && this.height)
-            return { width: this.height * this.ratio, height: this.height };
-        throw new Error("".concat(this.constructor.name, ": you must implement \"getSize\" or 2 of \"width\", \"height\" & \"ratio\" in any Component description"));
-    };
-    /**
-     * Returns the border radius of the component. Default to {@link borderRadius}
-     * @param _id id of the component to display (material or location).
-     * @returns {number | undefined} The border radius
-     */
-    ComponentDescription.prototype.getBorderRadius = function (_id) {
-        return this.borderRadius;
-    };
-    return ComponentDescription;
-}());
-exports.ComponentDescription = ComponentDescription;
+/**
+ * Base class for components displayed on the game table by the framework.
+ * Contains all features common to items and locations display.
+ */
+export class ComponentDescription {
+    constructor(clone) {
+        this.height = clone?.height;
+        this.width = clone?.width;
+        this.ratio = clone?.ratio;
+        this.borderRadius = clone?.borderRadius ?? 0;
+    }
+    /**
+     * All the sounds for each move type
+     */
+    sounds;
+    /**
+     * Height of the component.
+     */
+    height;
+    /**
+     * Width of the component.
+     */
+    width;
+    /**
+     * Ratio (width/height) of the component.
+     */
+    ratio;
+    /**
+     * Returns the size of component. Default will be process from {@link width}, {@link height} and {@link ratio}.
+     * @param _id id of the component to display (material or location).
+     * @returns {ComponentSize} The size
+     */
+    getSize(_id) {
+        if (this.width && this.height)
+            return { width: this.width, height: this.height };
+        if (this.ratio && this.width)
+            return { width: this.width, height: this.width / this.ratio };
+        if (this.ratio && this.height)
+            return { width: this.height * this.ratio, height: this.height };
+        throw new Error(`${this.constructor.name}: you must implement "getSize" or 2 of "width", "height" & "ratio" in any Component description`);
+    }
+    /**
+     * Border radius of the component.
+     */
+    borderRadius;
+    /**
+     * Returns the border radius of the component. Default to {@link borderRadius}
+     * @param _id id of the component to display (material or location).
+     * @returns {number | undefined} The border radius
+     */
+    getBorderRadius(_id) {
+        return this.borderRadius;
+    }
+}
 //# sourceMappingURL=ComponentDescription.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComponentDescription.js","sourceRoot":"","sources":["../../../src/components/material/ComponentDescription.ts"],"names":[],"mappings":";;;AAGA;;;GAGG;AACH;IAEE,8BAAY,KAA0F;;QACpG,IAAI,CAAC,MAAM,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA;QACzB,IAAI,CAAC,KAAK,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA;QACzB,IAAI,CAAC,YAAY,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,mCAAI,CAAC,CAAA;IAC9C,CAAC;IA2BD;;;;OAIG;IACH,sCAAO,GAAP,UAAQ,GAAO;QACb,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAA;QAChF,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAA;QAC3F,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAA;QAC9F,MAAM,IAAI,KAAK,CAAC,UAAG,IAAI,CAAC,WAAW,CAAC,IAAI,4GAAiG,CAAC,CAAA;IAC5I,CAAC;IAOD;;;;OAIG;IACH,8CAAe,GAAf,UAAgB,GAAO;QACrB,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;IACH,2BAAC;AAAD,CAAC,AA3DD,IA2DC;AA3DqB,oDAAoB"}
+{"version":3,"file":"ComponentDescription.js","sourceRoot":"","sources":["../../../src/components/material/ComponentDescription.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,OAAgB,oBAAoB;IAExC,YAAY,KAA0F;QACpG,IAAI,CAAC,MAAM,GAAG,KAAK,EAAE,MAAM,CAAA;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,EAAE,KAAK,CAAA;QACzB,IAAI,CAAC,KAAK,GAAG,KAAK,EAAE,KAAK,CAAA;QACzB,IAAI,CAAC,YAAY,GAAG,KAAK,EAAE,YAAY,IAAI,CAAC,CAAA;IAC9C,CAAC;IAED;;OAEG;IACH,MAAM,CAA8D;IAOpE;;OAEG;IACH,MAAM,CAAS;IAEf;;OAEG;IACH,KAAK,CAAS;IAEd;;OAEG;IACH,KAAK,CAAS;IAEd;;;;OAIG;IACH,OAAO,CAAC,GAAO;QACb,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAA;QAChF,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAA;QAC3F,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAA;QAC9F,MAAM,IAAI,KAAK,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,iGAAiG,CAAC,CAAA;IAC5I,CAAC;IAED;;OAEG;IACH,YAAY,CAAQ;IAEpB;;;;OAIG;IACH,eAAe,CAAC,GAAO;QACrB,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;CACF"}

package/dist/components/material/Dices/CubicDiceDescription.d.ts

@@ -1,21 +1,21 @@
-/** @jsxImportSource @emotion/react */
-import { Interpolation, Theme } from '@emotion/react';
-import { MaterialItem } from '@gamepark/rules-api';
-import { ItemContext } from '../../../locators';
-import { MaterialContentProps } from '../MaterialDescription';
-import { MobileMaterialDescription } from '../MobileMaterialDescription';
-export declare abstract class CubicDiceDescription<P extends number = number, M extends number = number, L extends number = number, ItemId = any> extends MobileMaterialDescription<P, M, L, ItemId> {
-    width: number;
-    ratio: number;
-    borderRadius: number;
-    color: string;
-    abstract images: string[] | Record<any, string[]>;
-    getImages(): string[];
-    getDiceImages(itemId: ItemId): string[];
-    getColor(_itemId: ItemId): string;
-    content: ({ itemId, highlight, preview, playDown }: MaterialContentProps<ItemId>) => import("@emotion/react/jsx-runtime").JSX.Element;
-    getSideTransform(index: number): Interpolation<Theme>;
-    getItemTransform(item: MaterialItem<P, L>, context: ItemContext<P, M, L>): string[];
-    getRotations(item: MaterialItem<P, L>, _context: ItemContext<P, M, L>): string[];
-    getHelpDisplayExtraCss(item: Partial<MaterialItem<P, L>>, context: ItemContext<P, M, L>): Interpolation<Theme>;
-}
+/** @jsxImportSource @emotion/react */
+import { Interpolation, Theme } from '@emotion/react';
+import { MaterialItem } from '@gamepark/rules-api';
+import { ItemContext } from '../../../locators';
+import { MaterialContentProps } from '../MaterialDescription';
+import { MobileMaterialDescription } from '../MobileMaterialDescription';
+export declare abstract class CubicDiceDescription<P extends number = number, M extends number = number, L extends number = number, ItemId = any> extends MobileMaterialDescription<P, M, L, ItemId> {
+    width: number;
+    ratio: number;
+    borderRadius: number;
+    color: string;
+    abstract images: string[] | Record<any, string[]>;
+    getImages(): string[];
+    getDiceImages(itemId: ItemId): string[];
+    getColor(_itemId: ItemId): string;
+    content: ({ itemId, highlight, preview, playDown }: MaterialContentProps<ItemId>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    getSideTransform(index: number): Interpolation<Theme>;
+    getItemTransform(item: MaterialItem<P, L>, context: ItemContext<P, M, L>): string[];
+    getRotations(item: MaterialItem<P, L>, _context: ItemContext<P, M, L>): string[];
+    getHelpDisplayExtraCss(item: Partial<MaterialItem<P, L>>, context: ItemContext<P, M, L>): Interpolation<Theme>;
+}

package/dist/components/material/Dices/CubicDiceDescription.js

@@ -1,133 +1,86 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CubicDiceDescription = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-var react_1 = require("@emotion/react");
-var range_1 = __importDefault(require("lodash/range"));
-var css_1 = require("../../../css");
-var MobileMaterialDescription_1 = require("../MobileMaterialDescription");
-var CubicDiceDescription = /** @class */ (function (_super) {
-    __extends(CubicDiceDescription, _super);
-    function CubicDiceDescription() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.width = 1.6;
-        _this.ratio = 1;
-        _this.borderRadius = 0.3;
-        _this.color = '#000000';
-        _this.content = function (_a) {
-            var itemId = _a.itemId, highlight = _a.highlight, preview = _a.preview, _b = _a.playDown, playDown = _b === void 0 ? preview : _b;
-            var internalMask = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      top: 1px;\n      left: 1px;\n      width: calc(", "em - 2px);\n      height: calc(", "em - 2px);\n      background-color: ", ";\n      border-radius: ", "em;\n    "], ["\n      position: absolute;\n      top: 1px;\n      left: 1px;\n      width: calc(", "em - 2px);\n      height: calc(", "em - 2px);\n      background-color: ", ";\n      border-radius: ", "em;\n    "])), _this.width, _this.width, _this.getColor(itemId), _this.borderRadius / 2);
-            var images = _this.getDiceImages(itemId);
-            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, range_1.default)(6).map(function (_, index) {
-                        return (0, jsx_runtime_1.jsx)("div", { css: [
-                                (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            position: absolute;\n            transform-style: preserve-3d;\n            width: ", "em;\n            height: ", "em;\n          "], ["\n            position: absolute;\n            transform-style: preserve-3d;\n            width: ", "em;\n            height: ", "em;\n          "])), _this.width, _this.width),
-                                (0, css_1.backgroundCss)(images[index]),
-                                highlight ? css_1.shineEffect : playDown && css_1.shadowEffect,
-                                (0, css_1.borderRadiusCss)(_this.borderRadius),
-                                _this.getSideTransform(index)
-                            ] }, index);
-                    }), (0, jsx_runtime_1.jsx)("div", { css: internalMask }), (0, jsx_runtime_1.jsx)("div", { css: [internalMask, (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["transform: rotateX(90deg)"], ["transform: rotateX(90deg)"])))] }), (0, jsx_runtime_1.jsx)("div", { css: [internalMask, (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["transform: rotateY(90deg)"], ["transform: rotateY(90deg)"])))] })] });
-        };
-        return _this;
-    }
-    CubicDiceDescription.prototype.getImages = function () {
-        return Array.isArray(this.images) ? this.images : Object.values(this.images).flat();
-    };
-    CubicDiceDescription.prototype.getDiceImages = function (itemId) {
-        return Array.isArray(this.images) ? this.images : this.images[itemId];
-    };
-    CubicDiceDescription.prototype.getColor = function (_itemId) {
-        return this.color;
-    };
-    CubicDiceDescription.prototype.getSideTransform = function (index) {
-        switch (index) {
-            case 0:
-                return (0, css_1.transformCss)("translateZ(".concat(this.width / 2, "em)"));
-            case 1:
-                return (0, css_1.transformCss)("translateY(".concat(this.width / 2, "em)"), 'rotateX(-90deg)');
-            case 2:
-                return (0, css_1.transformCss)("translateX(".concat(this.width / 2, "em)"), 'rotateY(90deg)');
-            case 3:
-                return (0, css_1.transformCss)("translateX(-".concat(this.width / 2, "em)"), 'rotateY(-90deg)');
-            case 4:
-                return (0, css_1.transformCss)("translateY(-".concat(this.width / 2, "em)"), 'rotateX(90deg)');
-            default:
-                return (0, css_1.transformCss)("translateZ(-".concat(this.width / 2, "em)"), 'rotateY(180deg)');
-        }
-    };
-    CubicDiceDescription.prototype.getItemTransform = function (item, context) {
-        var _a;
-        return (_a = _super.prototype.getItemTransform.call(this, item, context)).concat.apply(_a, __spreadArray(["translateZ(".concat(this.width / 2, "em)")], __read(this.getRotations(item, context)), false));
-    };
-    CubicDiceDescription.prototype.getRotations = function (item, _context) {
-        switch (item.location.rotation) {
-            case 1:
-                return ['rotateX(90deg)'];
-            case 2:
-                return ['rotateY(-90deg)'];
-            case 3:
-                return ['rotateY(90deg)'];
-            case 4:
-                return ['rotateX(-90deg)'];
-            case 5:
-                return ['rotateY(-180deg)'];
-            default:
-                return [];
-        }
-    };
-    CubicDiceDescription.prototype.getHelpDisplayExtraCss = function (item, context) {
-        return item.location && [css_1.transformCss.apply(void 0, __spreadArray([], __read(this.getRotations(item, context)), false)), (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin: ", "em;\n    "], ["\n      margin: ", "em;\n    "])), this.width / 4)];
-    };
-    return CubicDiceDescription;
-}(MobileMaterialDescription_1.MobileMaterialDescription));
-exports.CubicDiceDescription = CubicDiceDescription;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { range } from 'es-toolkit';
+import { backgroundCss, borderRadiusCss, shadowEffect, shineEffect, transformCss } from '../../../css';
+import { MobileMaterialDescription } from '../MobileMaterialDescription';
+export class CubicDiceDescription extends MobileMaterialDescription {
+    width = 1.6;
+    ratio = 1;
+    borderRadius = 0.3;
+    color = '#000000';
+    getImages() {
+        return Array.isArray(this.images) ? this.images : Object.values(this.images).flat();
+    }
+    getDiceImages(itemId) {
+        return Array.isArray(this.images) ? this.images : this.images[itemId];
+    }
+    getColor(_itemId) {
+        return this.color;
+    }
+    content = ({ itemId, highlight, preview, playDown = preview }) => {
+        const internalMask = css `
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      width: calc(${this.width}em - 2px);
+      height: calc(${this.width}em - 2px);
+      background-color: ${this.getColor(itemId)};
+      border-radius: ${this.borderRadius / 2}em;
+    `;
+        const images = this.getDiceImages(itemId);
+        return _jsxs(_Fragment, { children: [range(6).map((_, index) => _jsx("div", { css: [
+                        css `
+            position: absolute;
+            transform-style: preserve-3d;
+            width: ${this.width}em;
+            height: ${this.width}em;
+          `,
+                        backgroundCss(images[index]),
+                        highlight ? shineEffect : playDown && shadowEffect,
+                        borderRadiusCss(this.borderRadius),
+                        this.getSideTransform(index)
+                    ] }, index)), _jsx("div", { css: internalMask }), _jsx("div", { css: [internalMask, css `transform: rotateX(90deg)`] }), _jsx("div", { css: [internalMask, css `transform: rotateY(90deg)`] })] });
+    };
+    getSideTransform(index) {
+        switch (index) {
+            case 0:
+                return transformCss(`translateZ(${this.width / 2}em)`);
+            case 1:
+                return transformCss(`translateY(${this.width / 2}em)`, 'rotateX(-90deg)');
+            case 2:
+                return transformCss(`translateX(${this.width / 2}em)`, 'rotateY(90deg)');
+            case 3:
+                return transformCss(`translateX(-${this.width / 2}em)`, 'rotateY(-90deg)');
+            case 4:
+                return transformCss(`translateY(-${this.width / 2}em)`, 'rotateX(90deg)');
+            default:
+                return transformCss(`translateZ(-${this.width / 2}em)`, 'rotateY(180deg)');
+        }
+    }
+    getItemTransform(item, context) {
+        return super.getItemTransform(item, context).concat(`translateZ(${this.width / 2}em)`, ...this.getRotations(item, context));
+    }
+    getRotations(item, _context) {
+        switch (item.location.rotation) {
+            case 1:
+                return ['rotateX(90deg)'];
+            case 2:
+                return ['rotateY(-90deg)'];
+            case 3:
+                return ['rotateY(90deg)'];
+            case 4:
+                return ['rotateX(-90deg)'];
+            case 5:
+                return ['rotateY(-180deg)'];
+            default:
+                return [];
+        }
+    }
+    getHelpDisplayExtraCss(item, context) {
+        return item.location && [transformCss(...this.getRotations(item, context)), css `
+      margin: ${this.width / 4}em;
+    `];
+    }
+}
 //# sourceMappingURL=CubicDiceDescription.js.map