feat: more onitama goodness

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

@@ -1,24 +1,28 @@
 import Phaser from 'phaser';
-import type { OnitamaState, PlayerType, Pawn, Card } from '@/game/onitama';
+import type { OnitamaState, PlayerType, Pawn } from '@/game/onitama';
 import { prompts } from '@/game/onitama';
 import { GameHostScene } from 'boardgame-phaser';
-import { spawnEffect, type Spawner } from 'boardgame-phaser';
+import { spawnEffect } from 'boardgame-phaser';
+import { effect } from '@preact/signals-core';
+import type { Signal } from '@preact/signals';
+import { PawnSpawner, CardSpawner, BOARD_OFFSET, CELL_SIZE, CARD_WIDTH, CARD_HEIGHT } from '@/spawners';
+import type { HighlightData } from '@/spawners/HighlightSpawner';
+import { createOnitamaUIState, clearSelection, selectPiece, selectCard, deselectCard, setValidMoves } from '@/state';
+import type { OnitamaUIState, ValidMove } from '@/state';
 
-const CELL_SIZE = 80;
-const BOARD_OFFSET = { x: 150, y: 100 };
 const BOARD_SIZE = 5;
-const CARD_WIDTH = 100;
-const CARD_HEIGHT = 140;
 
 export class OnitamaScene extends GameHostScene<OnitamaState> {
   private boardContainer!: Phaser.GameObjects.Container;
   private gridGraphics!: Phaser.GameObjects.Graphics;
   private infoText!: Phaser.GameObjects.Text;
   private winnerOverlay?: Phaser.GameObjects.Container;
-  private redCardsContainer!: Phaser.GameObjects.Container;
+  private cardLabelContainers: Map<string, Phaser.GameObjects.Text> = new Map();
-  private blackCardsContainer!: Phaser.GameObjects.Container;
+  
-  private spareCardContainer!: Phaser.GameObjects.Container;
+  // UI State managed by signal
-  private cardGraphics!: Phaser.GameObjects.Graphics;
+  public uiState!: Signal<OnitamaUIState>;
+  private highlightContainers: Map<string, Phaser.GameObjects.GameObject> = new Map();
+  private highlightDispose?: () => void;
 
   constructor() {
     super('OnitamaScene');
@@ -27,21 +31,34 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
   create(): void {
     super.create();
 
-    this.boardContainer = this.add.container(0, 0);
+    // Create UI state signal
-    this.gridGraphics = this.add.graphics();
+    this.uiState = createOnitamaUIState();
-    this.cardGraphics = this.add.graphics();
-    this.drawBoard();
 
-    this.disposables.add(spawnEffect(new PawnSpawner(this)));
+    // Cleanup effect on scene shutdown
-
+    this.events.once('shutdown', () => {
-    this.redCardsContainer = this.add.container(0, 0);
+      if (this.highlightDispose) {
-    this.blackCardsContainer = this.add.container(0, 0);
+        this.highlightDispose();
-    this.spareCardContainer = this.add.container(0, 0);
+      }
-
-    this.addEffect(() => {
-      this.updateCards();
     });
 
+    this.boardContainer = this.add.container(0, 0);
+    this.gridGraphics = this.add.graphics();
+    this.drawBoard();
+
+    // Add spawners
+    this.disposables.add(spawnEffect(new PawnSpawner(this)));
+    this.disposables.add(spawnEffect(new CardSpawner(this)));
+
+    // Create card labels
+    this.createCardLabels();
+
+    // Setup highlight effect - react to validMoves changes
+    this.highlightDispose = effect(() => {
+      const validMoves = this.uiState.value.validMoves;
+      this.updateHighlights(validMoves);
+    });
+
+    // Winner overlay effect
     this.addEffect(() => {
       const winner = this.state.winner;
       if (winner) {
@@ -52,23 +69,84 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
       }
     });
 
-    this.infoText = this.add.text(BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2, BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30, '', {
+    // Info text
-      fontSize: '20px',
+    this.infoText = this.add.text(
-      fontFamily: 'Arial',
+      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
-      color: '#4b5563',
+      BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE + 30,
-    }).setOrigin(0.5);
+      '',
+      {
+        fontSize: '20px',
+        fontFamily: 'Arial',
+        color: '#4b5563',
+      }
+    ).setOrigin(0.5);
 
+    // Update info text when UI state changes
     this.addEffect(() => {
       this.updateInfoText();
     });
 
+    // Input handling
     this.setupInput();
   }
 
+  private createCardLabels(): void {
+    const boardLeft = BOARD_OFFSET.x;
+    const boardTop = BOARD_OFFSET.y;
+    const boardRight = BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE;
+
+    // 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",
+      {
+        fontSize: '16px',
+        fontFamily: 'Arial',
+        color: '#ef4444',
+      }
+    ).setOrigin(0.5, 0);
+    this.cardLabelContainers.set('red', redLabel);
+
+    // Black cards label
+    const blackLabel = this.add.text(
+      boardRight + 60 + CARD_WIDTH / 2,
+      boardTop + 50 + 2 * (CARD_HEIGHT + 15) + 10,
+      "BLACK's Cards",
+      {
+        fontSize: '16px',
+        fontFamily: 'Arial',
+        color: '#3b82f6',
+      }
+    ).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(`${currentPlayer}'s turn (Turn ${this.state.turn + 1})`);
     }
@@ -83,26 +161,32 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
         BOARD_OFFSET.x + i * CELL_SIZE,
         BOARD_OFFSET.y,
         BOARD_OFFSET.x + i * CELL_SIZE,
-        BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE,
+        BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE
       );
       g.lineBetween(
         BOARD_OFFSET.x,
         BOARD_OFFSET.y + i * CELL_SIZE,
         BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE,
-        BOARD_OFFSET.y + i * CELL_SIZE,
+        BOARD_OFFSET.y + i * CELL_SIZE
       );
     }
 
     g.strokePath();
 
-    this.add.text(BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2, BOARD_OFFSET.y - 40, 'Onitama', {
+    this.add.text(
-      fontSize: '28px',
+      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
-      fontFamily: 'Arial',
+      BOARD_OFFSET.y - 40,
-      color: '#1f2937',
+      'Onitama',
-    }).setOrigin(0.5);
+      {
+        fontSize: '28px',
+        fontFamily: 'Arial',
+        color: '#1f2937',
+      }
+    ).setOrigin(0.5);
   }
 
   private setupInput(): void {
+    // Board cell clicks
     for (let row = 0; row < BOARD_SIZE; row++) {
       for (let col = 0; col < BOARD_SIZE; col++) {
         const x = BOARD_OFFSET.x + col * CELL_SIZE + CELL_SIZE / 2;
@@ -118,66 +202,140 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     }
   }
 
-  private selectedPiece: { x: number, y: number } | null = null;
-
   private handleCellClick(x: number, y: number): void {
     const pawn = this.getPawnAtPosition(x, y);
 
-    if (this.selectedPiece) {
+    // 如果没有选中卡牌，提示先选卡牌
+    if (!this.uiState.value.selectedCard) {
+      console.log('请先选择一张卡牌');
+      return;
+    }
+
+    if (this.uiState.value.selectedPiece) {
+      // 已经选中了棋子
       if (pawn && pawn.owner === this.state.currentPlayer) {
-        this.selectedPiece = { x, y };
+        // 点击了自己的另一个棋子，更新选择
-        this.highlightValidMoves();
+        selectPiece(this.uiState, x, y);
+        this.updateValidMoves();
         return;
       }
 
-      const fromX = this.selectedPiece.x;
+      const fromX = this.uiState.value.selectedPiece.x;
-      const fromY = this.selectedPiece.y;
+      const fromY = this.uiState.value.selectedPiece.y;
-      this.selectedPiece = null;
 
       if (pawn && pawn.owner === this.state.currentPlayer) {
         return;
       }
 
-      this.tryMove(fromX, fromY, x, y);
+      // 尝试移动到目标位置，必须使用选中的卡牌
+      const validMoves = this.getValidMovesForPiece(fromX, fromY, [this.uiState.value.selectedCard]);
+      
+      const targetMove = validMoves.find(m => m.toX === x && m.toY === y);
+      if (targetMove) {
+        this.executeMove(targetMove);
+      }
     } else {
+      // 还没有选中棋子
       if (pawn && pawn.owner === this.state.currentPlayer) {
-        this.selectedPiece = { x, y };
+        selectPiece(this.uiState, x, y);
-        this.highlightValidMoves();
+        this.updateValidMoves();
       }
     }
   }
 
-  private highlightValidMoves(): void {
+  public onCardClick(cardId: string): void {
-    if (!this.selectedPiece) return;
+    // 只能选择当前玩家的手牌
-
     const currentPlayer = this.state.currentPlayer;
-    const cardNames = currentPlayer === 'red' ? this.state.redCards : this.state.blackCards;
+    const playerCards = currentPlayer === 'red' ? this.state.redCards : this.state.blackCards;
-    const moves = this.getValidMovesForPiece(this.selectedPiece.x, this.selectedPiece.y, cardNames);
+    
+    if (!playerCards.includes(cardId)) {
+      return;
+    }
 
-    moves.forEach(move => {
+    selectCard(this.uiState, cardId);
+    // 如果已经选中了棋子，更新有效移动
+    if (this.uiState.value.selectedPiece) {
+      this.updateValidMoves();
+    }
+  }
+
+  private updateValidMoves(): void {
+    const selectedPiece = this.uiState.value.selectedPiece;
+    const selectedCard = this.uiState.value.selectedCard;
+    
+    if (!selectedPiece || !selectedCard) {
+      setValidMoves(this.uiState, []);
+      return;
+    }
+
+    const moves = this.getValidMovesForPiece(selectedPiece.x, selectedPiece.y, [selectedCard]);
+    setValidMoves(this.uiState, moves);
+  }
+
+  public onHighlightClick(data: HighlightData): void {
+    clearSelection(this.uiState);
+    this.executeMove({
+      card: data.card,
+      fromX: data.fromX,
+      fromY: data.fromY,
+      toX: data.toX,
+      toY: data.toY,
+    });
+  }
+
+  private executeMove(move: { card: string; fromX: number; fromY: number; toX: number; toY: number }): void {
+    const error = this.gameHost.tryAnswerPrompt(
+      prompts.move,
+      this.state.currentPlayer,
+      move.card,
+      move.fromX,
+      move.fromY,
+      move.toX,
+      move.toY
+    );
+    if (error) {
+      console.warn('Invalid move:', error);
+    }
+  }
+
+  private updateHighlights(validMoves: ValidMove[]): void {
+    // Clear old highlights
+    for (const [, circle] of this.highlightContainers) {
+      circle.destroy();
+    }
+    this.highlightContainers.clear();
+
+    // Create new highlights
+    for (const move of validMoves) {
+      const key = `${move.card}-${move.toX}-${move.toY}`;
       const x = BOARD_OFFSET.x + move.toX * CELL_SIZE + CELL_SIZE / 2;
       const y = BOARD_OFFSET.y + move.toY * CELL_SIZE + CELL_SIZE / 2;
 
-      const highlight = this.add.circle(x, y, CELL_SIZE / 3, 0x3b82f6, 0.3).setDepth(100);
+      const circle = this.add.circle(x, y, CELL_SIZE / 3, 0x3b82f6, 0.3).setDepth(100);
-      highlight.setInteractive({ useHandCursor: true });
+      circle.setInteractive({ useHandCursor: true });
-      highlight.on('pointerdown', () => {
+      circle.on('pointerdown', () => {
-        this.selectedPiece = null;
+        this.onHighlightClick({
-        this.clearHighlights();
+          key,
-        this.tryMove(move.fromX, move.fromY, move.toX, move.toY);
+          x,
+          y,
+          card: move.card,
+          fromX: move.fromX,
+          fromY: move.fromY,
+          toX: move.toX,
+          toY: move.toY,
+        });
       });
-    });
+
+      this.highlightContainers.set(key, circle as Phaser.GameObjects.GameObject);
+    }
   }
 
-  private clearHighlights(): void {
+  private getValidMovesForPiece(
-    this.children.list.forEach(child => {
+    fromX: number,
-      if ('depth' in child && child.depth === 100) {
+    fromY: number,
-        child.destroy();
+    cardNames: string[]
-      }
+  ): ValidMove[] {
-    });
+    const moves: ValidMove[] = [];
-  }
-
-  private getValidMovesForPiece(fromX: number, fromY: number, cardNames: string[]): Array<{ card: string, fromX: number, fromY: number, toX: number, toY: number }> {
-    const moves: Array<{ card: string, fromX: number, fromY: number, toX: number, toY: number }> = [];
     const player = this.state.currentPlayer;
 
     for (const cardName of cardNames) {
@@ -215,133 +373,12 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     return true;
   }
 
-  private tryMove(fromX: number, fromY: number, toX: number, toY: number): void {
-    this.clearHighlights();
-
-    const currentPlayer = this.state.currentPlayer;
-    const cardNames = currentPlayer === 'red' ? this.state.redCards : this.state.blackCards;
-    const validMoves = this.getValidMovesForPiece(fromX, fromY, cardNames);
-
-    if (validMoves.length > 0) {
-      const move = validMoves[0];
-      const error = this.gameHost.tryAnswerPrompt(
-        prompts.move,
-        currentPlayer,
-        move.card,
-        fromX,
-        fromY,
-        toX,
-        toY
-      );
-      if (error) {
-        console.warn('Invalid move:', error);
-      }
-    }
-  }
-
   private getPawnAtPosition(x: number, y: number): Pawn | null {
     const key = `${x},${y}`;
     const pawnId = this.state.regions.board.partMap[key];
     return pawnId ? this.state.pawns[pawnId] : null;
   }
 
-  private updateCards(): void {
-    this.redCardsContainer.removeAll(true);
-    this.blackCardsContainer.removeAll(true);
-    this.spareCardContainer.removeAll(true);
-    this.cardGraphics.clear();
-
-    this.renderCardHand('red', this.state.redCards, 20, 200, this.redCardsContainer);
-    this.renderCardHand('black', this.state.blackCards, 20, 400, this.blackCardsContainer);
-    this.renderSpareCard(this.state.spareCard, 650, 300, this.spareCardContainer);
-  }
-
-  private renderCardHand(player: PlayerType, cardNames: string[], x: number, y: number, container: Phaser.GameObjects.Container): void {
-    cardNames.forEach((cardName, index) => {
-      const card = this.state.cards[cardName];
-      if (!card) return;
-
-      const cardObj = this.createCardVisual(card, CARD_WIDTH, CARD_HEIGHT);
-      cardObj.x = x + index * (CARD_WIDTH + 10);
-      cardObj.y = y;
-      container.add(cardObj);
-    });
-
-    const label = this.add.text(x, y - 30, `${player.toUpperCase()}'s Cards`, {
-      fontSize: '16px',
-      fontFamily: 'Arial',
-      color: player === 'red' ? '#ef4444' : '#3b82f6',
-    });
-    container.add(label);
-  }
-
-  private renderSpareCard(cardName: string, x: number, y: number, container: Phaser.GameObjects.Container): void {
-    const card = this.state.cards[cardName];
-    if (!card) return;
-
-    const cardObj = this.createCardVisual(card, CARD_WIDTH, CARD_HEIGHT);
-    cardObj.x = x;
-    cardObj.y = y;
-    container.add(cardObj);
-
-    const label = this.add.text(x, y - 30, 'Spare Card', {
-      fontSize: '16px',
-      fontFamily: 'Arial',
-      color: '#6b7280',
-    }).setOrigin(0.5, 0);
-    container.add(label);
-  }
-
-  private createCardVisual(card: Card, width: number, height: number): Phaser.GameObjects.Container {
-    const container = this.add.container(0, 0);
-
-    const bg = this.add.rectangle(0, 0, width, height, 0xf9fafb, 1)
-      .setStrokeStyle(2, 0x6b7280);
-    container.add(bg);
-
-    const title = this.add.text(0, -height / 2 + 15, card.id, {
-      fontSize: '12px',
-      fontFamily: 'Arial',
-      color: '#1f2937',
-    }).setOrigin(0.5);
-    container.add(title);
-
-    const grid = this.add.graphics();
-    const cellSize = 16;
-    const gridWidth = 5 * cellSize;
-    const gridHeight = 5 * cellSize;
-    const gridStartX = -gridWidth / 2;
-    const gridStartY = -gridHeight / 2 + 30;
-
-    for (let row = 0; row < 5; row++) {
-      for (let col = 0; col < 5; col++) {
-        const x = gridStartX + col * cellSize;
-        const y = gridStartY + row * cellSize;
-
-        if (row === 2 && col === 2) {
-          grid.fillStyle(0x3b82f6, 1);
-          grid.fillCircle(x + cellSize / 2, y + cellSize / 2, cellSize / 3);
-        } else {
-          const isTarget = card.moveCandidates.some(m => m.dx === col - 2 && m.dy === 2 - row);
-          if (isTarget) {
-            grid.fillStyle(0xef4444, 0.6);
-            grid.fillCircle(x + cellSize / 2, y + cellSize / 2, cellSize / 3);
-          }
-        }
-      }
-    }
-    container.add(grid);
-
-    const playerText = this.add.text(0, height / 2 - 15, card.startingPlayer, {
-      fontSize: '10px',
-      fontFamily: 'Arial',
-      color: '#6b7280',
-    }).setOrigin(0.5);
-    container.add(playerText);
-
-    return container;
-  }
-
   private showWinner(winner: string): void {
     if (this.winnerOverlay) {
       this.winnerOverlay.destroy();
@@ -357,7 +394,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
       BOARD_SIZE * CELL_SIZE,
       BOARD_SIZE * CELL_SIZE,
       0x000000,
-      0.6,
+      0.6
     ).setInteractive({ useHandCursor: true });
 
     bg.on('pointerdown', () => {
@@ -374,7 +411,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
         fontSize: '36px',
         fontFamily: 'Arial',
         color: '#fbbf24',
-      },
+      }
     ).setOrigin(0.5);
 
     this.winnerOverlay.add(winText);
@@ -388,67 +425,3 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     });
   }
 }
-
-class PawnSpawner implements Spawner<Pawn, Phaser.GameObjects.Container> {
-  constructor(public readonly scene: OnitamaScene) {}
-
-  *getData() {
-    for (const pawn of Object.values(this.scene.state.pawns)) {
-      if (pawn.regionId === 'board') {
-        yield pawn;
-      }
-    }
-  }
-
-  getKey(pawn: Pawn): string {
-    return pawn.id;
-  }
-
-  onUpdate(pawn: Pawn, obj: Phaser.GameObjects.Container): void {
-    const [x, y] = pawn.position;
-    obj.x = BOARD_OFFSET.x + x * CELL_SIZE + CELL_SIZE / 2;
-    obj.y = BOARD_OFFSET.y + y * CELL_SIZE + CELL_SIZE / 2;
-  }
-
-  onSpawn(pawn: Pawn) {
-    const container = this.scene.add.container(0, 0);
-
-    const bgColor = pawn.owner === 'red' ? 0xef4444 : 0x3b82f6;
-    const circle = this.scene.add.circle(0, 0, CELL_SIZE / 3, bgColor, 1)
-      .setStrokeStyle(2, 0x1f2937);
-    container.add(circle);
-
-    const label = pawn.type === 'master' ? 'M' : 'S';
-    const text = this.scene.add.text(0, 0, label, {
-      fontSize: '24px',
-      fontFamily: 'Arial',
-      color: '#ffffff',
-    }).setOrigin(0.5);
-    container.add(text);
-
-    const [x, y] = pawn.position;
-    container.x = BOARD_OFFSET.x + x * CELL_SIZE + CELL_SIZE / 2;
-    container.y = BOARD_OFFSET.y + y * CELL_SIZE + CELL_SIZE / 2;
-
-    container.setScale(0);
-    this.scene.tweens.add({
-      targets: container,
-      scale: 1,
-      duration: 300,
-      ease: 'Back.easeOut',
-    });
-
-    return container;
-  }
-
-  onDespawn(obj: Phaser.GameObjects.Container) {
-    this.scene.tweens.add({
-      targets: obj,
-      scale: 0,
-      alpha: 0,
-      duration: 300,
-      ease: 'Back.easeIn',
-      onComplete: () => obj.destroy(),
-    });
-  }
-}

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

@@ -0,0 +1,244 @@
+import Phaser from 'phaser';
+import type { Card } from '@/game/onitama';
+import type { Spawner } from 'boardgame-phaser';
+import type { OnitamaScene } from '@/scenes/OnitamaScene';
+import { BOARD_OFFSET, CELL_SIZE } from './PawnSpawner';
+
+export const CARD_WIDTH = 100;
+export const CARD_HEIGHT = 140;
+const BOARD_SIZE = 5;
+
+export interface CardSpawnData {
+  cardId: string;
+  position: 'red' | 'black' | 'spare';
+  index: number;
+}
+
+export class CardSpawner implements Spawner<CardSpawnData, Phaser.GameObjects.Container> {
+  private previousData = new Map<string, CardSpawnData>();
+
+  constructor(public readonly scene: OnitamaScene) {}
+
+  *getData(): Iterable<CardSpawnData> {
+    const state = this.scene.state;
+
+    // 红方卡牌
+    for (let i = 0; i < state.redCards.length; i++) {
+      yield { cardId: state.redCards[i], position: 'red', index: i };
+    }
+
+    // 黑方卡牌
+    for (let i = 0; i < state.blackCards.length; i++) {
+      yield { cardId: state.blackCards[i], position: 'black', index: i };
+    }
+
+    // 备用卡牌
+    yield { cardId: state.spareCard, position: 'spare', index: 0 };
+  }
+
+  getKey(data: CardSpawnData): string {
+    return data.cardId;
+  }
+
+  private getCardPosition(data: CardSpawnData): { x: number, y: number } {
+    const boardLeft = BOARD_OFFSET.x;
+    const boardTop = BOARD_OFFSET.y;
+    const boardRight = BOARD_OFFSET.x + BOARD_SIZE * CELL_SIZE;
+    const boardCenterX = boardLeft + (BOARD_SIZE * CELL_SIZE) / 2;
+
+    if (data.position === 'red') {
+      return {
+        x: boardLeft - CARD_WIDTH - 60 + 60,
+        y: boardTop + 80 + data.index * (CARD_HEIGHT + 15),
+      };
+    } else if (data.position === 'black') {
+      return {
+        x: boardRight + 60 + 40,
+        y: boardTop + 80 + data.index * (CARD_HEIGHT + 15),
+      };
+    } else {
+      return {
+        x: boardCenterX,
+        y: boardTop - CARD_HEIGHT - 20,
+      };
+    }
+  }
+
+  private hasPositionChanged(data: CardSpawnData): boolean {
+    const prev = this.previousData.get(data.cardId);
+    if (!prev) return true;
+    return prev.position !== data.position || prev.index !== data.index;
+  }
+
+  onUpdate(data: CardSpawnData, obj: Phaser.GameObjects.Container): void {
+    // 检查是否是选中的卡牌
+    const isSelected = this.scene.uiState.value.selectedCard === data.cardId;
+    
+    // 高亮选中的卡牌
+    if (isSelected) {
+      this.highlightCard(obj, 0xfbbf24, 3);
+    } else {
+      this.unhighlightCard(obj);
+    }
+
+    // 只在位置实际变化时才播放移动动画
+    if (!this.hasPositionChanged(data)) {
+      this.previousData.set(data.cardId, { ...data });
+      return;
+    }
+
+    const pos = this.getCardPosition(data);
+
+    // 播放移动动画并添加中断
+    const tween = this.scene.tweens.add({
+      targets: obj,
+      x: pos.x,
+      y: pos.y,
+      duration: 350,
+      ease: 'Back.easeOut',
+    });
+
+    this.scene.addTweenInterruption(tween);
+    this.previousData.set(data.cardId, { ...data });
+  }
+
+  private highlightCard(container: Phaser.GameObjects.Container, color: number, lineWidth: number): void {
+    // 检查是否已经有高亮边框
+    let highlight = container.list.find(
+      child => child instanceof Phaser.GameObjects.Rectangle && child.getData('isHighlight')
+    ) as Phaser.GameObjects.Rectangle;
+
+    if (!highlight) {
+      // 创建高亮边框
+      highlight = this.scene.add.rectangle(0, 0, CARD_WIDTH + 8, CARD_HEIGHT + 8, color, 0)
+        .setStrokeStyle(lineWidth, color)
+        .setData('isHighlight', true);
+      container.addAt(highlight, 0);
+    } else {
+      // 更新现有高亮边框
+      highlight.setStrokeStyle(lineWidth, color);
+      highlight.setAlpha(1);
+    }
+  }
+
+  private unhighlightCard(container: Phaser.GameObjects.Container): void {
+    const highlight = container.list.find(
+      child => child instanceof Phaser.GameObjects.Rectangle && child.getData('isHighlight')
+    ) as Phaser.GameObjects.Rectangle;
+
+    if (highlight) {
+      highlight.setAlpha(0);
+    }
+  }
+
+  onSpawn(data: CardSpawnData): Phaser.GameObjects.Container {
+    const card = this.scene.state.cards[data.cardId];
+    if (!card) {
+      this.previousData.set(data.cardId, { ...data });
+      return this.scene.add.container(0, 0);
+    }
+
+    const container = this.scene.add.container(0, 0);
+    const pos = this.getCardPosition(data);
+    container.x = pos.x;
+    container.y = pos.y;
+
+    // 创建卡牌视觉
+    const cardVisual = this.createCardVisual(card);
+    container.add(cardVisual);
+
+    // 使卡牌可点击（设置矩形点击区域）
+    const hitArea = new Phaser.Geom.Rectangle(-CARD_WIDTH / 2, -CARD_HEIGHT / 2, CARD_WIDTH, CARD_HEIGHT);
+    container.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains);
+    
+    // 悬停效果
+    container.on('pointerover', () => {
+      if (this.scene.uiState.value.selectedCard !== data.cardId) {
+        container.setAlpha(0.8);
+      }
+    });
+    
+    container.on('pointerout', () => {
+      container.setAlpha(1);
+    });
+    
+    container.on('pointerdown', () => {
+      this.scene.onCardClick(data.cardId);
+    });
+
+    // 初始状态为透明，然后淡入
+    container.setAlpha(0);
+    const tween = this.scene.tweens.add({
+      targets: container,
+      alpha: 1,
+      duration: 300,
+      ease: 'Power2',
+    });
+    this.scene.addTweenInterruption(tween);
+
+    this.previousData.set(data.cardId, { ...data });
+    return container;
+  }
+
+  onDespawn(obj: Phaser.GameObjects.Container): void {
+    const tween = this.scene.tweens.add({
+      targets: obj,
+      alpha: 0,
+      scale: 0.8,
+      duration: 200,
+      ease: 'Power2',
+      onComplete: () => obj.destroy(),
+    });
+    this.scene.addTweenInterruption(tween);
+  }
+
+  private createCardVisual(card: Card): Phaser.GameObjects.Container {
+    const container = this.scene.add.container(0, 0);
+
+    const bg = this.scene.add.rectangle(0, 0, CARD_WIDTH, CARD_HEIGHT, 0xf9fafb, 1)
+      .setStrokeStyle(2, 0x6b7280);
+    container.add(bg);
+
+    const title = this.scene.add.text(0, -CARD_HEIGHT / 2 + 15, card.id, {
+      fontSize: '12px',
+      fontFamily: 'Arial',
+      color: '#1f2937',
+    }).setOrigin(0.5);
+    container.add(title);
+
+    const grid = this.scene.add.graphics();
+    const cellSize = 16;
+    const gridWidth = 5 * cellSize;
+    const gridHeight = 5 * cellSize;
+    const gridStartX = -gridWidth / 2;
+    const gridStartY = -gridHeight / 2 + 30;
+
+    for (let row = 0; row < 5; row++) {
+      for (let col = 0; col < 5; col++) {
+        const x = gridStartX + col * cellSize;
+        const y = gridStartY + row * cellSize;
+
+        if (row === 2 && col === 2) {
+          grid.fillStyle(0x3b82f6, 1);
+          grid.fillCircle(x + cellSize / 2, y + cellSize / 2, cellSize / 3);
+        } else {
+          const isTarget = card.moveCandidates.some(m => m.dx === col - 2 && m.dy === 2 - row);
+          if (isTarget) {
+            grid.fillStyle(0xef4444, 0.6);
+            grid.fillCircle(x + cellSize / 2, y + cellSize / 2, cellSize / 3);
+          }
+        }
+      }
+    }
+    container.add(grid);
+
+    const playerText = this.scene.add.text(0, CARD_HEIGHT / 2 - 15, card.startingPlayer, {
+      fontSize: '10px',
+      fontFamily: 'Arial',
+      color: '#6b7280',
+    }).setOrigin(0.5);
+    container.add(playerText);
+
+    return container;
+  }
+}

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

@@ -0,0 +1,57 @@
+import Phaser from 'phaser';
+import type { Spawner } from 'boardgame-phaser';
+import type { OnitamaScene } from '@/scenes/OnitamaScene';
+import type { OnitamaUIState } from '@/state/ui';
+import { BOARD_OFFSET, CELL_SIZE } from './PawnSpawner';
+
+export interface HighlightData {
+  key: string;
+  x: number;
+  y: number;
+  card: string;
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+}
+
+export class HighlightSpawner implements Spawner<HighlightData, Phaser.GameObjects.GameObject> {
+  constructor(public readonly scene: OnitamaScene) {}
+
+  *getData(): Iterable<HighlightData> {
+    // HighlightSpawner 的数据由 UI state 控制，不从这里生成
+    // 我们会在 scene 中手动调用 spawnEffect 来更新
+  }
+
+  getKey(data: HighlightData): string {
+    return data.key;
+  }
+
+  onUpdate(data: HighlightData, obj: Phaser.GameObjects.GameObject): void {
+    if (obj instanceof Phaser.GameObjects.Arc) {
+      obj.setPosition(data.x, data.y);
+    }
+  }
+
+  onSpawn(data: HighlightData): Phaser.GameObjects.GameObject {
+    const circle = this.scene.add.circle(
+      data.x,
+      data.y,
+      CELL_SIZE / 3,
+      0x3b82f6,
+      0.3
+    ).setDepth(100);
+
+    circle.setInteractive({ useHandCursor: true });
+    circle.on('pointerdown', () => {
+      this.scene.onHighlightClick(data);
+    });
+
+    return circle;
+  }
+
+  onDespawn(obj: Phaser.GameObjects.GameObject): void {
+    obj.destroy();
+  }
+}
+

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

@@ -0,0 +1,101 @@
+import Phaser from 'phaser';
+import type { Pawn } from '@/game/onitama';
+import type { Spawner } from 'boardgame-phaser';
+import type { OnitamaScene } from '@/scenes/OnitamaScene';
+
+export const CELL_SIZE = 80;
+export const BOARD_OFFSET = { x: 200, y: 180 };
+
+export class PawnSpawner implements Spawner<Pawn, Phaser.GameObjects.Container> {
+  private previousPositions = new Map<string, [number, number]>();
+
+  constructor(public readonly scene: OnitamaScene) {}
+
+  *getData() {
+    for (const pawn of Object.values(this.scene.state.pawns)) {
+      if (pawn.regionId === 'board') {
+        yield pawn;
+      }
+    }
+  }
+
+  getKey(pawn: Pawn): string {
+    return pawn.id;
+  }
+
+  onUpdate(pawn: Pawn, obj: Phaser.GameObjects.Container): void {
+    const [x, y] = pawn.position;
+    const prevPos = this.previousPositions.get(pawn.id);
+    const hasMoved = !prevPos || prevPos[0] !== x || prevPos[1] !== y;
+
+    if (hasMoved && prevPos) {
+      // 播放移动动画并添加中断
+      const targetX = BOARD_OFFSET.x + x * CELL_SIZE + CELL_SIZE / 2;
+      const targetY = BOARD_OFFSET.y + y * CELL_SIZE + CELL_SIZE / 2;
+
+      const tween = this.scene.tweens.add({
+        targets: obj,
+        x: targetX,
+        y: targetY,
+        duration: 400,
+        ease: 'Back.easeOut',
+      });
+
+      this.scene.addTweenInterruption(tween);
+    } else if (!prevPos) {
+      // 初次生成，直接设置位置
+      obj.x = BOARD_OFFSET.x + x * CELL_SIZE + CELL_SIZE / 2;
+      obj.y = BOARD_OFFSET.y + y * CELL_SIZE + CELL_SIZE / 2;
+    }
+
+    this.previousPositions.set(pawn.id, [x, y]);
+  }
+
+  onSpawn(pawn: Pawn) {
+    const container = this.scene.add.container(0, 0);
+
+    const bgColor = pawn.owner === 'red' ? 0xef4444 : 0x3b82f6;
+    const circle = this.scene.add.circle(0, 0, CELL_SIZE / 3, bgColor, 1)
+      .setStrokeStyle(2, 0x1f2937);
+    container.add(circle);
+
+    const label = pawn.type === 'master' ? 'M' : 'S';
+    const text = this.scene.add.text(0, 0, label, {
+      fontSize: '24px',
+      fontFamily: 'Arial',
+      color: '#ffffff',
+    }).setOrigin(0.5);
+    container.add(text);
+
+    const [x, y] = pawn.position;
+    container.x = BOARD_OFFSET.x + x * CELL_SIZE + CELL_SIZE / 2;
+    container.y = BOARD_OFFSET.y + y * CELL_SIZE + CELL_SIZE / 2;
+
+    this.previousPositions.set(pawn.id, [x, y]);
+
+    container.setScale(0);
+    this.scene.tweens.add({
+      targets: container,
+      scale: 1,
+      duration: 300,
+      ease: 'Back.easeOut',
+    });
+
+    return container;
+  }
+
+  onDespawn(obj: Phaser.GameObjects.Container) {
+    // 播放消失动画并添加中断
+    const tween = this.scene.tweens.add({
+      targets: obj,
+      scale: 0,
+      alpha: 0,
+      y: obj.y - 30,
+      duration: 300,
+      ease: 'Back.easeIn',
+      onComplete: () => obj.destroy(),
+    });
+
+    this.scene.addTweenInterruption(tween);
+  }
+}

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

@@ -0,0 +1,3 @@
+export { PawnSpawner, CELL_SIZE, BOARD_OFFSET } from './PawnSpawner';
+export { CardSpawner, CARD_WIDTH, CARD_HEIGHT, type CardSpawnData } from './CardSpawner';
+export { HighlightSpawner, type HighlightData } from './HighlightSpawner';

packages/onitama-game/src/state/index.ts

@@ -0,0 +1,2 @@
+export { createOnitamaUIState, clearSelection, selectPiece, selectCard, deselectCard, setValidMoves } from './ui';
+export type { OnitamaUIState, ValidMove } from './ui';

packages/onitama-game/src/state/ui.ts

@@ -0,0 +1,86 @@
+import { signal, type Signal } from '@preact/signals';
+
+export interface ValidMove {
+  card: string;
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+}
+
+export interface OnitamaUIState {
+  selectedPiece: { x: number; y: number } | null;
+  selectedCard: string | null;
+  validMoves: ValidMove[];
+}
+
+export function createOnitamaUIState(): Signal<OnitamaUIState> {
+  return signal<OnitamaUIState>({
+    selectedPiece: null,
+    selectedCard: null,
+    validMoves: [],
+  });
+}
+
+export function clearSelection(uiState: Signal<OnitamaUIState>): void {
+  uiState.value = {
+    selectedPiece: null,
+    selectedCard: null,
+    validMoves: [],
+  };
+}
+
+export function selectPiece(
+  uiState: Signal<OnitamaUIState>,
+  x: number,
+  y: number
+): void {
+  uiState.value = {
+    ...uiState.value,
+    selectedPiece: { x, y },
+    selectedCard: null,
+  };
+}
+
+export function selectCard(
+  uiState: Signal<OnitamaUIState>,
+  card: string
+): void {
+  // 如果点击已选中的卡牌，取消选择
+  if (uiState.value.selectedCard === card) {
+    uiState.value = {
+      selectedPiece: null,
+      selectedCard: null,
+      validMoves: [],
+    };
+  } else {
+    // 选择新卡牌，清除棋子选择
+    uiState.value = {
+      selectedPiece: null,
+      selectedCard: card,
+      validMoves: [],
+    };
+  }
+}
+
+export function deselectCard(
+  uiState: Signal<OnitamaUIState>
+): void {
+  uiState.value = {
+    ...uiState.value,
+    selectedCard: null,
+    selectedPiece: null,
+    validMoves: [],
+  };
+}
+
+export function setValidMoves(
+  uiState: Signal<OnitamaUIState>,
+  moves: ValidMove[]
+): void {
+  uiState.value = {
+    ...uiState.value,
+    validMoves: moves,
+  };
+}
+

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

@@ -18,6 +18,11 @@ 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,
+    };
+
     return (
         <div className="flex flex-col h-screen">
             <div className="p-4 bg-gray-100 border-t border-gray-200">
@@ -29,7 +34,7 @@ export default function App(props: { gameModule: any, gameScene: { new(): Phaser
                 </button>
             </div>
             <div className="flex-1 flex relative justify-center items-center">
-                <PhaserGame>
+                <PhaserGame config={phaserConfig}>
                     <PhaserScene sceneKey="OnitamaScene" scene={scene.value} autoStart data={gameHost.value} />
                 </PhaserGame>
             </div>