@gamepark/react-game 7.7.4 → 7.7.6

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.
Files changed (99) hide show
  1. package/dist/components/GameProvider/GameErrorBoundary.js +108 -108
  2. package/dist/components/GameProvider/GameInternalProviders.d.ts +6 -0
  3. package/dist/components/GameProvider/GameInternalProviders.js +10 -0
  4. package/dist/components/GameProvider/GameInternalProviders.js.map +1 -0
  5. package/dist/components/GameProvider/LogHistoryBridge.d.ts +7 -0
  6. package/dist/components/GameProvider/LogHistoryBridge.js +23 -0
  7. package/dist/components/GameProvider/LogHistoryBridge.js.map +1 -0
  8. package/dist/components/JournalTabs/History/History.js +52 -13
  9. package/dist/components/JournalTabs/History/History.js.map +1 -1
  10. package/dist/components/JournalTabs/History/LazyLogItem.d.ts +10 -0
  11. package/dist/components/JournalTabs/History/LazyLogItem.js +35 -0
  12. package/dist/components/JournalTabs/History/LazyLogItem.js.map +1 -0
  13. package/dist/components/JournalTabs/History/SetupLogItem.js +19 -19
  14. package/dist/components/JournalTabs/History/SharedIntersectionContext.d.ts +9 -0
  15. package/dist/components/JournalTabs/History/SharedIntersectionContext.js +36 -0
  16. package/dist/components/JournalTabs/History/SharedIntersectionContext.js.map +1 -0
  17. package/dist/components/JournalTabs/History/VirtualizedLogItem.d.ts +12 -0
  18. package/dist/components/JournalTabs/History/VirtualizedLogItem.js +6 -0
  19. package/dist/components/JournalTabs/History/VirtualizedLogItem.js.map +1 -0
  20. package/dist/components/Log/LogHistoryProvider.d.ts +7 -0
  21. package/dist/components/Log/LogHistoryProvider.js +22 -0
  22. package/dist/components/Log/LogHistoryProvider.js.map +1 -0
  23. package/dist/components/material/Dices/OctahedralDiceDescription.d.ts +48 -0
  24. package/dist/components/material/Dices/OctahedralDiceDescription.js +142 -0
  25. package/dist/components/material/Dices/OctahedralDiceDescription.js.map +1 -0
  26. package/dist/components/material/GameTable/DevToolEntry.d.ts +17 -0
  27. package/dist/components/material/GameTable/DevToolEntry.js +13 -0
  28. package/dist/components/material/GameTable/DevToolEntry.js.map +1 -0
  29. package/dist/components/material/GameTable/DevTools/BotTool.d.ts +8 -0
  30. package/dist/components/material/GameTable/DevTools/BotTool.js +13 -0
  31. package/dist/components/material/GameTable/DevTools/BotTool.js.map +1 -0
  32. package/dist/components/material/GameTable/DevTools/DevToolsStyles.d.ts +58 -0
  33. package/dist/components/material/GameTable/DevTools/DevToolsStyles.js +706 -0
  34. package/dist/components/material/GameTable/DevTools/DevToolsStyles.js.map +1 -0
  35. package/dist/components/material/GameTable/DevTools/GamePanel.d.ts +1 -0
  36. package/dist/components/material/GameTable/DevTools/GamePanel.js +7 -179
  37. package/dist/components/material/GameTable/DevTools/GamePanel.js.map +1 -1
  38. package/dist/components/material/GameTable/DevTools/NewGameTool.d.ts +9 -0
  39. package/dist/components/material/GameTable/DevTools/NewGameTool.js +64 -0
  40. package/dist/components/material/GameTable/DevTools/NewGameTool.js.map +1 -0
  41. package/dist/components/material/GameTable/DevTools/SwitchPlayerTool.d.ts +8 -0
  42. package/dist/components/material/GameTable/DevTools/SwitchPlayerTool.js +9 -0
  43. package/dist/components/material/GameTable/DevTools/SwitchPlayerTool.js.map +1 -0
  44. package/dist/components/material/GameTable/DevTools/TutorialTool.d.ts +8 -0
  45. package/dist/components/material/GameTable/DevTools/TutorialTool.js +4 -0
  46. package/dist/components/material/GameTable/DevTools/TutorialTool.js.map +1 -0
  47. package/dist/components/material/GameTable/DevTools/UndoTool.d.ts +8 -0
  48. package/dist/components/material/GameTable/DevTools/UndoTool.js +9 -0
  49. package/dist/components/material/GameTable/DevTools/UndoTool.js.map +1 -0
  50. package/dist/components/material/GameTable/DevTools/devtools.css.d.ts +24 -0
  51. package/dist/components/material/GameTable/DevTools/devtools.css.js +183 -0
  52. package/dist/components/material/GameTable/DevTools/devtools.css.js.map +1 -0
  53. package/dist/components/material/GameTable/DevToolsHub.d.ts +4 -21
  54. package/dist/components/material/GameTable/DevToolsHub.js +24 -830
  55. package/dist/components/material/GameTable/DevToolsHub.js.map +1 -1
  56. package/dist/components/material/GameTable/DevToolsStyles.d.ts +67 -0
  57. package/dist/components/material/GameTable/DevToolsStyles.js +752 -0
  58. package/dist/components/material/GameTable/DevToolsStyles.js.map +1 -0
  59. package/dist/components/material/GameTable/JsonHighlighter.d.ts +3 -0
  60. package/dist/components/material/GameTable/JsonHighlighter.js +37 -0
  61. package/dist/components/material/GameTable/JsonHighlighter.js.map +1 -0
  62. package/dist/components/material/sound/bellSound.d.ts +1 -0
  63. package/dist/components/material/sound/bellSound.js +2 -0
  64. package/dist/components/material/sound/bellSound.js.map +1 -0
  65. package/dist/components/material/sound/useYourTurnSound.d.ts +4 -0
  66. package/dist/components/material/sound/useYourTurnSound.js +34 -0
  67. package/dist/components/material/sound/useYourTurnSound.js.map +1 -0
  68. package/dist/css/backgroundCss.js +3 -3
  69. package/dist/css/cursorCss.js +6 -6
  70. package/dist/css/fadeIn.js +6 -6
  71. package/dist/css/shineEffect.js +28 -28
  72. package/dist/css/transformCss.js +4 -4
  73. package/dist/hooks/LogHistoryContext.d.ts +6 -0
  74. package/dist/hooks/LogHistoryContext.js +4 -0
  75. package/dist/hooks/LogHistoryContext.js.map +1 -0
  76. package/dist/hooks/flatHistoryEngine.d.ts +37 -0
  77. package/dist/hooks/flatHistoryEngine.js +101 -0
  78. package/dist/hooks/flatHistoryEngine.js.map +1 -0
  79. package/dist/hooks/useBackgroundTabHandler.d.ts +1 -0
  80. package/dist/hooks/useBackgroundTabHandler.js +38 -0
  81. package/dist/hooks/useBackgroundTabHandler.js.map +1 -0
  82. package/dist/hooks/useFastAnimationsOnReturn.d.ts +1 -0
  83. package/dist/hooks/useFastAnimationsOnReturn.js +38 -0
  84. package/dist/hooks/useFastAnimationsOnReturn.js.map +1 -0
  85. package/dist/hooks/useFlatHistory.js +120 -44
  86. package/dist/hooks/useFlatHistory.js.map +1 -1
  87. package/dist/locators/PileLocator.d.ts +5 -0
  88. package/dist/locators/PileLocator.js +9 -1
  89. package/dist/locators/PileLocator.js.map +1 -1
  90. package/package.json +80 -79
  91. package/dist/components/material/Wheel/WheelContent.d.ts +0 -13
  92. package/dist/components/material/Wheel/WheelContent.js +0 -37
  93. package/dist/components/material/Wheel/WheelContent.js.map +0 -1
  94. package/dist/hooks/useFailures.d.ts +0 -1
  95. package/dist/hooks/useFailures.js +0 -11
  96. package/dist/hooks/useFailures.js.map +0 -1
  97. package/dist/hooks/useWebP.d.ts +0 -1
  98. package/dist/hooks/useWebP.js +0 -13
  99. package/dist/hooks/useWebP.js.map +0 -1
@@ -0,0 +1,706 @@
1
+ import { css, keyframes } from '@emotion/react';
2
+ export const GP_PRIMARY = '#28B8CE';
3
+ export const GP_DARK = '#002448';
4
+ export const GP_SURFACE = '#0a1929';
5
+ export const GP_ACCENT = '#9fe2f7';
6
+ // ── Animations ──
7
+ const fabPulse = keyframes `
8
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(40, 184, 206, 0.25); }
9
+ 50% { box-shadow: 0 0 0 5px rgba(40, 184, 206, 0); }
10
+ `;
11
+ const slideUp = keyframes `
12
+ from { opacity: 0; transform: translateY(8px) scale(0.97); }
13
+ to { opacity: 1; transform: translateY(0) scale(1); }
14
+ `;
15
+ const slideRight = keyframes `
16
+ from { opacity: 0; transform: translateX(-8px) scale(0.97); }
17
+ to { opacity: 1; transform: translateX(0) scale(1); }
18
+ `;
19
+ const toolReveal = keyframes `
20
+ from { opacity: 0; transform: translateX(-6px); }
21
+ to { opacity: 1; transform: translateX(0); }
22
+ `;
23
+ const modalFadeIn = keyframes `
24
+ from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
25
+ to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
26
+ `;
27
+ const flashFade = keyframes `
28
+ 0% { opacity: 0; transform: translateY(6px); }
29
+ 15% { opacity: 1; transform: translateY(0); }
30
+ 85% { opacity: 1; transform: translateY(0); }
31
+ 100% { opacity: 0; transform: translateY(-6px); }
32
+ `;
33
+ // ── FAB button ──
34
+ export const fabCss = css `
35
+ position: fixed;
36
+ bottom: 16px;
37
+ left: 16px;
38
+ z-index: 900;
39
+ width: 40px;
40
+ height: 40px;
41
+ border-radius: 10px;
42
+ border: 1px solid rgba(40, 184, 206, 0.4);
43
+ background: linear-gradient(145deg, ${GP_SURFACE}, ${GP_DARK});
44
+ cursor: pointer;
45
+ display: flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ padding: 0;
49
+ animation: ${fabPulse} 3s ease-in-out infinite;
50
+ transition: all 0.2s;
51
+
52
+ &:hover {
53
+ border-color: rgba(40, 184, 206, 0.7);
54
+ animation: none;
55
+ }
56
+
57
+ &[data-open="true"] {
58
+ animation: none;
59
+ background: ${GP_PRIMARY};
60
+ border-color: ${GP_PRIMARY};
61
+ }
62
+ `;
63
+ export const logoCss = css `
64
+ width: 22px;
65
+ height: 22px;
66
+ fill: ${GP_PRIMARY};
67
+ transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
68
+
69
+ &[data-open="true"] {
70
+ fill: ${GP_DARK};
71
+ transform: rotate(90deg);
72
+ }
73
+ `;
74
+ // ── Layout ──
75
+ export const hubContainerCss = css `
76
+ position: fixed;
77
+ bottom: 64px;
78
+ left: 16px;
79
+ z-index: 900;
80
+ display: flex;
81
+ align-items: flex-end;
82
+ gap: 6px;
83
+ `;
84
+ export const mainMenuCss = css `
85
+ position: relative;
86
+ width: 200px;
87
+ background: linear-gradient(170deg, #0f2035 0%, ${GP_SURFACE} 100%);
88
+ border: 1px solid rgba(40, 184, 206, 0.25);
89
+ border-radius: 12px;
90
+ box-shadow:
91
+ 0 12px 40px rgba(0, 0, 0, 0.5),
92
+ 0 0 0 1px rgba(0, 0, 0, 0.3),
93
+ inset 0 1px 0 rgba(159, 226, 247, 0.05);
94
+ animation: ${slideUp} 0.2s ease-out;
95
+ font-family: 'Mulish', sans-serif;
96
+ overflow: hidden;
97
+ `;
98
+ export const subPanelCss = css `
99
+ width: 320px;
100
+ max-height: calc(100vh - 80px);
101
+ display: flex;
102
+ flex-direction: column;
103
+ background: linear-gradient(170deg, #0f2035 0%, ${GP_SURFACE} 100%);
104
+ border: 1px solid rgba(40, 184, 206, 0.25);
105
+ border-radius: 12px;
106
+ box-shadow:
107
+ 0 12px 40px rgba(0, 0, 0, 0.5),
108
+ 0 0 0 1px rgba(0, 0, 0, 0.3),
109
+ inset 0 1px 0 rgba(159, 226, 247, 0.05);
110
+ animation: ${slideRight} 0.15s ease-out;
111
+ font-family: 'Mulish', sans-serif;
112
+ overflow: hidden;
113
+ `;
114
+ export const subPanelHeaderCss = css `
115
+ padding: 10px 16px;
116
+ border-bottom: 1px solid rgba(40, 184, 206, 0.15);
117
+ background: rgba(40, 184, 206, 0.04);
118
+ flex-shrink: 0;
119
+ `;
120
+ export const subPanelTitleCss = css `
121
+ font-size: 12px;
122
+ font-weight: 800;
123
+ color: #5a8a98;
124
+ text-transform: uppercase;
125
+ letter-spacing: 0.1em;
126
+ `;
127
+ export const subPanelContentCss = css `
128
+ display: flex;
129
+ flex-direction: column;
130
+ padding: 6px;
131
+ gap: 2px;
132
+ overflow-y: auto;
133
+ flex: 1;
134
+ min-height: 0;
135
+ `;
136
+ // ── Panel header ──
137
+ export const panelHeaderCss = css `
138
+ display: flex;
139
+ align-items: center;
140
+ gap: 8px;
141
+ padding: 12px 16px;
142
+ border-bottom: 1px solid rgba(40, 184, 206, 0.15);
143
+ background: rgba(40, 184, 206, 0.04);
144
+ `;
145
+ export const headerLogoCss = css `
146
+ width: 18px;
147
+ height: 18px;
148
+ fill: ${GP_ACCENT};
149
+ flex-shrink: 0;
150
+ `;
151
+ export const panelTitleCss = css `
152
+ font-size: 14px;
153
+ font-weight: 800;
154
+ color: #e0f0f4;
155
+ text-transform: uppercase;
156
+ letter-spacing: 0.08em;
157
+ flex: 1;
158
+ `;
159
+ export const panelBadgeCss = css `
160
+ font-size: 9px;
161
+ font-weight: 800;
162
+ padding: 2px 6px;
163
+ border-radius: 4px;
164
+ background: rgba(40, 184, 206, 0.15);
165
+ color: ${GP_PRIMARY};
166
+ letter-spacing: 0.1em;
167
+ `;
168
+ // ── Menu items ──
169
+ export const menuListCss = css `
170
+ display: flex;
171
+ flex-direction: column;
172
+ padding: 6px;
173
+ gap: 2px;
174
+ `;
175
+ export const menuItemCss = css `
176
+ position: relative;
177
+ display: flex;
178
+ align-items: center;
179
+ gap: 10px;
180
+ padding: 10px 12px;
181
+ border: none;
182
+ border-radius: 8px;
183
+ background: transparent;
184
+ cursor: pointer;
185
+ text-align: left;
186
+ transition: background 0.15s;
187
+ font-family: inherit;
188
+
189
+ &:hover {
190
+ background: rgba(40, 184, 206, 0.08);
191
+ }
192
+ `;
193
+ export const menuItemActiveCss = css `
194
+ background: rgba(40, 184, 206, 0.12);
195
+
196
+ &::before {
197
+ content: '';
198
+ position: absolute;
199
+ left: 0;
200
+ top: 50%;
201
+ transform: translateY(-50%);
202
+ width: 3px;
203
+ height: 18px;
204
+ border-radius: 0 3px 3px 0;
205
+ background: ${GP_PRIMARY};
206
+ }
207
+ `;
208
+ export const menuItemIconCss = css `
209
+ font-size: 15px;
210
+ color: ${GP_PRIMARY};
211
+ display: flex;
212
+ align-items: center;
213
+ justify-content: center;
214
+ width: 28px;
215
+ height: 28px;
216
+ border-radius: 6px;
217
+ background: rgba(40, 184, 206, 0.08);
218
+ flex-shrink: 0;
219
+ `;
220
+ export const menuItemLabelCss = css `
221
+ font-size: 13px;
222
+ font-weight: 700;
223
+ color: #e0f0f4;
224
+ flex: 1;
225
+ `;
226
+ export const menuChevronCss = css `
227
+ font-size: 10px;
228
+ color: #3a6070;
229
+ `;
230
+ // ── Tool buttons ──
231
+ export const devToolBtnCss = css `
232
+ position: relative;
233
+ display: grid;
234
+ grid-template-columns: 28px 1fr;
235
+ grid-template-rows: auto auto;
236
+ align-items: center;
237
+ gap: 0 10px;
238
+ padding: 10px 12px;
239
+ border: none;
240
+ border-radius: 8px;
241
+ background: transparent;
242
+ cursor: pointer;
243
+ text-align: left;
244
+ transition: background 0.15s;
245
+ animation: ${toolReveal} 0.25s ease-out backwards;
246
+ font-family: inherit;
247
+
248
+ &:hover {
249
+ background: rgba(40, 184, 206, 0.08);
250
+ }
251
+ &:active {
252
+ background: rgba(40, 184, 206, 0.14);
253
+ }
254
+ `;
255
+ export const toolBtnActiveCss = css `
256
+ background: rgba(40, 184, 206, 0.1);
257
+ &::after {
258
+ content: '';
259
+ position: absolute;
260
+ left: 0;
261
+ top: 8px;
262
+ bottom: 8px;
263
+ width: 3px;
264
+ border-radius: 0 3px 3px 0;
265
+ background: ${GP_PRIMARY};
266
+ }
267
+ `;
268
+ export const devToolIconCss = css `
269
+ grid-row: 1 / -1;
270
+ font-size: 15px;
271
+ color: ${GP_PRIMARY};
272
+ display: flex;
273
+ align-items: center;
274
+ justify-content: center;
275
+ width: 28px;
276
+ height: 28px;
277
+ border-radius: 6px;
278
+ background: rgba(40, 184, 206, 0.08);
279
+ `;
280
+ export const devToolLabelCss = css `
281
+ font-size: 14px;
282
+ font-weight: 700;
283
+ color: #e0f0f4;
284
+ line-height: 1.2;
285
+ `;
286
+ export const devToolDescCss = css `
287
+ font-size: 12px;
288
+ color: #5a8a98;
289
+ line-height: 1.2;
290
+ `;
291
+ export const activeIndicatorCss = css `
292
+ position: absolute;
293
+ top: 10px;
294
+ right: 12px;
295
+ width: 7px;
296
+ height: 7px;
297
+ border-radius: 50%;
298
+ background: ${GP_PRIMARY};
299
+ box-shadow: 0 0 6px rgba(40, 184, 206, 0.5);
300
+ `;
301
+ export const dividerCss = css `
302
+ height: 1px;
303
+ margin: 4px 12px;
304
+ background: rgba(40, 184, 206, 0.1);
305
+ `;
306
+ // ── Inline controls ──
307
+ export const inlineRowCss = css `
308
+ grid-column: 1 / -1;
309
+ display: flex;
310
+ align-items: center;
311
+ gap: 4px;
312
+ margin-top: 6px;
313
+ `;
314
+ export const stepBtnCss = css `
315
+ width: 26px;
316
+ height: 26px;
317
+ border-radius: 5px;
318
+ border: 1px solid rgba(40, 184, 206, 0.25);
319
+ background: rgba(40, 184, 206, 0.06);
320
+ color: ${GP_PRIMARY};
321
+ font-size: 14px;
322
+ font-weight: 700;
323
+ cursor: pointer;
324
+ display: flex;
325
+ align-items: center;
326
+ justify-content: center;
327
+ font-family: inherit;
328
+ transition: all 0.15s;
329
+
330
+ &:hover {
331
+ background: rgba(40, 184, 206, 0.14);
332
+ border-color: rgba(40, 184, 206, 0.4);
333
+ }
334
+ `;
335
+ export const numberInputCss = css `
336
+ width: 48px;
337
+ height: 26px;
338
+ border-radius: 5px;
339
+ border: 1px solid rgba(40, 184, 206, 0.25);
340
+ background: rgba(0, 0, 0, 0.3);
341
+ color: #e0f0f4;
342
+ font-size: 13px;
343
+ font-weight: 700;
344
+ text-align: center;
345
+ font-family: inherit;
346
+ font-variant-numeric: tabular-nums;
347
+
348
+ &:focus {
349
+ outline: none;
350
+ border-color: ${GP_PRIMARY};
351
+ box-shadow: 0 0 0 2px rgba(40, 184, 206, 0.15);
352
+ }
353
+
354
+ &::-webkit-inner-spin-button,
355
+ &::-webkit-outer-spin-button {
356
+ -webkit-appearance: none;
357
+ margin: 0;
358
+ }
359
+ `;
360
+ export const textInputCss = css `
361
+ flex: 1;
362
+ height: 26px;
363
+ border-radius: 5px;
364
+ border: 1px solid rgba(40, 184, 206, 0.25);
365
+ background: rgba(0, 0, 0, 0.3);
366
+ color: #e0f0f4;
367
+ font-size: 12px;
368
+ font-weight: 600;
369
+ padding: 0 8px;
370
+ font-family: inherit;
371
+
372
+ &::placeholder {
373
+ color: #3a6070;
374
+ }
375
+
376
+ &:focus {
377
+ outline: none;
378
+ border-color: ${GP_PRIMARY};
379
+ box-shadow: 0 0 0 2px rgba(40, 184, 206, 0.15);
380
+ }
381
+ `;
382
+ export const goBtnCss = css `
383
+ height: 26px;
384
+ padding: 0 12px;
385
+ border-radius: 5px;
386
+ border: 1px solid rgba(40, 184, 206, 0.35);
387
+ background: rgba(40, 184, 206, 0.15);
388
+ color: ${GP_PRIMARY};
389
+ font-size: 12px;
390
+ font-weight: 800;
391
+ text-transform: uppercase;
392
+ letter-spacing: 0.05em;
393
+ cursor: pointer;
394
+ margin-left: auto;
395
+ font-family: inherit;
396
+ transition: all 0.15s;
397
+ flex-shrink: 0;
398
+
399
+ &:hover {
400
+ background: rgba(40, 184, 206, 0.25);
401
+ border-color: rgba(40, 184, 206, 0.5);
402
+ }
403
+ `;
404
+ export const playerBtnCss = css `
405
+ height: 26px;
406
+ padding: 0 10px;
407
+ border-radius: 5px;
408
+ border: 1px solid rgba(40, 184, 206, 0.25);
409
+ background: rgba(40, 184, 206, 0.06);
410
+ color: #5a8a98;
411
+ font-size: 12px;
412
+ font-weight: 700;
413
+ cursor: pointer;
414
+ font-family: inherit;
415
+ transition: all 0.15s;
416
+
417
+ &:hover {
418
+ background: rgba(40, 184, 206, 0.14);
419
+ border-color: rgba(40, 184, 206, 0.4);
420
+ color: #e0f0f4;
421
+ }
422
+ `;
423
+ export const playerBtnActiveCss = css `
424
+ background: rgba(40, 184, 206, 0.2);
425
+ border-color: ${GP_PRIMARY};
426
+ color: ${GP_PRIMARY};
427
+ `;
428
+ // ── Save/Load styles ──
429
+ export const savedListCss = css `
430
+ display: flex;
431
+ flex-direction: column;
432
+ gap: 2px;
433
+ padding: 0 8px;
434
+ `;
435
+ export const savedEntryCss = css `
436
+ display: flex;
437
+ align-items: center;
438
+ justify-content: space-between;
439
+ padding: 5px 8px;
440
+ border-radius: 5px;
441
+ background: rgba(40, 184, 206, 0.04);
442
+ border: 1px solid rgba(40, 184, 206, 0.08);
443
+ `;
444
+ export const savedLabelCss = css `
445
+ font-size: 12px;
446
+ font-weight: 600;
447
+ color: #8ab8c8;
448
+ overflow: hidden;
449
+ text-overflow: ellipsis;
450
+ white-space: nowrap;
451
+ flex: 1;
452
+ margin-right: 8px;
453
+ `;
454
+ export const savedActionsCss = css `
455
+ display: flex;
456
+ gap: 4px;
457
+ flex-shrink: 0;
458
+ `;
459
+ export const smallBtnCss = css `
460
+ width: 22px;
461
+ height: 22px;
462
+ border-radius: 4px;
463
+ border: 1px solid rgba(40, 184, 206, 0.25);
464
+ background: rgba(40, 184, 206, 0.08);
465
+ color: ${GP_PRIMARY};
466
+ font-size: 10px;
467
+ cursor: pointer;
468
+ display: flex;
469
+ align-items: center;
470
+ justify-content: center;
471
+ font-family: inherit;
472
+ transition: all 0.15s;
473
+
474
+ &:hover {
475
+ background: rgba(40, 184, 206, 0.2);
476
+ border-color: rgba(40, 184, 206, 0.4);
477
+ }
478
+ `;
479
+ export const smallBtnDangerCss = css `
480
+ &:hover {
481
+ background: rgba(220, 60, 60, 0.2);
482
+ border-color: rgba(220, 60, 60, 0.4);
483
+ color: #dc3c3c;
484
+ }
485
+ `;
486
+ // ── Backdrop ──
487
+ export const backdropCss = css `
488
+ position: fixed;
489
+ inset: 0;
490
+ z-index: 899;
491
+ `;
492
+ // ── Paste Modal ──
493
+ export const modalBackdropCss = css `
494
+ position: fixed;
495
+ inset: 0;
496
+ z-index: 1000;
497
+ background: rgba(0, 0, 0, 0.6);
498
+ backdrop-filter: blur(2px);
499
+ `;
500
+ export const modalCss = css `
501
+ position: fixed;
502
+ top: 50%;
503
+ left: 50%;
504
+ transform: translate(-50%, -50%);
505
+ z-index: 1001;
506
+ width: min(700px, 90vw);
507
+ max-height: 80vh;
508
+ display: flex;
509
+ flex-direction: column;
510
+ background: linear-gradient(170deg, #0f2035 0%, ${GP_SURFACE} 100%);
511
+ border: 1px solid rgba(40, 184, 206, 0.3);
512
+ border-radius: 12px;
513
+ box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
514
+ font-family: 'Mulish', sans-serif;
515
+ animation: ${modalFadeIn} 0.2s ease-out;
516
+ `;
517
+ export const modalHeaderCss = css `
518
+ display: flex;
519
+ align-items: center;
520
+ justify-content: space-between;
521
+ padding: 14px 20px;
522
+ border-bottom: 1px solid rgba(40, 184, 206, 0.15);
523
+ background: rgba(40, 184, 206, 0.04);
524
+ border-radius: 12px 12px 0 0;
525
+ `;
526
+ export const modalTitleCss = css `
527
+ font-size: 14px;
528
+ font-weight: 800;
529
+ color: #e0f0f4;
530
+ text-transform: uppercase;
531
+ letter-spacing: 0.08em;
532
+ `;
533
+ export const modalCloseBtnCss = css `
534
+ width: 28px;
535
+ height: 28px;
536
+ border: none;
537
+ border-radius: 6px;
538
+ background: rgba(40, 184, 206, 0.08);
539
+ color: #5a8a98;
540
+ font-size: 12px;
541
+ cursor: pointer;
542
+ display: flex;
543
+ align-items: center;
544
+ justify-content: center;
545
+ transition: all 0.15s;
546
+
547
+ &:hover {
548
+ background: rgba(220, 60, 60, 0.2);
549
+ color: #dc3c3c;
550
+ }
551
+ `;
552
+ export const modalBodyCss = css `
553
+ flex: 1;
554
+ overflow-y: auto;
555
+ padding: 16px 20px;
556
+ display: flex;
557
+ flex-direction: column;
558
+ gap: 12px;
559
+ min-height: 0;
560
+ `;
561
+ export const modalTextareaCss = css `
562
+ width: 100%;
563
+ min-height: 100px;
564
+ border-radius: 8px;
565
+ border: 1px solid rgba(40, 184, 206, 0.25);
566
+ background: rgba(0, 0, 0, 0.4);
567
+ color: #e0f0f4;
568
+ font-size: 13px;
569
+ font-weight: 500;
570
+ padding: 12px;
571
+ font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
572
+ resize: vertical;
573
+ line-height: 1.5;
574
+
575
+ &::placeholder {
576
+ color: #3a6070;
577
+ }
578
+
579
+ &:focus {
580
+ outline: none;
581
+ border-color: ${GP_PRIMARY};
582
+ box-shadow: 0 0 0 2px rgba(40, 184, 206, 0.15);
583
+ }
584
+ `;
585
+ export const pasteErrorCss = css `
586
+ font-size: 12px;
587
+ font-weight: 700;
588
+ color: #dc3c3c;
589
+ padding: 6px 10px;
590
+ border-radius: 6px;
591
+ background: rgba(220, 60, 60, 0.1);
592
+ border: 1px solid rgba(220, 60, 60, 0.2);
593
+ `;
594
+ export const modalFooterCss = css `
595
+ display: flex;
596
+ justify-content: flex-end;
597
+ gap: 8px;
598
+ padding: 12px 20px;
599
+ border-top: 1px solid rgba(40, 184, 206, 0.15);
600
+ `;
601
+ export const modalCancelBtnCss = css `
602
+ height: 32px;
603
+ padding: 0 16px;
604
+ border-radius: 6px;
605
+ border: 1px solid rgba(40, 184, 206, 0.25);
606
+ background: transparent;
607
+ color: #5a8a98;
608
+ font-size: 13px;
609
+ font-weight: 700;
610
+ cursor: pointer;
611
+ font-family: inherit;
612
+ transition: all 0.15s;
613
+
614
+ &:hover {
615
+ background: rgba(40, 184, 206, 0.08);
616
+ color: #e0f0f4;
617
+ }
618
+ `;
619
+ export const modalLoadBtnCss = css `
620
+ height: 32px;
621
+ padding: 0 20px;
622
+ border-radius: 6px;
623
+ border: 1px solid rgba(40, 184, 206, 0.4);
624
+ background: rgba(40, 184, 206, 0.2);
625
+ color: ${GP_PRIMARY};
626
+ font-size: 13px;
627
+ font-weight: 800;
628
+ text-transform: uppercase;
629
+ letter-spacing: 0.05em;
630
+ cursor: pointer;
631
+ font-family: inherit;
632
+ transition: all 0.15s;
633
+
634
+ &:hover {
635
+ background: rgba(40, 184, 206, 0.35);
636
+ border-color: ${GP_PRIMARY};
637
+ }
638
+ `;
639
+ // ── Flash ──
640
+ export const flashCss = css `
641
+ position: absolute;
642
+ bottom: 100%;
643
+ left: 0;
644
+ right: 0;
645
+ margin-bottom: 8px;
646
+ padding: 6px 14px;
647
+ font-size: 12px;
648
+ font-weight: 700;
649
+ color: ${GP_PRIMARY};
650
+ text-align: center;
651
+ background: linear-gradient(145deg, ${GP_SURFACE}, ${GP_DARK});
652
+ border: 1px solid rgba(40, 184, 206, 0.3);
653
+ border-radius: 8px;
654
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
655
+ white-space: nowrap;
656
+ pointer-events: none;
657
+ animation: ${flashFade} 1.5s ease-out forwards;
658
+ `;
659
+ // ── Game Options toggles ──
660
+ export const toggleRowCss = css `
661
+ grid-column: 1 / -1;
662
+ display: flex;
663
+ align-items: center;
664
+ gap: 8px;
665
+ margin-top: 4px;
666
+ padding: 4px 0;
667
+ cursor: pointer;
668
+ `;
669
+ export const checkboxCss = css `
670
+ appearance: none;
671
+ width: 16px;
672
+ height: 16px;
673
+ border-radius: 4px;
674
+ border: 1px solid rgba(40, 184, 206, 0.35);
675
+ background: rgba(0, 0, 0, 0.3);
676
+ cursor: pointer;
677
+ flex-shrink: 0;
678
+ position: relative;
679
+ transition: all 0.15s;
680
+
681
+ &:checked {
682
+ background: rgba(40, 184, 206, 0.2);
683
+ border-color: ${GP_PRIMARY};
684
+ }
685
+
686
+ &:checked::after {
687
+ content: '\u2713';
688
+ position: absolute;
689
+ top: 50%;
690
+ left: 50%;
691
+ transform: translate(-50%, -50%);
692
+ font-size: 11px;
693
+ color: ${GP_PRIMARY};
694
+ font-weight: 700;
695
+ }
696
+
697
+ &:hover {
698
+ border-color: rgba(40, 184, 206, 0.5);
699
+ }
700
+ `;
701
+ export const toggleLabelCss = css `
702
+ font-size: 12px;
703
+ font-weight: 600;
704
+ color: #5a8a98;
705
+ `;
706
+ //# sourceMappingURL=DevToolsStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DevToolsStyles.js","sourceRoot":"","sources":["../../../../../src/components/material/GameTable/DevTools/DevToolsStyles.ts"],"names":[],"mappings":"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"}
@@ -1,3 +1,4 @@
1
+ /** @jsxImportSource @emotion/react */
1
2
  import { FC } from 'react';
2
3
  import { GameOption } from './DevToolsHub';
3
4
  type GamePanelProps = {