58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
import Phaser from '../vendor/phaser.js';
|
|
import { config } from '../config/Config.js';
|
|
import { toColor } from '../utils/Color.js';
|
|
|
|
const FONT_FALLBACK = "'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
|
|
|
|
/**
|
|
* Reusable text button with hover state.
|
|
*
|
|
* Colors/sizes come from data/menu.json (menu.colors + per-button overrides),
|
|
* so adding a new button elsewhere is a one-liner:
|
|
*
|
|
* new MenuButton(scene, x, y, 'Save', () => ..., { bgColor: '#334' });
|
|
*/
|
|
export class MenuButton extends Phaser.GameObjects.Container {
|
|
constructor(scene, x, y, label, onClick, overrides = {}) {
|
|
super(scene, x, y);
|
|
|
|
const colors = config.section('menu.colors', {});
|
|
const fontFamily = overrides.fontFamily ?? config.get('menu.fontFamily', FONT_FALLBACK);
|
|
const fontSize = overrides.fontSize ?? config.get('menu.buttonFontSize', 22);
|
|
const paddingX = overrides.paddingX ?? 32;
|
|
const paddingY = overrides.paddingY ?? 16;
|
|
|
|
const baseColor = toColor(overrides.bgColor ?? colors.buttonBg ?? '#16203a');
|
|
const hoverColor = toColor(overrides.hoverColor ?? colors.buttonHoverBg ?? '#24345c');
|
|
const border = toColor(colors.buttonBorder ?? '#33456f');
|
|
const textColor = overrides.textColor ?? colors.buttonText ?? '#e9edf8';
|
|
|
|
const text = scene.add.text(0, 0, label, {
|
|
fontFamily,
|
|
fontSize: `${fontSize}px`,
|
|
fontStyle: '600',
|
|
color: textColor,
|
|
});
|
|
|
|
const width = text.width + paddingX * 2;
|
|
const height = text.height + paddingY * 2;
|
|
|
|
const bg = scene
|
|
.add.rectangle(0, 0, width, height, baseColor, 1)
|
|
.setOrigin(0.5)
|
|
.setStrokeStyle(1, border, 0.9);
|
|
|
|
this.add([bg, text]);
|
|
this.setSize(width, height);
|
|
|
|
bg.setInteractive({ useHandCursor: true });
|
|
bg.on('pointerover', () => bg.setFillStyle(hoverColor, 1));
|
|
bg.on('pointerout', () => bg.setFillStyle(baseColor, 1));
|
|
bg.on('pointerdown', () => {
|
|
if (typeof onClick === 'function') onClick(this);
|
|
});
|
|
|
|
scene.add.existing(this);
|
|
}
|
|
}
|