refactor:refactor: improve ttt

packages/sample-game/src/game/tic-tac-toe.ts

@@ -1 +1,19 @@
-export * from "boardgame-core/samples/tic-tac-toe";
+/**
+ * Re-export tic-tac-toe game module from boardgame-core
+ * This provides a convenient import path within sample-game
+ */
+export {
+  registry,
+  prompts,
+  start,
+  createInitialState,
+  isCellOccupied,
+  hasWinningLine,
+  checkWinner,
+  placePiece,
+  type TicTacToePart,
+  type TicTacToeState,
+  type TicTacToeGame,
+  type PlayerType,
+  type WinnerType,
+} from "boardgame-core/samples/tic-tac-toe";

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

@@ -4,18 +4,39 @@ import { GameHostScene } from 'boardgame-phaser';
 import { spawnEffect, type Spawner } from 'boardgame-phaser';
 import {prompts} from "@/game/tic-tac-toe";
 
-const CELL_SIZE = 120;
+// 棋盘配置常量
-const BOARD_OFFSET = { x: 100, y: 100 };
+export const BOARD_CONFIG = {
-const BOARD_SIZE = 3;
+  cellSize: 120,
+  boardOffset: { x: 100, y: 100 },
+  boardSize: 3,
+  colors: {
+    grid: 0x6b7280,
+    x: '#3b82f6',
+    o: '#ef4444',
+    title: '#1f2937',
+    turn: '#4b5563',
+    menuButton: 0x6b7280,
+    menuButtonHover: 0x4b5563,
+    overlay: 0x000000,
+    winText: '#fbbf24',
+  },
+  fontSize: {
+    title: '28px',
+    turn: '20px',
+    cell: '64px',
+    menuButton: '18px',
+    winText: '36px',
+  },
+} as const;
 
 export class GameScene extends GameHostScene<TicTacToeState> {
   private boardContainer!: Phaser.GameObjects.Container;
   private gridGraphics!: Phaser.GameObjects.Graphics;
   private turnText!: Phaser.GameObjects.Text;
   private winnerOverlay?: Phaser.GameObjects.Container;
-  private menuButton!: Phaser.GameObjects.Container;
+  private menuButtonContainer!: Phaser.GameObjects.Container;
-  private menuButtonText!: Phaser.GameObjects.Text;
   private menuButtonBg!: Phaser.GameObjects.Rectangle;
+  private menuButtonText!: Phaser.GameObjects.Text;
 
   constructor() {
     super('GameScene');
@@ -26,8 +47,10 @@ export class GameScene extends GameHostScene<TicTacToeState> {
 
     this.boardContainer = this.add.container(0, 0);
     this.gridGraphics = this.add.graphics();
-    this.drawGrid();
+    
+    this.createBoardVisuals();
     this.createMenuButton();
+    this.createInputZones();
 
     this.disposables.add(spawnEffect(new TicTacToePartSpawner(this)));
 
@@ -45,39 +68,86 @@ export class GameScene extends GameHostScene<TicTacToeState> {
       const currentPlayer = this.state.currentPlayer;
       this.updateTurnText(currentPlayer);
     });
-
-    this.setupInput();
   }
 
-  private isCellOccupied(row: number, col: number): boolean {
+  /** 创建棋盘视觉元素（网格、标题、回合提示） */
-    return !!this.state.board.partMap[`${row},${col}`];
+  private createBoardVisuals(): void {
+    this.drawGrid();
+
+    const { boardSize, cellSize, boardOffset } = BOARD_CONFIG;
+    const centerX = boardOffset.x + (boardSize * cellSize) / 2;
+    
+    this.add.text(centerX, boardOffset.y - 40, 'Tic-Tac-Toe', {
+      fontSize: BOARD_CONFIG.fontSize.title,
+      fontFamily: 'Arial',
+      color: BOARD_CONFIG.colors.title,
+    }).setOrigin(0.5);
+
+    this.turnText = this.add.text(
+      centerX,
+      boardOffset.y + boardSize * cellSize + 20,
+      '',
+      {
+        fontSize: BOARD_CONFIG.fontSize.turn,
+        fontFamily: 'Arial',
+        color: BOARD_CONFIG.colors.turn,
+      }
+    ).setOrigin(0.5);
+
+    this.updateTurnText(this.state.currentPlayer);
   }
 
+  /** 绘制棋盘网格 */
+  private drawGrid(): void {
+    const g = this.gridGraphics;
+    const { boardSize, cellSize, boardOffset } = BOARD_CONFIG;
+    
+    g.lineStyle(3, BOARD_CONFIG.colors.grid);
+
+    for (let i = 1; i < boardSize; i++) {
+      g.lineBetween(
+        boardOffset.x + i * cellSize,
+        boardOffset.y,
+        boardOffset.x + i * cellSize,
+        boardOffset.y + boardSize * cellSize,
+      );
+      g.lineBetween(
+        boardOffset.x,
+        boardOffset.y + i * cellSize,
+        boardOffset.x + boardSize * cellSize,
+        boardOffset.y + i * cellSize,
+      );
+    }
+
+    g.strokePath();
+  }
+
+  /** 创建菜单按钮 */
   private createMenuButton(): void {
     const buttonX = this.game.scale.width - 80;
     const buttonY = 30;
 
-    this.menuButtonBg = this.add.rectangle(buttonX, buttonY, 120, 40, 0x6b7280)
+    this.menuButtonBg = this.add.rectangle(buttonX, buttonY, 120, 40, BOARD_CONFIG.colors.menuButton)
       .setInteractive({ useHandCursor: true });
 
     this.menuButtonText = this.add.text(buttonX, buttonY, 'Menu', {
-      fontSize: '18px',
+      fontSize: BOARD_CONFIG.fontSize.menuButton,
       fontFamily: 'Arial',
       color: '#ffffff',
     }).setOrigin(0.5);
 
-    this.menuButton = this.add.container(buttonX, buttonY, [
+    this.menuButtonContainer = this.add.container(buttonX, buttonY, [
       this.menuButtonBg,
       this.menuButtonText,
     ]);
 
     // 按钮交互
     this.menuButtonBg.on('pointerover', () => {
-      this.menuButtonBg.setFillStyle(0x4b5563);
+      this.menuButtonBg.setFillStyle(BOARD_CONFIG.colors.menuButtonHover);
     });
 
     this.menuButtonBg.on('pointerout', () => {
-      this.menuButtonBg.setFillStyle(0x6b7280);
+      this.menuButtonBg.setFillStyle(BOARD_CONFIG.colors.menuButton);
     });
 
     this.menuButtonBg.on('pointerdown', () => {
@@ -85,73 +155,48 @@ export class GameScene extends GameHostScene<TicTacToeState> {
     });
   }
 
-  private async goToMenu(): Promise<void> {
+  /** 创建输入区域 */
-    await this.sceneController.launch('MenuScene');
+  private createInputZones(): void {
-  }
+    const { boardSize, cellSize, boardOffset } = BOARD_CONFIG;
+    
+    for (let row = 0; row < boardSize; row++) {
+      for (let col = 0; col < boardSize; col++) {
+        const x = boardOffset.x + col * cellSize + cellSize / 2;
+        const y = boardOffset.y + row * cellSize + cellSize / 2;
 
-  private setupInput(): void {
+        const zone = this.add.zone(x, y, cellSize, cellSize).setInteractive();
-    for (let row = 0; row < BOARD_SIZE; row++) {
-      for (let col = 0; col < BOARD_SIZE; col++) {
-        const x = BOARD_OFFSET.x + col * CELL_SIZE + CELL_SIZE / 2;
-        const y = BOARD_OFFSET.y + row * CELL_SIZE + CELL_SIZE / 2;
-
-        const zone = this.add.zone(x, y, CELL_SIZE, CELL_SIZE).setInteractive();
 
         zone.on('pointerdown', () => {
-          if (this.state.winner) return;
+          this.handleCellClick(row, col);
-          if (this.isCellOccupied(row, col)) return;
-
-          const error = this.gameHost.tryAnswerPrompt(prompts.play, this.state.currentPlayer, row, col);
-          if (error) {
-            console.warn('Invalid move:', error);
-          }
         });
       }
     }
   }
 
-  private drawGrid(): void {
+  /** 处理格子点击 */
-    const g = this.gridGraphics;
+  private handleCellClick(row: number, col: number): void {
-    g.lineStyle(3, 0x6b7280);
+    if (this.state.winner) return;
+    if (this.isCellOccupied(row, col)) return;
 
-    for (let i = 1; i < BOARD_SIZE; i++) {
+    const error = this.gameHost.tryAnswerPrompt(prompts.play, this.state.currentPlayer, row, col);
-      g.lineBetween(
+    if (error) {
-        BOARD_OFFSET.x + i * CELL_SIZE,
+      console.warn('Invalid move:', error);
-        BOARD_OFFSET.y,
-        BOARD_OFFSET.x + i * CELL_SIZE,
-        BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE,
-      );
-      g.lineBetween(
-        BOARD_OFFSET.x,
-        BOARD_OFFSET.y + i * CELL_SIZE,
-        BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE,
-        BOARD_OFFSET.y + i * CELL_SIZE,
-      );
     }
-
-    g.strokePath();
-
-    this.add.text(BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2, BOARD_OFFSET.y - 40, 'Tic-Tac-Toe', {
-      fontSize: '28px',
-      fontFamily: 'Arial',
-      color: '#1f2937',
-    }).setOrigin(0.5);
-
-    this.turnText = this.add.text(BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2, BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 20, '', {
-      fontSize: '20px',
-      fontFamily: 'Arial',
-      color: '#4b5563',
-    }).setOrigin(0.5);
-
-    this.updateTurnText(this.state.currentPlayer);
   }
 
+  /** 检查格子是否被占用 */
+  private isCellOccupied(row: number, col: number): boolean {
+    return !!this.state.board.partMap[`${row},${col}`];
+  }
+
+  /** 更新回合提示文本 */
   private updateTurnText(player: string): void {
     if (this.turnText) {
       this.turnText.setText(`${player}'s turn`);
     }
   }
 
+  /** 显示获胜者 */
   private showWinner(winner: string): void {
     // 清理旧的覆盖层防止叠加
     if (this.winnerOverlay) {
@@ -161,13 +206,16 @@ export class GameScene extends GameHostScene<TicTacToeState> {
     this.winnerOverlay = this.add.container();
 
     const text = winner === 'draw' ? "It's a draw!" : `${winner} wins!`;
+    const { boardSize, cellSize, boardOffset } = BOARD_CONFIG;
+    const centerX = boardOffset.x + (boardSize * cellSize) / 2;
+    const centerY = boardOffset.y + (boardSize * cellSize) / 2;
 
     const bg = this.add.rectangle(
-      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
+      centerX,
-      BOARD_OFFSET.y + (BOARD_SIZE * CELL_SIZE) / 2,
+      centerY,
-      BOARD_SIZE * CELL_SIZE,
+      boardSize * cellSize,
-      BOARD_SIZE * CELL_SIZE,
+      boardSize * cellSize,
-      0x000000,
+      BOARD_CONFIG.colors.overlay,
       0.6,
     ).setInteractive({ useHandCursor: true });
 
@@ -177,16 +225,11 @@ export class GameScene extends GameHostScene<TicTacToeState> {
 
     this.winnerOverlay.add(bg);
 
-    const winText = this.add.text(
+    const winText = this.add.text(centerX, centerY, text, {
-      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
+      fontSize: BOARD_CONFIG.fontSize.winText,
-      BOARD_OFFSET.y + (BOARD_SIZE * CELL_SIZE) / 2,
+      fontFamily: 'Arial',
-      text,
+      color: BOARD_CONFIG.colors.winText,
-      {
+    }).setOrigin(0.5);
-        fontSize: '36px',
-        fontFamily: 'Arial',
-        color: '#fbbf24',
-      },
-    ).setOrigin(0.5);
 
     this.winnerOverlay.add(winText);
 
@@ -198,8 +241,14 @@ export class GameScene extends GameHostScene<TicTacToeState> {
       repeat: 1,
     });
   }
+
+  /** 跳转到菜单场景 */
+  private async goToMenu(): Promise<void> {
+    await this.sceneController.launch('MenuScene');
+  }
 }
 
+/** 棋子生成器 */
 class TicTacToePartSpawner implements Spawner<TicTacToePart, Phaser.GameObjects.Text> {
   constructor(public readonly scene: GameScene) {}
 
@@ -208,24 +257,23 @@ class TicTacToePartSpawner implements Spawner<TicTacToePart, Phaser.GameObjects.
       yield part;
     }
   }
+
   getKey(part: TicTacToePart): string {
     return part.id;
   }
+
   onUpdate(part: TicTacToePart, obj: Phaser.GameObjects.Text): void {
-    const [yIndex, xIndex] = part.position;
+    this.updatePosition(part, obj);
-    const x = xIndex * CELL_SIZE + BOARD_OFFSET.x;
-    const y = yIndex * CELL_SIZE + BOARD_OFFSET.y;
-    obj.x = x + CELL_SIZE / 2;
-    obj.y = y + CELL_SIZE / 2;
   }
+
   onSpawn(part: TicTacToePart) {
-    const [yIndex, xIndex] = part.position;
+    const { cellSize, boardOffset } = BOARD_CONFIG;
-    const x = xIndex * CELL_SIZE + BOARD_OFFSET.x;
+    const pos = this.calculatePosition(part.position);
-    const y = yIndex * CELL_SIZE + BOARD_OFFSET.y;
+    
-    const text = this.scene.add.text(x + CELL_SIZE / 2, y + CELL_SIZE / 2, part.player, {
+    const text = this.scene.add.text(pos.x, pos.y, part.player, {
-      fontSize: '64px',
+      fontSize: BOARD_CONFIG.fontSize.cell,
       fontFamily: 'Arial',
-      color: part.player === 'X' ? '#3b82f6' : '#ef4444',
+      color: part.player === 'X' ? BOARD_CONFIG.colors.x : BOARD_CONFIG.colors.o,
     }).setOrigin(0.5);
 
     // 添加落子动画
@@ -239,7 +287,7 @@ class TicTacToePartSpawner implements Spawner<TicTacToePart, Phaser.GameObjects.
 
     return text;
   }
-  
+
   onDespawn(obj: Phaser.GameObjects.Text) {
     this.scene.tweens.add({
       targets: obj,
@@ -249,4 +297,21 @@ class TicTacToePartSpawner implements Spawner<TicTacToePart, Phaser.GameObjects.
       onComplete: () => obj.destroy(),
     });
   }
+
+  /** 计算格子的屏幕位置 */
+  private calculatePosition(position: number[]): { x: number; y: number } {
+    const { cellSize, boardOffset } = BOARD_CONFIG;
+    const [yIndex, xIndex] = position;
+    return {
+      x: xIndex * cellSize + boardOffset.x + cellSize / 2,
+      y: yIndex * cellSize + boardOffset.y + cellSize / 2,
+    };
+  }
+
+  /** 更新对象位置 */
+  private updatePosition(part: TicTacToePart, obj: Phaser.GameObjects.Text): void {
+    const pos = this.calculatePosition(part.position);
+    obj.x = pos.x;
+    obj.y = pos.y;
+  }
 }

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

@@ -1,10 +1,35 @@
 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 startButton!: Phaser.GameObjects.Container;
+  private startButtonContainer!: Phaser.GameObjects.Container;
-  private startButtonText!: Phaser.GameObjects.Text;
   private startButtonBg!: Phaser.GameObjects.Rectangle;
+  private startButtonText!: Phaser.GameObjects.Text;
 
   constructor() {
     super('MenuScene');
@@ -13,17 +38,35 @@ export class MenuScene extends ReactiveScene {
   create(): void {
     super.create();
 
-    const centerX = this.game.scale.width / 2;
+    const center = this.getCenterPosition();
-    const centerY = this.game.scale.height / 2;
+    
+    this.createTitle(center);
+    this.createStartButton(center);
+    this.createSubtitle(center);
+  }
 
-    // 标题
+  /** 获取屏幕中心位置 */
-    this.titleText = this.add.text(centerX, centerY - 100, 'Tic-Tac-Toe', {
+  private getCenterPosition(): { x: number; y: number } {
-      fontSize: '48px',
+    return {
-      fontFamily: 'Arial',
+      x: this.game.scale.width / 2,
-      color: '#1f2937',
+      y: this.game.scale.height / 2,
-    }).setOrigin(0.5);
+    };
+  }
 
-    // 添加标题动画
+  /** 创建标题文本 */
+  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,
@@ -31,36 +74,56 @@ export class MenuScene extends ReactiveScene {
       duration: 600,
       ease: 'Back.easeOut',
     });
+  }
 
-    // 开始按钮
+  /** 创建开始按钮 */
-    this.startButtonBg = this.add.rectangle(centerX, centerY + 40, 200, 60, 0x3b82f6)
+  private createStartButton(center: { x: number; y: number }): void {
-      .setInteractive({ useHandCursor: true });
+    const { button, colors } = MENU_CONFIG;
 
-    this.startButtonText = this.add.text(centerX, centerY + 40, 'Start Game', {
+    this.startButtonBg = this.add.rectangle(
-      fontSize: '24px',
+      center.x,
-      fontFamily: 'Arial',
+      center.y + MENU_CONFIG.positions.buttonY,
-      color: '#ffffff',
+      button.width,
-    }).setOrigin(0.5);
+      button.height,
+      colors.buttonBg
+    ).setInteractive({ useHandCursor: true });
 
-    this.startButton = this.add.container(centerX, centerY + 40, [
+    this.startButtonText = this.add.text(
-      this.startButtonBg,
+      center.x,
-      this.startButtonText,
+      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(0x2563eb);
+      this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBgHover);
       this.tweens.add({
-        targets: this.startButton,
+        targets: this.startButtonContainer,
         scale: 1.05,
         duration: 100,
       });
     });
 
     this.startButtonBg.on('pointerout', () => {
-      this.startButtonBg.setFillStyle(0x3b82f6);
+      this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBg);
       this.tweens.add({
-        targets: this.startButton,
+        targets: this.startButtonContainer,
         scale: 1,
         duration: 100,
       });
@@ -69,15 +132,23 @@ export class MenuScene extends ReactiveScene {
     this.startButtonBg.on('pointerdown', () => {
       this.startGame();
     });
-
-    // 副标题
-    this.add.text(centerX, centerY + 140, 'Click to start playing', {
-      fontSize: '16px',
-      fontFamily: 'Arial',
-      color: '#6b7280',
-    }).setOrigin(0.5);
   }
 
+  /** 创建副标题 */
+  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');
   }