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,
+      20,
-      BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30,
+      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,
+      boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
-      boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10,
+      boardBottom + 10,
-      "RED's Cards",
+      "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,
+      boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
-      boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10,
+      boardTop - 10,
-      "BLACK's Cards",
+      "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,
+      20,
-      BOARD_OFFSET.y - 40,
+      20,
       'Onitama',
       {
         fontSize: '28px',
         fontFamily: 'Arial',
         color: '#1f2937',
       }
-    ).setOrigin(0.5);
+    );
   }
 
   private setupInput(): void {

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

@@ -250,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,
+        x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
-        y: boardTop + 80 + data.index * (CARD_HEIGHT + 15),
+        y: boardBottom + CARD_HEIGHT - 30,
       };
     } else if (data.position === 'black') {
+      // 黑方卡牌在棋盘上方，水平排列
       return {
-        x: boardRight + 60 + 40,
+        x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
-        y: boardTop + 80 + data.index * (CARD_HEIGHT + 15),
+        y: boardTop - CARD_HEIGHT + 30,
       };
     } else {
+      // 备用卡牌在棋盘左侧，垂直居中
+      const boardCenterY = boardTop + (BOARD_SIZE * CELL_SIZE) / 2;
       return {
-        x: boardCenterX,
+        x: boardLeft - CARD_WIDTH,
-        y: boardTop - CARD_HEIGHT - 20,
+        y: boardCenterY,
       };
     }
   }
@@ -324,16 +329,8 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
       return emptyContainer;
     }
 
-    // 计算旋转角度
+    // 计算旋转角度 - 初始不旋转，后续由 onUpdate 处理
-    const isBlackTurn = this.scene.state.currentPlayer === 'black';
+    const container = new CardContainer(this.scene, data.cardId, card, 0);
-    let rotation = 0;
-    if (data.position === 'black') {
-      rotation = 180; // 黑方卡牌始终旋转
-    } else if (data.position === 'spare' && isBlackTurn) {
-      rotation = 180; // 备用卡牌在黑方回合旋转
-    }
-
-    const container = new CardContainer(this.scene, data.cardId, card, rotation);
     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 } {

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,
+        width: 700,
-        height: 700,
+        height: 800,
     };
 
     return (