refactor: boop to use new api

packages/boop-game/src/game.ts

@@ -1 +1,17 @@
-export * from 'boardgame-core/samples/boop';
+/**
+ * Re-export boop game module from boardgame-core
+ * This provides a convenient import path within boop-game
+ */
+export {
+  registry,
+  prompts,
+  start,
+  createInitialState,
+  type BoopState,
+  type BoopPart,
+  type BoopGame,
+  type PlayerType,
+  type PieceType,
+  type WinnerType,
+  type RegionType,
+} from "boardgame-core/samples/boop";

packages/boop-game/src/main.tsx

@@ -1,13 +1,11 @@
 import { h } from 'preact';
 import { GameUI } from 'boardgame-phaser';
-import * as boop from './game';
 import './style.css';
 import App from "@/ui/App";
-import {GameScene} from "@/scenes/GameScene";
 
 const ui = new GameUI({
   container: document.getElementById('ui-root')!,
-  root: <App gameModule={boop} gameScene={GameScene}/>,
+  root: <App/>,
 });
 
 ui.mount();

packages/boop-game/src/scenes/BoardRenderer.ts

@@ -3,7 +3,7 @@ import type { BoopState, PlayerType, BoopPart } from '@/game';
 
 const BOARD_SIZE = 6;
 const CELL_SIZE = 80;
-const BOARD_OFFSET = { x: 80, y: 100 };
+const BOARD_OFFSET = { x: 80, y: 80 };
 
 export { BOARD_SIZE, CELL_SIZE, BOARD_OFFSET };
 
@@ -20,7 +20,7 @@ export class BoardRenderer {
 
     this.turnText = this.scene.add.text(
       BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
-      BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30,
+      BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 40,
       '',
       {
         fontSize: '22px',
@@ -31,7 +31,7 @@ export class BoardRenderer {
 
     this.infoText = this.scene.add.text(
       BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
-      BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 60,
+      BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 80,
       '点击空白处放置小猫，三个大猫连线获胜！',
       {
         fontSize: '16px',
@@ -62,7 +62,7 @@ export class BoardRenderer {
 
     g.strokePath();
 
-    this.scene.add.text(BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2, BOARD_OFFSET.y - 50, 'Boop Game', {
+    this.scene.add.text(BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2, BOARD_OFFSET.y - 40, 'Boop Game', {
       fontSize: '32px',
       fontFamily: 'Arial',
       color: '#1f2937',

packages/boop-game/src/scenes/GameScene.ts

@@ -6,7 +6,6 @@ import { createPieceSpawner } from './PieceSpawner';
 import { SupplyUI } from './SupplyUI';
 import { PieceTypeSelector } from './PieceTypeSelector';
 import { WinnerOverlay } from './WinnerOverlay';
-import { StartOverlay } from './StartOverlay';
 import { ErrorOverlay } from './ErrorOverlay';
 
 export class GameScene extends GameHostScene<BoopState> {
@@ -14,7 +13,6 @@ export class GameScene extends GameHostScene<BoopState> {
   private supplyUI!: SupplyUI;
   private pieceTypeSelector!: PieceTypeSelector;
   private winnerOverlay!: WinnerOverlay;
-  private startOverlay!: StartOverlay;
   private errorOverlay!: ErrorOverlay;
 
   constructor() {
@@ -28,8 +26,7 @@ export class GameScene extends GameHostScene<BoopState> {
     this.boardRenderer = new BoardRenderer(this);
     this.supplyUI = new SupplyUI(this);
     this.pieceTypeSelector = new PieceTypeSelector(this);
-    this.winnerOverlay = new WinnerOverlay(this, () => this.restartGame());
+    this.winnerOverlay = new WinnerOverlay(this, () => this.gameHost.start());
-    this.startOverlay = new StartOverlay(this, () => this.startGame());
     this.errorOverlay = new ErrorOverlay(this);
 
     // 设置棋子生成器
@@ -43,16 +40,6 @@ export class GameScene extends GameHostScene<BoopState> {
       () => this.gameHost.status.value !== 'running' || !!this.state.winner
     );
 
-    // 监听游戏状态变化
-    this.addEffect(() => {
-      const status = this.gameHost.status.value;
-      if (status === 'running') {
-        this.startOverlay.hide();
-      } else if (status === 'created') {
-        this.startOverlay.show();
-      }
-    });
-
     // 监听胜负状态
     this.addEffect(() => {
       const winner = this.state.winner;
@@ -69,6 +56,9 @@ export class GameScene extends GameHostScene<BoopState> {
       this.supplyUI.update(this.state);
       this.pieceTypeSelector.update(this.state);
     });
+
+    // 启动游戏
+    this.gameHost.start();
   }
 
   private handleCellClick(row: number, col: number): void {
@@ -81,17 +71,14 @@ export class GameScene extends GameHostScene<BoopState> {
 
   private handlePieceClick(row: number, col: number): void {
     // 棋盘满时，点击棋子触发升级
-    const error = this.gameHost.tryAnswerPrompt(prompts.graduate, this.state.currentPlayer, row, col);
+    const error = this.gameHost.tryAnswerPrompt(prompts.choose, this.state.currentPlayer, row, col);
     if (error) {
       this.errorOverlay.show(error);
     }
   }
 
-  private startGame(): void {
+  /** 跳转到菜单场景 */
-    this.gameHost.start();
+  private async goToMenu(): Promise<void> {
-  }
+    await this.sceneController.launch('MenuScene');
-
-  private restartGame(): void {
-    this.gameHost.start();
   }
 }

packages/boop-game/src/scenes/MenuScene.ts

@@ -0,0 +1,168 @@
+import { ReactiveScene } from 'boardgame-phaser';
+import Phaser from 'phaser';
+
+/** 菜单场景配置 */
+const MENU_CONFIG = {
+  colors: {
+    title: '#fbbf24',
+    buttonText: '#1f2937',
+    buttonBg: 0xfbbf24,
+    buttonBgHover: 0xf59e0b,
+    subtitle: '#6b7280',
+  },
+  fontSize: {
+    title: '48px',
+    button: '24px',
+    subtitle: '16px',
+  },
+  button: {
+    width: 200,
+    height: 80,
+  },
+  positions: {
+    titleY: -120,
+    buttonY: 40,
+    subtitleY: 160,
+  },
+} 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,
+      '🐱 BOOP 🐾',
+      {
+        fontSize: MENU_CONFIG.fontSize.title,
+        fontFamily: 'Arial',
+        color: MENU_CONFIG.colors.title,
+        fontStyle: 'bold',
+      }
+    ).setOrigin(0.5);
+
+    // 标题入场动画
+    this.titleText.setScale(0);
+    this.tweens.add({
+      targets: this.titleText,
+      scale: 1,
+      duration: 600,
+      ease: 'Back.easeOut',
+    });
+
+    // 标题呼吸动画
+    this.tweens.add({
+      targets: this.titleText,
+      scale: 1.05,
+      duration: 1000,
+      yoyo: true,
+      repeat: -1,
+      ease: 'Sine.easeInOut',
+    });
+  }
+
+  /** 创建开始按钮 */
+  private createStartButton(center: { x: number; y: number }): void {
+    const { button, colors } = MENU_CONFIG;
+
+    this.startButtonBg = this.add.rectangle(
+      0,
+      0,
+      button.width,
+      button.height,
+      colors.buttonBg
+    ).setOrigin(0.5).setInteractive({ useHandCursor: true });
+
+    this.startButtonText = this.add.text(
+      0,
+      0,
+      'Start Game',
+      {
+        fontSize: MENU_CONFIG.fontSize.button,
+        fontFamily: 'Arial',
+        color: colors.buttonText,
+        fontStyle: 'bold',
+      }
+    ).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');
+  }
+}

packages/boop-game/src/scenes/index.ts

@@ -1,4 +1,5 @@
 export { GameScene } from './GameScene';
+export { MenuScene } from './MenuScene';
 export { BoardRenderer, BOARD_SIZE, CELL_SIZE, BOARD_OFFSET } from './BoardRenderer';
 export { createPieceSpawner } from './PieceSpawner';
 export { SupplyUI } from './SupplyUI';

packages/boop-game/src/ui/App.tsx

@@ -1,38 +1,25 @@
-import {useComputed} from '@preact/signals';
-import { createGameHost, type GameModule } from 'boardgame-core';
-import Phaser from 'phaser';
 import { h } from 'preact';
 import {PhaserGame, PhaserScene } from 'boardgame-phaser';
+import {MenuScene} from "@/scenes/MenuScene";
+import {useMemo} from "preact/hooks";
+import * as gameModule from '../game';
+import {GameScene} from "@/scenes/GameScene";
+import {createGameHost, type GameModule} from "boardgame-core";
+import type {BoopState} from "@/game";
 
-export default function App<TState extends Record<string, unknown>>(props: { gameModule: GameModule<TState>, gameScene: { new(): Phaser.Scene } }) {
+export default function App() {
-
+    const gameHost = useMemo(() => createGameHost(gameModule as unknown as GameModule<BoopState>), []);
-    const gameHost = useComputed(() => {
+    const gameScene = useMemo(() => new GameScene(), []);
-        const gameHost = createGameHost(props.gameModule);
+    const menuScene = useMemo(() => new MenuScene(), []);
-        return { gameHost };
-    });
-
-    const scene = useComputed(() => new props.gameScene());
-
-    const handleReset = async () => {
-        gameHost.value.gameHost.start();
-    };
-    const label = useComputed(() => gameHost.value.gameHost.status.value === 'running' ? 'Restart' : 'Start');
 
     return (
         <div className="flex flex-col h-screen">
             <div className="flex-1 flex relative justify-center items-center">
-                <PhaserGame config={{ width: 640, height: 750 }}>
+                <PhaserGame initialScene="MenuScene" config={{ width: 640, height: 720 }}>
-                    <PhaserScene sceneKey="GameScene" scene={scene.value} autoStart data={gameHost.value} />
+                    <PhaserScene sceneKey="MenuScene" scene={menuScene} />
+                    <PhaserScene sceneKey="GameScene" scene={gameScene} data={{gameHost}}/>
                 </PhaserGame>
             </div>
-            <div className="p-4 bg-gray-100 border-t border-gray-200">
-                <button
-                    onClick={handleReset}
-                    className="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
-                >
-                    {label}
-                </button>
-            </div>
         </div>
     );
 }