@gamepark/react-game 7.7.14 → 7.7.15

package/README.md

@@ -1,41 +1,41 @@
-# @gamepark/react-game
-
-React components & tools to create a Board Game user interface for Game Park.
-
-## Sounds deployment
-
-Default sounds (e.g. turn notification) are hosted on `sounds.game-park.com` (Clever Cloud Cellar).
-
-The `sounds/` directory at the root of this project contains the sound files to deploy.
-
-### rclone configuration
-
-Install [rclone](https://rclone.org/) then configure a remote:
-
-```
-rclone config
-> n
-name> sounds
-Storage> s3
-provider> Other
-env_auth> false
-access_key_id> [your key - do not commit!]
-secret_access_key> [your secret - do not commit!]
-region>
-endpoint> cellar-c2.services.clever-cloud.com
-location_constraint>
-acl> public-read
-Edit advanced config> n
-```
-
-### Deploy sounds
-
-Sounds are automatically synced during `yarn publish`. You can also sync manually:
-
-```bash
-yarn sync-sounds
-```
-
-### CORS
-
-The Cellar bucket must have CORS configured to allow `fetch()` from game origins (`Access-Control-Allow-Origin: *`).
+# @gamepark/react-game
+
+React components & tools to create a Board Game user interface for Game Park.
+
+## Sounds deployment
+
+Default sounds (e.g. turn notification) are hosted on `sounds.game-park.com` (Clever Cloud Cellar).
+
+The `sounds/` directory at the root of this project contains the sound files to deploy.
+
+### rclone configuration
+
+Install [rclone](https://rclone.org/) then configure a remote:
+
+```
+rclone config
+> n
+name> sounds
+Storage> s3
+provider> Other
+env_auth> false
+access_key_id> [your key - do not commit!]
+secret_access_key> [your secret - do not commit!]
+region>
+endpoint> cellar-c2.services.clever-cloud.com
+location_constraint>
+acl> public-read
+Edit advanced config> n
+```
+
+### Deploy sounds
+
+Sounds are automatically synced during `yarn publish`. You can also sync manually:
+
+```bash
+yarn sync-sounds
+```
+
+### CORS
+
+The Cellar bucket must have CORS configured to allow `fetch()` from game origins (`Access-Control-Allow-Origin: *`).

package/dist/components/GameProvider/GameErrorBoundary.js

@@ -20,124 +20,124 @@ export class GameErrorBoundary extends Component {
         return (_jsx("div", { css: containerCss, children: _jsxs("div", { css: cardCss, children: [_jsx("div", { css: iconContainerCss, children: _jsx(FontAwesomeIcon, { icon: faTriangleExclamation, css: iconCss }) }), _jsx("p", { css: messageCss, children: _jsx(Trans, { defaults: "A technical error has occurred. The error has been sent to the Game Park team.", i18nKey: "error.crash", ns: "common" }) }), _jsx("p", { css: hintCss, children: _jsx(Trans, { defaults: "You can refresh the page to continue your game.", i18nKey: "error.refresh.hint", ns: "common" }) }), _jsx("button", { css: buttonCss, onClick: () => window.location.reload(), children: _jsx(Trans, { defaults: "Refresh the page", i18nKey: "error.refresh.button", ns: "common" }) }), _jsx("div", { css: dividerCss }), _jsx("p", { css: secondaryMessageCss, children: _jsx(Trans, { defaults: "If the problem persists despite refreshing and the game is corrupted, please let us know on Discord.", i18nKey: "error.discord.hint", ns: "common" }) }), _jsxs("a", { css: discordLinkCss, href: "https://discord.gg/ZMCX5reQm8", target: "_blank", rel: "noopener noreferrer", children: [_jsx("svg", { css: discordIconCss, viewBox: "0 0 127.14 96.36", fill: "currentColor", children: _jsx("path", { d: "M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2.04a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2.04a68.68 68.68 0 0 1-10.87 5.19 77.28 77.28 0 0 0 6.89 11.1 105.45 105.45 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53.05c0-6.94 5.04-12.67 11.45-12.67S53.99 46.1 53.9 53.05c0 6.94-5.08 12.64-11.45 12.64Zm42.24 0C78.41 65.69 73.25 60 73.25 53.05c0-6.94 5.04-12.67 11.44-12.67s11.51 5.73 11.44 12.67c0 6.94-5.04 12.64-11.44 12.64Z" }) }), _jsx(Trans, { defaults: "Join the Game Park Discord", i18nKey: "error.discord.button", ns: "common" })] })] }) }));
     }
 }
-const fadeIn = keyframes `
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 `;
-const containerCss = css `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-  padding: 2em;
-  box-sizing: border-box;
-  font-family: "Mulish", sans-serif;
+const containerCss = css `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  padding: 2em;
+  box-sizing: border-box;
+  font-family: "Mulish", sans-serif;
 `;
-const cardCss = css `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 460px;
-  padding: 2.5em 2.5em 2em;
-  border-radius: 1.2em;
-  background: #002448;
-  color: #eee;
-  text-align: center;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  animation: ${fadeIn} 0.4s ease-out;
+const cardCss = css `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 460px;
+  padding: 2.5em 2.5em 2em;
+  border-radius: 1.2em;
+  background: #002448;
+  color: #eee;
+  text-align: center;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  animation: ${fadeIn} 0.4s ease-out;
 `;
-const iconContainerCss = css `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  background: rgba(40, 184, 206, 0.15);
-  margin-bottom: 1.2em;
+const iconContainerCss = css `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: rgba(40, 184, 206, 0.15);
+  margin-bottom: 1.2em;
 `;
-const iconCss = css `
-  font-size: 32px;
-  color: #28B8CE;
+const iconCss = css `
+  font-size: 32px;
+  color: #28B8CE;
 `;
-const messageCss = css `
-  font-size: 1.05em;
-  font-weight: 600;
-  line-height: 1.5;
-  margin: 0 0 0.3em;
+const messageCss = css `
+  font-size: 1.05em;
+  font-weight: 600;
+  line-height: 1.5;
+  margin: 0 0 0.3em;
 `;
-const hintCss = css `
-  font-size: 0.95em;
-  line-height: 1.5;
-  margin: 0;
-  opacity: 0.8;
+const hintCss = css `
+  font-size: 0.95em;
+  line-height: 1.5;
+  margin: 0;
+  opacity: 0.8;
 `;
-const buttonCss = css `
-  margin-top: 1.5em;
-  padding: 0.65em 2.2em;
-  font-size: 1em;
-  font-family: inherit;
-  font-weight: 700;
-  border: none;
-  border-radius: 0.6em;
-  background: #28B8CE;
-  color: white;
-  cursor: pointer;
-  transition: background 0.2s, transform 0.1s;
-  letter-spacing: 0.02em;
-
-  &:hover {
-    background: #24a5b9;
-  }
-
-  &:active {
-    background: #2092a3;
-    transform: scale(0.97);
-  }
+const buttonCss = css `
+  margin-top: 1.5em;
+  padding: 0.65em 2.2em;
+  font-size: 1em;
+  font-family: inherit;
+  font-weight: 700;
+  border: none;
+  border-radius: 0.6em;
+  background: #28B8CE;
+  color: white;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s;
+  letter-spacing: 0.02em;
+
+  &:hover {
+    background: #24a5b9;
+  }
+
+  &:active {
+    background: #2092a3;
+    transform: scale(0.97);
+  }
 `;
-const dividerCss = css `
-  width: 60%;
-  height: 1px;
-  background: rgba(255, 255, 255, 0.12);
-  margin: 1.8em 0 1.2em;
+const dividerCss = css `
+  width: 60%;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.12);
+  margin: 1.8em 0 1.2em;
 `;
-const secondaryMessageCss = css `
-  font-size: 0.85em;
-  line-height: 1.6;
-  margin: 0 0 1em;
-  opacity: 0.65;
+const secondaryMessageCss = css `
+  font-size: 0.85em;
+  line-height: 1.6;
+  margin: 0 0 1em;
+  opacity: 0.65;
 `;
-const discordLinkCss = css `
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em;
-  padding: 0.5em 1.4em;
-  font-size: 0.9em;
-  font-family: inherit;
-  font-weight: 600;
-  color: white;
-  background: #5865F2;
-  border-radius: 0.5em;
-  text-decoration: none;
-  transition: background 0.2s, transform 0.1s;
-
-  &:hover {
-    background: #4752C4;
-  }
-
-  &:active {
-    transform: scale(0.97);
-  }
+const discordLinkCss = css `
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  padding: 0.5em 1.4em;
+  font-size: 0.9em;
+  font-family: inherit;
+  font-weight: 600;
+  color: white;
+  background: #5865F2;
+  border-radius: 0.5em;
+  text-decoration: none;
+  transition: background 0.2s, transform 0.1s;
+
+  &:hover {
+    background: #4752C4;
+  }
+
+  &:active {
+    transform: scale(0.97);
+  }
 `;
-const discordIconCss = css `
-  width: 20px;
-  height: 20px;
+const discordIconCss = css `
+  width: 20px;
+  height: 20px;
 `;
 //# sourceMappingURL=GameErrorBoundary.js.map

package/dist/components/GameProvider/GameInternalProviders.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+/**
+ * Internal providers that need access to the Redux store (i.e. must be inside Remote/LocalGameProvider).
+ * Keeps GameProvider clean — add future internal providers here.
+ */
+export declare const GameInternalProviders: FC<PropsWithChildren>;

package/dist/components/GameProvider/GameInternalProviders.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { LogHistoryProvider } from '../Log/LogHistoryProvider';
+/**
+ * Internal providers that need access to the Redux store (i.e. must be inside Remote/LocalGameProvider).
+ * Keeps GameProvider clean — add future internal providers here.
+ */
+export const GameInternalProviders = ({ children }) => {
+    return (_jsx(LogHistoryProvider, { children: children }));
+};
+//# sourceMappingURL=GameInternalProviders.js.map

package/dist/components/GameProvider/GameInternalProviders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GameInternalProviders.js","sourceRoot":"","sources":["../../../src/components/GameProvider/GameInternalProviders.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAE9D;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,KAAC,kBAAkB,cAChB,QAAQ,GACU,CACtB,CAAA;AACH,CAAC,CAAA"}

package/dist/components/GameProvider/LogHistoryBridge.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+/**
+ * Bridge component that computes the log history and injects it into the existing gameContext.
+ * Only activates when logs are configured. Sits inside Remote/LocalGameProvider
+ * so it has access to the Redux store.
+ */
+export declare const LogHistoryBridge: FC<PropsWithChildren>;

package/dist/components/GameProvider/LogHistoryBridge.js

@@ -0,0 +1,23 @@
+import { Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useContext, useMemo } from 'react';
+import { useLogHistoryProvider } from '../../hooks/useFlatHistory';
+import { gameContext } from './GameContext';
+/**
+ * Bridge component that computes the log history and injects it into the existing gameContext.
+ * Only activates when logs are configured. Sits inside Remote/LocalGameProvider
+ * so it has access to the Redux store.
+ */
+export const LogHistoryBridge = ({ children }) => {
+    const parentContext = useContext(gameContext);
+    if (!parentContext.logs) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return _jsx(LogHistoryBridgeInternal, { children: children });
+};
+const LogHistoryBridgeInternal = ({ children }) => {
+    const parentContext = useContext(gameContext);
+    const logHistory = useLogHistoryProvider();
+    const enrichedContext = useMemo(() => ({ ...parentContext, logHistory }), [parentContext, logHistory]);
+    return (_jsx(gameContext.Provider, { value: enrichedContext, children: children }));
+};
+//# sourceMappingURL=LogHistoryBridge.js.map

package/dist/components/GameProvider/LogHistoryBridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogHistoryBridge.js","sourceRoot":"","sources":["../../../src/components/GameProvider/LogHistoryBridge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyB,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAe,WAAW,EAAE,MAAM,eAAe,CAAA;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACtE,MAAM,aAAa,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAC7C,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QACxB,OAAO,4BAAG,QAAQ,GAAI,CAAA;IACxB,CAAC;IACD,OAAO,KAAC,wBAAwB,cAAE,QAAQ,GAA4B,CAAA;AACxE,CAAC,CAAA;AAED,MAAM,wBAAwB,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvE,MAAM,aAAa,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAC7C,MAAM,UAAU,GAAG,qBAAqB,EAAE,CAAA;IAE1C,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,aAAa,EAAE,UAAU,EAAE,CAAC,EACxC,CAAC,aAAa,EAAE,UAAU,CAAC,CAC5B,CAAA;IAED,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,YACzC,QAAQ,GACY,CACxB,CAAA;AACH,CAAC,CAAA"}

package/dist/components/JournalTabs/History/SetupLogItem.js

@@ -3,24 +3,24 @@ import { css } from '@emotion/react';
 export const SetupLogItem = ({ log, game, index, customEntryCss, ...rest }) => {
     return (_jsx("div", { ...rest, children: _jsx("div", { css: [entryCss, customEntryCss, log.css], children: _jsx("div", { children: _jsx(log.Component, { game: game, index: index }) }) }) }));
 };
-const entryCss = css `
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  border-radius: 1em;
-  margin-bottom: 0.5em;
-  min-height: 1em;
-  padding-left: 1em;
-  margin-left: 0.05em;
-  margin-top: 0.05em;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  display: flex;
-  align-items: center;
-  font-size: 2em;
-  white-space: pre-wrap;
-
-  img, picture {
-    vertical-align: middle;
-  }
+const entryCss = css `
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 1em;
+  margin-bottom: 0.5em;
+  min-height: 1em;
+  padding-left: 1em;
+  margin-left: 0.05em;
+  margin-top: 0.05em;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  display: flex;
+  align-items: center;
+  font-size: 2em;
+  white-space: pre-wrap;
+
+  img, picture {
+    vertical-align: middle;
+  }
 `;
 //# sourceMappingURL=SetupLogItem.js.map

package/dist/components/JournalTabs/History/VirtualizedLogItem.d.ts

@@ -0,0 +1,12 @@
+import { Interpolation, Theme } from '@emotion/react';
+import { CSSProperties, FC } from 'react';
+import { MoveHistory } from '../../../hooks/useFlatHistory';
+export type VirtualizedLogItemProps = {
+    history: MoveHistory;
+    itemCss: Interpolation<Theme>;
+    customEntryCss: Interpolation<Theme>[];
+};
+export declare const VirtualizedLogItem: FC<VirtualizedLogItemProps & {
+    index: number;
+    style: CSSProperties;
+}>;

package/dist/components/JournalTabs/History/VirtualizedLogItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { LogItem } from '../../Log';
+export const VirtualizedLogItem = ({ history, itemCss, customEntryCss, style }) => {
+    return (_jsx("div", { style: style, children: _jsx(LogItem, { history: history, css: itemCss, customEntryCss: customEntryCss }) }));
+};
+//# sourceMappingURL=VirtualizedLogItem.js.map

package/dist/components/JournalTabs/History/VirtualizedLogItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedLogItem.js","sourceRoot":"","sources":["../../../../src/components/JournalTabs/History/VirtualizedLogItem.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAQnC,MAAM,CAAC,MAAM,kBAAkB,GAA0E,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE;IACvJ,OAAO,CACL,cAAK,KAAK,EAAE,KAAK,YACf,KAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,GAAG,GACtE,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Log/LogHistoryProvider.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+/**
+ * Provides log history via a dedicated context, isolated from gameContext.
+ * Only mounts the history processing when logs are configured.
+ * Changes to the log history only re-render components that consume logHistoryContext.
+ */
+export declare const LogHistoryProvider: FC<PropsWithChildren>;

package/dist/components/Log/LogHistoryProvider.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { useContext } from 'react';
+import { logHistoryContext } from '../../hooks/LogHistoryContext';
+import { useLogHistoryProvider } from '../../hooks/useFlatHistory';
+import { gameContext } from '../GameProvider';
+const LogHistoryProviderInternal = ({ children }) => {
+    const state = useLogHistoryProvider();
+    return (_jsx(logHistoryContext.Provider, { value: state, children: children }));
+};
+/**
+ * Provides log history via a dedicated context, isolated from gameContext.
+ * Only mounts the history processing when logs are configured.
+ * Changes to the log history only re-render components that consume logHistoryContext.
+ */
+export const LogHistoryProvider = ({ children }) => {
+    const context = useContext(gameContext);
+    if (!context.logs) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(LogHistoryProviderInternal, { children: children }));
+};
+//# sourceMappingURL=LogHistoryProvider.js.map

package/dist/components/Log/LogHistoryProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogHistoryProvider.js","sourceRoot":"","sources":["../../../src/components/Log/LogHistoryProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyB,UAAU,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C,MAAM,0BAA0B,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,qBAAqB,EAAE,CAAA;IACrC,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACrC,QAAQ,GACkB,CAC9B,CAAA;AACH,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxE,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACvC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAClB,OAAO,4BAAG,QAAQ,GAAI,CAAA;IACxB,CAAC;IACD,OAAO,CACL,KAAC,0BAA0B,cACxB,QAAQ,GACkB,CAC9B,CAAA;AACH,CAAC,CAAA"}

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

@@ -1,5 +1,6 @@
 import { Interpolation } from '@emotion/react';
 import { HTMLAttributes, MouseEventHandler } from 'react';
+export declare const useDialogBackdrop: () => HTMLDivElement | null;
 export type DialogProps = {
     open: boolean;
     backdropCss?: Interpolation<any>;

package/dist/components/dialogs/Dialog.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css, keyframes, ThemeProvider, useTheme } from '@emotion/react';
-import { useEffect, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
+const DialogBackdropContext = createContext(null);
+export const useDialogBackdrop = () => useContext(DialogBackdropContext);
 export const Dialog = ({ children, open, backdropCss, onBackdropClick, transitionDelay = 0.3, rootId = 'root', ...props }) => {
     const theme = useTheme();
+    const [wrapperElement, setWrapperElement] = useState(null);
+    const wrapperRef = useCallback((node) => setWrapperElement(node), []);
     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.
@@ -38,7 +42,7 @@ export const Dialog = ({ children, open, backdropCss, onBackdropClick, transitio
     // game does not provide any theme.buttons.
     const resolvedDialogButtonsCss = [dialogButtonBaseCss, theme.buttons, theme.dialog.buttons];
     const dialogContent = (_jsx("div", { onClick: event => event.stopPropagation(), css: [dialogCss, open ? (theme.dialog.openAnimation ?? dialogShow(transitionDelay)) : (theme.dialog.closeAnimation ?? dialogHide(transitionDelay)), theme.dialog.container], ...props, children: children }));
-    return createPortal(_jsx("div", { css: [backdropStyle(transitionDelay), !open && hide(transitionDelay), backdropCss], onClick: event => !justDisplayed && onBackdropClick?.(event), children: _jsx(ThemeProvider, { theme: t => ({ ...t, buttons: resolvedDialogButtonsCss }), children: dialogContent }) }), root);
+    return createPortal(_jsx("div", { css: [backdropStyle(transitionDelay), !open && hide(transitionDelay), backdropCss], onClick: event => !justDisplayed && onBackdropClick?.(event), children: _jsx(ThemeProvider, { theme: t => ({ ...t, buttons: resolvedDialogButtonsCss }), children: _jsx("div", { ref: wrapperRef, css: dialogWrapperCss, children: _jsx(DialogBackdropContext.Provider, { value: wrapperElement, children: dialogContent }) }) }) }), root);
 };
 // Structural base — applied to every button rendered inside a Dialog
 // regardless of the active theme. Games override visuals via
@@ -123,8 +127,12 @@ const dialogShow = (transitionDelay) => css `
 const dialogHide = (transitionDelay) => css `
   animation: ${scaleOut} ${transitionDelay}s ease-in forwards;
 `;
+const dialogWrapperCss = css `
+  position: relative;
+`;
 const dialogCss = css `
   position: relative;
+  z-index: 1;
   background-color: var(--gp-dialog-bg);
   color: var(--gp-dialog-color);
   padding: 1em;

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/dialogs/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAiB,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACvF,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,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,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,kEAAkE;IAClE,uEAAuE;IACvE,sEAAsE;IACtE,sEAAsE;IACtE,8CAA8C;IAC9C,iEAAiE;IACjE,yDAAyD;IACzD,oEAAoE;IACpE,2CAA2C;IAC3C,MAAM,wBAAwB,GAAG,CAAC,mBAAmB,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAC3F,MAAM,aAAa,GAAG,CACpB,cAAK,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,IAAI,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,IAAI,UAAU,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAM,KAAK,YACnO,QAAQ,GACL,CACP,CAAA;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,KAAC,aAAa,IAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC,YAAG,aAAa,GAAiB,GACrG,EACN,IAAI,CACL,CAAA;AACH,CAAC,CAAA;AAED,qEAAqE;AACrE,6DAA6D;AAC7D,8DAA8D;AAC9D,sEAAsE;AACtE,qCAAqC;AACrC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgB9B,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,OAAO,GAAG,SAAS,CAAA;;;;;;;;;CASxB,CAAA;AAED,MAAM,QAAQ,GAAG,SAAS,CAAA;;;;;;;;;CASzB,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,eAAuB,EAAE,EAAE,CAAC,GAAG,CAAA;eACpC,OAAO,IAAI,eAAe;CACxC,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,eAAuB,EAAE,EAAE,CAAC,GAAG,CAAA;eACpC,QAAQ,IAAI,eAAe;CACzC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;CAOpB,CAAA"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/dialogs/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAiB,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACvF,OAAO,EAAE,aAAa,EAAqC,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtH,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,MAAM,qBAAqB,GAAG,aAAa,CAAwB,IAAI,CAAC,CAAA;AAExE,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAA;AAUxE,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,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAA;IACjF,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,IAA2B,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAC5F,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,kEAAkE;IAClE,uEAAuE;IACvE,sEAAsE;IACtE,sEAAsE;IACtE,8CAA8C;IAC9C,iEAAiE;IACjE,yDAAyD;IACzD,oEAAoE;IACpE,2CAA2C;IAC3C,MAAM,wBAAwB,GAAG,CAAC,mBAAmB,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAC3F,MAAM,aAAa,GAAG,CACpB,cAAK,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,IAAI,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,IAAI,UAAU,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAM,KAAK,YACnO,QAAQ,GACL,CACP,CAAA;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,KAAC,aAAa,IAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC,YACtE,cAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,gBAAgB,YACzC,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,YAClD,aAAa,GACiB,GAC7B,GACQ,GACZ,EACN,IAAI,CACL,CAAA;AACH,CAAC,CAAA;AAED,qEAAqE;AACrE,6DAA6D;AAC7D,8DAA8D;AAC9D,sEAAsE;AACtE,qCAAqC;AACrC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgB9B,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,OAAO,GAAG,SAAS,CAAA;;;;;;;;;CASxB,CAAA;AAED,MAAM,QAAQ,GAAG,SAAS,CAAA;;;;;;;;;CASzB,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,eAAuB,EAAE,EAAE,CAAC,GAAG,CAAA;eACpC,OAAO,IAAI,eAAe;CACxC,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,eAAuB,EAAE,EAAE,CAAC,GAAG,CAAA;eACpC,QAAQ,IAAI,eAAe;CACzC,CAAA;AAED,MAAM,gBAAgB,GAAG,GAAG,CAAA;;CAE3B,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;CAQpB,CAAA"}

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

@@ -6,10 +6,10 @@ import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useTranslation } from 'react-i18next';
 export const BottomBarNavigation = ({ onPrevious, onNext, currentIndex, total }) => {
-    const { t } = useTranslation('common');
+    const { t } = useTranslation();
     const theme = useTheme();
     const primary = theme.palette.primary;
-    return (_jsxs("div", { css: [barCss(primary), theme.dialog.navigationCss], children: [_jsxs("button", { css: btnCss(primary), onClick: onPrevious, disabled: !onPrevious, children: [_jsx(FontAwesomeIcon, { icon: faChevronLeft, css: iconCss }), _jsx("span", { children: t('nav.previous') })] }), _jsxs("div", { css: counterCss, children: [_jsx("div", { css: dotsCss, children: Array.from({ length: Math.min(total, 8) }, (_, i) => (_jsx("div", { css: [dotCss(primary), i === Math.min(currentIndex, 7) && activeDotCss(primary)] }, i))) }), _jsxs("span", { children: [currentIndex + 1, " / ", total] })] }), _jsxs("button", { css: btnCss(primary), onClick: onNext, disabled: !onNext, children: [_jsx("span", { children: t('nav.next') }), _jsx(FontAwesomeIcon, { icon: faChevronRight, css: iconCss })] })] }));
+    return (_jsxs("div", { css: [barCss(primary), theme.dialog.navigationCss], children: [_jsxs("button", { css: btnCss(primary), onClick: onPrevious, disabled: !onPrevious, children: [_jsx(FontAwesomeIcon, { icon: faChevronLeft, css: iconCss }), _jsx("span", { children: t('Previous', { ns: 'common' }) })] }), _jsxs("div", { css: counterCss, children: [_jsx("div", { css: dotsCss, children: Array.from({ length: Math.min(total, 8) }, (_, i) => (_jsx("div", { css: [dotCss(primary), i === Math.min(currentIndex, 7) && activeDotCss(primary)] }, i))) }), _jsxs("span", { children: [currentIndex + 1, " / ", total] })] }), _jsxs("button", { css: btnCss(primary), onClick: onNext, disabled: !onNext, children: [_jsx("span", { children: t('Next', { ns: 'common' }) }), _jsx(FontAwesomeIcon, { icon: faChevronRight, css: iconCss })] })] }));
 };
 const barCss = (primary) => css `
   display: flex;

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

@@ -1 +1 @@
-{"version":3,"file":"BottomBarNavigation.js","sourceRoot":"","sources":["../../../../src/components/dialogs/RulesDialog/BottomBarNavigation.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAA;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAA;AACjF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG9C,MAAM,CAAC,MAAM,mBAAmB,GAA8B,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5G,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAA;IACtC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAA;IACrC,OAAO,CACL,eAAK,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,aACrD,kBAAQ,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,UAAU,aACtE,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,OAAO,GAAG,EACrD,yBAAO,CAAC,CAAC,cAAc,CAAC,GAAQ,IACzB,EACT,eAAK,GAAG,EAAE,UAAU,aAClB,cAAK,GAAG,EAAE,OAAO,YACd,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACpD,cAAa,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,IAAnF,CAAC,CAAqF,CACjG,CAAC,GACE,EACN,2BAAO,YAAY,GAAG,CAAC,SAAK,KAAK,IAAQ,IACrC,EACN,kBAAQ,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,MAAM,aAC9D,yBAAO,CAAC,CAAC,UAAU,CAAC,GAAQ,EAC5B,KAAC,eAAe,IAAC,IAAI,EAAE,cAAc,EAAE,GAAG,EAAE,OAAO,GAAG,IAC/C,IACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;6CAMM,OAAO;2DACO,OAAO;CACjE,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;;;WAS5B,OAAO;;2CAEyB,OAAO;;;;;qCAKb,OAAO;oBACxB,OAAO;;;;qCAIU,OAAO;;;;;;;CAO3C,CAAA;AAED,MAAM,OAAO,GAAG,GAAG,CAAA;;CAElB,CAAA;AAED,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;CAQrB,CAAA;AAED,MAAM,OAAO,GAAG,GAAG,CAAA;;;CAGlB,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,CAAA;;;;mCAIJ,OAAO;;CAEzC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,CAAA;gBAC7B,OAAO;;;CAGtB,CAAA"}
+{"version":3,"file":"BottomBarNavigation.js","sourceRoot":"","sources":["../../../../src/components/dialogs/RulesDialog/BottomBarNavigation.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAA;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAA;AACjF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG9C,MAAM,CAAC,MAAM,mBAAmB,GAA8B,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5G,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAA;IACrC,OAAO,CACL,eAAK,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,aACrD,kBAAQ,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,UAAU,aACtE,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,OAAO,GAAG,EACrD,yBAAO,CAAC,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAQ,IACvC,EACT,eAAK,GAAG,EAAE,UAAU,aAClB,cAAK,GAAG,EAAE,OAAO,YACd,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACpD,cAAa,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,IAAnF,CAAC,CAAqF,CACjG,CAAC,GACE,EACN,2BAAO,YAAY,GAAG,CAAC,SAAK,KAAK,IAAQ,IACrC,EACN,kBAAQ,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,MAAM,aAC9D,yBAAO,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAQ,EAC1C,KAAC,eAAe,IAAC,IAAI,EAAE,cAAc,EAAE,GAAG,EAAE,OAAO,GAAG,IAC/C,IACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;6CAMM,OAAO;2DACO,OAAO;CACjE,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;;;WAS5B,OAAO;;2CAEyB,OAAO;;;;;qCAKb,OAAO;oBACxB,OAAO;;;;qCAIU,OAAO;;;;;;;CAO3C,CAAA;AAED,MAAM,OAAO,GAAG,GAAG,CAAA;;CAElB,CAAA;AAED,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;CAQrB,CAAA;AAED,MAAM,OAAO,GAAG,GAAG,CAAA;;;CAGlB,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,CAAA;;;;mCAIJ,OAAO;;CAEzC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,CAAA;gBAC7B,OAAO;;;CAGtB,CAAA"}

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

@@ -5,8 +5,10 @@ import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isSameLocationArea, MaterialMoveBuilder } from '@gamepark/rules-api';
 import { useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import { useKeyDown, useMaterialContext, useMaterialDescription, usePlay, useRules } from '../../../hooks';
 import { useLocators } from '../../../hooks/useLocators';
+import { useDialogBackdrop } from '../Dialog';
 import { helpDialogContentCss } from './RulesHelpDialogContent';
 var displayHelp = MaterialMoveBuilder.displayHelp;
 var displayMaterialHelp = MaterialMoveBuilder.displayMaterialHelp;
@@ -63,7 +65,8 @@ export const MaterialRulesDialogContent = ({ helpDisplay }) => {
     if (hasNavigation && Navigation) {
         return _jsxs("div", { css: navigationWrapper, children: [_jsxs("div", { css: [flex, navigationContent], children: [_jsx(description.helpDisplay, { item: item, itemType: helpDisplay.itemType, itemIndex: helpDisplay.itemIndex, displayIndex: helpDisplay.displayIndex, closeDialog: closeDialog }), _jsx("div", { css: [helpDialogContentCss, theme.dialog.content], children: description.help && _jsx(description.help, { ...helpDisplay, closeDialog: closeDialog }) })] }), _jsx(Navigation, { onPrevious: onPrevious, onNext: onNext, currentIndex: currentIndex, total: total })] });
     }
-    return _jsxs(_Fragment, { children: [_jsxs("div", { css: [flex, hasNavigation && fullSize], children: [_jsx(description.helpDisplay, { item: item, itemType: helpDisplay.itemType, itemIndex: helpDisplay.itemIndex, displayIndex: helpDisplay.displayIndex, closeDialog: closeDialog }), _jsx("div", { css: [helpDialogContentCss, theme.dialog.content], children: description.help && _jsx(description.help, { ...helpDisplay, closeDialog: closeDialog }) })] }), hasNavigation && _jsxs(_Fragment, { children: [previous && _jsx(PreviousArrow, { onPrevious: () => play(previous, { transient: true }) }), next && _jsx(NextArrow, { onNext: () => play(next, { transient: true }) })] })] });
+    const backdrop = useDialogBackdrop();
+    return _jsxs(_Fragment, { children: [_jsxs("div", { css: [flex, hasNavigation && fullSize], children: [_jsx(description.helpDisplay, { item: item, itemType: helpDisplay.itemType, itemIndex: helpDisplay.itemIndex, displayIndex: helpDisplay.displayIndex, closeDialog: closeDialog }), _jsx("div", { css: [helpDialogContentCss, theme.dialog.content], children: description.help && _jsx(description.help, { ...helpDisplay, closeDialog: closeDialog }) })] }), hasNavigation && backdrop && createPortal(_jsxs(_Fragment, { children: [previous && _jsx(PreviousArrow, { onPrevious: () => play(previous, { transient: true }) }), next && _jsx(NextArrow, { onNext: () => play(next, { transient: true }) })] }), backdrop)] });
 };
 const NextArrow = (props) => {
     const { onNext } = props;
@@ -76,7 +79,6 @@ const PreviousArrow = (props) => {
 const navigationArrow = css `
   position: absolute;
   top: 50%;
-  z-index: -1;
   transform: translateY(-50%);
   background-color: var(--gp-dialog-bg);
   color: var(--gp-dialog-color);