@tastic/hud 0.8.5 → 0.13.0

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 (37) hide show
  1. package/README.md +425 -23
  2. package/dist/chunk-32U2OIRW.mjs +77 -0
  3. package/dist/guide/index.d.mts +118 -0
  4. package/dist/guide/index.d.ts +118 -0
  5. package/dist/guide/index.js +543 -0
  6. package/dist/guide/index.mjs +428 -0
  7. package/dist/index.d.mts +145 -16
  8. package/dist/index.d.ts +145 -16
  9. package/dist/index.js +612 -322
  10. package/dist/index.mjs +533 -334
  11. package/package.json +46 -11
  12. package/src/AchievementCatalogSection.tsx +60 -0
  13. package/src/AchievementUnlockList.tsx +98 -0
  14. package/src/ActivityStatSection.tsx +29 -0
  15. package/src/BaseSettingsDialog.tsx +32 -1
  16. package/src/ConfirmDialog.tsx +4 -43
  17. package/src/ContentGutter.tsx +12 -5
  18. package/src/ControlSchemePicker.tsx +11 -2
  19. package/src/InlineColorPicker.tsx +38 -11
  20. package/src/LabeledDropdown.tsx +5 -17
  21. package/src/PlayerSetupPanel.tsx +196 -0
  22. package/src/SectionedDropdown.tsx +18 -7
  23. package/src/StaggeredWord.tsx +114 -0
  24. package/src/guide/DirectionKeysHint.tsx +96 -0
  25. package/src/guide/GuideProvider.tsx +87 -0
  26. package/src/guide/HowToPlayDialog.tsx +224 -0
  27. package/src/guide/SeatDevicesHint.tsx +52 -0
  28. package/src/guide/SeatDiagram.tsx +72 -0
  29. package/src/guide/SwipeHint.tsx +115 -0
  30. package/src/guide/guideSlice.ts +131 -0
  31. package/src/guide/index.ts +14 -0
  32. package/src/guide/types.ts +16 -0
  33. package/src/index.ts +10 -3
  34. package/src/overlayCard.ts +51 -4
  35. package/src/useAutoAlign.ts +17 -1
  36. package/src/useQuitConfirmation.ts +61 -0
  37. package/src/useZoneClampedAlign.ts +135 -0
package/dist/guide/index.d.mts ADDED
@@ -0,0 +1,118 @@
1
+ import * as react from 'react';
2
+ import { ReactNode } from 'react';
3
+
4
+ interface DirectionKeyLabels {
5
+ up: string;
6
+ left: string;
7
+ down: string;
8
+ right: string;
9
+ }
10
+ type DirectionKeysAxis = 'both' | 'vertical';
11
+ interface DirectionKeysHintProps {
12
+ labels?: Partial<DirectionKeyLabels>;
13
+ axis?: DirectionKeysAxis;
14
+ color?: string;
15
+ }
16
+ declare function DirectionKeysHint({ labels, axis, color }: DirectionKeysHintProps): react.JSX.Element;
17
+
18
+ interface GuideStep {
19
+ title: string;
20
+ body: string;
21
+ art?: ReactNode;
22
+ }
23
+ type GuideRotation = 0 | 90 | 180 | -90;
24
+
25
+ interface GuideContextValue {
26
+ isOpen: boolean;
27
+ open: () => void;
28
+ close: () => void;
29
+ requestAutoShow: () => void;
30
+ }
31
+ interface GuideProviderProps {
32
+ steps: GuideStep[];
33
+ currentVersion: number;
34
+ seenVersion: number;
35
+ onSeen: (version: number) => void;
36
+ rotation?: GuideRotation;
37
+ children?: ReactNode;
38
+ }
39
+ declare function GuideProvider({ steps, currentVersion, seenVersion, onSeen, rotation, children }: GuideProviderProps): react.JSX.Element;
40
+ declare function useGuide(): GuideContextValue;
41
+ declare function useAutoShowGuide(enabled?: boolean): void;
42
+
43
+ interface GuideState {
44
+ versionSeen: number;
45
+ }
46
+ type GuideAction = {
47
+ type: string;
48
+ payload?: unknown;
49
+ key?: string;
50
+ };
51
+ interface GuideSliceOptions {
52
+ currentVersion: number;
53
+ mountKey?: string;
54
+ persistKey?: string;
55
+ }
56
+ interface GuideSlice {
57
+ actions: {
58
+ markSeen: (version: number) => {
59
+ type: string;
60
+ payload: number;
61
+ };
62
+ };
63
+ reducer: (state: GuideState | undefined, action: GuideAction) => GuideState;
64
+ selectVersionSeen: (rootState: object) => number;
65
+ }
66
+ declare function createGuideSlice({ currentVersion, mountKey, persistKey }: GuideSliceOptions): GuideSlice;
67
+ interface GuideStorageReader {
68
+ getItem: (key: string) => Promise<string | null>;
69
+ }
70
+ type GuidePersistedState = {
71
+ _persist: {
72
+ version: number;
73
+ rehydrated: boolean;
74
+ };
75
+ } | undefined;
76
+ declare function createReturningPlayerMigrate(storage: GuideStorageReader, legacyKeys: readonly string[]): (state: GuidePersistedState, version: number) => Promise<GuidePersistedState>;
77
+
78
+ declare function getGuideCardSize(windowWidth: number, windowHeight: number, rotation: GuideRotation): {
79
+ width: number;
80
+ pageWidth: number;
81
+ maxHeight: number;
82
+ artHeight: number;
83
+ };
84
+ interface HowToPlayDialogProps {
85
+ visible: boolean;
86
+ steps: GuideStep[];
87
+ onFinish: () => void;
88
+ onSkip: () => void;
89
+ rotation?: GuideRotation;
90
+ }
91
+ declare function HowToPlayDialog({ visible, steps, ...rest }: HowToPlayDialogProps): react.JSX.Element | null;
92
+
93
+ type SeatDevice = 'keyboard' | 'mouse';
94
+ interface SeatDevicesHintProps {
95
+ devices: readonly SeatDevice[];
96
+ seatColors?: readonly string[];
97
+ }
98
+ declare function SeatDevicesHint({ devices, seatColors }: SeatDevicesHintProps): react.JSX.Element;
99
+
100
+ interface SeatDiagramProps {
101
+ topColor?: string;
102
+ bottomColor?: string;
103
+ topLabel?: string;
104
+ bottomLabel?: string;
105
+ }
106
+ declare function SeatDiagram({ topColor, bottomColor, topLabel, bottomLabel }: SeatDiagramProps): react.JSX.Element;
107
+
108
+ type SwipeDirection = 'up' | 'down' | 'left' | 'right';
109
+ type SwipePointer = 'finger' | 'mouse';
110
+ interface SwipeHintProps {
111
+ direction?: SwipeDirection;
112
+ pointer?: SwipePointer;
113
+ color?: string;
114
+ length?: number;
115
+ }
116
+ declare function SwipeHint({ direction, pointer, color, length }: SwipeHintProps): react.JSX.Element;
117
+
118
+ export { type DirectionKeyLabels, type DirectionKeysAxis, DirectionKeysHint, type DirectionKeysHintProps, type GuideAction, type GuidePersistedState, GuideProvider, type GuideProviderProps, type GuideRotation, type GuideSlice, type GuideSliceOptions, type GuideState, type GuideStep, type GuideStorageReader, HowToPlayDialog, type HowToPlayDialogProps, type SeatDevice, SeatDevicesHint, type SeatDevicesHintProps, SeatDiagram, type SeatDiagramProps, type SwipeDirection, SwipeHint, type SwipeHintProps, type SwipePointer, createGuideSlice, createReturningPlayerMigrate, getGuideCardSize, useAutoShowGuide, useGuide };
package/dist/guide/index.d.ts ADDED
@@ -0,0 +1,118 @@
1
+ import * as react from 'react';
2
+ import { ReactNode } from 'react';
3
+
4
+ interface DirectionKeyLabels {
5
+ up: string;
6
+ left: string;
7
+ down: string;
8
+ right: string;
9
+ }
10
+ type DirectionKeysAxis = 'both' | 'vertical';
11
+ interface DirectionKeysHintProps {
12
+ labels?: Partial<DirectionKeyLabels>;
13
+ axis?: DirectionKeysAxis;
14
+ color?: string;
15
+ }
16
+ declare function DirectionKeysHint({ labels, axis, color }: DirectionKeysHintProps): react.JSX.Element;
17
+
18
+ interface GuideStep {
19
+ title: string;
20
+ body: string;
21
+ art?: ReactNode;
22
+ }
23
+ type GuideRotation = 0 | 90 | 180 | -90;
24
+
25
+ interface GuideContextValue {
26
+ isOpen: boolean;
27
+ open: () => void;
28
+ close: () => void;
29
+ requestAutoShow: () => void;
30
+ }
31
+ interface GuideProviderProps {
32
+ steps: GuideStep[];
33
+ currentVersion: number;
34
+ seenVersion: number;
35
+ onSeen: (version: number) => void;
36
+ rotation?: GuideRotation;
37
+ children?: ReactNode;
38
+ }
39
+ declare function GuideProvider({ steps, currentVersion, seenVersion, onSeen, rotation, children }: GuideProviderProps): react.JSX.Element;
40
+ declare function useGuide(): GuideContextValue;
41
+ declare function useAutoShowGuide(enabled?: boolean): void;
42
+
43
+ interface GuideState {
44
+ versionSeen: number;
45
+ }
46
+ type GuideAction = {
47
+ type: string;
48
+ payload?: unknown;
49
+ key?: string;
50
+ };
51
+ interface GuideSliceOptions {
52
+ currentVersion: number;
53
+ mountKey?: string;
54
+ persistKey?: string;
55
+ }
56
+ interface GuideSlice {
57
+ actions: {
58
+ markSeen: (version: number) => {
59
+ type: string;
60
+ payload: number;
61
+ };
62
+ };
63
+ reducer: (state: GuideState | undefined, action: GuideAction) => GuideState;
64
+ selectVersionSeen: (rootState: object) => number;
65
+ }
66
+ declare function createGuideSlice({ currentVersion, mountKey, persistKey }: GuideSliceOptions): GuideSlice;
67
+ interface GuideStorageReader {
68
+ getItem: (key: string) => Promise<string | null>;
69
+ }
70
+ type GuidePersistedState = {
71
+ _persist: {
72
+ version: number;
73
+ rehydrated: boolean;
74
+ };
75
+ } | undefined;
76
+ declare function createReturningPlayerMigrate(storage: GuideStorageReader, legacyKeys: readonly string[]): (state: GuidePersistedState, version: number) => Promise<GuidePersistedState>;
77
+
78
+ declare function getGuideCardSize(windowWidth: number, windowHeight: number, rotation: GuideRotation): {
79
+ width: number;
80
+ pageWidth: number;
81
+ maxHeight: number;
82
+ artHeight: number;
83
+ };
84
+ interface HowToPlayDialogProps {
85
+ visible: boolean;
86
+ steps: GuideStep[];
87
+ onFinish: () => void;
88
+ onSkip: () => void;
89
+ rotation?: GuideRotation;
90
+ }
91
+ declare function HowToPlayDialog({ visible, steps, ...rest }: HowToPlayDialogProps): react.JSX.Element | null;
92
+
93
+ type SeatDevice = 'keyboard' | 'mouse';
94
+ interface SeatDevicesHintProps {
95
+ devices: readonly SeatDevice[];
96
+ seatColors?: readonly string[];
97
+ }
98
+ declare function SeatDevicesHint({ devices, seatColors }: SeatDevicesHintProps): react.JSX.Element;
99
+
100
+ interface SeatDiagramProps {
101
+ topColor?: string;
102
+ bottomColor?: string;
103
+ topLabel?: string;
104
+ bottomLabel?: string;
105
+ }
106
+ declare function SeatDiagram({ topColor, bottomColor, topLabel, bottomLabel }: SeatDiagramProps): react.JSX.Element;
107
+
108
+ type SwipeDirection = 'up' | 'down' | 'left' | 'right';
109
+ type SwipePointer = 'finger' | 'mouse';
110
+ interface SwipeHintProps {
111
+ direction?: SwipeDirection;
112
+ pointer?: SwipePointer;
113
+ color?: string;
114
+ length?: number;
115
+ }
116
+ declare function SwipeHint({ direction, pointer, color, length }: SwipeHintProps): react.JSX.Element;
117
+
118
+ export { type DirectionKeyLabels, type DirectionKeysAxis, DirectionKeysHint, type DirectionKeysHintProps, type GuideAction, type GuidePersistedState, GuideProvider, type GuideProviderProps, type GuideRotation, type GuideSlice, type GuideSliceOptions, type GuideState, type GuideStep, type GuideStorageReader, HowToPlayDialog, type HowToPlayDialogProps, type SeatDevice, SeatDevicesHint, type SeatDevicesHintProps, SeatDiagram, type SeatDiagramProps, type SwipeDirection, SwipeHint, type SwipeHintProps, type SwipePointer, createGuideSlice, createReturningPlayerMigrate, getGuideCardSize, useAutoShowGuide, useGuide };