refactor(onitama): decouple rendering logic into dedicated renderers

Introduces a centralized configuration system and extracts visual
creation logic from spawners into specialized renderer classes:
- CardRenderer
- HighlightRenderer
- PawnRenderer
- SelectionRenderer

This refactor improves separation of concerns by moving Phaser-specific
drawing and animation code out of the spawner/container logic and into
reusable renderer components.

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

@@ -0,0 +1,221 @@
+/**
+ * Centralized configuration for Onitama game
+ * All layout, style, and game constants should be defined here
+ */
+
+import { Display } from "phaser";
+
+// Board configuration
+export const BOARD_SIZE = 5;
+export const CELL_SIZE = 80;
+export const BOARD_OFFSET = { x: 240, y: 240 } as const;
+
+// Card configuration
+export const CARD_WIDTH = 80;
+export const CARD_HEIGHT = 120;
+export const CARD_SPACING = 100;
+export const CARD_LABEL_OFFSET = 40; // Distance from board edge
+
+// Menu configuration
+export const MENU_CONFIG = {
+  colors: {
+    title: "#1f2937",
+    buttonText: "#ffffff",
+    buttonBg: 0x3b82f6,
+    buttonBgHover: 0x2563eb,
+    subtitle: "#6b7280",
+  },
+  fontSize: {
+    title: "48px",
+    button: "24px",
+    subtitle: "16px",
+  },
+  button: {
+    width: 200,
+    height: 80,
+  },
+  positions: {
+    titleY: -120,
+    buttonY: 40,
+    subtitleY: 160,
+  },
+} as const;
+
+// UI colors
+export const COLORS = {
+  red: 0xef4444,
+  black: 0x3b82f6,
+  highlight: 0xfbbf24,
+  highlightStroke: 0xf59e0b,
+  gridLine: 0x6b7280,
+  pawnStroke: 0x1f2937,
+  cardBg: 0xf9fafb,
+  cardStroke: 0x6b7280,
+  cardCenter: 0x3b82f6,
+  cardTarget: 0xef4444,
+  textDark: "#1f2937",
+  textGray: "#6b7280",
+  textInfo: "#4b5563",
+  winnerGold: "#fbbf24",
+  overlayBg: 0x000000,
+  menuButton: 0x6b7280,
+  menuButtonHover: 0x4b5563,
+} as const;
+
+// Font configuration
+export const FONTS = {
+  title: {
+    fontSize: "28px",
+    fontFamily: "Arial",
+    color: COLORS.textDark,
+  },
+  info: {
+    fontSize: "16px",
+    fontFamily: "Arial",
+    color: COLORS.textInfo,
+  },
+  cardTitle: {
+    fontSize: "12px",
+    fontFamily: "Arial",
+    color: COLORS.textDark,
+  },
+  cardPlayer: {
+    fontSize: "10px",
+    fontFamily: "Arial",
+    color: COLORS.textGray,
+  },
+  pawnLabel: {
+    fontSize: "24px",
+    fontFamily: "Arial",
+    color: "#ffffff",
+  },
+  cardLabel: {
+    fontSize: "16px",
+    fontFamily: "Arial",
+  },
+  winner: {
+    fontSize: "36px",
+    fontFamily: "Arial",
+    color: COLORS.winnerGold,
+  },
+  menuButton: {
+    fontSize: "18px",
+    fontFamily: "Arial",
+    color: "#ffffff",
+  },
+} as const;
+
+// Menu button configuration
+export const MENU_BUTTON = {
+  x: 680,
+  y: 40,
+  width: 120,
+  height: 40,
+} as const;
+
+// Animation durations (in ms)
+export const ANIMATIONS = {
+  pawnSpawn: 300,
+  pawnDespawn: 300,
+  pawnMove: 400,
+  cardSpawn: 300,
+  cardDespawn: 200,
+  cardMove: 600,
+  cardRotate: 400,
+  highlightSpawn: 250,
+  highlightDespawn: 200,
+  selectionFadeIn: 200,
+  selectionFadeOut: 150,
+  selectionPulse: 500,
+  menuTitle: 600,
+  buttonHover: 100,
+  winnerPulse: 500,
+  clickFeedback: 150,
+} as const;
+
+// Grid cell size for card move visualization
+export const CARD_GRID = {
+  cellSize: 14,
+  gridSize: 5,
+} as const;
+
+// Helper function to convert board coordinates to screen coordinates
+export function boardToScreen(
+  boardX: number,
+  boardY: number,
+): { x: number; y: number } {
+  return {
+    x: BOARD_OFFSET.x + boardX * CELL_SIZE + CELL_SIZE / 2,
+    y: BOARD_OFFSET.y + (BOARD_SIZE - 1 - boardY) * CELL_SIZE + CELL_SIZE / 2,
+  };
+}
+
+// Helper function to get board center
+export function getBoardCenter(): { x: number; y: number } {
+  return {
+    x: BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
+    y: BOARD_OFFSET.y + (BOARD_SIZE * CELL_SIZE) / 2,
+  };
+}
+
+// Helper function to get card label position
+export function getCardLabelPosition(position: "red" | "black"): {
+  x: number;
+  y: number;
+  originX: number;
+  originY: number;
+} {
+  const boardLeft = BOARD_OFFSET.x;
+  const boardTop = BOARD_OFFSET.y;
+  const boardBottom = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE;
+  const centerX = boardLeft + (BOARD_SIZE * CELL_SIZE) / 2;
+
+  if (position === "red") {
+    return {
+      x: centerX,
+      y: boardBottom + CARD_LABEL_OFFSET,
+      originX: 0.5,
+      originY: 0,
+    };
+  } else {
+    return {
+      x: centerX,
+      y: boardTop - CARD_LABEL_OFFSET,
+      originX: 0.5,
+      originY: 1,
+    };
+  }
+}
+
+// Helper function to get card position
+export function getCardPosition(
+  position: "red" | "black" | "spare",
+  index: number,
+): { x: number; y: number } {
+  const boardLeft = BOARD_OFFSET.x;
+  const boardTop = BOARD_OFFSET.y;
+  const boardCenterX = boardLeft + (BOARD_SIZE * CELL_SIZE) / 2;
+  const boardBottom = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE;
+  const boardCenterY = boardTop + (BOARD_SIZE * CELL_SIZE) / 2;
+
+  if (position === "red") {
+    return {
+      x: boardCenterX - (index - 0.5) * CARD_SPACING,
+      y: boardBottom + CARD_HEIGHT / 2 + CARD_LABEL_OFFSET,
+    };
+  } else if (position === "black") {
+    return {
+      x: boardCenterX - (index - 0.5) * CARD_SPACING,
+      y: boardTop - CARD_HEIGHT / 2 - CARD_LABEL_OFFSET,
+    };
+  } else {
+    return {
+      x: boardLeft - CARD_WIDTH / 2 - CARD_LABEL_OFFSET,
+      y: boardCenterY,
+    };
+  }
+}
+
+export function colorToStr(hex: number) {
+  return Display.Color.ValueToColor(hex).toString();
+}

packages/onitama-game/src/renderers/CardRenderer.ts

@@ -0,0 +1,104 @@
+import type { Card } from "@/game/onitama";
+import type { OnitamaScene } from "@/scenes/OnitamaScene";
+
+import { CARD_WIDTH, CARD_HEIGHT, COLORS, FONTS, CARD_GRID } from "@/config";
+
+export interface CardRenderOptions {
+  card: Card;
+}
+
+/**
+ * Renderer for card game objects
+ * Extracts visual creation logic from CardContainer
+ */
+export class CardRenderer {
+  constructor(private readonly scene: OnitamaScene) {}
+
+  /**
+   * Render card visuals into a container
+   * @param container - The container to add visuals to
+   * @param options - Card rendering options
+   */
+  render(
+    container: Phaser.GameObjects.Container,
+    options: CardRenderOptions,
+  ): void {
+    const { card } = options;
+
+    // Create background rectangle
+    const bg = this.scene.add
+      .rectangle(0, 0, CARD_WIDTH, CARD_HEIGHT, COLORS.cardBg, 1)
+      .setStrokeStyle(2, COLORS.cardStroke);
+    container.add(bg);
+
+    // Create title text
+    const title = this.scene.add
+      .text(0, -CARD_HEIGHT / 2 + 16, card.id, FONTS.cardTitle)
+      .setOrigin(0.5);
+    container.add(title);
+
+    // Create move candidate grid
+    this.renderMoveGrid(container, card);
+
+    // Create starting player text
+    const playerText = this.scene.add
+      .text(0, CARD_HEIGHT / 2 - 16, card.startingPlayer, FONTS.cardPlayer)
+      .setOrigin(0.5);
+    container.add(playerText);
+  }
+
+  /**
+   * Render the 5x5 grid showing move candidates
+   */
+  private renderMoveGrid(
+    container: Phaser.GameObjects.Container,
+    card: Card,
+  ): void {
+    const grid = this.scene.add.graphics();
+    const { cellSize, gridSize } = CARD_GRID;
+    const gridWidth = gridSize * cellSize;
+    const gridHeight = gridSize * cellSize;
+    const gridStartX = -gridWidth / 2;
+    const gridStartY = -gridHeight / 2 + 20;
+
+    for (let row = 0; row < gridSize; row++) {
+      for (let col = 0; col < gridSize; col++) {
+        const x = gridStartX + col * cellSize;
+        const y = gridStartY + row * cellSize;
+        const centerX = x + cellSize / 2;
+        const centerY = y + cellSize / 2;
+        const radius = cellSize / 3;
+
+        // Center position marker
+        if (row === 2 && col === 2) {
+          grid.fillStyle(COLORS.cardCenter, 1);
+          grid.fillCircle(centerX, centerY, radius);
+        } else {
+          // Check if this cell is a move candidate
+          const isTarget = card.moveCandidates.some(
+            (m) => m.dx === col - 2 && m.dy === 2 - row,
+          );
+          if (isTarget) {
+            grid.fillStyle(COLORS.cardTarget, 0.6);
+            grid.fillCircle(centerX, centerY, radius);
+          }
+        }
+      }
+    }
+    container.add(grid);
+  }
+
+  /**
+   * Create a standalone card visual at the specified position
+   * Useful for previews or temporary displays
+   */
+  createStandalone(
+    x: number,
+    y: number,
+    options: CardRenderOptions,
+  ): Phaser.GameObjects.Container {
+    const container = this.scene.add.container(x, y);
+    this.render(container, options);
+    return container;
+  }
+}

packages/onitama-game/src/renderers/HighlightRenderer.ts

@@ -0,0 +1,103 @@
+import type { OnitamaScene } from "@/scenes/OnitamaScene";
+
+import { CELL_SIZE, COLORS } from "@/config";
+
+export interface HighlightRenderOptions {
+  x: number;
+  y: number;
+}
+
+/**
+ * Renderer for move target highlight visuals
+ * Extracts visual creation logic from HighlightSpawner
+ */
+export class HighlightRenderer {
+  constructor(private readonly scene: OnitamaScene) {}
+
+  /**
+   * Render highlight visuals into a container
+   * @param container - The container to add visuals to
+   * @param options - Highlight rendering options
+   */
+  render(
+    container: Phaser.GameObjects.Container,
+    options: HighlightRenderOptions,
+  ): void {
+    const { x, y } = options;
+
+    // Set container position
+    container.setPosition(x, y);
+
+    // Outer circle (animated pulse)
+    const outerCircle = this.scene.add.circle(
+      0,
+      0,
+      CELL_SIZE / 3,
+      COLORS.black,
+      0.2,
+    );
+    container.add(outerCircle);
+
+    // Inner circle
+    const innerCircle = this.scene.add.circle(
+      0,
+      0,
+      CELL_SIZE / 4,
+      COLORS.black,
+      0.4,
+    );
+    container.add(innerCircle);
+
+    // Store references for animation
+    container.setData("outerCircle", outerCircle);
+    container.setData("innerCircle", innerCircle);
+  }
+
+  /**
+   * Create a standalone highlight visual at the specified position
+   * Useful for previews or temporary displays
+   */
+  createStandalone(x: number, y: number): Phaser.GameObjects.Container {
+    const container = this.scene.add.container(x, y);
+    this.render(container, { x, y });
+    return container;
+  }
+
+  /**
+   * Setup pulse animations for highlight circles
+   * @param container - The highlight container
+   */
+  setupPulseAnimations(container: Phaser.GameObjects.Container): void {
+    const outerCircle = container.getData("outerCircle") as
+      | Phaser.GameObjects.Arc
+      | undefined;
+    const innerCircle = container.getData("innerCircle") as
+      | Phaser.GameObjects.Arc
+      | undefined;
+
+    if (!outerCircle || !innerCircle) return;
+
+    // Inner circle pulse
+    this.scene.tweens.add({
+      targets: [outerCircle, innerCircle],
+      scale: 1.2,
+      alpha: 0.6,
+      duration: 600,
+      ease: "Sine.easeInOut",
+      yoyo: true,
+      repeat: -1,
+    });
+
+    // Outer circle staggered pulse
+    this.scene.tweens.add({
+      targets: outerCircle,
+      scale: 1.3,
+      alpha: 0.3,
+      duration: 800,
+      ease: "Sine.easeInOut",
+      yoyo: true,
+      repeat: -1,
+      delay: 200,
+    });
+  }
+}

packages/onitama-game/src/renderers/PawnRenderer.ts

@@ -0,0 +1,59 @@
+import type { OnitamaScene } from "@/scenes/OnitamaScene";
+
+import { CELL_SIZE, COLORS, FONTS } from "@/config";
+
+export type PawnType = "master" | "student";
+export type PawnOwner = "red" | "black";
+
+export interface PawnRenderOptions {
+  owner: PawnOwner;
+  type: PawnType;
+}
+
+/**
+ * Renderer for pawn game objects
+ * Extracts visual creation logic from PawnContainer
+ */
+export class PawnRenderer {
+  constructor(private readonly scene: OnitamaScene) {}
+
+  /**
+   * Render pawn visuals into a container
+   * @param container - The container to add visuals to
+   * @param options - Pawn rendering options
+   */
+  render(
+    container: Phaser.GameObjects.Container,
+    options: PawnRenderOptions,
+  ): void {
+    const { owner, type } = options;
+
+    // Create background circle
+    const bgColor = owner === "red" ? COLORS.red : COLORS.black;
+    const circle = this.scene.add
+      .circle(0, 0, CELL_SIZE / 3, bgColor, 1)
+      .setStrokeStyle(2, COLORS.pawnStroke);
+    container.add(circle);
+
+    // Create label text
+    const label = type === "master" ? "M" : "S";
+    const text = this.scene.add
+      .text(0, 0, label, FONTS.pawnLabel)
+      .setOrigin(0.5);
+    container.add(text);
+  }
+
+  /**
+   * Create a standalone pawn visual (circle + text) at the specified position
+   * Useful for previews or temporary displays
+   */
+  createStandalone(
+    x: number,
+    y: number,
+    options: PawnRenderOptions,
+  ): Phaser.GameObjects.Container {
+    const container = this.scene.add.container(x, y);
+    this.render(container, options);
+    return container;
+  }
+}

packages/onitama-game/src/renderers/SelectionRenderer.ts

@@ -0,0 +1,122 @@
+import { GameObjects } from "phaser";
+
+import type { OnitamaScene } from "@/scenes/OnitamaScene";
+
+import { CELL_SIZE, COLORS, ANIMATIONS } from "@/config";
+
+export interface SelectionRenderOptions {
+  x: number;
+  y: number;
+}
+
+/**
+ * Renderer for pawn selection ring visuals
+ * Extracts selection ring creation and animation logic from PawnContainer
+ */
+export class SelectionRenderer {
+  constructor(private readonly scene: OnitamaScene) {}
+
+  /**
+   * Create a selection ring visual
+   * @param parent - The parent container or game object to add the ring to
+   * @returns The selection ring game object
+   */
+  create(
+    parent: Phaser.GameObjects.Container | Phaser.GameObjects.GameObject,
+  ): Phaser.GameObjects.Arc {
+    const ring = this.scene.add
+      .arc(0, 0, CELL_SIZE / 3 + 5, 0, 360, false, COLORS.highlight, 0)
+      .setStrokeStyle(3, COLORS.highlightStroke, 1)
+      .setAlpha(0);
+
+    // Add to parent at index 0 (behind other visuals)
+    if (parent instanceof GameObjects.Container) {
+      parent.addAt(ring, 0);
+    }
+
+    return ring;
+  }
+
+  /**
+   * Show selection with fade-in and pulse animation
+   * @param ring - The selection ring to animate
+   * @returns Cleanup function to stop animations
+   */
+  show(ring: Phaser.GameObjects.Arc): () => void {
+    if (!ring.active) return () => {};
+
+    let pulseTween: Phaser.Tweens.Tween | null = null;
+    const tweens = this.scene.tweens;
+
+    // Fade in animation
+    const fadeIn = tweens.add({
+      targets: ring,
+      alpha: 0.8,
+      duration: ANIMATIONS.selectionFadeIn,
+      ease: "Power2",
+      onComplete: () => {
+        // Start pulse animation after fade-in completes
+        pulseTween = tweens.add({
+          targets: ring,
+          scale: 1.15,
+          alpha: 0.6,
+          duration: ANIMATIONS.selectionPulse,
+          ease: "Sine.easeInOut",
+          yoyo: true,
+          repeat: -1,
+        });
+        this.scene.addTweenInterruption(pulseTween);
+      },
+    });
+    this.scene.addTweenInterruption(fadeIn);
+
+    // Return cleanup function
+    return () => {
+      if (pulseTween) {
+        pulseTween.stop();
+        pulseTween = null;
+      }
+      tweens.killTweensOf(ring);
+    };
+  }
+
+  /**
+   * Hide selection with fade-out animation
+   * @param ring - The selection ring to animate
+   * @param onComplete - Callback when animation completes
+   */
+  hide(ring: Phaser.GameObjects.Arc, onComplete?: () => void): void {
+    if (!ring.active) {
+      onComplete?.();
+      return;
+    }
+
+    const tweens = this.scene.tweens;
+
+    // Stop any existing tweens on this ring
+    tweens.killTweensOf(ring);
+
+    // Fade out animation
+    tweens.add({
+      targets: ring,
+      alpha: 0,
+      scale: 0.9,
+      duration: ANIMATIONS.selectionFadeOut,
+      ease: "Power2",
+      onComplete: () => {
+        ring.destroy();
+        onComplete?.();
+      },
+    });
+  }
+
+  /**
+   * Create a standalone selection ring at the specified position
+   * Useful for previews or temporary displays
+   */
+  createStandalone(x: number, y: number): Phaser.GameObjects.Container {
+    const container = this.scene.add.container(x, y);
+    this.create(container);
+    return container;
+  }
+}

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

@@ -0,0 +1,11 @@
+export { PawnRenderer } from "./PawnRenderer";
+export type { PawnRenderOptions, PawnType, PawnOwner } from "./PawnRenderer";
+
+export { CardRenderer } from "./CardRenderer";
+export type { CardRenderOptions } from "./CardRenderer";
+
+export { HighlightRenderer } from "./HighlightRenderer";
+export type { HighlightRenderOptions } from "./HighlightRenderer";
+
+export { SelectionRenderer } from "./SelectionRenderer";
+export type { SelectionRenderOptions } from "./SelectionRenderer";

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

@@ -1,30 +1,6 @@
-import { ReactiveScene } from 'boardgame-phaser';
+import { ReactiveScene } from "boardgame-phaser";
-import Phaser from 'phaser';
 
-/** 菜单场景配置 */
+import { MENU_CONFIG, ANIMATIONS } from "@/config";
-const MENU_CONFIG = {
-  colors: {
-    title: '#1f2937',
-    buttonText: '#ffffff',
-    buttonBg: 0x3b82f6,
-    buttonBgHover: 0x2563eb,
-    subtitle: '#6b7280',
-  },
-  fontSize: {
-    title: '48px',
-    button: '24px',
-    subtitle: '16px',
-  },
-  button: {
-    width: 200,
-    height: 80,
-  },
-  positions: {
-    titleY: -120,
-    buttonY: 40,
-    subtitleY: 160,
-  },
-} as const;
 
 export class MenuScene extends ReactiveScene {
   private titleText!: Phaser.GameObjects.Text;
@@ -33,7 +9,7 @@ export class MenuScene extends ReactiveScene {
   private startButtonText!: Phaser.GameObjects.Text;
 
   constructor() {
-    super('MenuScene');
+    super("MenuScene");
   }
 
   create(): void {
@@ -56,24 +32,21 @@ export class MenuScene extends ReactiveScene {
 
   /** 创建标题文本 */
   private createTitle(center: { x: number; y: number }): void {
-    this.titleText = this.add.text(
+    this.titleText = this.add
-      center.x,
+      .text(center.x, center.y + MENU_CONFIG.positions.titleY, "Onitama", {
-      center.y + MENU_CONFIG.positions.titleY,
-      'Onitama',
-      {
         fontSize: MENU_CONFIG.fontSize.title,
-        fontFamily: 'Arial',
+        fontFamily: "Arial",
         color: MENU_CONFIG.colors.title,
-      }
+      })
-    ).setOrigin(0.5);
+      .setOrigin(0.5);
 
     // 标题入场动画
     this.titleText.setScale(0);
     this.tweens.add({
       targets: this.titleText,
       scale: 1,
-      duration: 600,
+      duration: ANIMATIONS.menuTitle,
-      ease: 'Back.easeOut',
+      ease: "Back.easeOut",
     });
   }
 
@@ -81,29 +54,23 @@ export class MenuScene extends ReactiveScene {
   private createStartButton(center: { x: number; y: number }): void {
     const { button, colors } = MENU_CONFIG;
 
-    this.startButtonBg = this.add.rectangle(
+    this.startButtonBg = this.add
-      0,
+      .rectangle(0, 0, button.width, button.height, colors.buttonBg)
-      0,
+      .setOrigin(0.5)
-      button.width,
+      .setInteractive({ useHandCursor: true });
-      button.height,
-      colors.buttonBg
-    ).setOrigin(0.5).setInteractive({ useHandCursor: true });
 
-    this.startButtonText = this.add.text(
+    this.startButtonText = this.add
-      0,
+      .text(0, 0, "Start Game", {
-      0,
-      'Start Game',
-      {
         fontSize: MENU_CONFIG.fontSize.button,
-        fontFamily: 'Arial',
+        fontFamily: "Arial",
         color: colors.buttonText,
-      }
+      })
-    ).setOrigin(0.5);
+      .setOrigin(0.5);
 
     this.startButtonContainer = this.add.container(
       center.x,
       center.y + MENU_CONFIG.positions.buttonY,
-      [this.startButtonBg, this.startButtonText]
+      [this.startButtonBg, this.startButtonText],
     );
 
     // 按钮交互
@@ -112,45 +79,47 @@ export class MenuScene extends ReactiveScene {
 
   /** 设置按钮交互效果 */
   private setupButtonInteraction(): void {
-    this.startButtonBg.on('pointerover', () => {
+    this.startButtonBg.on("pointerover", () => {
       this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBgHover);
       this.tweens.add({
         targets: this.startButtonContainer,
         scale: 1.05,
-        duration: 100,
+        duration: ANIMATIONS.buttonHover,
       });
     });
 
-    this.startButtonBg.on('pointerout', () => {
+    this.startButtonBg.on("pointerout", () => {
       this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBg);
       this.tweens.add({
         targets: this.startButtonContainer,
         scale: 1,
-        duration: 100,
+        duration: ANIMATIONS.buttonHover,
       });
     });
 
-    this.startButtonBg.on('pointerdown', () => {
+    this.startButtonBg.on("pointerdown", () => {
       this.startGame();
     });
   }
 
   /** 创建副标题 */
   private createSubtitle(center: { x: number; y: number }): void {
-    this.add.text(
+    this.add
+      .text(
         center.x,
         center.y + MENU_CONFIG.positions.subtitleY,
-      'Click to start playing',
+        "Click to start playing",
         {
           fontSize: MENU_CONFIG.fontSize.subtitle,
-        fontFamily: 'Arial',
+          fontFamily: "Arial",
           color: MENU_CONFIG.colors.subtitle,
-      }
+        },
-    ).setOrigin(0.5);
+      )
+      .setOrigin(0.5);
   }
 
   /** 开始游戏 */
   private async startGame(): Promise<void> {
-    await this.sceneController.launch('OnitamaScene');
+    await this.sceneController.launch("OnitamaScene");
   }
 }

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

@@ -1,16 +1,36 @@
-import Phaser from 'phaser';
+import { GameHostScene, spawnEffect } from "boardgame-phaser";
-import type { OnitamaState, Pawn } from '@/game/onitama';
+
-import {getAvailableMoves, prompts} from '@/game/onitama';
+import type { OnitamaState, Pawn } from "@/game/onitama";
-import { GameHostScene } from 'boardgame-phaser';
+import type { HighlightData } from "@/spawners/HighlightSpawner";
-import { spawnEffect } from 'boardgame-phaser';
+import type { OnitamaUIState } from "@/state";
-import type { MutableSignal } from 'boardgame-core';
+import type { MutableSignal } from "boardgame-core";
+import type Phaser from "phaser";
+
 import {
-  PawnSpawner, CardSpawner, BOARD_OFFSET, CELL_SIZE, CARD_WIDTH, CARD_HEIGHT, boardToScreen, BOARD_SIZE,
+  COLORS,
-  HighlightSpawner
+  FONTS,
-} from '@/spawners';
+  ANIMATIONS,
-import type { HighlightData } from '@/spawners/HighlightSpawner';
+  MENU_BUTTON,
-import {createUIState, clearSelection, selectPiece, selectCard, createValidMoves} from '@/state';
+  getBoardCenter,
-import type { OnitamaUIState, ValidMove } from '@/state';
+  getCardLabelPosition,
+  colorToStr,
+} from "@/config";
+import { prompts } from "@/game/onitama";
+import {
+  PawnSpawner,
+  CardSpawner,
+  BOARD_OFFSET,
+  CELL_SIZE,
+  BOARD_SIZE,
+  boardToScreen,
+  HighlightSpawner,
+} from "@/spawners";
+import {
+  createUIState,
+  clearSelection,
+  selectPiece,
+  selectCard,
+} from "@/state";
 
 export class OnitamaScene extends GameHostScene<OnitamaState> {
   private boardContainer!: Phaser.GameObjects.Container;
@@ -26,7 +46,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
   public uiState!: MutableSignal<OnitamaUIState>;
 
   constructor() {
-    super('OnitamaScene');
+    super("OnitamaScene");
   }
 
   create(): void {
@@ -59,16 +79,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     });
 
     // Info text
-    this.infoText = this.add.text(
+    this.infoText = this.add.text(40, BOARD_OFFSET.y, "", FONTS.info);
-      40,
-      BOARD_OFFSET.y,
-      '',
-      {
-        fontSize: '16px',
-        fontFamily: 'Arial',
-        color: '#4b5563',
-      }
-    );
 
     // Update info text when UI state changes
     this.addEffect(() => {
@@ -86,36 +97,25 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
   }
 
   private createCardLabels(): void {
-    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 - 棋盘下方
-    const redLabel = this.add.text(
+    const redPos = getCardLabelPosition("red");
-      boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
+    const redLabel = this.add
-      boardBottom + 40,
+      .text(redPos.x, redPos.y, "RED", {
-      "RED",
+        ...FONTS.cardLabel,
-      {
+        color: colorToStr(COLORS.red),
-        fontSize: '16px',
+      })
-        fontFamily: 'Arial',
+      .setOrigin(redPos.originX, redPos.originY);
-        color: '#ef4444',
+    this.cardLabelContainers.set("red", redLabel);
-      }
-    ).setOrigin(0.5, 0);
-    this.cardLabelContainers.set('red', redLabel);
 
     // Black cards label - 棋盘上方
-    const blackLabel = this.add.text(
+    const blackPos = getCardLabelPosition("black");
-      boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
+    const blackLabel = this.add
-      boardTop - 40,
+      .text(blackPos.x, blackPos.y, "BLACK", {
-      "BLACK",
+        ...FONTS.cardLabel,
-      {
+        color: colorToStr(COLORS.black),
-        fontSize: '16px',
+      })
-        fontFamily: 'Arial',
+      .setOrigin(blackPos.originX, blackPos.originY);
-        color: '#3b82f6',
+    this.cardLabelContainers.set("black", blackLabel);
-      }
-    ).setOrigin(0.5, 1);
-    this.cardLabelContainers.set('black', blackLabel);
   }
 
   private updateInfoText(): void {
@@ -130,35 +130,26 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
 
   private drawBoard(): void {
     const g = this.gridGraphics;
-    g.lineStyle(2, 0x6b7280);
+    g.lineStyle(2, COLORS.gridLine);
 
     for (let i = 0; i <= BOARD_SIZE; i++) {
       g.lineBetween(
         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(
+    this.add.text(40, 40, "Onitama", FONTS.title);
-      40,
-      40,
-      'Onitama',
-      {
-        fontSize: '28px',
-        fontFamily: 'Arial',
-        color: '#1f2937',
-      }
-    );
   }
 
   private setupInput(): void {
@@ -167,9 +158,11 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
       for (let col = 0; col < BOARD_SIZE; col++) {
         const pos = boardToScreen(col, row);
 
-        const zone = this.add.zone(pos.x, pos.y, CELL_SIZE, CELL_SIZE).setInteractive();
+        const zone = this.add
+          .zone(pos.x, pos.y, CELL_SIZE, CELL_SIZE)
+          .setInteractive();
 
-        zone.on('pointerdown', () => {
+        zone.on("pointerdown", () => {
           if (this.state.winner) return;
           this.handleCellClick(col, row);
         });
@@ -179,7 +172,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
 
   private handleCellClick(x: number, y: number): void {
     const pawn = this.getPawnAtPosition(x, y);
-    if(pawn?.owner !== this.state.currentPlayer){
+    if (pawn?.owner !== this.state.currentPlayer) {
       return;
     }
     selectPiece(this.uiState, x, y);
@@ -188,7 +181,8 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
   public onCardClick(cardId: string): void {
     // 只能选择当前玩家的手牌
     const currentPlayer = this.state.currentPlayer;
-    const playerCards = currentPlayer === 'red' ? this.state.redCards : this.state.blackCards;
+    const playerCards =
+      currentPlayer === "red" ? this.state.redCards : this.state.blackCards;
 
     if (!playerCards.includes(cardId)) {
       return;
@@ -208,7 +202,13 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     });
   }
 
-  private executeMove(move: { card: string; fromX: number; fromY: number; toX: number; toY: number }): void {
+  private executeMove(move: {
+    card: string;
+    fromX: number;
+    fromY: number;
+    toX: number;
+    toY: number;
+  }): void {
     const error = this.gameHost.tryAnswerPrompt(
       prompts.move,
       this.state.currentPlayer,
@@ -216,10 +216,10 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
       move.fromX,
       move.fromY,
       move.toX,
-      move.toY
+      move.toY,
     );
     if (error) {
-      console.warn('Invalid move:', error);
+      console.warn("Invalid move:", error);
     }
   }
 
@@ -231,39 +231,42 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
 
   /** 创建菜单按钮 */
   private createMenuButton(): void {
-    const buttonX = 680;
+    this.menuButtonBg = this.add
-    const buttonY = 40;
+      .rectangle(
-
+        MENU_BUTTON.x,
-    this.menuButtonBg = this.add.rectangle(buttonX, buttonY, 120, 40, 0x6b7280)
+        MENU_BUTTON.y,
+        MENU_BUTTON.width,
+        MENU_BUTTON.height,
+        COLORS.menuButton,
+      )
       .setInteractive({ useHandCursor: true });
 
-    this.menuButtonText = this.add.text(buttonX, buttonY, 'Menu', {
+    this.menuButtonText = this.add
-      fontSize: '18px',
+      .text(MENU_BUTTON.x, MENU_BUTTON.y, "Menu", FONTS.menuButton)
-      fontFamily: 'Arial',
+      .setOrigin(0.5);
-      color: '#ffffff',
-    }).setOrigin(0.5);
 
-    this.menuButtonContainer = this.add.container(buttonX, buttonY, [
+    this.menuButtonContainer = this.add.container(
-      this.menuButtonBg,
+      MENU_BUTTON.x,
-      this.menuButtonText,
+      MENU_BUTTON.y,
-    ]);
+      [this.menuButtonBg, this.menuButtonText],
+    );
 
-    this.menuButtonBg.on('pointerover', () => {
+    this.menuButtonBg.on("pointerover", () => {
-      this.menuButtonBg.setFillStyle(0x4b5563);
+      this.menuButtonBg.setFillStyle(COLORS.menuButtonHover);
     });
 
-    this.menuButtonBg.on('pointerout', () => {
+    this.menuButtonBg.on("pointerout", () => {
-      this.menuButtonBg.setFillStyle(0x6b7280);
+      this.menuButtonBg.setFillStyle(COLORS.menuButton);
     });
 
-    this.menuButtonBg.on('pointerdown', () => {
+    this.menuButtonBg.on("pointerdown", () => {
       this.goToMenu();
     });
   }
 
   /** 跳转到菜单场景 */
   private async goToMenu(): Promise<void> {
-    await this.sceneController.launch('MenuScene');
+    await this.sceneController.launch("MenuScene");
   }
 
   private showWinner(winner: string): void {
@@ -273,40 +276,38 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
 
     this.winnerOverlay = this.add.container();
 
-    const text = winner === 'draw' ? "It's a draw!" : `${winner} wins!`;
+    const text = winner === "draw" ? "It's a draw!" : `${winner} wins!`;
+    const center = getBoardCenter();
+    const boardWidth = BOARD_SIZE * CELL_SIZE;
+    const boardHeight = BOARD_SIZE * CELL_SIZE;
 
-    const bg = this.add.rectangle(
+    const bg = this.add
-      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
+      .rectangle(
-      BOARD_OFFSET.y + (BOARD_SIZE * CELL_SIZE) / 2,
+        center.x,
-      BOARD_SIZE * CELL_SIZE,
+        center.y,
-      BOARD_SIZE * CELL_SIZE,
+        boardWidth,
-      0x000000,
+        boardHeight,
-      0.6
+        COLORS.overlayBg,
-    ).setInteractive({ useHandCursor: true });
+        0.6,
+      )
+      .setInteractive({ useHandCursor: true });
 
-    bg.on('pointerdown', () => {
+    bg.on("pointerdown", () => {
       this.gameHost.start();
     });
 
     this.winnerOverlay.add(bg);
 
-    const winText = this.add.text(
+    const winText = this.add
-      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
+      .text(center.x, center.y, text, FONTS.winner)
-      BOARD_OFFSET.y + (BOARD_SIZE * CELL_SIZE) / 2,
+      .setOrigin(0.5);
-      text,
-      {
-        fontSize: '36px',
-        fontFamily: 'Arial',
-        color: '#fbbf24',
-      }
-    ).setOrigin(0.5);
 
     this.winnerOverlay.add(winText);
 
     this.tweens.add({
       targets: winText,
       scale: 1.2,
-      duration: 500,
+      duration: ANIMATIONS.winnerPulse,
       yoyo: true,
       repeat: 1,
     });

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

@@ -1,2 +1,2 @@
-export { OnitamaScene } from './OnitamaScene';
+export { OnitamaScene } from "./OnitamaScene";
-export { MenuScene } from './MenuScene';
+export { MenuScene } from "./MenuScene";

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

@@ -1,18 +1,18 @@
-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';
 import { effect } from "@preact/signals-core";
 
-export const CARD_WIDTH = 80;
+import type { Card } from "@/game/onitama";
-export const CARD_HEIGHT = 120;
+import type { OnitamaScene } from "@/scenes/OnitamaScene";
-const BOARD_SIZE = 5;
+import type { Spawner } from "boardgame-phaser";
-const CARD_SPACING = 100; // 确保每张卡牌至少 80x80 区域
+
+import { CARD_WIDTH, CARD_HEIGHT, ANIMATIONS, getCardPosition } from "@/config";
+import { CardRenderer } from "@/renderers";
+
+// Re-export for backward compatibility
+export { CARD_WIDTH, CARD_HEIGHT } from "@/config";
 
 export interface CardSpawnData {
   cardId: string;
-  position: 'red' | 'black' | 'spare';
+  position: "red" | "black" | "spare";
   index: number;
 }
 
@@ -25,11 +25,18 @@ export class CardContainer extends Phaser.GameObjects.Container {
   private highlightTween: Phaser.Tweens.Tween | null = null;
   private _cardId: string;
   private _rotation: number = 0;
+  private cardRenderer: CardRenderer;
 
-  constructor(scene: OnitamaScene, cardId: string, card: Card, rotation: number = 0) {
+  constructor(
+    scene: OnitamaScene,
+    cardId: string,
+    card: Card,
+    rotation: number = 0,
+  ) {
     super(scene, 0, 0);
     this._cardId = cardId;
     this._rotation = rotation;
+    this.cardRenderer = new CardRenderer(scene);
 
     // 将容器添加到场景
     scene.add.existing(this);
@@ -37,11 +44,16 @@ export class CardContainer extends Phaser.GameObjects.Container {
     // 应用旋转
     this.angle = rotation;
 
-    // 创建卡牌视觉
+    // 使用 CardRenderer 创建卡牌视觉
-    this.createCardVisual(card);
+    this.cardRenderer.render(this, { card });
 
     // 使卡牌可点击
-    const hitArea = new Phaser.Geom.Rectangle(-CARD_WIDTH / 2, -CARD_HEIGHT / 2, CARD_WIDTH, CARD_HEIGHT);
+    const hitArea = new Phaser.Geom.Rectangle(
+      -CARD_WIDTH / 2,
+      -CARD_HEIGHT / 2,
+      CARD_WIDTH,
+      CARD_HEIGHT,
+    );
     this.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains);
 
     // 添加场景 effect 监听高亮状态变化
@@ -57,8 +69,8 @@ export class CardContainer extends Phaser.GameObjects.Container {
       const tween = this.scene.tweens.add({
         targets: this,
         angle: { from: currentAngle, to: rotation },
-        duration: 400,
+        duration: ANIMATIONS.cardRotate,
-        ease: 'Back.easeOut',
+        ease: "Back.easeOut",
       });
       (this.scene as OnitamaScene).addTweenInterruption(tween);
     } else {
@@ -76,29 +88,28 @@ export class CardContainer extends Phaser.GameObjects.Container {
 
     if (!this.highlightRect) {
       // 创建高亮边框（初始透明）
-      this.highlightRect = (this.scene as OnitamaScene).add.rectangle(
+      this.highlightRect = (this.scene as OnitamaScene).add
-        0, 0, CARD_WIDTH + 8, CARD_HEIGHT + 8, color, 0
+        .rectangle(0, 0, CARD_WIDTH + 8, CARD_HEIGHT + 8, color, 0)
-      )
         .setStrokeStyle(lineWidth, color)
         .setAlpha(0)
         .setDepth(-1);
       this.addAt(this.highlightRect, 0);
 
       // 淡入动画
-      const fadeIn = this.scene.tweens.add({
+      this.scene.tweens.add({
         targets: this.highlightRect,
         alpha: 1,
         scale: 1.05,
-        duration: 200,
+        duration: ANIMATIONS.selectionFadeIn,
-        ease: 'Power2',
+        ease: "Power2",
         onComplete: () => {
           // 淡入完成后开始脉冲动画
           this.highlightTween = this.scene.tweens.add({
             targets: this.highlightRect,
             alpha: 0.7,
             lineWidth: lineWidth + 1,
-            duration: 500,
+            duration: ANIMATIONS.selectionPulse,
-            ease: 'Sine.easeInOut',
+            ease: "Sine.easeInOut",
             yoyo: true,
             repeat: -1,
           });
@@ -114,8 +125,8 @@ export class CardContainer extends Phaser.GameObjects.Container {
         targets: this.highlightRect,
         alpha: 0.7,
         lineWidth: lineWidth + 1,
-        duration: 500,
+        duration: ANIMATIONS.selectionPulse,
-        ease: 'Sine.easeInOut',
+        ease: "Sine.easeInOut",
         yoyo: true,
         repeat: -1,
       });
@@ -139,8 +150,8 @@ export class CardContainer extends Phaser.GameObjects.Container {
         targets: this.highlightRect,
         alpha: 0,
         scale: 0.95,
-        duration: 150,
+        duration: ANIMATIONS.selectionFadeOut,
-        ease: 'Power2',
+        ease: "Power2",
         onComplete: () => {
           // 淡出完成后销毁矩形
           this.highlightRect?.destroy();
@@ -164,117 +175,43 @@ export class CardContainer extends Phaser.GameObjects.Container {
     });
 
     // 在容器销毁时清理 effect
-    this.on('destroy', () => {
+    this.on("destroy", () => {
       dispose();
     });
   }
-
-  /**
-   * 创建卡牌视觉元素
-   */
-  private createCardVisual(card: Card): void {
-    const bg = (this.scene as OnitamaScene).add.rectangle(0, 0, CARD_WIDTH, CARD_HEIGHT, 0xf9fafb, 1)
-      .setStrokeStyle(2, 0x6b7280);
-    this.add(bg);
-
-    const title = (this.scene as OnitamaScene).add.text(0, -CARD_HEIGHT / 2 + 16, card.id, {
-      fontSize: '12px',
-      fontFamily: 'Arial',
-      color: '#1f2937',
-    }).setOrigin(0.5);
-    this.add(title);
-
-    const grid = (this.scene as OnitamaScene).add.graphics();
-    const cellSize = 14;
-    const gridWidth = 5 * cellSize;
-    const gridHeight = 5 * cellSize;
-    const gridStartX = -gridWidth / 2;
-    const gridStartY = -gridHeight / 2 + 20;
-
-    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);
-          }
-        }
-      }
-    }
-    this.add(grid);
-
-    const playerText = (this.scene as OnitamaScene).add.text(0, CARD_HEIGHT / 2 - 16, card.startingPlayer, {
-      fontSize: '10px',
-      fontFamily: 'Arial',
-      color: '#6b7280',
-    }).setOrigin(0.5);
-    this.add(playerText);
-  }
 }
 
 export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
   private previousData = new Map<string, CardSpawnData>();
+  private cardRenderer: CardRenderer;
 
-  constructor(public readonly scene: OnitamaScene) {}
+  constructor(public readonly scene: OnitamaScene) {
+    this.cardRenderer = new CardRenderer(scene);
+  }
 
   *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 };
+      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.blackCards[i], position: "black", index: i };
     }
 
     // 备用卡牌
-    if(state.spareCard)
+    if (state.spareCard) {
-      yield { cardId: state.spareCard, position: 'spare', index: 0 };
+      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;
-    const boardBottom = BOARD_OFFSET.y + BOARD_SIZE * CELL_SIZE;
-
-    if (data.position === 'red') {
-      // 红方卡牌在棋盘下方，水平排列
-      return {
-        x: boardCenterX - (data.index - 0.5) * CARD_SPACING,
-        y: boardBottom + CARD_HEIGHT / 2 + 40,
-      };
-    } else if (data.position === 'black') {
-      // 黑方卡牌在棋盘上方，水平排列
-      return {
-        x: boardCenterX - (data.index - 0.5) * CARD_SPACING,
-        y: boardTop - CARD_HEIGHT / 2 - 40,
-      };
-    } else {
-      // 备用卡牌在棋盘左侧，垂直居中
-      const boardCenterY = boardTop + (BOARD_SIZE * CELL_SIZE) / 2;
-      return {
-        x: boardLeft - CARD_WIDTH / 2 - 40,
-        y: boardCenterY,
-      };
-    }
-  }
-
   private hasPositionChanged(data: CardSpawnData): boolean {
     const prev = this.previousData.get(data.cardId);
     if (!prev) return true;
@@ -282,13 +219,13 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
   }
 
   onUpdate(data: CardSpawnData, obj: CardContainer): void {
-    const isBlackTurn = this.scene.state.currentPlayer === 'black';
+    const isBlackTurn = this.scene.state.currentPlayer === "black";
 
     // 检查卡牌是否需要旋转
     let targetRotation = 0;
-    if (data.position === 'black') {
+    if (data.position === "black") {
       targetRotation = -180; // 黑方卡牌始终旋转
-    } else if (data.position === 'spare' && isBlackTurn) {
+    } else if (data.position === "spare" && isBlackTurn) {
       targetRotation = -180; // 备用卡牌在黑方回合旋转
     }
 
@@ -302,15 +239,15 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
       return;
     }
 
-    const pos = this.getCardPosition(data);
+    const pos = getCardPosition(data.position, data.index);
 
     // 播放移动动画并添加中断
     const tween = this.scene.tweens.add({
       targets: obj,
       x: pos.x,
       y: pos.y,
-      duration: 600,
+      duration: ANIMATIONS.cardMove,
-      ease: 'Back.easeOut',
+      ease: "Back.easeOut",
     });
 
     this.scene.addTweenInterruption(tween);
@@ -323,39 +260,46 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
       this.previousData.set(data.cardId, { ...data });
       // 返回空容器
       const emptyContainer = new CardContainer(this.scene, data.cardId, {
-        id: data.cardId, regionId: '', position: [],
+        id: data.cardId,
+        regionId: "",
+        position: [],
         moveCandidates: [],
-        startingPlayer: 'red'
+        startingPlayer: "red",
       } as Card);
       return emptyContainer;
     }
 
     // 计算初始旋转角度
-    const isBlackTurn = this.scene.state.currentPlayer === 'black';
+    const isBlackTurn = this.scene.state.currentPlayer === "black";
     let initialRotation = 0;
-    if (data.position === 'black') {
+    if (data.position === "black") {
       initialRotation = -180;
-    } else if (data.position === 'spare' && isBlackTurn) {
+    } else if (data.position === "spare" && isBlackTurn) {
       initialRotation = -180;
     }
 
-    const container = new CardContainer(this.scene, data.cardId, card, initialRotation);
+    const container = new CardContainer(
-    const pos = this.getCardPosition(data);
+      this.scene,
+      data.cardId,
+      card,
+      initialRotation,
+    );
+    const pos = getCardPosition(data.position, data.index);
     container.x = pos.x;
     container.y = pos.y;
 
     // 设置悬停效果
-    container.on('pointerover', () => {
+    container.on("pointerover", () => {
       if (this.scene.uiState.value.selectedCard !== data.cardId) {
         container.setAlpha(0.8);
       }
     });
 
-    container.on('pointerout', () => {
+    container.on("pointerout", () => {
       container.setAlpha(1);
     });
 
-    container.on('pointerdown', () => {
+    container.on("pointerdown", () => {
       this.scene.onCardClick(data.cardId);
     });
 
@@ -364,8 +308,8 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
     const tween = this.scene.tweens.add({
       targets: container,
       alpha: 1,
-      duration: 300,
+      duration: ANIMATIONS.cardSpawn,
-      ease: 'Power2',
+      ease: "Power2",
     });
     this.scene.addTweenInterruption(tween);
 
@@ -378,8 +322,8 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
       targets: obj,
       alpha: 0,
       scale: 0.8,
-      duration: 200,
+      duration: ANIMATIONS.cardDespawn,
-      ease: 'Power2',
+      ease: "Power2",
       onComplete: () => obj.destroy(),
     });
     this.scene.addTweenInterruption(tween);

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

@@ -1,8 +1,11 @@
-import Phaser from 'phaser';
+import { getAvailableMoves } from "boardgame-core/samples/onitama";
-import type { Spawner } from 'boardgame-phaser';
+import { Geom } from "phaser";
-import type { OnitamaScene } from '@/scenes/OnitamaScene';
+
-import {getAvailableMoves} from "boardgame-core/samples/onitama";
+import type { OnitamaScene } from "@/scenes/OnitamaScene";
-import {boardToScreen, CELL_SIZE} from './PawnSpawner';
+import type { Spawner } from "boardgame-phaser";
+
+import { boardToScreen, CELL_SIZE, ANIMATIONS } from "@/config";
+import { HighlightRenderer } from "@/renderers";
 
 export interface HighlightData {
   key: string;
@@ -15,8 +18,15 @@ export interface HighlightData {
   toY: number;
 }
 
-export class HighlightSpawner implements Spawner<HighlightData, Phaser.GameObjects.Container> {
+export class HighlightSpawner implements Spawner<
-  constructor(public readonly scene: OnitamaScene) {}
+  HighlightData,
+  Phaser.GameObjects.Container
+> {
+  private renderer: HighlightRenderer;
+
+  constructor(public readonly scene: OnitamaScene) {
+    this.renderer = new HighlightRenderer(scene);
+  }
 
   *getData(): Iterable<HighlightData> {
     const state = this.scene.state;
@@ -31,10 +41,12 @@ export class HighlightSpawner implements Spawner<HighlightData, Phaser.GameObjec
     const availableMoves = getAvailableMoves(state, currentPlayer);
 
     // 过滤出符合当前选择的移动
-    for(const move of availableMoves){
+    for (const move of availableMoves) {
-      if(move.fromX === uiState.selectedPiece!.x && 
+      if (
-         move.fromY === uiState.selectedPiece!.y && 
+        move.fromX === uiState.selectedPiece.x &&
-         move.card === uiState.selectedCard){
+        move.fromY === uiState.selectedPiece.y &&
+        move.card === uiState.selectedCard
+      ) {
         const pos = boardToScreen(move.toX, move.toY);
         yield {
           key: `${move.fromX}-${move.fromY}-${move.card}-${move.toX}-${move.toY}`,
@@ -44,8 +56,8 @@ export class HighlightSpawner implements Spawner<HighlightData, Phaser.GameObjec
           fromX: move.fromX,
           fromY: move.fromY,
           toX: move.toX,
-          toY: move.toY
+          toY: move.toY,
-        }
+        };
       }
     }
   }
@@ -61,30 +73,14 @@ export class HighlightSpawner implements Spawner<HighlightData, Phaser.GameObjec
   onSpawn(data: HighlightData): Phaser.GameObjects.Container {
     const container = this.scene.add.container(data.x, data.y);
 
-    // 外圈光环（动画）
+    // 使用 HighlightRenderer 创建视觉元素
-    const outerCircle = this.scene.add.circle(
+    this.renderer.render(container, { x: data.x, y: data.y });
-      0,
-      0,
-      CELL_SIZE / 3,
-      0x3b82f6,
-      0.2
-    );
-    container.add(outerCircle);
 
-    // 内圈
+    // 设置交互区域
-    const innerCircle = this.scene.add.circle(
+    const hitArea = new Geom.Circle(0, 0, CELL_SIZE / 3);
-      0,
-      0,
-      CELL_SIZE / 4,
-      0x3b82f6,
-      0.4
-    );
-    container.add(innerCircle);
-
-    const hitArea = new Phaser.Geom.Circle(0, 0, CELL_SIZE / 3);
     container.setInteractive(hitArea, Phaser.Geom.Circle.Contains);
     if (container.input) {
-      container.input.cursor = 'pointer';
+      container.input.cursor = "pointer";
     }
 
     // 出现动画：从0缩放和透明淡入
@@ -94,42 +90,22 @@ export class HighlightSpawner implements Spawner<HighlightData, Phaser.GameObjec
       targets: container,
       alpha: 1,
       scale: 1,
-      duration: 250,
+      duration: ANIMATIONS.highlightSpawn,
-      ease: 'Back.easeOut',
+      ease: "Back.easeOut",
     });
     this.scene.addTweenInterruption(spawnTween);
 
-    // 脉冲动画
+    // 使用 HighlightRenderer 设置脉冲动画
-    this.scene.tweens.add({
+    this.renderer.setupPulseAnimations(container);
-      targets: [outerCircle, innerCircle],
-      scale: 1.2,
-      alpha: 0.6,
-      duration: 600,
-      ease: 'Sine.easeInOut',
-      yoyo: true,
-      repeat: -1,
-    });
 
-    // 外圈延迟动画，形成错开效果
+    container.on("pointerdown", () => {
-    this.scene.tweens.add({
-      targets: outerCircle,
-      scale: 1.3,
-      alpha: 0.3,
-      duration: 800,
-      ease: 'Sine.easeInOut',
-      yoyo: true,
-      repeat: -1,
-      delay: 200,
-    });
-
-    container.on('pointerdown', () => {
       // 点击时的反馈动画
       this.scene.tweens.add({
         targets: container,
         scale: 1.5,
         alpha: 0.8,
-        duration: 150,
+        duration: ANIMATIONS.clickFeedback,
-        ease: 'Power2',
+        ease: "Power2",
         yoyo: true,
       });
 
@@ -145,11 +121,10 @@ export class HighlightSpawner implements Spawner<HighlightData, Phaser.GameObjec
       targets: obj,
       scale: 0,
       alpha: 0,
-      duration: 200,
+      duration: ANIMATIONS.highlightDespawn,
-      ease: 'Back.easeIn',
+      ease: "Back.easeIn",
       onComplete: () => obj.destroy(),
     });
     this.scene.addTweenInterruption(despawnTween);
   }
 }
-

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

@@ -1,43 +1,41 @@
-import Phaser from 'phaser';
-import type { Pawn } from '@/game/onitama';
-import type { Spawner } from 'boardgame-phaser';
-import type { OnitamaScene } from '@/scenes/OnitamaScene';
-import type { OnitamaUIState } from '@/state';
 import { effect } from "@preact/signals-core";
+import { GameObjects } from "phaser";
 
-export const CELL_SIZE = 80;
+import type { Pawn } from "@/game/onitama";
-export const BOARD_OFFSET = { x: 240, y: 240 };
+import type { OnitamaScene } from "@/scenes/OnitamaScene";
-export const BOARD_SIZE = 5;
+import type { Spawner } from "boardgame-phaser";
 
-export function boardToScreen(boardX: number, boardY: number): { x: number; y: number } {
+import { boardToScreen, ANIMATIONS } from "@/config";
-  return {
+import { PawnRenderer, SelectionRenderer } from "@/renderers";
-    x: BOARD_OFFSET.x + boardX * CELL_SIZE + CELL_SIZE / 2,
+
-    y: BOARD_OFFSET.y + (BOARD_SIZE - 1 - boardY) * CELL_SIZE + CELL_SIZE / 2,
+// Re-export for backward compatibility
-  };
+export { CELL_SIZE, BOARD_OFFSET, BOARD_SIZE, boardToScreen } from "@/config";
-}
 
 /**
  * 继承自 Phaser.GameObjects.Container 的棋子容器类
  * 管理棋子视觉元素和选中状态
  */
-export class PawnContainer extends Phaser.GameObjects.Container {
+export class PawnContainer extends GameObjects.Container {
   private selectionRing: Phaser.GameObjects.Arc | null = null;
-  private selectionTween: Phaser.Tweens.Tween | null = null;
   private _position: [number, number];
-  private _owner: 'red' | 'black';
+  private _owner: "red" | "black";
-  private _type: 'master' | 'student';
+  private _type: "master" | "student";
+  private pawnRenderer: PawnRenderer;
+  private selectionRenderer: SelectionRenderer;
 
   constructor(scene: OnitamaScene, pawn: Pawn) {
     super(scene, 0, 0);
     this._owner = pawn.owner;
     this._type = pawn.type;
     this._position = pawn.position as [number, number];
+    this.pawnRenderer = new PawnRenderer(scene);
+    this.selectionRenderer = new SelectionRenderer(scene);
 
     // 将容器添加到场景
     scene.add.existing(this);
 
-    // 创建棋子视觉
+    // 使用 PawnRenderer 创建棋子视觉
-    this.createPawnVisual();
+    this.pawnRenderer.render(this, { owner: this._owner, type: this._type });
 
     // 添加选中状态监听
     this.addSelectionEffect(scene);
@@ -50,33 +48,8 @@ export class PawnContainer extends Phaser.GameObjects.Container {
     if (!this.active) return;
 
     if (!this.selectionRing) {
-      // 创建选中光环（初始透明）
+      this.selectionRing = this.selectionRenderer.create(this);
-      this.selectionRing = (this.scene as OnitamaScene).add.arc(
+      this.selectionRenderer.show(this.selectionRing);
-        0, 0, CELL_SIZE / 3 + 5, 0, 360, false, 0xfbbf24, 0
-      )
-        .setStrokeStyle(3, 0xf59e0b, 1)
-        .setAlpha(0);
-      this.addAt(this.selectionRing, 0);
-
-      // 淡入动画
-      const fadeIn = this.scene.tweens.add({
-        targets: this.selectionRing,
-        alpha: 0.8,
-        duration: 200,
-        ease: 'Power2',
-        onComplete: () => {
-          // 淡入完成后开始脉冲动画
-          this.selectionTween = this.scene.tweens.add({
-            targets: this.selectionRing,
-            scale: 1.15,
-            alpha: 0.6,
-            duration: 500,
-            ease: 'Sine.easeInOut',
-            yoyo: true,
-            repeat: -1,
-          });
-        },
-      });
     }
   }
 
@@ -85,25 +58,8 @@ export class PawnContainer extends Phaser.GameObjects.Container {
    */
   hideSelection(): void {
     if (this.selectionRing) {
-      // 停止所有动画
+      this.selectionRenderer.hide(this.selectionRing, () => {
-      if (this.selectionTween) {
-        this.selectionTween.stop();
-        this.selectionTween = null;
-      }
-      this.scene.tweens.killTweensOf(this.selectionRing);
-
-      // 淡出动画
-      this.scene.tweens.add({
-        targets: this.selectionRing,
-        alpha: 0,
-        scale: 0.9,
-        duration: 150,
-        ease: 'Power2',
-        onComplete: () => {
-          // 淡出完成后销毁
-          this.selectionRing?.destroy();
         this.selectionRing = null;
-        },
       });
     }
   }
@@ -114,7 +70,8 @@ export class PawnContainer extends Phaser.GameObjects.Container {
   private addSelectionEffect(scene: OnitamaScene): void {
     const dispose = effect(() => {
       const uiState = scene.uiState.value;
-      const isSelected = uiState.selectedPiece?.x === this._position[0] &&
+      const isSelected =
+        uiState.selectedPiece?.x === this._position[0] &&
         uiState.selectedPiece?.y === this._position[1];
 
       if (isSelected) {
@@ -124,7 +81,7 @@ export class PawnContainer extends Phaser.GameObjects.Container {
       }
     });
 
-    this.on('destroy', () => {
+    this.on("destroy", () => {
       dispose();
     });
   }
@@ -132,7 +89,10 @@ export class PawnContainer extends Phaser.GameObjects.Container {
   /**
    * 更新棋子位置
    */
-  updatePosition(newPosition: [number, number], animated: boolean = false): void {
+  updatePosition(
+    newPosition: [number, number],
+    animated: boolean = false,
+  ): void {
     this._position = newPosition;
     const targetPos = boardToScreen(newPosition[0], newPosition[1]);
 
@@ -141,8 +101,8 @@ export class PawnContainer extends Phaser.GameObjects.Container {
         targets: this,
         x: targetPos.x,
         y: targetPos.y,
-        duration: 400,
+        duration: ANIMATIONS.pawnMove,
-        ease: 'Back.easeOut',
+        ease: "Back.easeOut",
       });
       (this.scene as OnitamaScene).addTweenInterruption(tween);
     } else {
@@ -150,24 +110,6 @@ export class PawnContainer extends Phaser.GameObjects.Container {
       this.y = targetPos.y;
     }
   }
-
-  /**
-   * 创建棋子视觉元素
-   */
-  private createPawnVisual(): void {
-    const bgColor = this._owner === 'red' ? 0xef4444 : 0x3b82f6;
-    const circle = (this.scene as OnitamaScene).add.circle(0, 0, CELL_SIZE / 3, bgColor, 1)
-      .setStrokeStyle(2, 0x1f2937);
-    this.add(circle);
-
-    const label = this._type === 'master' ? 'M' : 'S';
-    const text = (this.scene as OnitamaScene).add.text(0, 0, label, {
-      fontSize: '24px',
-      fontFamily: 'Arial',
-      color: '#ffffff',
-    }).setOrigin(0.5);
-    this.add(text);
-  }
 }
 
 export class PawnSpawner implements Spawner<Pawn, PawnContainer> {
@@ -177,7 +119,7 @@ export class PawnSpawner implements Spawner<Pawn, PawnContainer> {
 
   *getData() {
     for (const pawn of Object.values(this.scene.state.pawns)) {
-      if (pawn.regionId === 'board') {
+      if (pawn.regionId === "board") {
         yield pawn;
       }
     }
@@ -214,8 +156,8 @@ export class PawnSpawner implements Spawner<Pawn, PawnContainer> {
     const tween = this.scene.tweens.add({
       targets: container,
       scale: 1,
-      duration: 300,
+      duration: ANIMATIONS.pawnSpawn,
-      ease: 'Back.easeOut',
+      ease: "Back.easeOut",
     });
     this.scene.addTweenInterruption(tween);
 
@@ -228,8 +170,8 @@ export class PawnSpawner implements Spawner<Pawn, PawnContainer> {
       targets: obj,
       scale: 0,
       alpha: 0,
-      duration: 300,
+      duration: ANIMATIONS.pawnDespawn,
-      ease: 'Back.easeIn',
+      ease: "Back.easeIn",
       onComplete: () => obj.destroy(),
     });
 

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

@@ -1,3 +1,14 @@
-export { PawnSpawner, CELL_SIZE, BOARD_OFFSET, BOARD_SIZE, boardToScreen } from './PawnSpawner';
+export { PawnSpawner } from "./PawnSpawner";
-export { CardSpawner, CARD_WIDTH, CARD_HEIGHT, type CardSpawnData } from './CardSpawner';
+export { CardSpawner, type CardSpawnData } from "./CardSpawner";
-export { HighlightSpawner, type HighlightData } from './HighlightSpawner';
+export { HighlightSpawner, type HighlightData } from "./HighlightSpawner";
+
+// Re-export config constants for backward compatibility
+// New code should import these directly from '@/config'
+export {
+  CELL_SIZE,
+  BOARD_OFFSET,
+  BOARD_SIZE,
+  boardToScreen,
+  CARD_WIDTH,
+  CARD_HEIGHT,
+} from "@/config";

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

@@ -1,2 +1,8 @@
-export { createUIState, clearSelection, selectPiece, selectCard, createValidMoves } from './ui';
+export {
-export type { OnitamaUIState, ValidMove } from './ui';
+  createUIState,
+  clearSelection,
+  selectPiece,
+  selectCard,
+  createValidMoves,
+} from "./ui";
+export type { OnitamaUIState, ValidMove } from "./ui";

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

@@ -1,5 +1,8 @@
-import { MutableSignal, mutableSignal, computed, ReadonlySignal } from 'boardgame-core';
+import { mutableSignal, computed } from "boardgame-core";
-import {getAvailableMoves, OnitamaState} from "boardgame-core/samples/onitama";
+import { getAvailableMoves } from "boardgame-core/samples/onitama";
+
+import type { MutableSignal, ReadonlySignal } from "boardgame-core";
+import type { OnitamaState } from "boardgame-core/samples/onitama";
 
 export interface ValidMove {
   card: string;
@@ -22,18 +25,26 @@ export function createUIState(): MutableSignal<OnitamaUIState> {
   });
 }
 
-export function createValidMoves(state: ReadonlySignal<OnitamaState>, ui: ReadonlySignal<OnitamaUIState>){
+export function createValidMoves(
+  state: ReadonlySignal<OnitamaState>,
+  ui: ReadonlySignal<OnitamaUIState>,
+) {
   return computed(() => {
-    return getAvailableMoves(state.value, state.value.currentPlayer)
+    return getAvailableMoves(state.value, state.value.currentPlayer).filter(
-        .filter(move => {
+      (move) => {
-          const {selectedCard, selectedPiece} = ui.value;
+        const { selectedCard, selectedPiece } = ui.value;
-          return selectedPiece?.x === move.fromX && selectedPiece?.y === move.fromY && selectedCard === move.card;
+        return (
-        })
+          selectedPiece?.x === move.fromX &&
+          selectedPiece?.y === move.fromY &&
+          selectedCard === move.card
+        );
+      },
+    );
   });
 }
 
 export function clearSelection(uiState: MutableSignal<OnitamaUIState>): void {
-  uiState.produce(state => {
+  uiState.produce((state) => {
     state.selectedPiece = null;
     state.selectedCard = null;
   });
@@ -42,13 +53,13 @@ export function clearSelection(uiState: MutableSignal<OnitamaUIState>): void {
 export function selectPiece(
   uiState: MutableSignal<OnitamaUIState>,
   x: number,
-  y: number
+  y: number,
 ): void {
-  uiState.produce(state => {
+  uiState.produce((state) => {
     // 如果点击已选中的棋子，取消选择
-    if(state.selectedPiece?.x === x && state.selectedPiece?.y === y){
+    if (state.selectedPiece?.x === x && state.selectedPiece?.y === y) {
       state.selectedPiece = null;
-    }else{
+    } else {
       state.selectedPiece = { x, y };
     }
   });
@@ -56,9 +67,9 @@ export function selectPiece(
 
 export function selectCard(
   uiState: MutableSignal<OnitamaUIState>,
-  card: string
+  card: string,
 ): void {
-  uiState.produce(state => {
+  uiState.produce((state) => {
     // 如果点击已选中的卡牌，取消选择
     if (state.selectedCard === card) {
       state.selectedCard = null;

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

@@ -1,23 +1,35 @@
-import { h } from 'preact';
+import { createGameHost, type GameModule } from "boardgame-core";
-import {PhaserGame, PhaserScene } from 'boardgame-phaser';
+import { PhaserGame, PhaserScene } from "boardgame-phaser";
-import {MenuScene} from "@/scenes/MenuScene";
+import { useMemo } from "preact/hooks";
-import {useMemo} from "preact/hooks";
+
-import * as gameModule from '../game/onitama';
+import * as gameModule from "../game/onitama";
-import {OnitamaScene} from "@/scenes/OnitamaScene";
+
-import {createGameHost, type GameModule} from "boardgame-core";
+import type { OnitamaState } from "@/game/onitama";
-import type {OnitamaState} from "@/game/onitama";
+
+import { MenuScene } from "@/scenes/MenuScene";
+import { OnitamaScene } from "@/scenes/OnitamaScene";
 
 export default function App() {
-    const gameHost = useMemo(() => createGameHost(gameModule as unknown as GameModule<OnitamaState>), []);
+  const gameHost = useMemo(
+    () => createGameHost(gameModule as unknown as GameModule<OnitamaState>),
+    [],
+  );
   const gameScene = useMemo(() => new OnitamaScene(), []);
   const menuScene = useMemo(() => new MenuScene(), []);
 
   return (
     <div className="flex flex-col h-screen">
       <div className="flex-1 flex relative justify-center items-center">
-                <PhaserGame initialScene="MenuScene" config={{ width: 720, height: 840 }}>
+        <PhaserGame
+          initialScene="MenuScene"
+          config={{ width: 720, height: 840 }}
+        >
           <PhaserScene sceneKey="MenuScene" scene={menuScene} />
-                    <PhaserScene sceneKey="OnitamaScene" scene={gameScene} data={{gameHost}}/>
+          <PhaserScene
+            sceneKey="OnitamaScene"
+            scene={gameScene}
+            data={{ gameHost }}
+          />
         </PhaserGame>
       </div>
     </div>