refactor: fix onitama sizing

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

@@ -1 +1,25 @@
-export * from "boardgame-core/samples/onitama";
+/**
+ * Re-export onitama game module from boardgame-core
+ * This provides a convenient import path within onitama-game
+ */
+export {
+  registry,
+  prompts,
+  start,
+  createInitialState,
+  initializeCards,
+  getAvailableMoves,
+  isValidMove,
+  getCardMoveCandidates,
+  createRegions,
+  createCards,
+  createPawns,
+  createGameInfo,
+  type OnitamaState,
+  type OnitamaGame,
+  type PlayerType,
+  type Card,
+  type CardData,
+  type Pawn,
+  type RegionType,
+} from "boardgame-core/samples/onitama";

packages/onitama-game/src/main.tsx

@@ -1,13 +1,11 @@
 import { h } from 'preact';
 import { GameUI } from 'boardgame-phaser';
-import * as gameModule from './game/onitama';
 import './style.css';
 import App from "@/ui/App";
-import {OnitamaScene} from "@/scenes/OnitamaScene";
 
 const ui = new GameUI({
   container: document.getElementById('ui-root')!,
-  root: <App gameModule={gameModule} gameScene={OnitamaScene}/>,
+  root: <App/>,
 });
 
 ui.mount();

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

@@ -0,0 +1,156 @@
+import { ReactiveScene } from 'boardgame-phaser';
+import Phaser from 'phaser';
+
+/** 菜单场景配置 */
+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;
+  private startButtonContainer!: Phaser.GameObjects.Container;
+  private startButtonBg!: Phaser.GameObjects.Rectangle;
+  private startButtonText!: Phaser.GameObjects.Text;
+
+  constructor() {
+    super('MenuScene');
+  }
+
+  create(): void {
+    super.create();
+
+    const center = this.getCenterPosition();
+
+    this.createTitle(center);
+    this.createStartButton(center);
+    this.createSubtitle(center);
+  }
+
+  /** 获取屏幕中心位置 */
+  private getCenterPosition(): { x: number; y: number } {
+    return {
+      x: this.game.scale.width / 2,
+      y: this.game.scale.height / 2,
+    };
+  }
+
+  /** 创建标题文本 */
+  private createTitle(center: { x: number; y: number }): void {
+    this.titleText = this.add.text(
+      center.x,
+      center.y + MENU_CONFIG.positions.titleY,
+      'Onitama',
+      {
+        fontSize: MENU_CONFIG.fontSize.title,
+        fontFamily: 'Arial',
+        color: MENU_CONFIG.colors.title,
+      }
+    ).setOrigin(0.5);
+
+    // 标题入场动画
+    this.titleText.setScale(0);
+    this.tweens.add({
+      targets: this.titleText,
+      scale: 1,
+      duration: 600,
+      ease: 'Back.easeOut',
+    });
+  }
+
+  /** 创建开始按钮 */
+  private createStartButton(center: { x: number; y: number }): void {
+    const { button, colors } = MENU_CONFIG;
+
+    this.startButtonBg = this.add.rectangle(
+      0,
+      0,
+      button.width,
+      button.height,
+      colors.buttonBg
+    ).setOrigin(0.5).setInteractive({ useHandCursor: true });
+
+    this.startButtonText = this.add.text(
+      0,
+      0,
+      'Start Game',
+      {
+        fontSize: MENU_CONFIG.fontSize.button,
+        fontFamily: 'Arial',
+        color: colors.buttonText,
+      }
+    ).setOrigin(0.5);
+
+    this.startButtonContainer = this.add.container(
+      center.x,
+      center.y + MENU_CONFIG.positions.buttonY,
+      [this.startButtonBg, this.startButtonText]
+    );
+
+    // 按钮交互
+    this.setupButtonInteraction();
+  }
+
+  /** 设置按钮交互效果 */
+  private setupButtonInteraction(): void {
+    this.startButtonBg.on('pointerover', () => {
+      this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBgHover);
+      this.tweens.add({
+        targets: this.startButtonContainer,
+        scale: 1.05,
+        duration: 100,
+      });
+    });
+
+    this.startButtonBg.on('pointerout', () => {
+      this.startButtonBg.setFillStyle(MENU_CONFIG.colors.buttonBg);
+      this.tweens.add({
+        targets: this.startButtonContainer,
+        scale: 1,
+        duration: 100,
+      });
+    });
+
+    this.startButtonBg.on('pointerdown', () => {
+      this.startGame();
+    });
+  }
+
+  /** 创建副标题 */
+  private createSubtitle(center: { x: number; y: number }): void {
+    this.add.text(
+      center.x,
+      center.y + MENU_CONFIG.positions.subtitleY,
+      'Click to start playing',
+      {
+        fontSize: MENU_CONFIG.fontSize.subtitle,
+        fontFamily: 'Arial',
+        color: MENU_CONFIG.colors.subtitle,
+      }
+    ).setOrigin(0.5);
+  }
+
+  /** 开始游戏 */
+  private async startGame(): Promise<void> {
+    await this.sceneController.launch('OnitamaScene');
+  }
+}

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

@@ -18,7 +18,10 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
   private infoText!: Phaser.GameObjects.Text;
   private winnerOverlay?: Phaser.GameObjects.Container;
   private cardLabelContainers: Map<string, Phaser.GameObjects.Text> = new Map();
-  
+  private menuButtonContainer!: Phaser.GameObjects.Container;
+  private menuButtonBg!: Phaser.GameObjects.Rectangle;
+  private menuButtonText!: Phaser.GameObjects.Text;
+
   // UI State managed by MutableSignal
   public uiState!: MutableSignal<OnitamaUIState>;
 
@@ -57,11 +60,11 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
 
     // Info text
     this.infoText = this.add.text(
-      20,
+      40,
       BOARD_OFFSET.y,
       '',
       {
-        fontSize: '15px',
+        fontSize: '16px',
         fontFamily: 'Arial',
         color: '#4b5563',
       }
@@ -74,6 +77,12 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
 
     // Input handling
     this.setupInput();
+
+    // Menu button
+    this.createMenuButton();
+
+    // Start the game
+    this.gameHost.start();
   }
 
   private createCardLabels(): void {
@@ -85,7 +94,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     // Red cards label - 棋盘下方
     const redLabel = this.add.text(
       boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
-      boardBottom + 10,
+      boardBottom + 40,
       "RED",
       {
         fontSize: '16px',
@@ -98,7 +107,7 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     // Black cards label - 棋盘上方
     const blackLabel = this.add.text(
       boardLeft + (BOARD_SIZE * CELL_SIZE) / 2,
-      boardTop - 10,
+      boardTop - 40,
       "BLACK",
       {
         fontSize: '16px',
@@ -141,8 +150,8 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     g.strokePath();
 
     this.add.text(
-      20,
-      20,
+      40,
+      40,
       'Onitama',
       {
         fontSize: '28px',
@@ -220,6 +229,43 @@ export class OnitamaScene extends GameHostScene<OnitamaState> {
     return pawnId ? this.state.pawns[pawnId] : null;
   }
 
+  /** 创建菜单按钮 */
+  private createMenuButton(): void {
+    const buttonX = 680;
+    const buttonY = 40;
+
+    this.menuButtonBg = this.add.rectangle(buttonX, buttonY, 120, 40, 0x6b7280)
+      .setInteractive({ useHandCursor: true });
+
+    this.menuButtonText = this.add.text(buttonX, buttonY, 'Menu', {
+      fontSize: '18px',
+      fontFamily: 'Arial',
+      color: '#ffffff',
+    }).setOrigin(0.5);
+
+    this.menuButtonContainer = this.add.container(buttonX, buttonY, [
+      this.menuButtonBg,
+      this.menuButtonText,
+    ]);
+
+    this.menuButtonBg.on('pointerover', () => {
+      this.menuButtonBg.setFillStyle(0x4b5563);
+    });
+
+    this.menuButtonBg.on('pointerout', () => {
+      this.menuButtonBg.setFillStyle(0x6b7280);
+    });
+
+    this.menuButtonBg.on('pointerdown', () => {
+      this.goToMenu();
+    });
+  }
+
+  /** 跳转到菜单场景 */
+  private async goToMenu(): Promise<void> {
+    await this.sceneController.launch('MenuScene');
+  }
+
   private showWinner(winner: string): void {
     if (this.winnerOverlay) {
       this.winnerOverlay.destroy();

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

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

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

@@ -5,9 +5,10 @@ import type { OnitamaScene } from '@/scenes/OnitamaScene';
 import { BOARD_OFFSET, CELL_SIZE } from './PawnSpawner';
 import { effect } from "@preact/signals-core";
 
-export const CARD_WIDTH = 100;
-export const CARD_HEIGHT = 140;
+export const CARD_WIDTH = 80;
+export const CARD_HEIGHT = 120;
 const BOARD_SIZE = 5;
+const CARD_SPACING = 100; // 确保每张卡牌至少 80x80 区域
 
 export interface CardSpawnData {
   cardId: string;
@@ -176,7 +177,7 @@ export class CardContainer extends Phaser.GameObjects.Container {
       .setStrokeStyle(2, 0x6b7280);
     this.add(bg);
 
-    const title = (this.scene as OnitamaScene).add.text(0, -CARD_HEIGHT / 2 + 15, card.id, {
+    const title = (this.scene as OnitamaScene).add.text(0, -CARD_HEIGHT / 2 + 16, card.id, {
       fontSize: '12px',
       fontFamily: 'Arial',
       color: '#1f2937',
@@ -184,11 +185,11 @@ export class CardContainer extends Phaser.GameObjects.Container {
     this.add(title);
 
     const grid = (this.scene as OnitamaScene).add.graphics();
-    const cellSize = 16;
+    const cellSize = 14;
     const gridWidth = 5 * cellSize;
     const gridHeight = 5 * cellSize;
     const gridStartX = -gridWidth / 2;
-    const gridStartY = -gridHeight / 2 + 30;
+    const gridStartY = -gridHeight / 2 + 20;
 
     for (let row = 0; row < 5; row++) {
       for (let col = 0; col < 5; col++) {
@@ -209,7 +210,7 @@ export class CardContainer extends Phaser.GameObjects.Container {
     }
     this.add(grid);
 
-    const playerText = (this.scene as OnitamaScene).add.text(0, CARD_HEIGHT / 2 - 15, card.startingPlayer, {
+    const playerText = (this.scene as OnitamaScene).add.text(0, CARD_HEIGHT / 2 - 16, card.startingPlayer, {
       fontSize: '10px',
       fontFamily: 'Arial',
       color: '#6b7280',
@@ -255,20 +256,20 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
     if (data.position === 'red') {
       // 红方卡牌在棋盘下方，水平排列
       return {
-        x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
-        y: boardBottom + CARD_HEIGHT - 30,
+        x: boardCenterX - (data.index - 0.5) * CARD_SPACING,
+        y: boardBottom + CARD_HEIGHT / 2 + 40,
       };
     } else if (data.position === 'black') {
       // 黑方卡牌在棋盘上方，水平排列
       return {
-        x: boardLeft + BOARD_SIZE * CELL_SIZE / 2 - (data.index - 0.5) * (CARD_WIDTH + 15),
-        y: boardTop - CARD_HEIGHT + 30,
+        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,
+        x: boardLeft - CARD_WIDTH / 2 - 40,
         y: boardCenterY,
       };
     }
@@ -308,7 +309,7 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
       targets: obj,
       x: pos.x,
       y: pos.y,
-      duration: 350,
+      duration: 600,
       ease: 'Back.easeOut',
     });
 
@@ -329,8 +330,16 @@ export class CardSpawner implements Spawner<CardSpawnData, CardContainer> {
       return emptyContainer;
     }
 
-    // 计算旋转角度 - 初始不旋转，后续由 onUpdate 处理
-    const container = new CardContainer(this.scene, data.cardId, card, 0);
+    // 计算初始旋转角度
+    const isBlackTurn = this.scene.state.currentPlayer === 'black';
+    let initialRotation = 0;
+    if (data.position === 'black') {
+      initialRotation = -180;
+    } else if (data.position === 'spare' && isBlackTurn) {
+      initialRotation = -180;
+    }
+
+    const container = new CardContainer(this.scene, data.cardId, card, initialRotation);
     const pos = this.getCardPosition(data);
     container.x = pos.x;
     container.y = pos.y;

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

@@ -6,7 +6,7 @@ import type { OnitamaUIState } from '@/state';
 import { effect } from "@preact/signals-core";
 
 export const CELL_SIZE = 80;
-export const BOARD_OFFSET = { x: 240, y: 200 };
+export const BOARD_OFFSET = { x: 240, y: 240 };
 export const BOARD_SIZE = 5;
 
 export function boardToScreen(boardX: number, boardY: number): { x: number; y: number } {

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

@@ -1,41 +1,23 @@
-import {useComputed} from '@preact/signals';
-import { createGameHost } from 'boardgame-core';
-import Phaser from 'phaser';
 import { h } from 'preact';
-import { PhaserGame, PhaserScene } from 'boardgame-phaser';
+import {PhaserGame, PhaserScene } from 'boardgame-phaser';
+import {MenuScene} from "@/scenes/MenuScene";
+import {useMemo} from "preact/hooks";
+import * as gameModule from '../game/onitama';
+import {OnitamaScene} from "@/scenes/OnitamaScene";
+import {createGameHost, type GameModule} from "boardgame-core";
+import type {OnitamaState} from "@/game/onitama";
 
-export default function App(props: { gameModule: any, gameScene: { new(): Phaser.Scene } }) {
-
-    const gameHost = useComputed(() => {
-        const gameHost = createGameHost(props.gameModule);
-        return { gameHost };
-    });
-
-    const scene = useComputed(() => new props.gameScene());
-
-    const handleReset = () => {
-        gameHost.value.gameHost.start();
-    };
-    const label = useComputed(() => gameHost.value.gameHost.status.value === 'running' ? 'Restart' : 'Start');
-
-    const phaserConfig: Partial<Phaser.Types.Core.GameConfig> = {
-        width: 700,
-        height: 800,
-    };
+export default function App() {
+    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="p-4 bg-gray-100 border-t border-gray-200">
-                <button
-                    onClick={handleReset}
-                    className="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
-                >
-                    {label}
-                </button>
-            </div>
             <div className="flex-1 flex relative justify-center items-center">
-                <PhaserGame config={phaserConfig}>
-                    <PhaserScene sceneKey="OnitamaScene" scene={scene.value} autoStart data={gameHost.value} />
+                <PhaserGame initialScene="MenuScene" config={{ width: 720, height: 840 }}>
+                    <PhaserScene sceneKey="MenuScene" scene={menuScene} />
+                    <PhaserScene sceneKey="OnitamaScene" scene={gameScene} data={{gameHost}}/>
                 </PhaserGame>
             </div>
         </div>