@almadar/ui 5.76.1 → 5.76.4

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.
@@ -0,0 +1,503 @@
1
+ /* components/game/3d/molecules/Canvas3DLoadingState.css */
2
+ .canvas-3d-loading {
3
+ position: absolute;
4
+ inset: 0;
5
+ display: flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ background:
9
+ linear-gradient(
10
+ 135deg,
11
+ #1a1a2e 0%,
12
+ #16213e 50%,
13
+ #0f3460 100%);
14
+ overflow: hidden;
15
+ z-index: 100;
16
+ }
17
+ .canvas-3d-loading__content {
18
+ position: relative;
19
+ z-index: 2;
20
+ display: flex;
21
+ flex-direction: column;
22
+ align-items: center;
23
+ gap: 20px;
24
+ padding: 40px;
25
+ background: rgba(255, 255, 255, 0.05);
26
+ backdrop-filter: blur(10px);
27
+ border-radius: 16px;
28
+ border: 1px solid rgba(255, 255, 255, 0.1);
29
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
30
+ }
31
+ .canvas-3d-loading__spinner {
32
+ position: relative;
33
+ width: 80px;
34
+ height: 80px;
35
+ }
36
+ .spinner__ring {
37
+ position: absolute;
38
+ inset: 0;
39
+ border: 4px solid transparent;
40
+ border-top-color: #4488ff;
41
+ border-radius: 50%;
42
+ animation: spin 1s linear infinite;
43
+ }
44
+ .spinner__ring--secondary {
45
+ inset: 10px;
46
+ border-top-color: #ff6b6b;
47
+ animation-duration: 1.5s;
48
+ animation-direction: reverse;
49
+ }
50
+ @keyframes spin {
51
+ from {
52
+ transform: rotate(0deg);
53
+ }
54
+ to {
55
+ transform: rotate(360deg);
56
+ }
57
+ }
58
+ .canvas-3d-loading__message {
59
+ font-size: 20px;
60
+ font-weight: 600;
61
+ color: #ffffff;
62
+ text-align: center;
63
+ letter-spacing: 0.5px;
64
+ }
65
+ .canvas-3d-loading__details {
66
+ font-size: 14px;
67
+ color: rgba(255, 255, 255, 0.6);
68
+ text-align: center;
69
+ font-family: monospace;
70
+ max-width: 300px;
71
+ overflow: hidden;
72
+ text-overflow: ellipsis;
73
+ white-space: nowrap;
74
+ }
75
+ .canvas-3d-loading__progress {
76
+ width: 100%;
77
+ max-width: 280px;
78
+ display: flex;
79
+ flex-direction: column;
80
+ gap: 8px;
81
+ }
82
+ .progress__bar {
83
+ height: 6px;
84
+ background: rgba(255, 255, 255, 0.1);
85
+ border-radius: 3px;
86
+ overflow: hidden;
87
+ }
88
+ .progress__fill {
89
+ height: 100%;
90
+ background:
91
+ linear-gradient(
92
+ 90deg,
93
+ #4488ff,
94
+ #ff6b6b);
95
+ border-radius: 3px;
96
+ transition: width 0.3s ease;
97
+ }
98
+ .progress__text {
99
+ display: flex;
100
+ justify-content: space-between;
101
+ font-size: 12px;
102
+ color: rgba(255, 255, 255, 0.7);
103
+ }
104
+ .progress__percentage {
105
+ font-weight: 600;
106
+ color: #4488ff;
107
+ }
108
+ .progress__count {
109
+ font-family: monospace;
110
+ }
111
+ .canvas-3d-loading__background {
112
+ position: absolute;
113
+ inset: 0;
114
+ z-index: 1;
115
+ opacity: 0.3;
116
+ }
117
+ .bg__grid {
118
+ position: absolute;
119
+ inset: -50%;
120
+ background-image:
121
+ linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
122
+ linear-gradient(
123
+ 90deg,
124
+ rgba(255, 255, 255, 0.03) 1px,
125
+ transparent 1px);
126
+ background-size: 50px 50px;
127
+ animation: gridMove 20s linear infinite;
128
+ }
129
+ @keyframes gridMove {
130
+ 0% {
131
+ transform: perspective(500px) rotateX(60deg) translateY(0);
132
+ }
133
+ 100% {
134
+ transform: perspective(500px) rotateX(60deg) translateY(50px);
135
+ }
136
+ }
137
+ @media (max-width: 480px) {
138
+ .canvas-3d-loading__content {
139
+ padding: 30px 20px;
140
+ margin: 20px;
141
+ }
142
+ .canvas-3d-loading__spinner {
143
+ width: 60px;
144
+ height: 60px;
145
+ }
146
+ .canvas-3d-loading__message {
147
+ font-size: 16px;
148
+ }
149
+ .canvas-3d-loading__details {
150
+ font-size: 12px;
151
+ }
152
+ }
153
+
154
+ /* components/game/3d/molecules/Canvas3DErrorBoundary.css */
155
+ .canvas-3d-error {
156
+ position: absolute;
157
+ inset: 0;
158
+ display: flex;
159
+ align-items: center;
160
+ justify-content: center;
161
+ background:
162
+ linear-gradient(
163
+ 135deg,
164
+ #2e1a1a 0%,
165
+ #3e1616 50%,
166
+ #4a1a1a 100%);
167
+ padding: 20px;
168
+ z-index: 100;
169
+ }
170
+ .canvas-3d-error__content {
171
+ max-width: 600px;
172
+ width: 100%;
173
+ padding: 40px;
174
+ background: rgba(0, 0, 0, 0.4);
175
+ backdrop-filter: blur(10px);
176
+ border-radius: 16px;
177
+ border: 1px solid rgba(255, 100, 100, 0.2);
178
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
179
+ text-align: center;
180
+ }
181
+ .canvas-3d-error__icon {
182
+ font-size: 64px;
183
+ margin-bottom: 20px;
184
+ animation: shake 0.5s ease-in-out;
185
+ }
186
+ @keyframes shake {
187
+ 0%, 100% {
188
+ transform: translateX(0);
189
+ }
190
+ 25% {
191
+ transform: translateX(-10px);
192
+ }
193
+ 75% {
194
+ transform: translateX(10px);
195
+ }
196
+ }
197
+ .canvas-3d-error__title {
198
+ font-size: 28px;
199
+ font-weight: 700;
200
+ color: #ff6b6b;
201
+ margin: 0 0 16px;
202
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
203
+ }
204
+ .canvas-3d-error__message {
205
+ font-size: 16px;
206
+ color: rgba(255, 255, 255, 0.8);
207
+ margin: 0 0 24px;
208
+ line-height: 1.5;
209
+ }
210
+ .canvas-3d-error__details {
211
+ margin: 24px 0;
212
+ text-align: start;
213
+ background: rgba(0, 0, 0, 0.3);
214
+ border-radius: 8px;
215
+ overflow: hidden;
216
+ }
217
+ .canvas-3d-error__details summary {
218
+ padding: 12px 16px;
219
+ cursor: pointer;
220
+ color: #ff9999;
221
+ font-weight: 600;
222
+ -webkit-user-select: none;
223
+ -moz-user-select: none;
224
+ user-select: none;
225
+ transition: background 0.2s ease;
226
+ }
227
+ .canvas-3d-error__details summary:hover {
228
+ background: rgba(255, 100, 100, 0.1);
229
+ }
230
+ .error__stack,
231
+ .error__component-stack {
232
+ padding: 16px;
233
+ margin: 0;
234
+ font-family:
235
+ "Fira Code",
236
+ "Monaco",
237
+ "Consolas",
238
+ monospace;
239
+ font-size: 12px;
240
+ line-height: 1.6;
241
+ color: #ffaaaa;
242
+ background: rgba(0, 0, 0, 0.5);
243
+ overflow-x: auto;
244
+ white-space: pre-wrap;
245
+ word-break: break-all;
246
+ }
247
+ .error__component-stack {
248
+ border-top: 1px solid rgba(255, 100, 100, 0.2);
249
+ color: #ff8888;
250
+ }
251
+ .canvas-3d-error__actions {
252
+ display: flex;
253
+ gap: 12px;
254
+ justify-content: center;
255
+ margin-top: 24px;
256
+ flex-wrap: wrap;
257
+ }
258
+ .error__button {
259
+ padding: 12px 24px;
260
+ font-size: 14px;
261
+ font-weight: 600;
262
+ border-radius: 8px;
263
+ border: none;
264
+ cursor: pointer;
265
+ transition: all 0.2s ease;
266
+ }
267
+ .error__button--primary {
268
+ background:
269
+ linear-gradient(
270
+ 135deg,
271
+ #ff6b6b,
272
+ #ff4444);
273
+ color: white;
274
+ }
275
+ .error__button--primary:hover {
276
+ background:
277
+ linear-gradient(
278
+ 135deg,
279
+ #ff8888,
280
+ #ff6666);
281
+ transform: translateY(-2px);
282
+ box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
283
+ }
284
+ .error__button--secondary {
285
+ background: rgba(255, 255, 255, 0.1);
286
+ color: rgba(255, 255, 255, 0.9);
287
+ border: 1px solid rgba(255, 255, 255, 0.2);
288
+ }
289
+ .error__button--secondary:hover {
290
+ background: rgba(255, 255, 255, 0.15);
291
+ transform: translateY(-2px);
292
+ }
293
+ .error__button:active {
294
+ transform: translateY(0);
295
+ }
296
+ @media (max-width: 480px) {
297
+ .canvas-3d-error__content {
298
+ padding: 30px 20px;
299
+ }
300
+ .canvas-3d-error__icon {
301
+ font-size: 48px;
302
+ }
303
+ .canvas-3d-error__title {
304
+ font-size: 22px;
305
+ }
306
+ .canvas-3d-error__message {
307
+ font-size: 14px;
308
+ }
309
+ .canvas-3d-error__actions {
310
+ flex-direction: column;
311
+ }
312
+ .error__button {
313
+ width: 100%;
314
+ }
315
+ }
316
+
317
+ /* components/game/3d/molecules/GameCanvas3D.css */
318
+ .game-canvas-3d {
319
+ background: #1a1a2e;
320
+ border-radius: 8px;
321
+ }
322
+ .game-canvas-3d canvas {
323
+ display: block;
324
+ width: 100%;
325
+ height: 100%;
326
+ }
327
+ .game-canvas-3d--loading {
328
+ display: flex;
329
+ align-items: center;
330
+ justify-content: center;
331
+ background:
332
+ linear-gradient(
333
+ 135deg,
334
+ #1a1a2e 0%,
335
+ #16213e 100%);
336
+ }
337
+ .game-canvas-3d__loading {
338
+ padding: 20px 40px;
339
+ background: rgba(255, 255, 255, 0.1);
340
+ border-radius: 8px;
341
+ color: #ffffff;
342
+ font-size: 16px;
343
+ animation: pulse 1.5s ease-in-out infinite;
344
+ }
345
+ .game-canvas-3d--error {
346
+ display: flex;
347
+ align-items: center;
348
+ justify-content: center;
349
+ background:
350
+ linear-gradient(
351
+ 135deg,
352
+ #2e1a1a 0%,
353
+ #3e1616 100%);
354
+ }
355
+ .game-canvas-3d__error {
356
+ padding: 20px 40px;
357
+ background: rgba(255, 0, 0, 0.2);
358
+ border: 1px solid rgba(255, 0, 0, 0.3);
359
+ border-radius: 8px;
360
+ color: #ff6b6b;
361
+ font-size: 14px;
362
+ }
363
+ .game-canvas-3d__coordinates {
364
+ position: absolute;
365
+ bottom: 20px;
366
+ left: 20px;
367
+ padding: 8px 16px;
368
+ background: rgba(0, 0, 0, 0.7);
369
+ border-radius: 4px;
370
+ color: #ffffff;
371
+ font-family: monospace;
372
+ font-size: 12px;
373
+ pointer-events: none;
374
+ z-index: 10;
375
+ }
376
+ .game-canvas-3d__tile-info {
377
+ position: absolute;
378
+ top: 20px;
379
+ left: 20px;
380
+ padding: 12px 16px;
381
+ background: rgba(0, 0, 0, 0.8);
382
+ border-radius: 6px;
383
+ color: #ffffff;
384
+ pointer-events: none;
385
+ z-index: 10;
386
+ min-width: 120px;
387
+ }
388
+ .tile-info__type {
389
+ font-weight: 600;
390
+ font-size: 14px;
391
+ text-transform: capitalize;
392
+ margin-bottom: 4px;
393
+ }
394
+ .tile-info__terrain {
395
+ font-size: 12px;
396
+ color: #aaaaaa;
397
+ }
398
+ @keyframes pulse {
399
+ 0%, 100% {
400
+ opacity: 1;
401
+ }
402
+ 50% {
403
+ opacity: 0.5;
404
+ }
405
+ }
406
+ .game-canvas-3d[data-camera-mode=isometric]::before {
407
+ content: "Isometric";
408
+ position: absolute;
409
+ top: 20px;
410
+ right: 20px;
411
+ padding: 6px 12px;
412
+ background: rgba(0, 0, 0, 0.6);
413
+ border-radius: 4px;
414
+ color: #ffffff;
415
+ font-size: 11px;
416
+ text-transform: uppercase;
417
+ letter-spacing: 1px;
418
+ pointer-events: none;
419
+ }
420
+ .game-canvas-3d[data-camera-mode=perspective]::before {
421
+ content: "Perspective";
422
+ position: absolute;
423
+ top: 20px;
424
+ right: 20px;
425
+ padding: 6px 12px;
426
+ background: rgba(0, 0, 0, 0.6);
427
+ border-radius: 4px;
428
+ color: #ffffff;
429
+ font-size: 11px;
430
+ text-transform: uppercase;
431
+ letter-spacing: 1px;
432
+ pointer-events: none;
433
+ }
434
+ .game-canvas-3d[data-camera-mode=top-down]::before {
435
+ content: "Top Down";
436
+ position: absolute;
437
+ top: 20px;
438
+ right: 20px;
439
+ padding: 6px 12px;
440
+ background: rgba(0, 0, 0, 0.6);
441
+ border-radius: 4px;
442
+ color: #ffffff;
443
+ font-size: 11px;
444
+ text-transform: uppercase;
445
+ letter-spacing: 1px;
446
+ pointer-events: none;
447
+ }
448
+ .game-canvas-3d[data-overlay=hidden] .game-canvas-3d__coordinates,
449
+ .game-canvas-3d[data-overlay=hidden] .game-canvas-3d__tile-info,
450
+ .game-canvas-3d[data-overlay=hidden]::before {
451
+ display: none;
452
+ }
453
+ .game-canvas-3d[data-orientation=rotated] {
454
+ }
455
+ .game-canvas-3d canvas {
456
+ cursor: crosshair;
457
+ }
458
+ .game-canvas-3d canvas:active {
459
+ cursor: grabbing;
460
+ }
461
+ @media (max-width: 768px) {
462
+ .game-canvas-3d__coordinates,
463
+ .game-canvas-3d__tile-info {
464
+ font-size: 10px;
465
+ padding: 6px 10px;
466
+ }
467
+ .game-canvas-3d::before {
468
+ font-size: 9px;
469
+ padding: 4px 8px;
470
+ }
471
+ }
472
+ .game-canvas-3d:focus {
473
+ outline: 2px solid #4488ff;
474
+ outline-offset: 2px;
475
+ }
476
+ .game-canvas-3d canvas {
477
+ transition: opacity 0.3s ease;
478
+ }
479
+ .game-canvas-3d__context-menu {
480
+ position: absolute;
481
+ background: rgba(0, 0, 0, 0.9);
482
+ border: 1px solid rgba(255, 255, 255, 0.1);
483
+ border-radius: 6px;
484
+ padding: 8px 0;
485
+ min-width: 150px;
486
+ z-index: 100;
487
+ }
488
+ .game-canvas-3d__context-menu-item {
489
+ padding: 8px 16px;
490
+ color: #ffffff;
491
+ cursor: pointer;
492
+ font-size: 13px;
493
+ transition: background 0.15s ease;
494
+ }
495
+ .game-canvas-3d__context-menu-item:hover {
496
+ background: rgba(255, 255, 255, 0.1);
497
+ }
498
+ .game-canvas-3d__context-menu-item--danger {
499
+ color: #ff6b6b;
500
+ }
501
+ .game-canvas-3d__context-menu-item--danger:hover {
502
+ background: rgba(255, 0, 0, 0.2);
503
+ }
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Game 3D (three.js) — public code-split barrel.
3
+ *
4
+ * Published behind the `@almadar/ui/components/{molecules,organisms}/game/three`
5
+ * subpath only, NEVER from the main `components/index.ts` barrel — re-exporting
6
+ * it there would statically pull @react-three/fiber into every app's bundle.
7
+ * The component registry lazy-imports this barrel so the 3D family stays a
8
+ * dynamic, code-split chunk.
9
+ *
10
+ * @packageDocumentation
11
+ */
12
+ export * from './molecules';
13
+ export { GameBoard3D, type GameBoard3DProps } from './organisms/GameBoard3D';