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

@@ -57,15 +57,15 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
 
     // Info text
     this.infoText = this.add.text(
-      20,
+      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
-      BOARD_OFFSET.y,
+      BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30,
       '',
       {
-        fontSize: '15px',
+        fontSize: '20px',
         fontFamily: 'Arial',
         color: '#4b5563',
       }
-    );
+    ).setOrigin(0.5);
 
     // Update info text when UI state changes
     this.addEffect(() => {
@@ -80,13 +80,12 @@ 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 + (BOARD_SIZE * CELL_SIZE) / 2,
+      boardLeft - CARD_WIDTH - 60 + CARD_WIDTH / 2,
-      boardBottom + 10,
+      boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10,
-      "RED",
+      "RED's Cards",
       {
         fontSize: '16px',
         fontFamily: 'Arial',
@@ -95,27 +94,47 @@ 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(
-      boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
+      boardRight + 60 + CARD_WIDTH / 2,
-      boardTop - 10,
+      boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10,
-      "BLACK",
+      "BLACK's Cards",
       {
         fontSize: '16px',
         fontFamily: 'Arial',
         color: '#3b82f6',
       }
-    ).setOrigin(0.5, 1);
+    ).setOrigin(0.5, 0);
     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(`Turn ${this.state.turn + 1}\n\n${currentPlayer}`);
+      this.infoText.setText(`${currentPlayer}'s turn (Turn ${this.state.turn + 1})`);
     }
   }
 
@@ -141,15 +160,15 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     g.strokePath();
 
     this.add.text(
-      20,
+      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
-      20,
+      BOARD_OFFSET.y - 40,
       'Onitama',
       {
         fontSize: '28px',
         fontFamily: 'Arial',
         color: '#1f2937',
       }
-    );
+    ).setOrigin(0.5);
   }
 
   private setupInput(): void {

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

@@ -23,19 +23,14 @@ 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, rotation: number = 0) {
+  constructor(scene: OnitamaScene, cardId: string, card: Card) {
     super(scene, 0, 0);
     this._cardId = cardId;
-    this._rotation = rotation;
 
     // 将容器添加到场景
     scene.add.existing(this);
 
-    // 应用旋转
-    this.angle = rotation;
-
     // 创建卡牌视觉
     this.createCardVisual(card);
 
@@ -47,26 +42,6 @@ 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;
-  }
-
   /**
    * 高亮卡牌
    */
@@ -250,26 +225,21 @@ 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 + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
+        x: boardLeft - CARD_WIDTH - 60 + 60,
-        y: boardBottom + CARD_HEIGHT - 30,
+        y: boardTop + 80 + data.index * (CARD_HEIGHT + 15),
       };
     } else if (data.position === 'black') {
-      // 黑方卡牌在棋盘上方，水平排列
       return {
-        x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
+        x: boardRight + 60 + 40,
-        y: boardTop - CARD_HEIGHT + 30,
+        y: boardTop + 80 + data.index * (CARD_HEIGHT + 15),
       };
     } else {
-      // 备用卡牌在棋盘左侧，垂直居中
-      const boardCenterY = boardTop + (BOARD_SIZE * CELL_SIZE) / 2;
       return {
-        x: boardLeft - CARD_WIDTH,
+        x: boardCenterX,
-        y: boardCenterY,
+        y: boardTop - CARD_HEIGHT - 20,
       };
     }
   }
@@ -281,20 +251,6 @@ 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 });
@@ -329,8 +285,7 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
       return emptyContainer;
     }
 
-    // 计算旋转角度 - 初始不旋转，后续由 onUpdate 处理
+    const container = new CardContainer(this.scene, data.cardId, card);
-    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: 240, y: 200 };
+export const BOARD_OFFSET = { x: 200, y: 180 };
 export const BOARD_SIZE = 5;
 
 export function boardToScreen(boardX: number, boardY: number): { x: number; y: number } {
@@ -228,6 +228,7 @@ 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: 700,
+        width: 800,
-        height: 800,
+        height: 700,
     };
 
     return (