boardgame-phaser/packages/sample-game/src/scenes/MenuScene.ts

import { ReactiveScene } from 'boardgame-phaser';

/** 菜单场景配置 */
const MENU_CONFIG = {
  colors: {
    title: '#1f2937',
    buttonText: '#ffffff',
    buttonBg: 0x3b82f6,
    buttonBgHover: 0x2563eb,
    subtitle: '#6b7280',
  },
  fontSize: {
    title: '48px',
    button: '24px',
    subtitle: '16px',
  },
  button: {
    width: 200,
    height: 60,
  },
  positions: {
    titleY: -100,
    buttonY: 40,
    subtitleY: 140,
  },
} as const;

export class MenuScene extends ReactiveScene {
  private titleText!: Phaser.GameObjects.Text;
  private startButtonContainer!: Phaser.GameObjects.Container;
  private startButtonBg!: Phaser.GameObjects.Rectangle;
  private startButtonText!: Phaser.GameObjects.Text;

  constructor() {
    super('MenuScene');
  }

  create(): void {
    super.create();

    const center = this.getCenterPosition();
    
    this.createTitle(center);
    this.createStartButton(center);
    this.createSubtitle(center);
  }

  /** 获取屏幕中心位置 */
  private getCenterPosition(): { x: number; y: number } {
    return {
      x: this.game.scale.width / 2,
      y: this.game.scale.height / 2,
    };
  }

  /** 创建标题文本 */
  private createTitle(center: { x: number; y: number }): void {
    this.titleText = this.add.text(
      center.x,
      center.y + MENU_CONFIG.positions.titleY,
      'Tic-Tac-Toe',
      {
        fontSize: MENU_CONFIG.fontSize.title,
        fontFamily: 'Arial',
        color: MENU_CONFIG.colors.title,
      }
    ).setOrigin(0.5);

    // 标题入场动画
    this.titleText.setScale(0);
    this.tweens.add({
      targets: this.titleText,
      scale: 1,
      duration: 600,
      ease: 'Back.easeOut',
    });
  }

  /** 创建开始按钮 */
  private createStartButton(center: { x: number; y: number }): void {
    const { button, colors } = MENU_CONFIG;

    this.startButtonBg = this.add.rectangle(
      center.x,
      center.y + MENU_CONFIG.positions.buttonY,
      button.width,
      button.height,
      colors.buttonBg
    ).setInteractive({ useHandCursor: true });

    this.startButtonText = this.add.text(
      center.x,
      center.y + MENU_CONFIG.positions.buttonY,
      'Start Game',
      {
        fontSize: MENU_CONFIG.fontSize.button,
        fontFamily: 'Arial',
        color: colors.buttonText,
      }
    ).setOrigin(0.5);

    this.startButtonContainer = this.add.container(
      center.x,
      center.y + MENU_CONFIG.positions.buttonY,
      [this.startButtonBg, this.startButtonText]
    );

    // 按钮交互
    this.setupButtonInteraction();
  }

  /** 设置按钮交互效果 */
  private setupButtonInteraction(): void {
    this.startButtonBg.on('pointerover', () => {
      this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBgHover);
      this.tweens.add({
        targets: this.startButtonContainer,
        scale: 1.05,
        duration: 100,
      });
    });

    this.startButtonBg.on('pointerout', () => {
      this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBg);
      this.tweens.add({
        targets: this.startButtonContainer,
        scale: 1,
        duration: 100,
      });
    });

    this.startButtonBg.on('pointerdown', () => {
      this.startGame();
    });
  }

  /** 创建副标题 */
  private createSubtitle(center: { x: number; y: number }): void {
    this.add.text(
      center.x,
      center.y + MENU_CONFIG.positions.subtitleY,
      'Click to start playing',
      {
        fontSize: MENU_CONFIG.fontSize.subtitle,
        fontFamily: 'Arial',
        color: MENU_CONFIG.colors.subtitle,
      }
    ).setOrigin(0.5);
  }

  /** 开始游戏 */
  private async startGame(): Promise<void> {
    await this.sceneController.launch('GameScene');
  }
}