orbit/js/scenes/MenuScene.js

68 lines
1.8 KiB
JavaScript

import Phaser from '../vendor/phaser.js';
import { config } from '../config/Config.js';
import { MenuButton } from '../ui/MenuButton.js';
const FONT_FALLBACK = "'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
/**
* Main menu. All text/colors/layout come from data/menu.json.
*/
export class MenuScene extends Phaser.Scene {
constructor() {
super({ key: 'MenuScene' });
}
create() {
const menu = config.section('menu', {});
const fontFamily = menu.fontFamily ?? FONT_FALLBACK;
const colors = menu.colors ?? {};
const { width, height } = this.scale;
const cx = width / 2;
// Title
this.add
.text(cx, height * 0.34, menu.title ?? 'ORBIT', {
fontFamily,
fontSize: `${menu.titleFontSize ?? 84}px`,
fontStyle: 'bold',
color: colors.title ?? '#e9edf8',
shadow: {
color: colors.titleGlow ?? '#2f6df6',
blur: 28,
offsetX: 0,
offsetY: 0,
},
})
.setOrigin(0.5);
// Subtitle
this.add
.text(cx, height * 0.46, menu.subtitle ?? '', {
fontFamily,
fontSize: `${menu.subtitleFontSize ?? 20}px`,
color: colors.subtitle ?? '#8fa0c9',
})
.setOrigin(0.5);
// Buttons (menu.json lists each one; add more here as the menu grows)
const btn = menu.buttons?.newGame ?? {};
new MenuButton(
this,
(btn.position?.x ?? 0.5) * width,
(btn.position?.y ?? 0.62) * height,
btn.label ?? 'New Game',
() => this.scene.start('GameScene'),
btn,
);
// Version footer
this.add
.text(width - 16, height - 14, config.get('game.version', ''), {
fontFamily,
fontSize: '12px',
color: colors.footer ?? '#54608a',
})
.setOrigin(1, 0.5);
}
}