hudini 0.2.1 → 0.4.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.
- package/README.md +187 -3
- package/dist/components/column/column.d.ts +88 -0
- package/dist/components/column/column.d.ts.map +1 -0
- package/dist/components/column/column.js +142 -0
- package/dist/components/column/column.js.map +1 -0
- package/dist/components/column/column.spec.d.ts +2 -0
- package/dist/components/column/column.spec.d.ts.map +1 -0
- package/dist/components/column/column.spec.js +147 -0
- package/dist/components/column/column.spec.js.map +1 -0
- package/dist/components/column/index.d.ts +2 -0
- package/dist/components/column/index.d.ts.map +1 -0
- package/dist/components/column/index.js +2 -0
- package/dist/components/column/index.js.map +1 -0
- package/dist/components/icon-button/icon-button.d.ts +6 -1
- package/dist/components/icon-button/icon-button.d.ts.map +1 -1
- package/dist/components/icon-button/icon-button.js +63 -19
- package/dist/components/icon-button/icon-button.js.map +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/layout/layout-utils.d.ts +13 -0
- package/dist/components/layout/layout-utils.d.ts.map +1 -0
- package/dist/components/layout/layout-utils.js +38 -0
- package/dist/components/layout/layout-utils.js.map +1 -0
- package/dist/components/layout/layout-utils.spec.d.ts +2 -0
- package/dist/components/layout/layout-utils.spec.d.ts.map +1 -0
- package/dist/components/layout/layout-utils.spec.js +70 -0
- package/dist/components/layout/layout-utils.spec.js.map +1 -0
- package/dist/components/row/index.d.ts +2 -0
- package/dist/components/row/index.d.ts.map +1 -0
- package/dist/components/row/index.js +2 -0
- package/dist/components/row/index.js.map +1 -0
- package/dist/components/row/row.d.ts +87 -0
- package/dist/components/row/row.d.ts.map +1 -0
- package/dist/components/row/row.js +139 -0
- package/dist/components/row/row.js.map +1 -0
- package/dist/components/row/row.spec.d.ts +2 -0
- package/dist/components/row/row.spec.d.ts.map +1 -0
- package/dist/components/row/row.spec.js +146 -0
- package/dist/components/row/row.spec.js.map +1 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<img src="data/hudini.png" alt="hudini" />
|
|
1
|
+
<img src="data/hudini.png" style="max-width: 500px" alt="hudini" />
|
|
2
2
|
|
|
3
3
|
# 🎩 Hudini
|
|
4
4
|
|
|
@@ -6,11 +6,12 @@
|
|
|
6
6
|
|
|
7
7
|
**Hudini** is a collection of reusable, themeable UI components for Phaser games. Named after the famous magician Houdini and HUD (Head-Up Display), it provides a magical toolkit for building consistent game interfaces.
|
|
8
8
|
|
|
9
|
+
> Important: Hudini is fully type‑safe. The entire library is written in TypeScript and uses strict, explicit types for all public APIs (components, layout options, and plugin configuration). You get compile‑time validation and rich IntelliSense everywhere—no runtime guessing.
|
|
10
|
+
|
|
9
11
|
## ✨ Features
|
|
10
12
|
|
|
11
13
|
- 🎨 **Themeable** - Dark/light themes with full customization
|
|
12
|
-
-
|
|
13
|
-
- 📦 **Zero Dependencies** - Only requires Phaser as peer dependency
|
|
14
|
+
- 📦 **Phaser-wind Dependency** - Only requires [Phaser-wind](https://github.com/renatocassino/phaser-toolkit/tree/main/packages/phaser-wind)
|
|
14
15
|
- 🎯 **TypeScript First** - Full type safety and IntelliSense
|
|
15
16
|
- 🧪 **Tested** - Comprehensive test coverage
|
|
16
17
|
|
|
@@ -23,3 +24,186 @@ yarn add hudini
|
|
|
23
24
|
# or
|
|
24
25
|
pnpm add hudini
|
|
25
26
|
```
|
|
27
|
+
|
|
28
|
+
## 🔌 Installation (Plugin Setup)
|
|
29
|
+
|
|
30
|
+
Hudini is built on top of `phaser-wind` for theming and UI primitives. The Hudini plugin will automatically install the `phaser-wind` plugin if it is not already registered. You only need to add Hudini to your Phaser game configuration.
|
|
31
|
+
|
|
32
|
+
Basic setup with the default light theme:
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
import Phaser from 'phaser';
|
|
36
|
+
import {
|
|
37
|
+
HudiniPlugin,
|
|
38
|
+
HUDINI_KEY,
|
|
39
|
+
HudiniPluginData,
|
|
40
|
+
createTheme,
|
|
41
|
+
} from 'hudini';
|
|
42
|
+
|
|
43
|
+
const theme = createTheme({
|
|
44
|
+
colors: {
|
|
45
|
+
primary: 'red-300',
|
|
46
|
+
secondary: 'blue-300',
|
|
47
|
+
},
|
|
48
|
+
// This theme is a phaser-wind theme conf. You can read more in https://github.com/renatocassino/phaser-toolkit/tree/main/packages/phaser-wind
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
type Theme = typeof theme;
|
|
52
|
+
|
|
53
|
+
new Phaser.Game({
|
|
54
|
+
type: Phaser.AUTO,
|
|
55
|
+
width: 800,
|
|
56
|
+
height: 600,
|
|
57
|
+
backgroundColor: '#1a1a1a',
|
|
58
|
+
plugins: {
|
|
59
|
+
global: [
|
|
60
|
+
{
|
|
61
|
+
key: HUDINI_KEY,
|
|
62
|
+
plugin: HudiniPlugin,
|
|
63
|
+
mapping: HUDINI_KEY,
|
|
64
|
+
data: {
|
|
65
|
+
theme,
|
|
66
|
+
} as HudiniPluginData<Theme>,
|
|
67
|
+
/**
|
|
68
|
+
* If you want to use a default theme, you can import "defaultLightTheme" from hudini
|
|
69
|
+
* data: {
|
|
70
|
+
* theme: defaultLightTheme,
|
|
71
|
+
* } as HudiniPluginData<Theme>
|
|
72
|
+
*/
|
|
73
|
+
},
|
|
74
|
+
],
|
|
75
|
+
},
|
|
76
|
+
});
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Notes:
|
|
80
|
+
|
|
81
|
+
- Hudini will ensure `phaser-wind` is available internally. If you prefer, you can also register `phaser-wind` explicitly before Hudini and pass a custom theme.
|
|
82
|
+
- You can pass `darkMode: true` (when no custom theme is provided) to use the default dark theme.
|
|
83
|
+
|
|
84
|
+
### Requirements
|
|
85
|
+
|
|
86
|
+
- Phaser (peer dependency)
|
|
87
|
+
|
|
88
|
+
```bash
|
|
89
|
+
pnpm add phaser
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Import
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
import { Column, Row, IconButton } from 'hudini';
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Live examples
|
|
99
|
+
|
|
100
|
+
Check the Storybook for live, interactive examples: [Hudini on Storybook](https://renatocassino.github.io/phaser-toolkit/?path=/story/hudini--index)
|
|
101
|
+
|
|
102
|
+
## 🧩 Components
|
|
103
|
+
|
|
104
|
+
### Column
|
|
105
|
+
|
|
106
|
+
Stacks children vertically with spacing, horizontal alignment, and configurable vertical origin.
|
|
107
|
+
|
|
108
|
+
```ts
|
|
109
|
+
// inside a Phaser.Scene (e.g., in create())
|
|
110
|
+
const spriteA = this.add.sprite(0, 0, 'player');
|
|
111
|
+
const spriteB = this.add.sprite(0, 0, 'enemy');
|
|
112
|
+
|
|
113
|
+
const column = new Column({
|
|
114
|
+
scene: this,
|
|
115
|
+
x: 400,
|
|
116
|
+
y: 300,
|
|
117
|
+
gap: 12, // default: 8
|
|
118
|
+
align: 'center', // 'left' | 'center' | 'right'
|
|
119
|
+
verticalOrigin: 'top', // 'top' | 'center' | 'bottom'
|
|
120
|
+
children: [spriteA, spriteB],
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
// Update layout options later
|
|
124
|
+
column.setGap(20);
|
|
125
|
+
column.setAlign('left');
|
|
126
|
+
|
|
127
|
+
// Add items dynamically
|
|
128
|
+
const spriteC = this.add.sprite(0, 0, 'coin');
|
|
129
|
+
column.addChild(spriteC); // triggers relayout by default
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
Key points:
|
|
133
|
+
|
|
134
|
+
- Horizontal alignment aligns each child's left/center/right edge correctly, respecting per-child origin.
|
|
135
|
+
- `verticalOrigin` controls where the content starts from within the container.
|
|
136
|
+
- The container's position `(x, y)` is the center of the overall content area.
|
|
137
|
+
|
|
138
|
+
### Row
|
|
139
|
+
|
|
140
|
+
Arranges children horizontally with spacing, vertical alignment, and configurable horizontal origin.
|
|
141
|
+
|
|
142
|
+
```ts
|
|
143
|
+
// inside a Phaser.Scene (e.g., in create())
|
|
144
|
+
const heart = this.add.sprite(0, 0, 'heart');
|
|
145
|
+
const gem = this.add.sprite(0, 0, 'gem');
|
|
146
|
+
|
|
147
|
+
const row = new Row({
|
|
148
|
+
scene: this,
|
|
149
|
+
x: 400,
|
|
150
|
+
y: 80,
|
|
151
|
+
gap: 10, // default: 8
|
|
152
|
+
align: 'center', // 'top' | 'center' | 'bottom'
|
|
153
|
+
horizontalOrigin: 'center', // 'left' | 'center' | 'right'
|
|
154
|
+
children: [heart, gem],
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
row.setGap(16);
|
|
158
|
+
row.setAlign('top');
|
|
159
|
+
|
|
160
|
+
const star = this.add.sprite(0, 0, 'star');
|
|
161
|
+
row.addChild(star);
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
Key points:
|
|
165
|
+
|
|
166
|
+
- Vertical alignment aligns each child's top/center/bottom edge correctly, respecting per-child origin.
|
|
167
|
+
- `horizontalOrigin` controls where the content starts from within the container.
|
|
168
|
+
- The container's position `(x, y)` is the center of the overall content area.
|
|
169
|
+
|
|
170
|
+
### IconButton
|
|
171
|
+
|
|
172
|
+
An interactive circular icon button with hover and click animations, built on top of `phaser-wind` and `font-awesome-for-phaser`.
|
|
173
|
+
|
|
174
|
+
```ts
|
|
175
|
+
import { IconButton } from 'hudini';
|
|
176
|
+
// inside a Phaser.Scene (e.g., in create())
|
|
177
|
+
|
|
178
|
+
const btn = new IconButton({
|
|
179
|
+
scene: this,
|
|
180
|
+
x: 100,
|
|
181
|
+
y: 100,
|
|
182
|
+
icon: 'solid/heart', // any IconKey from font-awesome-for-phaser
|
|
183
|
+
size: 'lg', // FontSizeKey or a number (px)
|
|
184
|
+
color: 'red', // any base color from phaser-wind (except black/white)
|
|
185
|
+
onClick: () => {
|
|
186
|
+
// your click handler
|
|
187
|
+
},
|
|
188
|
+
});
|
|
189
|
+
|
|
190
|
+
this.add.existing(btn);
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
Notes:
|
|
194
|
+
|
|
195
|
+
- Hover scales the icon subtly, click animates press/release.
|
|
196
|
+
- Colors and sizes integrate with `phaser-wind` theme tokens.
|
|
197
|
+
|
|
198
|
+
## 📦 API Surfaces
|
|
199
|
+
|
|
200
|
+
- `Column` and `Row` are `Phaser.GameObjects.Container` subclasses. Useful methods:
|
|
201
|
+
- `setGap(gap: number): void`
|
|
202
|
+
- `setAlign(...)`: Column → `'left'|'center'|'right'`, Row → `'top'|'center'|'bottom'`
|
|
203
|
+
- `addChild(child, relayout = true): this`
|
|
204
|
+
- `addChildren(children, relayout = true): this`
|
|
205
|
+
- `IconButton` constructor accepts `{ scene, x, y, icon, size?, color?, onClick? }`.
|
|
206
|
+
|
|
207
|
+
## 🔗 Storybook
|
|
208
|
+
|
|
209
|
+
Explore all components and props in Storybook: [Hudini on Storybook](https://renatocassino.github.io/phaser-toolkit/?path=/story/hudini--index)
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { GameObjects, Scene } from 'phaser';
|
|
2
|
+
/** Horizontal alignment options for column items */
|
|
3
|
+
export type HorizontalAlign = 'left' | 'center' | 'right';
|
|
4
|
+
/** Parameters for creating a Column container */
|
|
5
|
+
export type ColumnParams = {
|
|
6
|
+
/** The scene this column belongs to */
|
|
7
|
+
scene: Scene;
|
|
8
|
+
/** X coordinate of the column */
|
|
9
|
+
x: number;
|
|
10
|
+
/** Y coordinate of the column */
|
|
11
|
+
y: number;
|
|
12
|
+
/** Gap between elements in pixels */
|
|
13
|
+
gap?: number;
|
|
14
|
+
/** Horizontal alignment of elements */
|
|
15
|
+
align?: HorizontalAlign;
|
|
16
|
+
/** Initial child elements */
|
|
17
|
+
children?: GameObjects.GameObject[];
|
|
18
|
+
/** Vertical origin point of the column */
|
|
19
|
+
verticalOrigin?: 'top' | 'center' | 'bottom';
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Column is a layout container that stacks children vertically with a gap.
|
|
23
|
+
* The container position (x, y) represents the center of the whole column.
|
|
24
|
+
*/
|
|
25
|
+
export declare class Column extends GameObjects.Container {
|
|
26
|
+
/** Gap between elements in pixels */
|
|
27
|
+
private gap;
|
|
28
|
+
/** Horizontal alignment of elements */
|
|
29
|
+
private align;
|
|
30
|
+
/** Vertical origin point of the column */
|
|
31
|
+
private verticalOrigin;
|
|
32
|
+
/**
|
|
33
|
+
* Creates a new Column container
|
|
34
|
+
* @param params Configuration parameters for the column
|
|
35
|
+
*/
|
|
36
|
+
constructor({ scene, x, y, gap, align, children, verticalOrigin, }: ColumnParams);
|
|
37
|
+
/**
|
|
38
|
+
* Sets the spacing between children and relayouts
|
|
39
|
+
* @param gap Gap in pixels between elements
|
|
40
|
+
*/
|
|
41
|
+
setGap(gap: number): void;
|
|
42
|
+
/**
|
|
43
|
+
* Sets the horizontal alignment and relayouts
|
|
44
|
+
* @param align New horizontal alignment
|
|
45
|
+
*/
|
|
46
|
+
setAlign(align: HorizontalAlign): void;
|
|
47
|
+
/**
|
|
48
|
+
* Adds a child game object to the column
|
|
49
|
+
* @param child Game object to add
|
|
50
|
+
* @param relayout Whether to relayout after adding (default: true)
|
|
51
|
+
* @returns This column instance for chaining
|
|
52
|
+
*/
|
|
53
|
+
addChild(child: GameObjects.GameObject, relayout?: boolean): this;
|
|
54
|
+
/**
|
|
55
|
+
* Adds multiple children to the column
|
|
56
|
+
* @param children Array of game objects to add
|
|
57
|
+
* @param relayout Whether to relayout after adding (default: true)
|
|
58
|
+
* @returns This column instance for chaining
|
|
59
|
+
*/
|
|
60
|
+
addChildren(children: GameObjects.GameObject[], relayout?: boolean): this;
|
|
61
|
+
/**
|
|
62
|
+
* Recomputes children's positions and updates this container size
|
|
63
|
+
* Positions are calculated based on alignment, origins and gaps
|
|
64
|
+
*/
|
|
65
|
+
layout(): void;
|
|
66
|
+
/**
|
|
67
|
+
* Gets the display width of a game object
|
|
68
|
+
* @param child GameObject to measure
|
|
69
|
+
* @returns Display width in pixels
|
|
70
|
+
*/
|
|
71
|
+
getDisplayWidth(child: GameObjects.GameObject): number;
|
|
72
|
+
/**
|
|
73
|
+
* Gets the display height of a game object
|
|
74
|
+
* @param child GameObject to measure
|
|
75
|
+
* @returns Display height in pixels
|
|
76
|
+
*/
|
|
77
|
+
getDisplayHeight(child: GameObjects.GameObject): number;
|
|
78
|
+
/**
|
|
79
|
+
* Gets the normalized origin point of a game object
|
|
80
|
+
* @param child GameObject to get origin from
|
|
81
|
+
* @returns Object with normalized x,y coordinates of the origin point
|
|
82
|
+
*/
|
|
83
|
+
getNormalizedOrigin(child: GameObjects.GameObject): {
|
|
84
|
+
x: number;
|
|
85
|
+
y: number;
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
//# sourceMappingURL=column.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"column.d.ts","sourceRoot":"","sources":["../../../src/components/column/column.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAS5C,oDAAoD;AACpD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,iDAAiD;AACjD,MAAM,MAAM,YAAY,GAAG;IACzB,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC;IACb,iCAAiC;IACjC,CAAC,EAAE,MAAM,CAAC;IACV,iCAAiC;IACjC,CAAC,EAAE,MAAM,CAAC;IACV,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,CAAC;IACpC,0CAA0C;IAC1C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC9C,CAAC;AAEF;;;GAGG;AACH,qBAAa,MAAO,SAAQ,WAAW,CAAC,SAAS;IAC/C,qCAAqC;IACrC,OAAO,CAAC,GAAG,CAAS;IACpB,uCAAuC;IACvC,OAAO,CAAC,KAAK,CAAkB;IAC/B,0CAA0C;IAC1C,OAAO,CAAC,cAAc,CAA8B;IAEpD;;;OAGG;gBACS,EACV,KAAK,EACL,CAAC,EACD,CAAC,EACD,GAAiB,EACjB,KAAgB,EAChB,QAAa,EACb,cAAsB,GACvB,EAAE,YAAY;IAaf;;;OAGG;IACI,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAKhC;;;OAGG;IACI,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI;IAK7C;;;;;OAKG;IACI,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,EAAE,QAAQ,GAAE,OAAc,GAAG,IAAI;IAM9E;;;;;OAKG;IACI,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,UAAU,EAAE,EAAE,QAAQ,GAAE,OAAc,GAAG,IAAI;IAMtF;;;OAGG;IACI,MAAM,IAAI,IAAI;IAkDrB;;;;OAIG;IACI,eAAe,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,GAAG,MAAM;IAI7D;;;;OAIG;IACI,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,GAAG,MAAM;IAI9D;;;;OAIG;IACI,mBAAmB,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;CAGpF"}
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
/* eslint-disable complexity */
|
|
2
|
+
import { GameObjects } from 'phaser';
|
|
3
|
+
import { DEFAULT_GAP, getDisplayHeightOf, getDisplayWidthOf, getNormalizedOriginOf, } from '../layout/layout-utils';
|
|
4
|
+
/**
|
|
5
|
+
* Column is a layout container that stacks children vertically with a gap.
|
|
6
|
+
* The container position (x, y) represents the center of the whole column.
|
|
7
|
+
*/
|
|
8
|
+
export class Column extends GameObjects.Container {
|
|
9
|
+
/** Gap between elements in pixels */
|
|
10
|
+
gap;
|
|
11
|
+
/** Horizontal alignment of elements */
|
|
12
|
+
align;
|
|
13
|
+
/** Vertical origin point of the column */
|
|
14
|
+
verticalOrigin;
|
|
15
|
+
/**
|
|
16
|
+
* Creates a new Column container
|
|
17
|
+
* @param params Configuration parameters for the column
|
|
18
|
+
*/
|
|
19
|
+
constructor({ scene, x, y, gap = DEFAULT_GAP, align = 'center', children = [], verticalOrigin = 'top', }) {
|
|
20
|
+
super(scene, x, y);
|
|
21
|
+
this.gap = gap;
|
|
22
|
+
this.align = align;
|
|
23
|
+
this.verticalOrigin = verticalOrigin;
|
|
24
|
+
if (children.length > 0) {
|
|
25
|
+
this.add(children);
|
|
26
|
+
}
|
|
27
|
+
this.layout();
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Sets the spacing between children and relayouts
|
|
31
|
+
* @param gap Gap in pixels between elements
|
|
32
|
+
*/
|
|
33
|
+
setGap(gap) {
|
|
34
|
+
this.gap = gap;
|
|
35
|
+
this.layout();
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Sets the horizontal alignment and relayouts
|
|
39
|
+
* @param align New horizontal alignment
|
|
40
|
+
*/
|
|
41
|
+
setAlign(align) {
|
|
42
|
+
this.align = align;
|
|
43
|
+
this.layout();
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Adds a child game object to the column
|
|
47
|
+
* @param child Game object to add
|
|
48
|
+
* @param relayout Whether to relayout after adding (default: true)
|
|
49
|
+
* @returns This column instance for chaining
|
|
50
|
+
*/
|
|
51
|
+
addChild(child, relayout = true) {
|
|
52
|
+
this.add(child);
|
|
53
|
+
if (relayout)
|
|
54
|
+
this.layout();
|
|
55
|
+
return this;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Adds multiple children to the column
|
|
59
|
+
* @param children Array of game objects to add
|
|
60
|
+
* @param relayout Whether to relayout after adding (default: true)
|
|
61
|
+
* @returns This column instance for chaining
|
|
62
|
+
*/
|
|
63
|
+
addChildren(children, relayout = true) {
|
|
64
|
+
if (children.length > 0)
|
|
65
|
+
this.add(children);
|
|
66
|
+
if (relayout)
|
|
67
|
+
this.layout();
|
|
68
|
+
return this;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Recomputes children's positions and updates this container size
|
|
72
|
+
* Positions are calculated based on alignment, origins and gaps
|
|
73
|
+
*/
|
|
74
|
+
layout() {
|
|
75
|
+
const children = this.list;
|
|
76
|
+
if (children.length === 0) {
|
|
77
|
+
// Reset size when empty
|
|
78
|
+
this.setSize(0, 0);
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
// Measure sizes and origins
|
|
82
|
+
const entries = children.map((child) => ({
|
|
83
|
+
child,
|
|
84
|
+
width: this.getDisplayWidth(child),
|
|
85
|
+
height: this.getDisplayHeight(child),
|
|
86
|
+
origin: this.getNormalizedOrigin(child),
|
|
87
|
+
}));
|
|
88
|
+
const maxWidth = entries.reduce((m, s) => Math.max(m, s.width), 0);
|
|
89
|
+
const totalHeight = entries.reduce((sum, s) => sum + s.height, 0) + this.gap * (entries.length - 1);
|
|
90
|
+
// Determine top of content based on verticalOrigin
|
|
91
|
+
const contentTopY = this.verticalOrigin === 'top' ? 0 : this.verticalOrigin === 'center' ? -totalHeight / 2 : -totalHeight;
|
|
92
|
+
// Walk from top to bottom, aligning considering each child's origin
|
|
93
|
+
let cursorTopY = contentTopY;
|
|
94
|
+
for (const { child, width, height, origin } of entries) {
|
|
95
|
+
// Horizontal alignment: align left/right edges or centers correctly using origin
|
|
96
|
+
let x = 0;
|
|
97
|
+
if (this.align === 'left') {
|
|
98
|
+
// place child's left edge at content left
|
|
99
|
+
x = -maxWidth / 2 + origin.x * width;
|
|
100
|
+
}
|
|
101
|
+
else if (this.align === 'right') {
|
|
102
|
+
// place child's right edge at content right
|
|
103
|
+
x = maxWidth / 2 - (1 - origin.x) * width;
|
|
104
|
+
}
|
|
105
|
+
else {
|
|
106
|
+
// center alignment: center of child at 0 accounting for origin
|
|
107
|
+
x = (origin.x - 0.5) * width;
|
|
108
|
+
}
|
|
109
|
+
// Vertical position so that child's top is at cursorTopY
|
|
110
|
+
const y = cursorTopY + origin.y * height;
|
|
111
|
+
child.setPosition(x, y);
|
|
112
|
+
cursorTopY += height + this.gap;
|
|
113
|
+
}
|
|
114
|
+
// Update this container size to match content bounds
|
|
115
|
+
this.setSize(maxWidth, totalHeight);
|
|
116
|
+
}
|
|
117
|
+
/**
|
|
118
|
+
* Gets the display width of a game object
|
|
119
|
+
* @param child GameObject to measure
|
|
120
|
+
* @returns Display width in pixels
|
|
121
|
+
*/
|
|
122
|
+
getDisplayWidth(child) {
|
|
123
|
+
return getDisplayWidthOf(child);
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Gets the display height of a game object
|
|
127
|
+
* @param child GameObject to measure
|
|
128
|
+
* @returns Display height in pixels
|
|
129
|
+
*/
|
|
130
|
+
getDisplayHeight(child) {
|
|
131
|
+
return getDisplayHeightOf(child);
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* Gets the normalized origin point of a game object
|
|
135
|
+
* @param child GameObject to get origin from
|
|
136
|
+
* @returns Object with normalized x,y coordinates of the origin point
|
|
137
|
+
*/
|
|
138
|
+
getNormalizedOrigin(child) {
|
|
139
|
+
return getNormalizedOriginOf(child);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
//# sourceMappingURL=column.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"column.js","sourceRoot":"","sources":["../../../src/components/column/column.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"column.spec.d.ts","sourceRoot":"","sources":["../../../src/components/column/column.spec.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
/* eslint-disable no-magic-numbers */
|
|
2
|
+
/* eslint-disable max-lines-per-function */
|
|
3
|
+
import { Scene } from 'phaser';
|
|
4
|
+
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
5
|
+
// Mock to phaser with type to avoid canvas dependency in runtime
|
|
6
|
+
vi.mock('phaser', () => {
|
|
7
|
+
class Scene {
|
|
8
|
+
}
|
|
9
|
+
class Container {
|
|
10
|
+
list = [];
|
|
11
|
+
x;
|
|
12
|
+
y;
|
|
13
|
+
width = 0;
|
|
14
|
+
height = 0;
|
|
15
|
+
// scene is accepted but not used in the mock
|
|
16
|
+
constructor(_scene, x, y) {
|
|
17
|
+
this.x = x;
|
|
18
|
+
this.y = y;
|
|
19
|
+
}
|
|
20
|
+
add(child) {
|
|
21
|
+
if (Array.isArray(child)) {
|
|
22
|
+
this.list.push(...child);
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
this.list.push(child);
|
|
26
|
+
}
|
|
27
|
+
return this;
|
|
28
|
+
}
|
|
29
|
+
setSize(width, height) {
|
|
30
|
+
this.width = width;
|
|
31
|
+
this.height = height;
|
|
32
|
+
return this;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
const GameObjects = { Container };
|
|
36
|
+
return { GameObjects, Scene };
|
|
37
|
+
});
|
|
38
|
+
import { Column } from './column';
|
|
39
|
+
class TestChild {
|
|
40
|
+
displayWidth;
|
|
41
|
+
width;
|
|
42
|
+
displayHeight;
|
|
43
|
+
height;
|
|
44
|
+
originX;
|
|
45
|
+
originY;
|
|
46
|
+
displayOriginX;
|
|
47
|
+
displayOriginY;
|
|
48
|
+
lastPosition = null;
|
|
49
|
+
constructor(params = {}) {
|
|
50
|
+
Object.assign(this, params);
|
|
51
|
+
}
|
|
52
|
+
setPosition(x, y) {
|
|
53
|
+
this.lastPosition = { x, y };
|
|
54
|
+
}
|
|
55
|
+
getBounds() {
|
|
56
|
+
return {
|
|
57
|
+
width: this.width ?? this.displayWidth ?? 0,
|
|
58
|
+
height: this.height ?? this.displayHeight ?? 0,
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
let scene;
|
|
63
|
+
beforeEach(() => {
|
|
64
|
+
scene = new Scene();
|
|
65
|
+
});
|
|
66
|
+
describe('Column layout', () => {
|
|
67
|
+
it('centers children by default with verticalOrigin top', () => {
|
|
68
|
+
const a = new TestChild({ displayWidth: 100, displayHeight: 50 });
|
|
69
|
+
const b = new TestChild({ displayWidth: 200, displayHeight: 100 });
|
|
70
|
+
const col = new Column({ scene, x: 0, y: 0, gap: 10, align: 'center', verticalOrigin: 'top', children: [] });
|
|
71
|
+
col.addChildren([a, b]);
|
|
72
|
+
// After construction or addition, layout is applied
|
|
73
|
+
expect(a.lastPosition).toEqual({ x: 0, y: 25 }); // 0 + 0.5*50
|
|
74
|
+
expect(b.lastPosition).toEqual({ x: 0, y: 110 }); // (50 + 10) + 0.5*100
|
|
75
|
+
// width = max child width; height = sum + gaps
|
|
76
|
+
// maxWidth = 200; totalHeight = 50 + 100 + 10 = 160
|
|
77
|
+
expect(col.width).toBe(200);
|
|
78
|
+
expect(col.height).toBe(160);
|
|
79
|
+
});
|
|
80
|
+
it('align left positions children at content left edge', () => {
|
|
81
|
+
const a = new TestChild({ displayWidth: 100, displayHeight: 50 });
|
|
82
|
+
const b = new TestChild({ displayWidth: 200, displayHeight: 100 });
|
|
83
|
+
const col = new Column({ scene, x: 0, y: 0, gap: 10, align: 'left', verticalOrigin: 'top', children: [a, b] });
|
|
84
|
+
// maxWidth = 200
|
|
85
|
+
expect(a.lastPosition?.x).toBe(-50); // -maxWidth/2 + 0.5*100 = -100 + 50
|
|
86
|
+
expect(b.lastPosition?.x).toBe(0); // -100 + 0.5*200 = 0
|
|
87
|
+
expect(col.width).toBe(200);
|
|
88
|
+
expect(col.height).toBe(160);
|
|
89
|
+
});
|
|
90
|
+
it('align right positions children at content right edge', () => {
|
|
91
|
+
const a = new TestChild({ displayWidth: 100, displayHeight: 50 });
|
|
92
|
+
const b = new TestChild({ displayWidth: 200, displayHeight: 100 });
|
|
93
|
+
new Column({ scene, x: 0, y: 0, gap: 10, align: 'right', verticalOrigin: 'top', children: [a, b] });
|
|
94
|
+
expect(a.lastPosition?.x).toBe(50); // +maxWidth/2 - (1-0.5)*100 = 100 - 50
|
|
95
|
+
expect(b.lastPosition?.x).toBe(0); // 100 - (1-0.5)*200 = 0
|
|
96
|
+
});
|
|
97
|
+
it('verticalOrigin center shifts content up by half height', () => {
|
|
98
|
+
const a = new TestChild({ displayWidth: 100, displayHeight: 50 });
|
|
99
|
+
const b = new TestChild({ displayWidth: 200, displayHeight: 100 });
|
|
100
|
+
// totalHeight = 50 + 100 + 10 = 160; top starts at -80
|
|
101
|
+
new Column({ scene, x: 0, y: 0, gap: 10, align: 'center', verticalOrigin: 'center', children: [a, b] });
|
|
102
|
+
expect(a.lastPosition?.y).toBe(-80 + 0.5 * 50); // -55
|
|
103
|
+
expect(b.lastPosition?.y).toBe(-80 + 50 + 10 + 0.5 * 100); // -80 + 60 + 50 = 30
|
|
104
|
+
});
|
|
105
|
+
it('respects per-child origin when computing alignment and positions', () => {
|
|
106
|
+
const a = new TestChild({ displayWidth: 100, displayHeight: 50, originX: 0.0, originY: 0.0 });
|
|
107
|
+
const b = new TestChild({ displayWidth: 200, displayHeight: 100, originX: 1.0, originY: 1.0 });
|
|
108
|
+
// maxWidth = 200; totalHeight = 160; top = 0 (verticalOrigin top)
|
|
109
|
+
new Column({ scene, x: 0, y: 0, gap: 10, align: 'left', verticalOrigin: 'top', children: [a, b] });
|
|
110
|
+
// a: x = -100 + 0*100 = -100; y = 0 + 0*50 = 0
|
|
111
|
+
expect(a.lastPosition).toEqual({ x: -100, y: 0 });
|
|
112
|
+
// cursor = 50 + 10 = 60; b: x = -100 + 1*200 = 100; y = 60 + 1*100 = 160
|
|
113
|
+
expect(b.lastPosition).toEqual({ x: 100, y: 160 });
|
|
114
|
+
});
|
|
115
|
+
it('setGap and setAlign trigger relayout', () => {
|
|
116
|
+
const a = new TestChild({ displayWidth: 100, displayHeight: 50 });
|
|
117
|
+
const b = new TestChild({ displayWidth: 200, displayHeight: 100 });
|
|
118
|
+
const col = new Column({ scene, x: 0, y: 0, children: [a, b] }); // default gap=8, align=center, verticalOrigin=top
|
|
119
|
+
// Initial state with gap=8
|
|
120
|
+
expect(b.lastPosition?.y).toBe(50 + 8 + 50); // 108
|
|
121
|
+
col.setGap(20); // changes layout
|
|
122
|
+
expect(b.lastPosition?.y).toBe(50 + 20 + 50); // 120
|
|
123
|
+
col.setAlign('left');
|
|
124
|
+
// maxWidth=200 => a.x = -100 + 0.5*100 = -50; b.x = -100 + 0.5*200 = 0
|
|
125
|
+
expect(a.lastPosition?.x).toBe(-50);
|
|
126
|
+
expect(b.lastPosition?.x).toBe(0);
|
|
127
|
+
});
|
|
128
|
+
it('addChild/addChildren optionally avoid relayout when requested', () => {
|
|
129
|
+
const a = new TestChild({ displayWidth: 100, displayHeight: 50 });
|
|
130
|
+
const b = new TestChild({ displayWidth: 200, displayHeight: 100 });
|
|
131
|
+
const col = new Column({ scene, x: 0, y: 0, children: [a] });
|
|
132
|
+
// b added without relayout
|
|
133
|
+
col.addChild(b, false);
|
|
134
|
+
const before = b.lastPosition;
|
|
135
|
+
expect(before).toBeNull();
|
|
136
|
+
// When calling layout, positions are calculated
|
|
137
|
+
col.layout();
|
|
138
|
+
expect(b.lastPosition).not.toBeNull();
|
|
139
|
+
});
|
|
140
|
+
it('empty column has size 0,0', () => {
|
|
141
|
+
const col = new Column({ scene, x: 0, y: 0, children: [] });
|
|
142
|
+
// After constructor, layout runs and sizes to 0,0
|
|
143
|
+
expect(col.width).toBe(0);
|
|
144
|
+
expect(col.height).toBe(0);
|
|
145
|
+
});
|
|
146
|
+
});
|
|
147
|
+
//# sourceMappingURL=column.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"column.spec.js","sourceRoot":"","sources":["../../../src/components/column/column.spec.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/column/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/column/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -9,13 +9,18 @@ export type IconButtonParams = {
|
|
|
9
9
|
size?: FontSizeKey | number;
|
|
10
10
|
color?: Omit<ColorKey, 'black' | 'white'>;
|
|
11
11
|
onClick?: () => void;
|
|
12
|
+
shape?: 'circle' | 'square';
|
|
12
13
|
};
|
|
13
14
|
export declare class IconButton extends GameObjects.Container {
|
|
14
15
|
backgroundSprite: GameObjects.Sprite;
|
|
15
16
|
shadowSprite: GameObjects.Sprite;
|
|
16
17
|
iconText: IconText;
|
|
17
18
|
private pw;
|
|
18
|
-
|
|
19
|
+
private shape;
|
|
20
|
+
private baseColor;
|
|
21
|
+
private sizePx;
|
|
22
|
+
constructor({ scene, x, y, icon, size, color, onClick, shape }: IconButtonParams);
|
|
23
|
+
setShape(shape: 'circle' | 'square'): this;
|
|
19
24
|
private createShadowSprite;
|
|
20
25
|
private createShadowTexture;
|
|
21
26
|
private createBackgroundSprite;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,WAAW,EACjB,MAAM,aAAa,CAAC;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,WAAW,EACjB,MAAM,aAAa,CAAC;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B,CAAC;AAmBF,qBAAa,UAAW,SAAQ,WAAW,CAAC,SAAS;IAC5C,gBAAgB,EAAG,WAAW,CAAC,MAAM,CAAC;IACtC,YAAY,EAAG,WAAW,CAAC,MAAM,CAAC;IAClC,QAAQ,EAAG,QAAQ,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAuB;IACjC,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,SAAS,CAAqC;IACtD,OAAO,CAAC,MAAM,CAAU;gBAEZ,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB;IAoBzE,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,IAAI;IAsBjD,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,mBAAmB;IA+C3B,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,uBAAuB;IA+C/B,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,kBAAkB;CAwC3B"}
|