refactor: some manual changes

packages/onitama-game/src/scenes/OnitamaScene.ts

@@ -57,15 +57,15 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
 
     // Info text
     this.infoText = this.add.text(
-      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
-      BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30,
+      20,
+      BOARD_OFFSET.y,
       '',
       {
-        fontSize: '20px',
+        fontSize: '15px',
         fontFamily: 'Arial',
         color: '#4b5563',
       }
-    ).setOrigin(0.5);
+    );
 
     // Update info text when UI state changes
     this.addEffect(() => {
@@ -80,12 +80,13 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     const boardLeft = BOARD_OFFSET.x;
     const boardTop = BOARD_OFFSET.y;
     const boardRight = BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE;
+    const boardBottom = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE;
 
-    // Red cards label
+    // Red cards label - 棋盘下方
     const redLabel = this.add.text(
-      boardLeft - CARD_WIDTH - 60 + CARD_WIDTH / 2,
-      boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10,
-      "RED's Cards",
+      boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
+      boardBottom + 10,
+      "RED",
       {
         fontSize: '16px',
         fontFamily: 'Arial',
@@ -94,47 +95,27 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     ).setOrigin(0.5, 0);
     this.cardLabelContainers.set('red', redLabel);
 
-    // Black cards label
+    // Black cards label - 棋盘上方
     const blackLabel = this.add.text(
-      boardRight + 60 + CARD_WIDTH / 2,
-      boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10,
-      "BLACK's Cards",
+      boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
+      boardTop - 10,
+      "BLACK",
       {
         fontSize: '16px',
         fontFamily: 'Arial',
         color: '#3b82f6',
       }
-    ).setOrigin(0.5, 0);
+    ).setOrigin(0.5, 1);
     this.cardLabelContainers.set('black', blackLabel);
-
-    // Spare card label
-    const boardCenterX = boardLeft + (BOARD_SIZE * CELL_SIZE) / 2;
-    const spareLabel = this.add.text(
-      boardCenterX,
-      boardTop - 50,
-      'Spare Card',
-      {
-        fontSize: '16px',
-        fontFamily: 'Arial',
-        color: '#6b7280',
-      }
-    ).setOrigin(0.5, 0);
-    this.cardLabelContainers.set('spare', spareLabel);
   }
 
   private updateInfoText(): void {
     const currentPlayer = this.state.currentPlayer;
-    const selectedCard = this.uiState.value.selectedCard;
-    const selectedPiece = this.uiState.value.selectedPiece;
     
     if (this.state.winner) {
       this.infoText.setText(`${this.state.winner} wins!`);
-    } else if (!selectedCard) {
-      this.infoText.setText(`${currentPlayer}'s turn - Select a card first`);
-    } else if (!selectedPiece) {
-      this.infoText.setText(`Card: ${selectedCard} - Select a piece to move`);
     } else {
-      this.infoText.setText(`${currentPlayer}'s turn (Turn ${this.state.turn + 1})`);
+      this.infoText.setText(`Turn ${this.state.turn + 1}\n\n${currentPlayer}`);
     }
   }
 
@@ -160,15 +141,15 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     g.strokePath();
 
     this.add.text(
-      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
-      BOARD_OFFSET.y - 40,
+      20,
+      20,
       'Onitama',
       {
         fontSize: '28px',
         fontFamily: 'Arial',
         color: '#1f2937',
       }
-    ).setOrigin(0.5);
+    );
   }
 
   private setupInput(): void {

packages/onitama-game/src/spawners/CardSpawner.ts

@@ -23,14 +23,19 @@ export class CardContainer extends Phaser.GameObjects.Container {
   private highlightRect: Phaser.GameObjects.Rectangle | null = null;
   private highlightTween: Phaser.Tweens.Tween | null = null;
   private _cardId: string;
+  private _rotation: number = 0;
 
-  constructor(scene: OnitamaScene, cardId: string, card: Card) {
+  constructor(scene: OnitamaScene, cardId: string, card: Card, rotation: number = 0) {
     super(scene, 0, 0);
     this._cardId = cardId;
+    this._rotation = rotation;
 
     // 将容器添加到场景
     scene.add.existing(this);
 
+    // 应用旋转
+    this.angle = rotation;
+
     // 创建卡牌视觉
     this.createCardVisual(card);
 
@@ -42,6 +47,26 @@ export class CardContainer extends Phaser.GameObjects.Container {
     this.addHighlightEffect(scene);
   }
 
+  /**
+   * 更新卡牌旋转（带动画）
+   */
+  setRotation(rotation: number, animated: boolean = false): this {
+    if (animated) {
+      const currentAngle = this.angle;
+      const tween = this.scene.tweens.add({
+        targets: this,
+        angle: { from: currentAngle, to: rotation },
+        duration: 400,
+        ease: 'Back.easeOut',
+      });
+      (this.scene as OnitamaScene).addTweenInterruption(tween);
+    } else {
+      this.angle = rotation;
+    }
+    this._rotation = rotation;
+    return this;
+  }
+
   /**
    * 高亮卡牌
    */
@@ -225,21 +250,26 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
     const boardTop = BOARD_OFFSET.y;
     const boardRight = BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE;
     const boardCenterX = boardLeft + (BOARD_SIZE * CELL_SIZE) / 2;
+    const boardBottom = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE;
 
     if (data.position === 'red') {
+      // 红方卡牌在棋盘下方，水平排列
       return {
-        x: boardLeft - CARD_WIDTH - 60 + 60,
-        y: boardTop + 80 + data.index * (CARD_HEIGHT + 15),
+        x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
+        y: boardBottom + CARD_HEIGHT - 30,
       };
     } else if (data.position === 'black') {
+      // 黑方卡牌在棋盘上方，水平排列
       return {
-        x: boardRight + 60 + 40,
-        y: boardTop + 80 + data.index * (CARD_HEIGHT + 15),
+        x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
+        y: boardTop - CARD_HEIGHT + 30,
       };
     } else {
+      // 备用卡牌在棋盘左侧，垂直居中
+      const boardCenterY = boardTop + (BOARD_SIZE * CELL_SIZE) / 2;
       return {
-        x: boardCenterX,
-        y: boardTop - CARD_HEIGHT - 20,
+        x: boardLeft - CARD_WIDTH,
+        y: boardCenterY,
       };
     }
   }
@@ -251,6 +281,20 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
   }
 
   onUpdate(data: CardSpawnData, obj: CardContainer): void {
+    const isBlackTurn = this.scene.state.currentPlayer === 'black';
+
+    // 检查卡牌是否需要旋转
+    let targetRotation = 0;
+    if (data.position === 'black') {
+      targetRotation = -180; // 黑方卡牌始终旋转
+    } else if (data.position === 'spare' && isBlackTurn) {
+      targetRotation = -180; // 备用卡牌在黑方回合旋转
+    }
+
+    if (obj.angle !== targetRotation) {
+      obj.setRotation(targetRotation, true);
+    }
+
     // 只在位置实际变化时才播放移动动画
     if (!this.hasPositionChanged(data)) {
       this.previousData.set(data.cardId, { ...data });
@@ -285,7 +329,8 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
       return emptyContainer;
     }
 
-    const container = new CardContainer(this.scene, data.cardId, card);
+    // 计算旋转角度 - 初始不旋转，后续由 onUpdate 处理
+    const container = new CardContainer(this.scene, data.cardId, card, 0);
     const pos = this.getCardPosition(data);
     container.x = pos.x;
     container.y = pos.y;

packages/onitama-game/src/spawners/PawnSpawner.ts

@@ -6,7 +6,7 @@ import type { OnitamaUIState } from '@/state';
 import { effect } from "@preact/signals-core";
 
 export const CELL_SIZE = 80;
-export const BOARD_OFFSET = { x: 200, y: 180 };
+export const BOARD_OFFSET = { x: 240, y: 200 };
 export const BOARD_SIZE = 5;
 
 export function boardToScreen(boardX: number, boardY: number): { x: number; y: number } {
@@ -228,7 +228,6 @@ export class PawnSpawner implements Spawner<Pawn, PawnContainer> {
       targets: obj,
       scale: 0,
       alpha: 0,
-      y: obj.y - 30,
       duration: 300,
       ease: 'Back.easeIn',
       onComplete: () => obj.destroy(),

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

@@ -19,8 +19,8 @@ export default function App(props: { gameModule: any, gameScene: { new(): Phaser
     const label = useComputed(() => gameHost.value.gameHost.status.value === 'running' ? 'Restart' : 'Start');
 
     const phaserConfig: Partial<Phaser.Types.Core.GameConfig> = {
-        width: 800,
-        height: 700,
+        width: 700,
+        height: 800,
     };
 
     return (