fix: details

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

@@ -15,6 +15,10 @@ export class GameScene extends GameHostScene<BoopState> {
   private turnText!: Phaser.GameObjects.Text;
   private infoText!: Phaser.GameObjects.Text;
   private winnerOverlay?: Phaser.GameObjects.Container;
+  private whiteSupplyContainer!: Phaser.GameObjects.Container;
+  private blackSupplyContainer!: Phaser.GameObjects.Container;
+  private whiteSupplyBg!: Phaser.GameObjects.Rectangle;
+  private blackSupplyBg!: Phaser.GameObjects.Rectangle;
   private whiteSupplyText!: Phaser.GameObjects.Text;
   private blackSupplyText!: Phaser.GameObjects.Text;
   private pieceTypeSelector!: Phaser.GameObjects.Container;
@@ -135,33 +139,29 @@ export class GameScene extends GameHostScene<BoopState> {
     const boardCenterX = BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2;
     const uiY = BOARD_OFFSET.y - 20;
 
-    // 白色玩家储备
-    this.whiteSupplyText = this.add.text(
-      boardCenterX - 150,
-      uiY,
-      '',
-      {
+    // 白色玩家容器
+    this.whiteSupplyContainer = this.add.container(boardCenterX - 150, uiY);
+    this.whiteSupplyBg = this.add.rectangle(0, 0, 120, 50, 0x000000);
+    this.whiteSupplyText = this.add.text(0, 0, '', {
       fontSize: '16px',
       fontFamily: 'Arial',
       color: '#ffffff',
-        backgroundColor: '#000000',
-        padding: { x: 10, y: 5 },
-      }
-    ).setOrigin(0.5).setDepth(100);
+      align: 'center',
+    }).setOrigin(0.5);
+    this.whiteSupplyContainer.add([this.whiteSupplyBg, this.whiteSupplyText]);
+    this.whiteSupplyContainer.setDepth(100);
 
-    // 黑色玩家储备
-    this.blackSupplyText = this.add.text(
-      boardCenterX + 150,
-      uiY,
-      '',
-      {
+    // 黑色玩家容器
+    this.blackSupplyContainer = this.add.container(boardCenterX + 150, uiY);
+    this.blackSupplyBg = this.add.rectangle(0, 0, 120, 50, 0x333333);
+    this.blackSupplyText = this.add.text(0, 0, '', {
       fontSize: '16px',
       fontFamily: 'Arial',
       color: '#ffffff',
-        backgroundColor: '#333333',
-        padding: { x: 10, y: 5 },
-      }
-    ).setOrigin(0.5).setDepth(100);
+      align: 'center',
+    }).setOrigin(0.5);
+    this.blackSupplyContainer.add([this.blackSupplyBg, this.blackSupplyText]);
+    this.blackSupplyContainer.setDepth(100);
 
     this.updateSupplyUI();
   }
@@ -178,10 +178,64 @@ export class GameScene extends GameHostScene<BoopState> {
       `⚫ 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' });
+    
+    // 停止之前的动画
+    this.tweens.killTweensOf(this.whiteSupplyContainer);
+    this.tweens.killTweensOf(this.blackSupplyContainer);
+
+    if (isWhiteTurn) {
+      // 白色玩家弹跳 + 脉冲
+      this.whiteSupplyBg.setFillStyle(0xfbbf24);
+      this.whiteSupplyContainer.setScale(1);
+      this.tweens.add({
+        targets: this.whiteSupplyContainer,
+        scale: 1.15,
+        duration: 200,
+        ease: 'Back.easeOut',
+        yoyo: true,
+        hold: 400,
+        onComplete: () => {
+          this.tweens.add({
+            targets: this.whiteSupplyContainer,
+            alpha: 0.6,
+            duration: 600,
+            ease: 'Sine.easeInOut',
+            yoyo: true,
+            repeat: -1,
+          });
+        },
+      });
+      this.blackSupplyBg.setFillStyle(0x333333);
+      this.blackSupplyContainer.setAlpha(1);
+      this.blackSupplyContainer.setScale(1);
+    } else {
+      // 黑色玩家弹跳 + 脉冲
+      this.blackSupplyBg.setFillStyle(0xfbbf24);
+      this.blackSupplyContainer.setScale(1);
+      this.tweens.add({
+        targets: this.blackSupplyContainer,
+        scale: 1.15,
+        duration: 200,
+        ease: 'Back.easeOut',
+        yoyo: true,
+        hold: 400,
+        onComplete: () => {
+          this.tweens.add({
+            targets: this.blackSupplyContainer,
+            alpha: 0.6,
+            duration: 600,
+            ease: 'Sine.easeInOut',
+            yoyo: true,
+            repeat: -1,
+          });
+        },
+      });
+      this.whiteSupplyBg.setFillStyle(0x000000);
+      this.whiteSupplyContainer.setAlpha(1);
+      this.whiteSupplyContainer.setScale(1);
+    }
   }
 
   private createPieceTypeSelector(): void {
@@ -191,15 +245,16 @@ export class GameScene extends GameHostScene<BoopState> {
     this.pieceTypeSelector = this.add.container(boardCenterX, selectorY);
 
     // 标签文字
-    const label = this.add.text(-120, 0, '放置:', {
+    const label = this.add.text(-160, 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.kittenButton = this.createPieceButton('kitten', '🐾 小猫', -50);
+    // 大猫按钮
+    this.catButton = this.createPieceButton('cat', '🐱 大猫', 70);
 
     this.pieceTypeSelector.add([label, this.kittenButton, this.catButton]);
     this.updatePieceTypeSelector();

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

@@ -21,7 +21,7 @@ export default function App<TState extends Record<string, unknown>>(props: { gam
     return (
         <div className="flex flex-col h-screen">
             <div className="flex-1 relative">
-                <PhaserGame>
+                <PhaserGame config={{ width: 640, height: 750 }}>
                     <PhaserScene sceneKey="GameScene" scene={scene.value} autoStart data={gameHost.value} />
                 </PhaserGame>
             </div>

packages/framework/src/ui/PhaserBridge.tsx

@@ -23,7 +23,11 @@ export function PhaserGame(props: PhaserGameProps) {
     const gameSignal = useSignal<Phaser.Game>();
 
     useSignalEffect(() => {
-        const phaserGame = new Phaser.Game(props.config || defaultPhaserConfig);
+        const config: Phaser.Types.Core.GameConfig = {
+            ...defaultPhaserConfig,
+            ...props.config,
+        };
+        const phaserGame = new Phaser.Game(config);
         gameSignal.value = phaserGame;
 
         return () => {