refactor: fix regicide, presumably?

packages/regicide-game/src/scenes/views/CardView.ts

@@ -0,0 +1,121 @@
+import Phaser from 'phaser';
+import type { Card } from '@/game/types';
+import { getCardDisplay, getSuitColor } from '@/game/card-utils';
+import type { GameScene } from '../GameScene';
+import { prompts } from '@/game/regicide';
+
+export const CARD_WIDTH = 80;
+export const CARD_HEIGHT = 120;
+
+export class CardView {
+  public readonly container: Phaser.GameObjects.Container;
+  private readonly bg: Phaser.GameObjects.Rectangle;
+  private readonly text: Phaser.GameObjects.Text;
+  private readonly valueText: Phaser.GameObjects.Text;
+  private readonly card: Card;
+  private isHovering = false;
+  private baseY: number;
+
+  constructor(scene: GameScene, card: Card, x: number, y: number) {
+    this.card = card;
+    this.baseY = y;
+    this.container = scene.add.container(x, y);
+
+    // 卡牌背景
+    this.bg = scene.add.rectangle(0, 0, CARD_WIDTH, CARD_HEIGHT, 0xf9fafb)
+      .setStrokeStyle(3, 0x6b7280);
+
+    // 卡牌边框颜色
+    const borderColor = getSuitColor(card.suit);
+    this.bg.setStrokeStyle(3, Phaser.Display.Color.HexStringToColor(borderColor).color);
+
+    // 卡牌文本
+    const display = getCardDisplay(card);
+    const color = getSuitColor(card.suit);
+    this.text = scene.add.text(0, 0, display, {
+      fontSize: '24px',
+      fontFamily: 'Arial',
+      color,
+      fontStyle: 'bold',
+    }).setOrigin(0.5);
+
+    // 卡牌数值提示
+    this.valueText = scene.add.text(0, -CARD_HEIGHT / 2 + 15, `+${card.value}`, {
+      fontSize: '12px',
+      fontFamily: 'Arial',
+      color: '#6b7280',
+    }).setOrigin(0.5);
+
+    this.container.add([this.bg, this.valueText, this.text]);
+
+    // 设置交互
+    this.bg.setInteractive({ useHandCursor: true });
+    this.setupInteraction(scene);
+
+    // 出现动画
+    this.container.setScale(0);
+    scene.tweens.add({
+      targets: this.container,
+      scale: 1,
+      duration: 200,
+      ease: 'Back.easeOut',
+    });
+  }
+
+  setPosition(x: number, y: number): void {
+    this.baseY = y;
+    this.container.setPosition(x, y);
+  }
+
+  hover(offset: number = -30): void {
+    if (!this.isHovering) {
+      this.isHovering = true;
+      const scene = this.container.scene as Phaser.Scene;
+      scene.tweens.add({
+        targets: this.container,
+        y: this.baseY + offset,
+        duration: 100,
+        ease: 'Power2',
+      });
+    }
+  }
+
+  unhover(): void {
+    if (this.isHovering) {
+      this.isHovering = false;
+      const scene = this.container.scene as Phaser.Scene;
+      scene.tweens.add({
+        targets: this.container,
+        y: this.baseY,
+        duration: 100,
+        ease: 'Power2',
+      });
+    }
+  }
+
+  getCard(): Card {
+    return this.card;
+  }
+
+  destroy(): void {
+    this.container.destroy();
+  }
+
+  private setupInteraction(scene: GameScene): void {
+    this.bg.on('pointerover', () => {
+      this.hover();
+    });
+
+    this.bg.on('pointerout', () => {
+      this.unhover();
+    });
+
+    this.bg.on('pointerdown', () => {
+      if (scene.state.phase === 'playerTurn') {
+        scene.gameHost.tryAnswerPrompt(prompts.playerAction, 'play', [this.card.id]);
+      } else if (scene.state.phase === 'enemyCounterattack') {
+        scene.gameHost.tryAnswerPrompt(prompts.counterattack, [this.card.id]);
+      }
+    });
+  }
+}

packages/regicide-game/src/scenes/views/EnemyView.ts

@@ -0,0 +1,110 @@
+import Phaser from 'phaser';
+import type { Enemy } from '@/game/types';
+import type { GameScene } from '../GameScene';
+
+const ENEMY_CARD_WIDTH = 144;
+const ENEMY_CARD_HEIGHT = 180;
+
+export class EnemyView {
+  public readonly container: Phaser.GameObjects.Container;
+  private readonly bg: Phaser.GameObjects.Rectangle;
+  private readonly nameText: Phaser.GameObjects.Text;
+  private readonly immunityText: Phaser.GameObjects.Text;
+  private readonly counterText: Phaser.GameObjects.Text;
+  private readonly hpText: Phaser.GameObjects.Text;
+  private enemy: Enemy;
+
+  constructor(scene: GameScene, enemy: Enemy, x: number, y: number) {
+    this.enemy = enemy;
+    this.container = scene.add.container(x, y);
+
+    // 敌人卡牌背景
+    this.bg = scene.add.rectangle(0, 0, ENEMY_CARD_WIDTH, ENEMY_CARD_HEIGHT, 0x1f2937)
+      .setStrokeStyle(4, 0xef4444);
+
+    // 敌人名称
+    const suitSymbols: Record<string, string> = {
+      hearts: '♥',
+      diamonds: '♦',
+      clubs: '♣',
+      spades: '♠',
+    };
+    const suitSymbol = enemy.suit ? suitSymbols[enemy.suit] : '';
+    this.nameText = scene.add.text(0, -40, `${enemy.rank} ${suitSymbol}`, {
+      fontSize: '32px',
+      fontFamily: 'Arial',
+      color: '#fbbf24',
+      fontStyle: 'bold',
+    }).setOrigin(0.5);
+
+    // 花色免疫提示
+    const suitNames: Record<string, string> = {
+      hearts: '红桃 ♥',
+      diamonds: '方片 ♦',
+      clubs: '梅花 ♣',
+      spades: '黑桃 ♠',
+    };
+    const immunityText = enemy.immunitySuit
+      ? `🛡️ 免疫: ${suitNames[enemy.immunitySuit]}`
+      : '';
+    this.immunityText = scene.add.text(0, 0, immunityText, {
+      fontSize: '14px',
+      fontFamily: 'Arial',
+      color: '#9ca3af',
+    }).setOrigin(0.5);
+
+    // 反击伤害提示
+    this.counterText = scene.add.text(0, 30, `⚔️ 反击伤害: ${enemy.counterDamage}`, {
+      fontSize: '16px',
+      fontFamily: 'Arial',
+      color: '#ef4444',
+      fontStyle: 'bold',
+    }).setOrigin(0.5);
+
+    // HP提示
+    this.hpText = scene.add.text(0, 60, `❤️ ${enemy.hp} HP`, {
+      fontSize: '16px',
+      fontFamily: 'Arial',
+      color: '#22c55e',
+      fontStyle: 'bold',
+    }).setOrigin(0.5);
+
+    this.container.add([this.bg, this.nameText, this.immunityText, this.counterText, this.hpText]);
+
+    // 出现动画
+    this.container.setScale(0);
+    scene.tweens.add({
+      targets: this.container,
+      scale: 1,
+      duration: 400,
+      ease: 'Back.easeOut',
+    });
+
+    // 抖动效果
+    scene.tweens.add({
+      targets: this.container,
+      x: x + 5,
+      duration: 100,
+      yoyo: true,
+      repeat: 3,
+    });
+  }
+
+  updateEnemy(enemy: Enemy): void {
+    this.enemy = enemy;
+    this.hpText.setText(`❤️ ${enemy.currentHp}/${enemy.hp} HP`);
+    this.counterText.setText(`⚔️ 反击伤害: ${enemy.counterDamage}`);
+  }
+
+  setPosition(x: number, y: number): void {
+    this.container.setPosition(x, y);
+  }
+
+  getEnemy(): Enemy {
+    return this.enemy;
+  }
+
+  destroy(): void {
+    this.container.destroy();
+  }
+}

packages/regicide-game/src/scenes/views/GameUI.ts

@@ -0,0 +1,171 @@
+import Phaser from 'phaser';
+import type { Enemy, VictoryLevel } from '@/game/types';
+import type { GameScene } from '../GameScene';
+import { EnemyView } from './EnemyView';
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 700;
+const CENTER_X = GAME_WIDTH / 2;
+const ENEMY_Y = 200;
+const BAR_WIDTH = 200;
+const BAR_HEIGHT = 20;
+
+export class GameUI {
+  public readonly container: Phaser.GameObjects.Container;
+  private readonly hpBar: Phaser.GameObjects.Graphics;
+  private readonly infoText: Phaser.GameObjects.Text;
+  private readonly phaseText: Phaser.GameObjects.Text;
+  private gameOverOverlay?: Phaser.GameObjects.Container;
+  private enemyView?: EnemyView;
+
+  constructor(scene: GameScene) {
+    this.container = scene.add.container(0, 0);
+
+    // 创建HP条
+    this.hpBar = scene.add.graphics();
+
+    // 创建文本
+    this.infoText = scene.add.text(CENTER_X, 30, '⚔️ Regicide - 击败所有12个敌人!', {
+      fontSize: '22px',
+      fontFamily: 'Arial',
+      color: '#fbbf24',
+    }).setOrigin(0.5);
+
+    this.phaseText = scene.add.text(CENTER_X, 60, '点击任意位置开始游戏', {
+      fontSize: '16px',
+      fontFamily: 'Arial',
+      color: '#9ca3af',
+    }).setOrigin(0.5);
+  }
+
+  updateEnemyDisplay(scene: GameScene, enemy: Enemy | null): void {
+    this.hpBar.clear();
+
+    if (!enemy) {
+      if (this.enemyView) {
+        this.enemyView.destroy();
+        this.enemyView = undefined;
+      }
+      return;
+    }
+
+    // 更新或创建敌人视图
+    if (this.enemyView) {
+      this.enemyView.updateEnemy(enemy);
+    } else {
+      this.enemyView = new EnemyView(scene, enemy, CENTER_X, ENEMY_Y);
+    }
+
+    // 绘制HP条
+    this.drawHpBar(enemy);
+  }
+
+  updatePhaseText(phase: string): void {
+    const phaseNames: Record<string, string> = {
+      playerTurn: '🎯 你的回合 - 点击卡牌攻击敌人',
+      enemyCounterattack: '💥 敌人反击! - 点击卡牌抵消伤害',
+      enemyDefeated: '✨ 敌人被击败! 准备迎战下一个敌人',
+      gameOver: '🏁 游戏结束',
+    };
+    this.phaseText.setText(phaseNames[phase] || phase);
+  }
+
+  showGameOver(scene: GameScene, victoryLevel: VictoryLevel): void {
+    if (this.gameOverOverlay) {
+      this.gameOverOverlay.destroy();
+    }
+
+    this.gameOverOverlay = scene.add.container();
+
+    // 半透明背景
+    const bg = scene.add.rectangle(CENTER_X, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, 0x000000, 0.85)
+      .setInteractive({ useHandCursor: true });
+
+    bg.on('pointerdown', () => {
+      scene.gameHost.start();
+    });
+
+    this.gameOverOverlay.add(bg);
+
+    // 游戏结束文本
+    let resultText = '游戏结束';
+    let resultColor = '#ef4444';
+
+    if (victoryLevel === 'gold') {
+      resultText = '🥇 金胜利! 完美通关!';
+      resultColor = '#fbbf24';
+    } else if (victoryLevel === 'silver') {
+      resultText = '🥈 银胜利! 使用1张小丑牌';
+      resultColor = '#9ca3af';
+    } else if (victoryLevel === 'bronze') {
+      resultText = '🥉 铜胜利! 使用2张小丑牌';
+      resultColor = '#b45309';
+    } else {
+      resultText = '💀 失败! 无法抵消反击伤害';
+    }
+
+    const text = scene.add.text(CENTER_X, 250, resultText, {
+      fontSize: '36px',
+      fontFamily: 'Arial',
+      color: resultColor,
+    }).setOrigin(0.5);
+
+    this.gameOverOverlay.add(text);
+
+    const restartText = scene.add.text(CENTER_X, 350, '点击重新开始', {
+      fontSize: '24px',
+      fontFamily: 'Arial',
+      color: '#6b7280',
+    }).setOrigin(0.5);
+
+    this.gameOverOverlay.add(restartText);
+
+    // 动画
+    scene.tweens.add({
+      targets: text,
+      scale: 1.1,
+      duration: 500,
+      yoyo: true,
+      repeat: 2,
+    });
+  }
+
+  hideGameOver(): void {
+    if (this.gameOverOverlay) {
+      this.gameOverOverlay.destroy();
+      this.gameOverOverlay = undefined;
+    }
+  }
+
+  dispose(): void {
+    this.hpBar.destroy();
+    this.infoText.destroy();
+    this.phaseText.destroy();
+    if (this.gameOverOverlay) {
+      this.gameOverOverlay.destroy();
+    }
+    if (this.enemyView) {
+      this.enemyView.destroy();
+    }
+    this.container.destroy();
+  }
+
+  private drawHpBar(enemy: Enemy): void {
+    const hpPercent = enemy.currentHp / enemy.hp;
+    const barX = CENTER_X - BAR_WIDTH / 2;
+    const barY = ENEMY_Y + 100;
+
+    // 背景
+    this.hpBar.fillStyle(0x374151);
+    this.hpBar.fillRoundedRect(barX, barY, BAR_WIDTH, BAR_HEIGHT, 5);
+
+    // 前景
+    const hpColor = hpPercent > 0.5 ? 0x22c55e : hpPercent > 0.25 ? 0xf59e0b : 0xef4444;
+    this.hpBar.fillStyle(hpColor);
+    this.hpBar.fillRoundedRect(barX, barY, BAR_WIDTH * hpPercent, BAR_HEIGHT, 5);
+
+    // 边框
+    this.hpBar.lineStyle(2, 0x6b7280);
+    this.hpBar.strokeRoundedRect(barX, barY, BAR_WIDTH, BAR_HEIGHT, 5);
+  }
+}

packages/regicide-game/src/scenes/views/HandContainer.ts

@@ -0,0 +1,83 @@
+import Phaser from 'phaser';
+import type { Card } from '@/game/types';
+import { CardView, CARD_WIDTH } from './CardView';
+import type { GameScene } from '../GameScene';
+
+const HAND_Y = 580;
+const MAX_HAND_WIDTH = 600;
+const CARD_SPACING = 70;
+
+export class HandContainer {
+  public readonly container: Phaser.GameObjects.Container;
+  private cardViews: Map<string, CardView> = new Map();
+  private centerX: number;
+  private handY: number;
+
+  constructor(scene: GameScene, centerX: number, handY: number = HAND_Y) {
+    this.container = scene.add.container(0, 0);
+    this.centerX = centerX;
+    this.handY = handY;
+  }
+
+  updateCards(scene: GameScene, cards: Card[]): void {
+    const currentCardIds = new Set(cards.map(c => c.id));
+
+    // 移除不在手牌中的卡牌
+    for (const [cardId, view] of this.cardViews) {
+      if (!currentCardIds.has(cardId)) {
+        this.animateCardExit(scene, view);
+        this.cardViews.delete(cardId);
+      }
+    }
+
+    // 更新或创建卡牌
+    const handSize = cards.length;
+    const spacing = Math.min(CARD_SPACING, MAX_HAND_WIDTH / handSize);
+    const startX = this.centerX - (handSize - 1) * spacing / 2;
+
+    for (let i = 0; i < cards.length; i++) {
+      const card = cards[i];
+      const existingView = this.cardViews.get(card.id);
+
+      if (existingView) {
+        // 更新位置
+        const targetX = startX + i * spacing;
+        const targetY = this.handY;
+        existingView.setPosition(targetX, targetY);
+      } else {
+        // 创建新卡牌
+        const x = startX + i * spacing;
+        const view = new CardView(scene, card, x, this.handY);
+        this.cardViews.set(card.id, view);
+      }
+    }
+  }
+
+  getCardView(cardId: string): CardView | undefined {
+    return this.cardViews.get(cardId);
+  }
+
+  getAllViews(): CardView[] {
+    return Array.from(this.cardViews.values());
+  }
+
+  dispose(): void {
+    for (const view of this.cardViews.values()) {
+      view.destroy();
+    }
+    this.cardViews.clear();
+    this.container.destroy();
+  }
+
+  private animateCardExit(scene: GameScene, view: CardView): void {
+    scene.tweens.add({
+      targets: view.container,
+      alpha: 0,
+      scale: 0.5,
+      y: view.container.y - 100,
+      duration: 200,
+      ease: 'Back.easeIn',
+      onComplete: () => view.destroy(),
+    });
+  }
+}

packages/regicide-game/src/scenes/views/PromptDisplay.ts

@@ -0,0 +1,133 @@
+import Phaser from 'phaser';
+import type { CommandSchema } from 'boardgame-core';
+import type { GameScene } from '../GameScene';
+
+const GAME_WIDTH = 800;
+const CENTER_X = GAME_WIDTH / 2;
+
+export class PromptDisplay {
+  public readonly container: Phaser.GameObjects.Container;
+  private readonly bg: Phaser.GameObjects.Graphics;
+  private readonly promptText: Phaser.GameObjects.Text;
+  private readonly playerText: Phaser.GameObjects.Text;
+  private isVisible = false;
+
+  constructor(scene: GameScene) {
+    this.container = scene.add.container(CENTER_X, 450);
+    this.container.setDepth(100);
+
+    // 创建背景
+    this.bg = scene.add.graphics();
+
+    // 提示文本
+    this.promptText = scene.add.text(0, -15, '', {
+      fontSize: '18px',
+      fontFamily: 'Arial',
+      color: '#fbbf24',
+      fontStyle: 'bold',
+      align: 'center',
+    }).setOrigin(0.5);
+
+    // 玩家文本
+    this.playerText = scene.add.text(0, 15, '', {
+      fontSize: '14px',
+      fontFamily: 'Arial',
+      color: '#9ca3af',
+      align: 'center',
+    }).setOrigin(0.5);
+
+    this.container.add([this.bg, this.promptText, this.playerText]);
+    this.container.setVisible(false);
+  }
+
+  update(schema: CommandSchema | null, player: string | null): void {
+    if (!schema) {
+      if (this.isVisible) {
+        this.hide();
+      }
+      return;
+    }
+
+    if (!this.isVisible) {
+      this.show();
+    }
+
+    // 格式化 schema 显示
+    const formattedSchema = this.formatSchema(schema);
+    this.promptText.setText(formattedSchema);
+
+    if (player) {
+      this.playerText.setText(`等待玩家: ${player}`);
+    } else {
+      this.playerText.setText('');
+    }
+  }
+
+  private show(): void {
+    this.isVisible = true;
+    this.container.setVisible(true);
+    this.container.setScale(0);
+    this.container.setAlpha(0);
+
+    const scene = this.container.scene as Phaser.Scene;
+    scene.tweens.add({
+      targets: this.container,
+      scale: 1,
+      alpha: 1,
+      duration: 200,
+      ease: 'Back.easeOut',
+    });
+
+    this.drawBackground();
+  }
+
+  private hide(): void {
+    if (!this.isVisible) return;
+    this.isVisible = false;
+
+    const scene = this.container.scene as Phaser.Scene;
+    scene.tweens.add({
+      targets: this.container,
+      scale: 0.8,
+      alpha: 0,
+      duration: 150,
+      ease: 'Power2',
+      onComplete: () => this.container.setVisible(false),
+    });
+  }
+
+  private drawBackground(): void {
+    this.bg.clear();
+
+    const padding = 20;
+    const width = Math.max(
+      this.promptText.width,
+      this.playerText.width
+    ) + padding * 2;
+    const height = 60;
+
+    // 半透明背景
+    this.bg.fillStyle(0x1f2937, 0.9);
+    this.bg.fillRoundedRect(-width / 2, -height / 2, width, height, 10);
+
+    // 边框
+    this.bg.lineStyle(2, 0xfbbf24, 0.6);
+    this.bg.strokeRoundedRect(-width / 2, -height / 2, width, height, 10);
+  }
+
+  private formatSchema(schema: CommandSchema): string {
+    // 格式化命令 schema 为可读字符串
+    const params = schema.params.map(p => {
+      return p.variadic ? `<${p.name}...>` : `<${p.name}>`;
+    }).join(' ');
+
+    return `${schema.name} ${params}`;
+  }
+
+  destroy(): void {
+    this.bg.destroy();
+    this.promptText.destroy();
+    this.playerText.destroy();
+    this.container.destroy();
+  }
+}

packages/regicide-game/src/scenes/views/index.ts

@@ -0,0 +1,5 @@
+export { CardView, CARD_WIDTH, CARD_HEIGHT } from './CardView';
+export { EnemyView } from './EnemyView';
+export { HandContainer } from './HandContainer';
+export { GameUI } from './GameUI';
+export { PromptDisplay } from './PromptDisplay';