hypercross
88d0c5bf55
Move magic numbers and style constants to src/config.ts. Decompose InventoryWidget into DragController, ItemRenderer, and LostItemManager for better separation of concerns. Add createButton utility and remove unused CombatUnitWidget. Update scenes to import from centralized config.
87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
import Phaser from 'phaser';
|
|
import { UI_CONFIG } from '@/config';
|
|
|
|
export interface ButtonOptions {
|
|
/** The Phaser scene to create the button in */
|
|
scene: Phaser.Scene;
|
|
/** Button label text */
|
|
label: string;
|
|
/** X position (center of button) */
|
|
x: number;
|
|
/** Y position (center of button) */
|
|
y: number;
|
|
/** Button width (defaults to UI_CONFIG.BUTTON_WIDTH) */
|
|
width?: number;
|
|
/** Button height (defaults to UI_CONFIG.BUTTON_HEIGHT) */
|
|
height?: number;
|
|
/** Click handler */
|
|
onClick: () => void;
|
|
/** Phaser depth (defaults to 100) */
|
|
depth?: number;
|
|
/** Background color (defaults to UI_CONFIG.BUTTON_BG) */
|
|
bgColor?: number;
|
|
/** Hover background color (defaults to UI_CONFIG.BUTTON_BG_HOVER) */
|
|
hoverBgColor?: number;
|
|
/** Border color (defaults to UI_CONFIG.BUTTON_BORDER) */
|
|
borderColor?: number;
|
|
/** Text color (defaults to UI_CONFIG.BUTTON_TEXT_COLOR) */
|
|
textColor?: string;
|
|
/** Font size (defaults to UI_CONFIG.BUTTON_FONT_SIZE) */
|
|
fontSize?: string;
|
|
}
|
|
|
|
export interface ButtonObjects {
|
|
/** Background rectangle */
|
|
bg: Phaser.GameObjects.Rectangle;
|
|
/** Text label */
|
|
text: Phaser.GameObjects.Text;
|
|
}
|
|
|
|
/**
|
|
* Create a styled interactive button in a Phaser scene.
|
|
*
|
|
* Handles hover effects (fill color change + text scale) and click callback.
|
|
* Returns both the bg and text objects for further customization if needed.
|
|
*/
|
|
export function createButton(options: ButtonOptions): ButtonObjects {
|
|
const {
|
|
scene,
|
|
label,
|
|
x,
|
|
y,
|
|
width = UI_CONFIG.BUTTON_WIDTH,
|
|
height = UI_CONFIG.BUTTON_HEIGHT,
|
|
onClick,
|
|
depth = 100,
|
|
bgColor = UI_CONFIG.BUTTON_BG,
|
|
hoverBgColor = UI_CONFIG.BUTTON_BG_HOVER,
|
|
borderColor = UI_CONFIG.BUTTON_BORDER,
|
|
textColor = UI_CONFIG.BUTTON_TEXT_COLOR,
|
|
fontSize = UI_CONFIG.BUTTON_FONT_SIZE,
|
|
} = options;
|
|
|
|
const bg = scene.add.rectangle(x, y, width, height, bgColor)
|
|
.setStrokeStyle(2, borderColor)
|
|
.setInteractive({ useHandCursor: true })
|
|
.setDepth(depth);
|
|
|
|
const text = scene.add.text(x, y, label, {
|
|
fontSize,
|
|
color: textColor,
|
|
}).setOrigin(0.5).setDepth(depth);
|
|
|
|
bg.on('pointerover', () => {
|
|
bg.setFillStyle(hoverBgColor);
|
|
text.setScale(1.05);
|
|
});
|
|
|
|
bg.on('pointerout', () => {
|
|
bg.setFillStyle(bgColor);
|
|
text.setScale(1);
|
|
});
|
|
|
|
bg.on('pointerdown', onClick);
|
|
|
|
return { bg, text };
|
|
}
|