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

package/dist/components/buttons/ThemeButton/ThemeButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeButton.js","sourceRoot":"","sources":["../../../../src/components/buttons/ThemeButton/ThemeButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAEA,wCAAyC;AAElC,IAAM,WAAW,GAAgD,UAAC,KAAK;IAC5E,IAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAA;IACxB,OAAO,4CAAQ,GAAG,EAAE,KAAK,CAAC,OAAO,IAAM,KAAK,EAAG,CAAA;AACjD,CAAC,CAAA;AAHY,QAAA,WAAW,eAGvB"}
+{"version":3,"file":"ThemeButton.js","sourceRoot":"","sources":["../../../../src/components/buttons/ThemeButton/ThemeButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAgD,CAAC,KAAK,EAAE,EAAE;IAChF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,OAAO,iBAAQ,GAAG,EAAE,KAAK,CAAC,OAAO,KAAM,KAAK,GAAG,CAAA;AACjD,CAAC,CAAA"}

package/dist/components/buttons/ThemeButton/index.d.ts

@@ -1 +1 @@
-export * from './ThemeButton';
+export * from './ThemeButton';

package/dist/components/buttons/ThemeButton/index.js

@@ -1,18 +1,2 @@
-"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("./ThemeButton"), exports);
+export * from './ThemeButton';
 //# sourceMappingURL=index.js.map

package/dist/components/buttons/ThemeButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/buttons/ThemeButton/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/buttons/ThemeButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/components/buttons/UndoMovesButton/UndoMovesButton.d.ts

@@ -1,7 +1,7 @@
-/** @jsxImportSource @emotion/react */
-import { PlayOptions } from '@gamepark/react-client';
-import { ButtonHTMLAttributes, FC } from 'react';
-export type UndoMovesButtonProps = {
-    moves?: number;
-} & PlayOptions & ButtonHTMLAttributes<HTMLButtonElement>;
-export declare const UndoMovesButton: FC<UndoMovesButtonProps>;
+/** @jsxImportSource @emotion/react */
+import { PlayOptions } from '@gamepark/react-client';
+import { ButtonHTMLAttributes, FC } from 'react';
+export type UndoMovesButtonProps = {
+    moves?: number;
+} & PlayOptions & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const UndoMovesButton: FC<UndoMovesButtonProps>;

package/dist/components/buttons/UndoMovesButton/UndoMovesButton.js

@@ -1,73 +1,31 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UndoMovesButton = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("react");
-var hooks_1 = require("../../../hooks");
-var useIsAnimatingPlayerAction_1 = require("../../material/utils/useIsAnimatingPlayerAction");
-var ThemeButton_1 = require("../ThemeButton");
-var UndoMovesButton = function (props) {
-    var _a = props.moves, moves = _a === void 0 ? 1 : _a, rest = __rest(props, ["moves"]);
-    var _b = __read((0, hooks_1.useUndo)(), 2), undo = _b[0], canUndo = _b[1];
-    var _c = __read((0, react_1.useState)(false), 2), displayedLongEnough = _c[0], setDisplayedLongEnough = _c[1];
-    var isAnimatingPlayerAction = (0, useIsAnimatingPlayerAction_1.useIsAnimatingPlayerAction)();
-    var disabled = (0, react_1.useMemo)(function () { return isAnimatingPlayerAction || !canUndo(); }, [isAnimatingPlayerAction, canUndo]);
-    (0, react_1.useEffect)(function () {
-        if (disabled) {
-            setDisplayedLongEnough(false);
-        }
-        else {
-            var timeout_1 = setTimeout(function () { return setDisplayedLongEnough(true); }, 200);
-            return function () { return clearTimeout(timeout_1); };
-        }
-    }, [disabled]);
-    var doUndo = (0, react_1.useCallback)(function () {
-        undo(moves);
-    }, [undo, moves]);
-    var onClick = (0, react_1.useCallback)(function () {
-        if (displayedLongEnough) {
-            doUndo();
-        }
-    }, [doUndo, displayedLongEnough]);
-    return (0, jsx_runtime_1.jsx)(ThemeButton_1.ThemeButton, __assign({ onClick: onClick, disabled: disabled }, rest), "button");
-};
-exports.UndoMovesButton = UndoMovesButton;
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useUndo } from '../../../hooks';
+import { useIsAnimatingPlayerAction } from '../../material/utils/useIsAnimatingPlayerAction';
+import { ThemeButton } from '../ThemeButton';
+export const UndoMovesButton = (props) => {
+    const { moves = 1, ...rest } = props;
+    const [undo, canUndo] = useUndo();
+    const [displayedLongEnough, setDisplayedLongEnough] = useState(false);
+    const isAnimatingPlayerAction = useIsAnimatingPlayerAction();
+    const disabled = useMemo(() => isAnimatingPlayerAction || !canUndo(), [isAnimatingPlayerAction, canUndo]);
+    useEffect(() => {
+        if (disabled) {
+            setDisplayedLongEnough(false);
+        }
+        else {
+            const timeout = setTimeout(() => setDisplayedLongEnough(true), 200);
+            return () => clearTimeout(timeout);
+        }
+    }, [disabled]);
+    const doUndo = useCallback(() => {
+        undo(moves);
+    }, [undo, moves]);
+    const onClick = useCallback(() => {
+        if (displayedLongEnough) {
+            doUndo();
+        }
+    }, [doUndo, displayedLongEnough]);
+    return _jsx(ThemeButton, { onClick: onClick, disabled: disabled, ...rest }, "button");
+};
 //# sourceMappingURL=UndoMovesButton.js.map

package/dist/components/buttons/UndoMovesButton/UndoMovesButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UndoMovesButton.js","sourceRoot":"","sources":["../../../../src/components/buttons/UndoMovesButton/UndoMovesButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,+BAA2F;AAC3F,wCAAwC;AACxC,8FAA4F;AAC5F,8CAA4C;AAMrC,IAAM,eAAe,GAA6B,UAAC,KAAK;IACrD,IAAA,KAAuB,KAAK,MAAnB,EAAT,KAAK,mBAAG,CAAC,KAAA,EAAK,IAAI,UAAK,KAAK,EAA9B,SAAsB,CAAF,CAAU;IAC9B,IAAA,KAAA,OAAkB,IAAA,eAAO,GAAE,IAAA,EAA1B,IAAI,QAAA,EAAE,OAAO,QAAa,CAAA;IAC3B,IAAA,KAAA,OAAgD,IAAA,gBAAQ,EAAC,KAAK,CAAC,IAAA,EAA9D,mBAAmB,QAAA,EAAE,sBAAsB,QAAmB,CAAA;IACrE,IAAM,uBAAuB,GAAG,IAAA,uDAA0B,GAAE,CAAA;IAC5D,IAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,cAAM,OAAA,uBAAuB,IAAI,CAAC,OAAO,EAAE,EAArC,CAAqC,EAAE,CAAC,uBAAuB,EAAE,OAAO,CAAC,CAAC,CAAA;IACzG,IAAA,iBAAS,EAAC;QACR,IAAI,QAAQ,EAAE;YACZ,sBAAsB,CAAC,KAAK,CAAC,CAAA;SAC9B;aAAM;YACL,IAAM,SAAO,GAAG,UAAU,CAAC,cAAM,OAAA,sBAAsB,CAAC,IAAI,CAAC,EAA5B,CAA4B,EAAE,GAAG,CAAC,CAAA;YACnE,OAAO,cAAM,OAAA,YAAY,CAAC,SAAO,CAAC,EAArB,CAAqB,CAAA;SACnC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAM,MAAM,GAAG,IAAA,mBAAW,EAAC;QACzB,IAAI,CAAC,KAAK,CAAC,CAAA;IACb,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAEjB,IAAM,OAAO,GAAG,IAAA,mBAAW,EAAC;QAC1B,IAAI,mBAAmB,EAAE;YACvB,MAAM,EAAE,CAAA;SACT;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAEjC,OAAO,uBAAC,yBAAW,aAAc,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAAM,IAAI,GAAvD,QAAQ,CAAkD,CAAA;AACpF,CAAC,CAAA;AA1BY,QAAA,eAAe,mBA0B3B"}
+{"version":3,"file":"UndoMovesButton.js","sourceRoot":"","sources":["../../../../src/components/buttons/UndoMovesButton/UndoMovesButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA4B,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAA;AAC5F,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAM5C,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACpC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAA;IACjC,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrE,MAAM,uBAAuB,GAAG,0BAA0B,EAAE,CAAA;IAC5D,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,uBAAuB,EAAE,OAAO,CAAC,CAAC,CAAA;IACzG,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE,CAAC;YACb,sBAAsB,CAAC,KAAK,CAAC,CAAA;QAC/B,CAAC;aAAM,CAAC;YACN,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAA;YACnE,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;QACpC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,KAAK,CAAC,CAAA;IACb,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAEjB,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,IAAI,mBAAmB,EAAE,CAAC;YACxB,MAAM,EAAE,CAAA;QACV,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAEjC,OAAO,KAAC,WAAW,IAAc,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,KAAM,IAAI,IAAvD,QAAQ,CAAkD,CAAA;AACpF,CAAC,CAAA"}

package/dist/components/buttons/UndoMovesButton/index.d.ts

@@ -1 +1 @@
-export * from './UndoMovesButton';
+export * from './UndoMovesButton';

package/dist/components/buttons/UndoMovesButton/index.js

@@ -1,18 +1,2 @@
-"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("./UndoMovesButton"), exports);
+export * from './UndoMovesButton';
 //# sourceMappingURL=index.js.map

package/dist/components/buttons/UndoMovesButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/buttons/UndoMovesButton/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/buttons/UndoMovesButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/dist/components/buttons/index.d.ts

@@ -1,3 +1,3 @@
-export * from './PlayMoveButton';
-export * from './UndoMovesButton';
-export * from './ThemeButton';
+export * from './PlayMoveButton';
+export * from './UndoMovesButton';
+export * from './ThemeButton';

package/dist/components/buttons/index.js

@@ -1,20 +1,4 @@
-"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("./PlayMoveButton"), exports);
-__exportStar(require("./UndoMovesButton"), exports);
-__exportStar(require("./ThemeButton"), exports);
+export * from './PlayMoveButton';
+export * from './UndoMovesButton';
+export * from './ThemeButton';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/buttons/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mDAAgC;AAChC,oDAAiC;AACjC,gDAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/buttons/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA"}

package/dist/components/dialogs/Dialog.d.ts

@@ -1,11 +1,11 @@
-/** @jsxImportSource @emotion/react */
-import { Interpolation } from '@emotion/react';
-import { HTMLAttributes, MouseEventHandler } from 'react';
-export type DialogProps = {
-    open: boolean;
-    backdropCss?: Interpolation<any>;
-    onBackdropClick?: MouseEventHandler<HTMLDivElement>;
-    transitionDelay?: number;
-    rootId?: string;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const Dialog: ({ children, open, backdropCss, onBackdropClick, transitionDelay, rootId, ...props }: DialogProps) => import("react").ReactPortal | null;
+/** @jsxImportSource @emotion/react */
+import { Interpolation } from '@emotion/react';
+import { HTMLAttributes, MouseEventHandler } from 'react';
+export type DialogProps = {
+    open: boolean;
+    backdropCss?: Interpolation<any>;
+    onBackdropClick?: MouseEventHandler<HTMLDivElement>;
+    transitionDelay?: number;
+    rootId?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Dialog: ({ children, open, backdropCss, onBackdropClick, transitionDelay, rootId, ...props }: DialogProps) => import("react").ReactPortal | null;

package/dist/components/dialogs/Dialog.js

@@ -1,85 +1,75 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-var react_1 = require("@emotion/react");
-var react_2 = require("react");
-var react_dom_1 = require("react-dom");
-var Dialog = function (_a) {
-    var children = _a.children, open = _a.open, backdropCss = _a.backdropCss, onBackdropClick = _a.onBackdropClick, _b = _a.transitionDelay, transitionDelay = _b === void 0 ? 0.3 : _b, _c = _a.rootId, rootId = _c === void 0 ? 'root' : _c, props = __rest(_a, ["children", "open", "backdropCss", "onBackdropClick", "transitionDelay", "rootId"]);
-    var _d = __read((0, react_2.useState)(open), 2), display = _d[0], setDisplay = _d[1];
-    // When we open the dialog with use-long-press, Chrome mobile generates a click event on the backdrop even though the pointer down event
-    // was done before the dialog existed. It causes the dialog to close immediately. We prevent any backdrop click for 300ms to workaround this issue.
-    var _e = __read((0, react_2.useState)(false), 2), justDisplayed = _e[0], setJustDisplayed = _e[1];
-    (0, react_2.useEffect)(function () {
-        if (open) {
-            setDisplay(true);
-            setJustDisplayed(true);
-            var timeout_1 = setTimeout(function () { return setJustDisplayed(false); }, 300);
-            return function () { return clearTimeout(timeout_1); };
-        }
-        else {
-            var timeout_2 = setTimeout(function () { return setDisplay(false); }, transitionDelay * 1000);
-            return function () { return clearTimeout(timeout_2); };
-        }
-    }, [open, transitionDelay]);
-    if (!display)
-        return null;
-    var root = document.getElementById(rootId);
-    if (!root) {
-        console.error('Dialog cannot be displayed because this element id does not exists:', rootId);
-        return null;
-    }
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", __assign({ css: [backdropStyle(transitionDelay), !open && hide(transitionDelay), backdropCss], onClick: function (event) { return !justDisplayed && (onBackdropClick === null || onBackdropClick === void 0 ? void 0 : onBackdropClick(event)); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (event) { return event.stopPropagation(); }, css: function (theme) { return dialogCss(theme); } }, props, { children: children })) })), root);
-};
-exports.Dialog = Dialog;
-var fadeIn = (0, react_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-var fadeOut = (0, react_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n"], ["\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n"])));
-var backdropStyle = function (transitionDelay) { return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  width: 100dvw;\n  height: 100vh;\n  height: 100dvh;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1100;\n  transition: opacity ", "s;\n  animation: ", " ", "s forwards;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  width: 100dvw;\n  height: 100vh;\n  height: 100dvh;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1100;\n  transition: opacity ", "s;\n  animation: ", " ", "s forwards;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), transitionDelay, fadeIn, transitionDelay); };
-var hide = function (transitionDelay) { return (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: ", " ", "s forwards;\n  pointer-events: none;\n"], ["\n  animation: ", " ", "s forwards;\n  pointer-events: none;\n"])), fadeOut, transitionDelay); };
-var dialogCss = function (theme) { return (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  color: ", ";\n  padding: 1em;\n  border-radius: 1em;\n  box-shadow: 0 0 0.2em black;\n"], ["\n  position: relative;\n  background-color: ", ";\n  color: ", ";\n  padding: 1em;\n  border-radius: 1em;\n  box-shadow: 0 0 0.2em black;\n"])), theme.dialog.backgroundColor, theme.dialog.color); };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, keyframes } from '@emotion/react';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+export const Dialog = ({ children, open, backdropCss, onBackdropClick, transitionDelay = 0.3, rootId = 'root', ...props }) => {
+    const [display, setDisplay] = useState(open);
+    // When we open the dialog with use-long-press, Chrome mobile generates a click event on the backdrop even though the pointer down event
+    // was done before the dialog existed. It causes the dialog to close immediately. We prevent any backdrop click for 300ms to workaround this issue.
+    const [justDisplayed, setJustDisplayed] = useState(false);
+    useEffect(() => {
+        if (open) {
+            setDisplay(true);
+            setJustDisplayed(true);
+            const timeout = setTimeout(() => setJustDisplayed(false), 300);
+            return () => clearTimeout(timeout);
+        }
+        else {
+            const timeout = setTimeout(() => setDisplay(false), transitionDelay * 1000);
+            return () => clearTimeout(timeout);
+        }
+    }, [open, transitionDelay]);
+    if (!display)
+        return null;
+    const root = document.getElementById(rootId);
+    if (!root) {
+        console.error('Dialog cannot be displayed because this element id does not exists:', rootId);
+        return null;
+    }
+    return createPortal(_jsx("div", { css: [backdropStyle(transitionDelay), !open && hide(transitionDelay), backdropCss], onClick: event => !justDisplayed && onBackdropClick?.(event), children: _jsx("div", { onClick: event => event.stopPropagation(), css: theme => dialogCss(theme), ...props, children: children }) }), root);
+};
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+const fadeOut = keyframes `
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+`;
+const backdropStyle = (transitionDelay) => css `
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  width: 100dvw;
+  height: 100vh;
+  height: 100dvh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1100;
+  transition: opacity ${transitionDelay}s;
+  animation: ${fadeIn} ${transitionDelay}s forwards;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const hide = (transitionDelay) => css `
+  animation: ${fadeOut} ${transitionDelay}s forwards;
+  pointer-events: none;
+`;
+const dialogCss = (theme) => css `
+  position: relative;
+  background-color: ${theme.dialog.backgroundColor};
+  color: ${theme.dialog.color};
+  padding: 1em;
+  border-radius: 1em;
+  box-shadow: 0 0 0.2em black;
+`;
 //# sourceMappingURL=Dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/dialogs/Dialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/dialogs/Dialog.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAiB,SAAS,EAAS,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAAqC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAUxC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,GAAG,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE;IACxI,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC5C,wIAAwI;IACxI,mJAAmJ;IACnJ,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YACT,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,gBAAgB,CAAC,IAAI,CAAC,CAAA;YACtB,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAA;YAC9D,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;QACpC,CAAC;aAAM,CAAC;YACN,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC,CAAA;YAC3E,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;QACpC,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAA;IAE3B,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAEzB,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;IAC5C,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,CAAC,KAAK,CAAC,qEAAqE,EAAE,MAAM,CAAC,CAAA;QAC5F,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,YAAY,CACjB,cAAK,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,aAAa,IAAI,eAAe,EAAE,CAAC,KAAK,CAAC,YACnJ,cAAK,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,KAAM,KAAK,YACtF,QAAQ,GACL,GACF,EACN,IAAI,CACL,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,SAAS,CAAA;;;;;;;CAOvB,CAAA;AAED,MAAM,OAAO,GAAG,SAAS,CAAA;;;;;;;CAOxB,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,eAAuB,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;;;wBAS9B,eAAe;eACxB,MAAM,IAAI,eAAe;;;;CAIvC,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,eAAuB,EAAE,EAAE,CAAC,GAAG,CAAA;eAC9B,OAAO,IAAI,eAAe;;CAExC,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,GAAG,CAAA;;sBAEjB,KAAK,CAAC,MAAM,CAAC,eAAe;WACvC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;CAI5B,CAAA"}

package/dist/components/dialogs/FailuresDialog.d.ts

@@ -1,2 +1,2 @@
-import { DialogProps } from './Dialog';
-export declare const FailuresDialog: (props: Omit<DialogProps, 'open'>) => import("@emotion/react/jsx-runtime").JSX.Element;
+import { DialogProps } from './Dialog';
+export declare const FailuresDialog: (props: Omit<DialogProps, "open">) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/dialogs/FailuresDialog.js

@@ -1,85 +1,51 @@
-"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 _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FailuresDialog = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-var react_1 = require("@emotion/react");
-var react_2 = require("react");
-var react_i18next_1 = require("react-i18next");
-var Dialog_1 = require("./Dialog");
-var hooks_1 = require("../../hooks");
-var react_client_1 = require("@gamepark/react-client");
-var menuCss_1 = require("../menus/menuCss");
-var FailuresDialog = function (props) {
-    var t = (0, react_i18next_1.useTranslation)().t;
-    var _a = __read((0, hooks_1.useFailures)(), 2), failures = _a[0], clearFailures = _a[1];
-    var _b = __read((0, react_2.useState)(''), 2), displayedFailure = _b[0], setDisplayedFailure = _b[1];
-    (0, react_2.useEffect)(function () {
-        if (failures.length) {
-            setDisplayedFailure(failures[0]);
-        }
-        else {
-            setTimeout(function () { return setDisplayedFailure(''); }, 500);
-        }
-    }, [failures]);
-    var description = failuresDescription[displayedFailure] || fallbackDescription(displayedFailure);
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, __assign({ open: failures.length > 0, css: menuCss_1.menuDialogCss }, props, { children: [(0, jsx_runtime_1.jsx)("h2", { children: description.title(t) }), (0, jsx_runtime_1.jsx)("p", { children: description.text(t) }), (0, jsx_runtime_1.jsx)("button", __assign({ css: [menuCss_1.menuButtonCss, inDialogButton], onClick: function () { return clearFailures(); } }, { children: t('OK') })), displayedFailure === react_client_1.Failure.MOVE_FORBIDDEN && (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)(react_i18next_1.Trans, { defaults: "failure.dialog.play2", components: [(0, jsx_runtime_1.jsx)("button", { css: [menuCss_1.menuButtonCss, (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["display: inline-block"], ["display: inline-block"])))], onClick: function () { return window.location.reload(); } })] }) })] })));
-};
-exports.FailuresDialog = FailuresDialog;
-var failuresDescription = (_a = {},
-    _a[react_client_1.Failure.NETWORK] = {
-        title: function (t) { return t('Whoops...'); },
-        text: function (t) { return t('failure.dialog.network'); }
-    },
-    _a[react_client_1.Failure.MOVE_FORBIDDEN] = {
-        title: function (t) { return t('Move unauthorized!'); },
-        text: function (t) { return t('failure.dialog.play'); }
-    },
-    _a[react_client_1.Failure.UNDO_FORBIDDEN] = {
-        title: function (t) { return t('Too late!'); },
-        text: function (t) { return t('failure.dialog.undo'); }
-    },
-    _a[react_client_1.Failure.TUTORIAL_MOVE_EXPECTED] = {
-        title: function (t) { return t('Move not expected in the tutorial'); },
-        text: function (t) { return t('failure.dialog.tutorial'); }
-    },
-    _a);
-var fallbackDescription = function (failure) { return ({
-    title: function (t) { return t('Unknown error:'); },
-    text: function () { return failure; }
-}); };
-var inDialogButton = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0 0 0 auto;\n  font-size: 1.125em;\n"], ["\n  margin: 0 0 0 auto;\n  font-size: 1.125em;\n"])));
-var templateObject_1, templateObject_2;
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { clearFailures, Failure, useGameDispatch, useGameSelector } from '@gamepark/react-client';
+import { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { menuButtonCss, menuDialogCss } from '../menus/menuCss';
+import { Dialog } from './Dialog';
+export const FailuresDialog = (props) => {
+    const { t } = useTranslation();
+    const failures = useGameSelector((state) => state.failures);
+    const dispatch = useGameDispatch();
+    const [displayedFailure, setDisplayedFailure] = useState('');
+    useEffect(() => {
+        if (failures.length) {
+            setDisplayedFailure(failures[0]);
+        }
+        else {
+            setTimeout(() => setDisplayedFailure(''), 500);
+        }
+    }, [failures]);
+    const description = failuresDescription[displayedFailure] || fallbackDescription(displayedFailure);
+    return (_jsxs(Dialog, { open: failures.length > 0, css: menuDialogCss, ...props, children: [_jsx("h2", { children: description.title(t) }), _jsx("p", { children: description.text(t) }), _jsx("button", { css: [menuButtonCss, inDialogButton], onClick: () => dispatch(clearFailures()), children: t('OK') }), displayedFailure === Failure.MOVE_FORBIDDEN && _jsx("p", { children: _jsx(Trans, { defaults: "failure.dialog.play2", components: [_jsx("button", { css: [menuButtonCss, css `display: inline-block`], onClick: () => window.location.reload() })] }) })] }));
+};
+const failuresDescription = {
+    [Failure.NETWORK]: {
+        title: (t) => t('Whoops...'),
+        text: (t) => t('failure.dialog.network')
+    },
+    [Failure.MOVE_FORBIDDEN]: {
+        title: (t) => t('Move unauthorized!'),
+        text: (t) => t('failure.dialog.play')
+    },
+    [Failure.UNDO_FORBIDDEN]: {
+        title: (t) => t('Too late!'),
+        text: (t) => t('failure.dialog.undo')
+    },
+    [Failure.TUTORIAL_MOVE_EXPECTED]: {
+        title: (t) => t('Move not expected in the tutorial'),
+        text: (t) => t('failure.dialog.tutorial')
+    }
+};
+const fallbackDescription = (failure) => ({
+    title: (t) => t('Unknown error:'),
+    text: () => failure
+});
+const inDialogButton = css `
+  margin: 0 0 0 auto;
+  font-size: 1.125em;
+`;
 //# sourceMappingURL=FailuresDialog.js.map