@gamepark/react-game 7.6.0 → 7.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/GameProvider/GameErrorBoundary.d.ts +11 -0
- package/dist/components/GameProvider/GameErrorBoundary.js +143 -0
- package/dist/components/GameProvider/GameErrorBoundary.js.map +1 -0
- package/dist/components/GameProvider/GameProvider.js +15 -5
- package/dist/components/GameProvider/GameProvider.js.map +1 -1
- package/dist/components/JournalTabs/History/History.js +12 -3
- package/dist/components/JournalTabs/History/History.js.map +1 -1
- package/dist/components/JournalTabs/History/SetupLogItem.d.ts +11 -0
- package/dist/components/JournalTabs/History/SetupLogItem.js +26 -0
- package/dist/components/JournalTabs/History/SetupLogItem.js.map +1 -0
- package/dist/components/Log/LogDescription.d.ts +8 -0
- package/package.json +2 -2
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Component, PropsWithChildren, ReactNode } from 'react';
|
|
2
|
+
type GameErrorBoundaryState = {
|
|
3
|
+
hasError: boolean;
|
|
4
|
+
};
|
|
5
|
+
export declare class GameErrorBoundary extends Component<PropsWithChildren, GameErrorBoundaryState> {
|
|
6
|
+
state: GameErrorBoundaryState;
|
|
7
|
+
static getDerivedStateFromError(): GameErrorBoundaryState;
|
|
8
|
+
componentDidCatch(error: Error): void;
|
|
9
|
+
render(): ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
/** @jsxImportSource @emotion/react */
|
|
3
|
+
import { datadogLogs } from '@datadog/browser-logs';
|
|
4
|
+
import { css, keyframes } from '@emotion/react';
|
|
5
|
+
import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
|
|
6
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
7
|
+
import { Component } from 'react';
|
|
8
|
+
import { Trans } from 'react-i18next';
|
|
9
|
+
export class GameErrorBoundary extends Component {
|
|
10
|
+
state = { hasError: false };
|
|
11
|
+
static getDerivedStateFromError() {
|
|
12
|
+
return { hasError: true };
|
|
13
|
+
}
|
|
14
|
+
componentDidCatch(error) {
|
|
15
|
+
datadogLogs.logger.error(`Game crash: ${error.message}`, { stack: error.stack });
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
if (!this.state.hasError)
|
|
19
|
+
return this.props.children;
|
|
20
|
+
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" })] })] }) }));
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
const fadeIn = keyframes `
|
|
24
|
+
from {
|
|
25
|
+
opacity: 0;
|
|
26
|
+
transform: translateY(16px);
|
|
27
|
+
}
|
|
28
|
+
to {
|
|
29
|
+
opacity: 1;
|
|
30
|
+
transform: translateY(0);
|
|
31
|
+
}
|
|
32
|
+
`;
|
|
33
|
+
const containerCss = css `
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
height: 100%;
|
|
38
|
+
width: 100%;
|
|
39
|
+
padding: 2em;
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
font-family: "Mulish", sans-serif;
|
|
42
|
+
`;
|
|
43
|
+
const cardCss = css `
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
align-items: center;
|
|
47
|
+
max-width: 460px;
|
|
48
|
+
padding: 2.5em 2.5em 2em;
|
|
49
|
+
border-radius: 1.2em;
|
|
50
|
+
background: #002448;
|
|
51
|
+
color: #eee;
|
|
52
|
+
text-align: center;
|
|
53
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
54
|
+
animation: ${fadeIn} 0.4s ease-out;
|
|
55
|
+
`;
|
|
56
|
+
const iconContainerCss = css `
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
width: 64px;
|
|
61
|
+
height: 64px;
|
|
62
|
+
border-radius: 50%;
|
|
63
|
+
background: rgba(40, 184, 206, 0.15);
|
|
64
|
+
margin-bottom: 1.2em;
|
|
65
|
+
`;
|
|
66
|
+
const iconCss = css `
|
|
67
|
+
font-size: 32px;
|
|
68
|
+
color: #28B8CE;
|
|
69
|
+
`;
|
|
70
|
+
const messageCss = css `
|
|
71
|
+
font-size: 1.05em;
|
|
72
|
+
font-weight: 600;
|
|
73
|
+
line-height: 1.5;
|
|
74
|
+
margin: 0 0 0.3em;
|
|
75
|
+
`;
|
|
76
|
+
const hintCss = css `
|
|
77
|
+
font-size: 0.95em;
|
|
78
|
+
line-height: 1.5;
|
|
79
|
+
margin: 0;
|
|
80
|
+
opacity: 0.8;
|
|
81
|
+
`;
|
|
82
|
+
const buttonCss = css `
|
|
83
|
+
margin-top: 1.5em;
|
|
84
|
+
padding: 0.65em 2.2em;
|
|
85
|
+
font-size: 1em;
|
|
86
|
+
font-family: inherit;
|
|
87
|
+
font-weight: 700;
|
|
88
|
+
border: none;
|
|
89
|
+
border-radius: 0.6em;
|
|
90
|
+
background: #28B8CE;
|
|
91
|
+
color: white;
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
transition: background 0.2s, transform 0.1s;
|
|
94
|
+
letter-spacing: 0.02em;
|
|
95
|
+
|
|
96
|
+
&:hover {
|
|
97
|
+
background: #24a5b9;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:active {
|
|
101
|
+
background: #2092a3;
|
|
102
|
+
transform: scale(0.97);
|
|
103
|
+
}
|
|
104
|
+
`;
|
|
105
|
+
const dividerCss = css `
|
|
106
|
+
width: 60%;
|
|
107
|
+
height: 1px;
|
|
108
|
+
background: rgba(255, 255, 255, 0.12);
|
|
109
|
+
margin: 1.8em 0 1.2em;
|
|
110
|
+
`;
|
|
111
|
+
const secondaryMessageCss = css `
|
|
112
|
+
font-size: 0.85em;
|
|
113
|
+
line-height: 1.6;
|
|
114
|
+
margin: 0 0 1em;
|
|
115
|
+
opacity: 0.65;
|
|
116
|
+
`;
|
|
117
|
+
const discordLinkCss = css `
|
|
118
|
+
display: inline-flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
gap: 0.5em;
|
|
121
|
+
padding: 0.5em 1.4em;
|
|
122
|
+
font-size: 0.9em;
|
|
123
|
+
font-family: inherit;
|
|
124
|
+
font-weight: 600;
|
|
125
|
+
color: white;
|
|
126
|
+
background: #5865F2;
|
|
127
|
+
border-radius: 0.5em;
|
|
128
|
+
text-decoration: none;
|
|
129
|
+
transition: background 0.2s, transform 0.1s;
|
|
130
|
+
|
|
131
|
+
&:hover {
|
|
132
|
+
background: #4752C4;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&:active {
|
|
136
|
+
transform: scale(0.97);
|
|
137
|
+
}
|
|
138
|
+
`;
|
|
139
|
+
const discordIconCss = css `
|
|
140
|
+
width: 20px;
|
|
141
|
+
height: 20px;
|
|
142
|
+
`;
|
|
143
|
+
//# sourceMappingURL=GameErrorBoundary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GameErrorBoundary.js","sourceRoot":"","sources":["../../../src/components/GameProvider/GameErrorBoundary.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ import { normalize } from '../../css/normalize';
|
|
|
9
9
|
import { setupTranslation } from '../../utilities/translation.util';
|
|
10
10
|
import { isMaterialTutorial } from '../tutorial';
|
|
11
11
|
import { wrapRulesWithTutorial } from '../tutorial/TutorialRulesWrapper';
|
|
12
|
+
import { GameErrorBoundary } from './GameErrorBoundary';
|
|
12
13
|
import { gameContext } from './GameContext';
|
|
13
14
|
const query = new URLSearchParams(window.location.search);
|
|
14
15
|
const gameId = query.get('game');
|
|
@@ -24,11 +25,20 @@ export const GameProvider = ({ materialI18n, theme = {}, children, ...props }) =
|
|
|
24
25
|
if (props.material && materialI18n && locale in materialI18n) {
|
|
25
26
|
merge(props.material, materialI18n[locale]);
|
|
26
27
|
}
|
|
27
|
-
return (_jsx(gameContext.Provider, { value: props, children: _jsxs(ThemeProvider, { theme: merge(defaultTheme, theme), children: [_jsx(Global, { styles: [normalize, globalCss] }), _jsx(TRPCProvider, { children: gameId ?
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
return (_jsx(GameErrorBoundary, { children: _jsx(gameContext.Provider, { value: props, children: _jsxs(ThemeProvider, { theme: merge(defaultTheme, theme), children: [_jsx(Global, { styles: [normalize, globalCss] }), _jsx(TRPCProvider, { children: gameId ?
|
|
29
|
+
_jsx(RemoteGameProvider, { gameId: gameId, ...props, children: children }) :
|
|
30
|
+
_jsx(LocalGameProvider, { ...props, children: children }) })] }) }) }));
|
|
30
31
|
};
|
|
31
32
|
// Init Datadog logs
|
|
33
|
+
const consoleLevelsByLogLevel = {
|
|
34
|
+
[StatusType.debug]: ['debug', 'info', 'warn', 'error', 'log'],
|
|
35
|
+
[StatusType.info]: ['info', 'warn', 'error', 'log'],
|
|
36
|
+
[StatusType.warn]: ['warn', 'error'],
|
|
37
|
+
[StatusType.error]: ['error']
|
|
38
|
+
};
|
|
39
|
+
function getForwardConsoleLogs() {
|
|
40
|
+
return consoleLevelsByLogLevel[process.env.LOGGER_LEVEL] ?? consoleLevelsByLogLevel[StatusType.error];
|
|
41
|
+
}
|
|
32
42
|
let datadogInitialized = false;
|
|
33
43
|
function initDatadog(service) {
|
|
34
44
|
if (datadogInitialized || process.env.NODE_ENV !== 'production')
|
|
@@ -39,8 +49,8 @@ function initDatadog(service) {
|
|
|
39
49
|
site: 'datadoghq.eu',
|
|
40
50
|
service,
|
|
41
51
|
version: process.env.VERSION,
|
|
42
|
-
beforeSend: (event) => !event.message?.includes('sockjs') && !event.message?.includes('Script error'),
|
|
43
|
-
forwardConsoleLogs:
|
|
52
|
+
beforeSend: (event) => !event.message?.includes('sockjs') && !event.message?.includes('Script error') && !event.message?.includes('Fetch error'),
|
|
53
|
+
forwardConsoleLogs: getForwardConsoleLogs()
|
|
44
54
|
});
|
|
45
55
|
datadogLogs.logger.setLevel(process.env.LOGGER_LEVEL || StatusType.error);
|
|
46
56
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GameProvider.js","sourceRoot":"","sources":["../../../src/components/GameProvider/GameProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"GameProvider.js","sourceRoot":"","sources":["../../../src/components/GameProvider/GameProvider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,23 +1,32 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { css, ThemeProvider, useTheme } from '@emotion/react';
|
|
3
|
-
import {
|
|
3
|
+
import { useGameSelector } from '@gamepark/react-client';
|
|
4
|
+
import { useContext, useEffect, useMemo, useRef } from 'react';
|
|
4
5
|
import { linkButtonCss } from '../../../css';
|
|
5
6
|
import { useFlatHistory } from '../../../hooks/useFlatHistory';
|
|
6
|
-
import { LogItem } from '../../
|
|
7
|
+
import { gameContext, LogItem } from '../../index';
|
|
7
8
|
import { GameOverHistory } from './GameOverHistory';
|
|
9
|
+
import { SetupLogItem } from './SetupLogItem';
|
|
8
10
|
import { StartGameHistory } from './StartGameHistory';
|
|
9
11
|
export const History = (props) => {
|
|
10
12
|
const theme = useTheme();
|
|
13
|
+
const context = useContext(gameContext);
|
|
14
|
+
const setup = useGameSelector((state) => state.setup) ?? {};
|
|
11
15
|
const { history } = useFlatHistory();
|
|
12
16
|
const { open, ...rest } = props;
|
|
13
17
|
const scrollRef = useRef(null);
|
|
18
|
+
const setupLogs = useMemo(() => {
|
|
19
|
+
if (!context.logs?.getSetupLogDescriptions)
|
|
20
|
+
return [];
|
|
21
|
+
return context.logs.getSetupLogDescriptions(setup);
|
|
22
|
+
}, [setup]);
|
|
14
23
|
useEffect(() => {
|
|
15
24
|
if (!scrollRef.current)
|
|
16
25
|
return;
|
|
17
26
|
const { scrollHeight, clientHeight } = scrollRef.current;
|
|
18
27
|
scrollRef.current.scrollTo({ top: scrollHeight - clientHeight });
|
|
19
28
|
}, [open]);
|
|
20
|
-
return (_jsx(ThemeProvider, { theme: theme => ({ ...theme, buttons: historyButtonCss }), children: _jsx("div", { css: scrollCss, ref: scrollRef, ...rest, children: _jsxs("div", { css: scrollContentCss, children: [_jsx(StartGameHistory, {}), history.map((h) => {
|
|
29
|
+
return (_jsx(ThemeProvider, { theme: theme => ({ ...theme, buttons: historyButtonCss }), children: _jsx("div", { css: scrollCss, ref: scrollRef, ...rest, children: _jsxs("div", { css: scrollContentCss, children: [_jsx(StartGameHistory, {}), setupLogs.map((log, index) => _jsx(SetupLogItem, { log: log, game: setup, index: index, css: itemCss, customEntryCss: [customEntryCss, theme.journal?.historyEntry] }, `setup_${index}`)), history.map((h) => {
|
|
21
30
|
if (!h.action.id)
|
|
22
31
|
return null; // wait for server action.id
|
|
23
32
|
const key = h.consequenceIndex !== undefined ? `${h.action.id}_${h.consequenceIndex}` : h.action.id;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"History.js","sourceRoot":"","sources":["../../../../src/components/JournalTabs/History/History.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC7D,OAAO,EAAsB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"History.js","sourceRoot":"","sources":["../../../../src/components/JournalTabs/History/History.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAsB,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAMrD,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,KAAK,EAAE,EAAE;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACvC,MAAM,KAAK,GAAG,eAAe,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;IAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAC/B,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE9C,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,uBAAuB;YAAE,OAAO,EAAE,CAAA;QACrD,OAAO,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAA;IACpD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAM;QAC9B,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC,OAAO,CAAA;QACxD,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC,CAAA;IAClE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,CACL,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,CAAC,YACtE,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,KAAM,IAAI,YAC3C,eAAK,GAAG,EAAE,gBAAgB,aACxB,KAAC,gBAAgB,KAAE,EAClB,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAC5B,KAAC,YAAY,IAAwB,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EACxE,cAAc,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,OAAO,EAAE,YAAY,CAAC,IADxD,SAAS,KAAK,EAAE,CAC2C,CAC/E,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;wBACjB,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;4BAAE,OAAO,IAAI,CAAA,CAAC,4BAA4B;wBAC1D,MAAM,GAAG,GAAG,CAAC,CAAC,gBAAgB,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAA;wBACnG,OAAO,KAAC,OAAO,IAAW,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,OAAO,EAAE,YAAY,CAAC,IAA5F,GAAG,CAA4F,CAAA;oBACtH,CAAC,CAAC,EACF,KAAC,eAAe,KAAE,IACd,GACF,GACQ,CACjB,CAAA;AACH,CAAC,CAAA;AAGD,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBpB,CAAA;AAED,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;CAI3B,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,aAAa,EAAE,GAAG,CAAA;;;;CAIlD,CAAC,CAAA;AAEF,MAAM,OAAO,GAAG,GAAG,CAAA;;;;;CAKlB,CAAA;AAED,MAAM,cAAc,GAAG,GAAG,CAAA;;;CAGzB,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Interpolation, Theme } from '@emotion/react';
|
|
2
|
+
import { FC, HTMLAttributes } from 'react';
|
|
3
|
+
import { SetupLogDescription } from '../../Log';
|
|
4
|
+
type SetupLogItemProps = {
|
|
5
|
+
log: SetupLogDescription;
|
|
6
|
+
game: any;
|
|
7
|
+
index: number;
|
|
8
|
+
customEntryCss?: Interpolation<Theme>;
|
|
9
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
10
|
+
export declare const SetupLogItem: FC<SetupLogItemProps>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { css } from '@emotion/react';
|
|
3
|
+
export const SetupLogItem = ({ log, game, index, customEntryCss, ...rest }) => {
|
|
4
|
+
return (_jsx("div", { ...rest, children: _jsx("div", { css: [entryCss, customEntryCss, log.css], children: _jsx("div", { children: _jsx(log.Component, { game: game, index: index }) }) }) }));
|
|
5
|
+
};
|
|
6
|
+
const entryCss = css `
|
|
7
|
+
width: 100%;
|
|
8
|
+
background-color: rgba(0, 0, 0, 0.7);
|
|
9
|
+
border-radius: 1em;
|
|
10
|
+
margin-bottom: 0.5em;
|
|
11
|
+
min-height: 1em;
|
|
12
|
+
padding-left: 1em;
|
|
13
|
+
margin-left: 0.05em;
|
|
14
|
+
margin-top: 0.05em;
|
|
15
|
+
padding-top: 0.5em;
|
|
16
|
+
padding-bottom: 0.5em;
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
font-size: 2em;
|
|
20
|
+
white-space: pre-wrap;
|
|
21
|
+
|
|
22
|
+
img, picture {
|
|
23
|
+
vertical-align: middle;
|
|
24
|
+
}
|
|
25
|
+
`;
|
|
26
|
+
//# sourceMappingURL=SetupLogItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SetupLogItem.js","sourceRoot":"","sources":["../../../../src/components/JournalTabs/History/SetupLogItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAwB,MAAM,gBAAgB,CAAA;AAW1D,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACnG,OAAO,CACL,iBAAS,IAAI,YACX,cAAK,GAAG,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,CAAC,GAAG,CAAC,YAC3C,wBACE,KAAC,GAAG,CAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,GACtC,GACF,GACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBnB,CAAA"}
|
|
@@ -19,6 +19,14 @@ export type MovePlayedLogDescription<Move = any, Player = number> = {
|
|
|
19
19
|
css?: Interpolation<Theme>;
|
|
20
20
|
liveCss?: boolean;
|
|
21
21
|
};
|
|
22
|
+
export type SetupLogDescription<Game = any> = {
|
|
23
|
+
Component: ComponentType<{
|
|
24
|
+
game: Game;
|
|
25
|
+
index: number;
|
|
26
|
+
}>;
|
|
27
|
+
css?: Interpolation<Theme>;
|
|
28
|
+
};
|
|
22
29
|
export interface LogDescription<Move = any, Player = number, Game = any> {
|
|
23
30
|
getMovePlayedLogDescription(move: Move, context: MoveComponentContext<Move, Player, Game>): MovePlayedLogDescription | undefined;
|
|
31
|
+
getSetupLogDescriptions?(game: Game): SetupLogDescription<Game>[];
|
|
24
32
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gamepark/react-game",
|
|
3
|
-
"version": "7.6.
|
|
3
|
+
"version": "7.6.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React components & tools to create a Board Game user interface for Game Park",
|
|
6
6
|
"author": "Romain Fromi <romain@game-park.com> (https://game-park.com/)",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"@dnd-kit/modifiers": "^9.0.0",
|
|
26
26
|
"@gamepark/api-types": "^1.0.0",
|
|
27
27
|
"@gamepark/avataaars": "^3.0.0",
|
|
28
|
-
"@gamepark/react-client": "^7.6.
|
|
28
|
+
"@gamepark/react-client": "^7.6.1",
|
|
29
29
|
"dayjs": "^1.11.19",
|
|
30
30
|
"fscreen": "^1.2.0",
|
|
31
31
|
"i18next-http-backend": "^3.0.2",
|