@joydle/ui 0.1.3 → 0.1.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.
- package/dist/hud/HUD.d.ts +16 -8
- package/dist/hud/HUD.d.ts.map +1 -1
- package/dist/hud/HUD.js +61 -23
- package/dist/hud/HUD.js.map +1 -1
- package/package.json +1 -1
package/dist/hud/HUD.d.ts
CHANGED
|
@@ -2,18 +2,26 @@ import type { ComponentChildren, FunctionComponent } from 'preact';
|
|
|
2
2
|
interface SlotProps {
|
|
3
3
|
children?: ComponentChildren;
|
|
4
4
|
}
|
|
5
|
-
declare const
|
|
6
|
-
declare const
|
|
7
|
-
declare const
|
|
8
|
-
declare const
|
|
5
|
+
declare const TopLeft: FunctionComponent<SlotProps>;
|
|
6
|
+
declare const TopCenter: FunctionComponent<SlotProps>;
|
|
7
|
+
declare const TopRight: FunctionComponent<SlotProps>;
|
|
8
|
+
declare const BottomLeft: FunctionComponent<SlotProps>;
|
|
9
|
+
declare const BottomCenter: FunctionComponent<SlotProps>;
|
|
10
|
+
declare const BottomRight: FunctionComponent<SlotProps>;
|
|
9
11
|
export interface HUDProps {
|
|
10
12
|
children?: ComponentChildren;
|
|
11
13
|
}
|
|
12
14
|
interface HUDComponent extends FunctionComponent<HUDProps> {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
TopLeft: typeof TopLeft;
|
|
16
|
+
TopCenter: typeof TopCenter;
|
|
17
|
+
TopRight: typeof TopRight;
|
|
18
|
+
BottomLeft: typeof BottomLeft;
|
|
19
|
+
BottomCenter: typeof BottomCenter;
|
|
20
|
+
BottomRight: typeof BottomRight;
|
|
21
|
+
Left: typeof TopLeft;
|
|
22
|
+
Center: typeof TopCenter;
|
|
23
|
+
Right: typeof TopRight;
|
|
24
|
+
Bottom: typeof BottomCenter;
|
|
17
25
|
}
|
|
18
26
|
export declare const HUD: HUDComponent;
|
|
19
27
|
export {};
|
package/dist/hud/HUD.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HUD.d.ts","sourceRoot":"","sources":["../../src/hud/HUD.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HUD.d.ts","sourceRoot":"","sources":["../../src/hud/HUD.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAInE,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAmFD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAEzC,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,SAAS,CAE3C,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,SAAS,CAE1C,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,SAAS,CAE5C,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,SAAS,CAE9C,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,SAAS,CAE7C,CAAC;AAIF,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAID,UAAU,YAAa,SAAQ,iBAAiB,CAAC,QAAQ,CAAC;IAExD,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,SAAS,EAAE,OAAO,SAAS,CAAC;IAC5B,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,YAAY,EAAE,OAAO,YAAY,CAAC;IAClC,WAAW,EAAE,OAAO,WAAW,CAAC;IAEhC,IAAI,EAAE,OAAO,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,SAAS,CAAC;IACzB,KAAK,EAAE,OAAO,QAAQ,CAAC;IACvB,MAAM,EAAE,OAAO,YAAY,CAAC;CAC7B;AAoCD,eAAO,MAAM,GAAG,EAAE,YAahB,CAAC"}
|
package/dist/hud/HUD.js
CHANGED
|
@@ -15,7 +15,8 @@ const HUD_STYLE = {
|
|
|
15
15
|
boxSizing: 'border-box',
|
|
16
16
|
fontFamily: 'var(--joydle-font, sans-serif)',
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
// -- Row 1 (top) --
|
|
19
|
+
const TOP_LEFT_STYLE = {
|
|
19
20
|
gridColumn: '1',
|
|
20
21
|
gridRow: '1',
|
|
21
22
|
display: 'flex',
|
|
@@ -23,7 +24,7 @@ const LEFT_STYLE = {
|
|
|
23
24
|
alignItems: 'flex-start',
|
|
24
25
|
gap: 8,
|
|
25
26
|
};
|
|
26
|
-
const
|
|
27
|
+
const TOP_CENTER_STYLE = {
|
|
27
28
|
gridColumn: '2',
|
|
28
29
|
gridRow: '1',
|
|
29
30
|
display: 'flex',
|
|
@@ -31,7 +32,7 @@ const CENTER_STYLE = {
|
|
|
31
32
|
alignItems: 'center',
|
|
32
33
|
gap: 8,
|
|
33
34
|
};
|
|
34
|
-
const
|
|
35
|
+
const TOP_RIGHT_STYLE = {
|
|
35
36
|
gridColumn: '3',
|
|
36
37
|
gridRow: '1',
|
|
37
38
|
display: 'flex',
|
|
@@ -39,8 +40,18 @@ const RIGHT_STYLE = {
|
|
|
39
40
|
alignItems: 'flex-end',
|
|
40
41
|
gap: 8,
|
|
41
42
|
};
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
// -- Row 3 (bottom) --
|
|
44
|
+
const BOTTOM_LEFT_STYLE = {
|
|
45
|
+
gridColumn: '1',
|
|
46
|
+
gridRow: '3',
|
|
47
|
+
display: 'flex',
|
|
48
|
+
flexDirection: 'column',
|
|
49
|
+
alignItems: 'flex-start',
|
|
50
|
+
justifyContent: 'flex-end',
|
|
51
|
+
gap: 8,
|
|
52
|
+
};
|
|
53
|
+
const BOTTOM_CENTER_STYLE = {
|
|
54
|
+
gridColumn: '2',
|
|
44
55
|
gridRow: '3',
|
|
45
56
|
display: 'flex',
|
|
46
57
|
flexDirection: 'row',
|
|
@@ -48,36 +59,63 @@ const BOTTOM_STYLE = {
|
|
|
48
59
|
justifyContent: 'center',
|
|
49
60
|
gap: 16,
|
|
50
61
|
};
|
|
62
|
+
const BOTTOM_RIGHT_STYLE = {
|
|
63
|
+
gridColumn: '3',
|
|
64
|
+
gridRow: '3',
|
|
65
|
+
display: 'flex',
|
|
66
|
+
flexDirection: 'column',
|
|
67
|
+
alignItems: 'flex-end',
|
|
68
|
+
justifyContent: 'flex-end',
|
|
69
|
+
gap: 8,
|
|
70
|
+
};
|
|
51
71
|
// ---- Sub-components -------------------------------------------------------
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
const
|
|
55
|
-
const
|
|
72
|
+
const TopLeft = ({ children }) => (_jsx("div", { class: "joydle-hud-top-left", style: TOP_LEFT_STYLE, children: children }));
|
|
73
|
+
const TopCenter = ({ children }) => (_jsx("div", { class: "joydle-hud-top-center", style: TOP_CENTER_STYLE, children: children }));
|
|
74
|
+
const TopRight = ({ children }) => (_jsx("div", { class: "joydle-hud-top-right", style: TOP_RIGHT_STYLE, children: children }));
|
|
75
|
+
const BottomLeft = ({ children }) => (_jsx("div", { class: "joydle-hud-bottom-left", style: BOTTOM_LEFT_STYLE, children: children }));
|
|
76
|
+
const BottomCenter = ({ children }) => (_jsx("div", { class: "joydle-hud-bottom-center", style: BOTTOM_CENTER_STYLE, children: children }));
|
|
77
|
+
const BottomRight = ({ children }) => (_jsx("div", { class: "joydle-hud-bottom-right", style: BOTTOM_RIGHT_STYLE, children: children }));
|
|
56
78
|
/**
|
|
57
|
-
* HUD layout
|
|
58
|
-
*
|
|
59
|
-
* Renders as an absolute-positioned overlay (z-index: 10) with pointer-events
|
|
60
|
-
* disabled. Individual HUD widgets opt in to pointer-events as needed.
|
|
79
|
+
* HUD layout — 3×3 grid overlay with 6 named edge slots.
|
|
61
80
|
*
|
|
62
81
|
* ```tsx
|
|
63
82
|
* <HUD>
|
|
64
|
-
* <HUD.
|
|
83
|
+
* <HUD.TopLeft>
|
|
65
84
|
* <Lives current={3} max={5} />
|
|
66
|
-
* </HUD.
|
|
67
|
-
* <HUD.
|
|
85
|
+
* </HUD.TopLeft>
|
|
86
|
+
* <HUD.TopCenter>
|
|
68
87
|
* <Score value={12500} />
|
|
69
|
-
* </HUD.
|
|
70
|
-
* <HUD.
|
|
88
|
+
* </HUD.TopCenter>
|
|
89
|
+
* <HUD.TopRight>
|
|
71
90
|
* <Timer seconds={90} />
|
|
72
|
-
* </HUD.
|
|
91
|
+
* </HUD.TopRight>
|
|
92
|
+
* <HUD.BottomLeft>
|
|
93
|
+
* <MiniMap ... />
|
|
94
|
+
* </HUD.BottomLeft>
|
|
95
|
+
* <HUD.BottomCenter>
|
|
96
|
+
* <BottomHint>WASD to move</BottomHint>
|
|
97
|
+
* </HUD.BottomCenter>
|
|
98
|
+
* <HUD.BottomRight>
|
|
99
|
+
* <ResourceDisplay current={12} max={30} label="Ammo" />
|
|
100
|
+
* </HUD.BottomRight>
|
|
73
101
|
* </HUD>
|
|
74
102
|
* ```
|
|
103
|
+
*
|
|
104
|
+
* Legacy aliases `Left`, `Center`, `Right`, `Bottom` still work.
|
|
75
105
|
*/
|
|
76
106
|
const HUDBase = ({ children }) => (_jsx("div", { class: "joydle-hud", style: HUD_STYLE, children: children }));
|
|
77
107
|
export const HUD = Object.assign(HUDBase, {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
108
|
+
// Canonical
|
|
109
|
+
TopLeft,
|
|
110
|
+
TopCenter,
|
|
111
|
+
TopRight,
|
|
112
|
+
BottomLeft,
|
|
113
|
+
BottomCenter,
|
|
114
|
+
BottomRight,
|
|
115
|
+
// Legacy aliases
|
|
116
|
+
Left: TopLeft,
|
|
117
|
+
Center: TopCenter,
|
|
118
|
+
Right: TopRight,
|
|
119
|
+
Bottom: BottomCenter,
|
|
82
120
|
});
|
|
83
121
|
//# sourceMappingURL=HUD.js.map
|
package/dist/hud/HUD.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HUD.js","sourceRoot":"","sources":["../../src/hud/HUD.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"HUD.js","sourceRoot":"","sources":["../../src/hud/HUD.tsx"],"names":[],"mappings":"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"}
|