feat: boop game

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

@@ -15,6 +15,12 @@ export class GameScene extends GameHostScene<BoopState> {
   private turnText!: Phaser.GameObjects.Text;
   private infoText!: Phaser.GameObjects.Text;
   private winnerOverlay?: Phaser.GameObjects.Container;
+  private whiteSupplyText!: Phaser.GameObjects.Text;
+  private blackSupplyText!: Phaser.GameObjects.Text;
+  private pieceTypeSelector!: Phaser.GameObjects.Container;
+  private selectedPieceType: PieceType = 'kitten';
+  private kittenButton!: Phaser.GameObjects.Container;
+  private catButton!: Phaser.GameObjects.Container;
 
   constructor() {
     super('GameScene');
@@ -26,6 +32,7 @@ export class GameScene extends GameHostScene<BoopState> {
     this.boardContainer = this.add.container(0, 0);
     this.gridGraphics = this.add.graphics();
     this.drawGrid();
+    this.createSupplyUI();
 
     this.disposables.add(spawnEffect(new BoopPartSpawner(this, this.gameHost.state)));
 
@@ -42,8 +49,11 @@ export class GameScene extends GameHostScene<BoopState> {
     this.watch(() => {
       const currentPlayer = this.state.currentPlayer;
       this.updateTurnText(currentPlayer);
+      this.updateSupplyUI();
+      this.updatePieceTypeSelector();
     });
 
+    this.createPieceTypeSelector();
     this.setupInput();
   }
 
@@ -59,7 +69,7 @@ export class GameScene extends GameHostScene<BoopState> {
           if (this.state.winner) return;
           if (this.isCellOccupied(row, col)) return;
 
-          const cmd = commands.play(this.state.currentPlayer, row, col, 'kitten');
+          const cmd = commands.play(this.state.currentPlayer, row, col, this.selectedPieceType);
           const error = this.gameHost.onInput(cmd);
           if (error) {
             console.warn('Invalid move:', error);
@@ -97,8 +107,8 @@ export class GameScene extends GameHostScene<BoopState> {
     }).setOrigin(0.5);
 
     this.turnText = this.add.text(
-      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2, 
+      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
-      BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30, 
+      BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30,
       '',
       {
         fontSize: '22px',
@@ -121,6 +131,149 @@ export class GameScene extends GameHostScene<BoopState> {
     this.updateTurnText(this.state.currentPlayer);
   }
 
+  private createSupplyUI(): void {
+    const boardCenterX = BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2;
+    const uiY = BOARD_OFFSET.y - 20;
+
+    // 白色玩家储备
+    this.whiteSupplyText = this.add.text(
+      boardCenterX - 150,
+      uiY,
+      '',
+      {
+        fontSize: '16px',
+        fontFamily: 'Arial',
+        color: '#ffffff',
+        backgroundColor: '#000000',
+        padding: { x: 10, y: 5 },
+      }
+    ).setOrigin(0.5).setDepth(100);
+
+    // 黑色玩家储备
+    this.blackSupplyText = this.add.text(
+      boardCenterX + 150,
+      uiY,
+      '',
+      {
+        fontSize: '16px',
+        fontFamily: 'Arial',
+        color: '#ffffff',
+        backgroundColor: '#333333',
+        padding: { x: 10, y: 5 },
+      }
+    ).setOrigin(0.5).setDepth(100);
+
+    this.updateSupplyUI();
+  }
+
+  private updateSupplyUI(): void {
+    const white = this.state.players.white;
+    const black = this.state.players.black;
+
+    this.whiteSupplyText.setText(
+      `⚪ WHITE\n🐾 ${white.kitten.supply} | 🐱 ${white.cat.supply}`
+    );
+
+    this.blackSupplyText.setText(
+      `⚫ BLACK\n🐾 ${black.kitten.supply} | 🐱 ${black.cat.supply}`
+    );
+
+    // 高亮当前玩家
+    const isWhiteTurn = this.state.currentPlayer === 'white';
+    this.whiteSupplyText.setStyle({ backgroundColor: isWhiteTurn ? '#fbbf24' : '#000000' });
+    this.blackSupplyText.setStyle({ backgroundColor: !isWhiteTurn ? '#fbbf24' : '#333333' });
+  }
+
+  private createPieceTypeSelector(): void {
+    const boardCenterX = BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2;
+    const selectorY = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 100;
+
+    this.pieceTypeSelector = this.add.container(boardCenterX, selectorY);
+
+    // 标签文字
+    const label = this.add.text(-120, 0, '放置:', {
+      fontSize: '18px',
+      fontFamily: 'Arial',
+      color: '#4b5563',
+    }).setOrigin(0.5, 0.5);
+
+    // 小猫按钮
+    this.kittenButton = this.createPieceButton('kitten', '🐾 小猫', -30);
+    this.catButton = this.createPieceButton('cat', '🐱 大猫', 50);
+
+    this.pieceTypeSelector.add([label, this.kittenButton, this.catButton]);
+    this.updatePieceTypeSelector();
+  }
+
+  private createPieceButton(type: PieceType, text: string, xOffset: number): Phaser.GameObjects.Container {
+    const container = this.add.container(xOffset, 0);
+
+    const bg = this.add.rectangle(0, 0, 100, 40, 0xe5e7eb)
+      .setStrokeStyle(2, 0x9ca3af);
+
+    const textObj = this.add.text(0, 0, text, {
+      fontSize: '16px',
+      fontFamily: 'Arial',
+      color: '#1f2937',
+    }).setOrigin(0.5);
+
+    container.add([bg, textObj]);
+
+    // 使按钮可交互
+    bg.setInteractive({ useHandCursor: true });
+    bg.on('pointerdown', () => {
+      this.selectedPieceType = type;
+      this.updatePieceTypeSelector();
+    });
+
+    // 存储引用以便后续更新
+    if (type === 'kitten') {
+      this.kittenButton = container;
+    } else {
+      this.catButton = container;
+    }
+
+    return container;
+  }
+
+  private updatePieceTypeSelector(): void {
+    if (!this.kittenButton || !this.catButton) return;
+
+    const white = this.state.players.white;
+    const black = this.state.players.black;
+    const currentPlayer = this.state.players[this.state.currentPlayer];
+    const isWhiteTurn = this.state.currentPlayer === 'white';
+
+    // 更新按钮状态
+    const kittenAvailable = currentPlayer.kitten.supply > 0;
+    const catAvailable = currentPlayer.cat.supply > 0;
+
+    // 更新小猫按钮
+    const kittenBg = this.kittenButton.list[0] as Phaser.GameObjects.Rectangle;
+    const kittenText = this.kittenButton.list[1] as Phaser.GameObjects.Text;
+    const isKittenSelected = this.selectedPieceType === 'kitten';
+    
+    kittenBg.setFillStyle(isKittenSelected ? 0xfbbf24 : (kittenAvailable ? 0xe5e7eb : 0xd1d5db));
+    kittenText.setText(`🐾 小猫 (${currentPlayer.kitten.supply})`);
+
+    // 更新大猫按钮
+    const catBg = this.catButton.list[0] as Phaser.GameObjects.Rectangle;
+    const catText = this.catButton.list[1] as Phaser.GameObjects.Text;
+    const isCatSelected = this.selectedPieceType === 'cat';
+    
+    catBg.setFillStyle(isCatSelected ? 0xfbbf24 : (catAvailable ? 0xe5e7eb : 0xd1d5db));
+    catText.setText(`🐱 大猫 (${currentPlayer.cat.supply})`);
+
+    // 如果选中的类型不可用，切换到可用的
+    if (!kittenAvailable && this.selectedPieceType === 'kitten' && catAvailable) {
+      this.selectedPieceType = 'cat';
+      this.updatePieceTypeSelector();
+    } else if (!catAvailable && this.selectedPieceType === 'cat' && kittenAvailable) {
+      this.selectedPieceType = 'kitten';
+      this.updatePieceTypeSelector();
+    }
+  }
+
   private updateTurnText(player: PlayerType): void {
     if (this.turnText) {
       const whitePieces = this.state.players.white;
@@ -201,8 +354,15 @@ class BoopPartSpawner implements Spawner<BoopPart, Phaser.GameObjects.Container>
     const [row, col] = part.position;
     const x = BOARD_OFFSET.x + col * CELL_SIZE + CELL_SIZE / 2;
     const y = BOARD_OFFSET.y + row * CELL_SIZE + CELL_SIZE / 2;
-    obj.x = x;
+    
-    obj.y = y;
+    // 使用 tween 动画平滑移动棋子
+    this.scene.tweens.add({
+      targets: obj,
+      x: x,
+      y: y,
+      duration: 200,
+      ease: 'Power2',
+    });
   }
   
   onSpawn(part: BoopPart) {