feat(sts-viewer): implement card spawning and combat interaction
Add `CardContainer` and `CardSpawner` to handle visual representation of cards in the hand. Refactor `CombatTestScene` to use `GameHostScene` and implement card selection/targeting logic for combat simulation.
This commit is contained in:
@@ -1,17 +1,27 @@
|
||||
import { ReactiveScene } from "boardgame-phaser";
|
||||
import Phaser from "phaser";
|
||||
import { GameHostScene } from "boardgame-phaser";
|
||||
import { spawnEffect, type Spawner } from "boardgame-phaser";
|
||||
import { mutableSignal } from "boardgame-core";
|
||||
import { type CombatState } from "boardgame-core/samples/slay-the-spire-like";
|
||||
import { createCombatState } from "@/state/combatState";
|
||||
import {
|
||||
type CombatState,
|
||||
prompts,
|
||||
} from "boardgame-core/samples/slay-the-spire-like";
|
||||
import { createButton } from "@/utils/createButton";
|
||||
import { SceneKey } from "./types";
|
||||
import {
|
||||
CombatUnitContainer,
|
||||
type CombatUnitData,
|
||||
} from "@/gameobjects/CombatUnitContainer";
|
||||
import { CardSpawner } from "@/gameobjects/CardSpawner";
|
||||
|
||||
export class CombatTestScene extends ReactiveScene {
|
||||
private combatSignal = mutableSignal<CombatState | null>(null);
|
||||
const CARD_SPACING = 160;
|
||||
const HAND_MARGIN = 100;
|
||||
const HAND_Y = 140;
|
||||
|
||||
export class CombatTestScene extends GameHostScene<CombatState> {
|
||||
private selectedCardId: string | null = null;
|
||||
private isTargeting = false;
|
||||
private targetingText!: Phaser.GameObjects.Text;
|
||||
private selectionRect!: Phaser.GameObjects.Rectangle;
|
||||
|
||||
constructor() {
|
||||
super("CombatTestScene");
|
||||
@@ -19,90 +29,75 @@ export class CombatTestScene extends ReactiveScene {
|
||||
|
||||
create(): void {
|
||||
super.create();
|
||||
|
||||
const { width, height } = this.scale;
|
||||
|
||||
const module = createCombatState();
|
||||
this.combatSignal.value = module.createInitialState();
|
||||
|
||||
// Title
|
||||
this.add
|
||||
.text(width / 2, 30, "Combat State Test", {
|
||||
.text(width / 2, 30, "Combat Test — Card Play", {
|
||||
fontSize: "24px",
|
||||
color: "#ffffff",
|
||||
fontStyle: "bold",
|
||||
})
|
||||
.setOrigin(0.5);
|
||||
|
||||
this.add
|
||||
.text(width / 2, 60, "Player & Enemies with Buffs / HP", {
|
||||
// Info text (reactive)
|
||||
const infoText = this.add
|
||||
.text(width / 2, 60, "", {
|
||||
fontSize: "14px",
|
||||
color: "#aaaaaa",
|
||||
})
|
||||
.setOrigin(0.5);
|
||||
|
||||
const unitSpawner: Spawner<CombatUnitData, CombatUnitContainer> = {
|
||||
getData: () => this.generateUnitData(),
|
||||
getKey: (t) => t.key,
|
||||
onSpawn: (t) => this.spawnUnit(t, width, height),
|
||||
onUpdate: (t, obj) => obj.updateFromData(t),
|
||||
onDespawn: (obj) => obj.destroy(),
|
||||
};
|
||||
|
||||
const disposeSpawner = spawnEffect(unitSpawner);
|
||||
this.disposables.add(disposeSpawner);
|
||||
|
||||
this.createControls(width, height);
|
||||
}
|
||||
|
||||
private generateUnitData(): CombatUnitData[] {
|
||||
const combat = this.combatSignal.value;
|
||||
if (!combat) return [];
|
||||
|
||||
const units: CombatUnitData[] = [
|
||||
{
|
||||
key: "player",
|
||||
entity: combat.player,
|
||||
name: "Player",
|
||||
isPlayer: true,
|
||||
},
|
||||
];
|
||||
|
||||
combat.enemies.forEach((enemy, i) => {
|
||||
units.push({
|
||||
key: `enemy-${i}`,
|
||||
entity: enemy,
|
||||
name: enemy.enemy.name,
|
||||
isPlayer: false,
|
||||
});
|
||||
this.addEffect(() => {
|
||||
const s = this.state;
|
||||
infoText.setText(
|
||||
`Turn ${s.turnNumber} | Phase: ${s.phase} | Energy: ${s.player.energy}/${s.player.maxEnergy}`,
|
||||
);
|
||||
});
|
||||
|
||||
return units;
|
||||
}
|
||||
// Targeting indicator
|
||||
this.targetingText = this.add
|
||||
.text(width / 2, height - 220, "", {
|
||||
fontSize: "18px",
|
||||
color: "#fbbf24",
|
||||
fontStyle: "bold",
|
||||
})
|
||||
.setOrigin(0.5)
|
||||
.setAlpha(0);
|
||||
|
||||
private spawnUnit(
|
||||
t: CombatUnitData,
|
||||
width: number,
|
||||
height: number,
|
||||
): CombatUnitContainer | null {
|
||||
const combat = this.combatSignal.value;
|
||||
if (!combat) return null;
|
||||
// Selection rectangle overlay for selected card
|
||||
this.selectionRect = this.add
|
||||
.rectangle(0, 0, 150, 210, 0x000000, 0)
|
||||
.setStrokeStyle(4, 0xfbbf24)
|
||||
.setAlpha(0)
|
||||
.setDepth(50);
|
||||
|
||||
const totalUnits = 1 + combat.enemies.length;
|
||||
const spacing = 220;
|
||||
const totalWidth = (totalUnits - 1) * spacing;
|
||||
const startX = width / 2 - totalWidth / 2;
|
||||
// Unit spawner (player + enemies)
|
||||
this.disposables.add(spawnEffect(new UnitSpawner(this)));
|
||||
|
||||
let x = startX;
|
||||
if (t.key.startsWith("enemy-")) {
|
||||
const index = parseInt(t.key.replace("enemy-", ""), 10);
|
||||
x = startX + (index + 1) * spacing;
|
||||
}
|
||||
// Card spawner (hand)
|
||||
this.disposables.add(
|
||||
spawnEffect(
|
||||
new CardSpawner(
|
||||
this,
|
||||
() => this.state,
|
||||
(cardId) => this.onCardClick(cardId),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
const container = new CombatUnitContainer(this, x, height / 2, t);
|
||||
container.playSpawnEffect();
|
||||
return container;
|
||||
}
|
||||
// Watch hand changes to clear stale selection
|
||||
this.addEffect(() => {
|
||||
const handIds = this.state.player.deck.regions.hand.childIds;
|
||||
if (this.selectedCardId && !handIds.includes(this.selectedCardId)) {
|
||||
this.clearTargeting();
|
||||
} else {
|
||||
this.updateSelectionRect();
|
||||
}
|
||||
});
|
||||
|
||||
private createControls(width: number, height: number): void {
|
||||
// Controls
|
||||
createButton({
|
||||
scene: this,
|
||||
label: "返回菜单",
|
||||
@@ -115,69 +110,163 @@ export class CombatTestScene extends ReactiveScene {
|
||||
|
||||
createButton({
|
||||
scene: this,
|
||||
label: "Damage Player",
|
||||
x: width - 520,
|
||||
y: height - 40,
|
||||
onClick: () => {
|
||||
this.combatSignal.produce((draft) => {
|
||||
if (!draft) return;
|
||||
draft.player.hp = Math.max(0, draft.player.hp - 5);
|
||||
if (draft.player.hp <= 0) draft.player.isAlive = false;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
createButton({
|
||||
scene: this,
|
||||
label: "Damage Enemy",
|
||||
x: width - 380,
|
||||
y: height - 40,
|
||||
onClick: () => {
|
||||
this.combatSignal.produce((draft) => {
|
||||
if (!draft) return;
|
||||
const enemy = draft.enemies[0];
|
||||
if (enemy) {
|
||||
enemy.hp = Math.max(0, enemy.hp - 5);
|
||||
if (enemy.hp <= 0) enemy.isAlive = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
createButton({
|
||||
scene: this,
|
||||
label: "Heal Player",
|
||||
x: width - 240,
|
||||
y: height - 40,
|
||||
onClick: () => {
|
||||
this.combatSignal.produce((draft) => {
|
||||
if (!draft) return;
|
||||
draft.player.hp = Math.min(draft.player.maxHp, draft.player.hp + 5);
|
||||
if (draft.player.hp > 0) draft.player.isAlive = true;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
createButton({
|
||||
scene: this,
|
||||
label: "Add Buff",
|
||||
label: "End Turn",
|
||||
x: width - 100,
|
||||
y: height - 40,
|
||||
y: 40,
|
||||
onClick: () => {
|
||||
this.combatSignal.produce((draft) => {
|
||||
if (!draft) return;
|
||||
const current = draft.player.effects["strength"];
|
||||
draft.player.effects["strength"] = {
|
||||
data: {
|
||||
id: "strength",
|
||||
name: "Strength",
|
||||
description: "Deal +1 damage per stack",
|
||||
lifecycle: "temporary",
|
||||
},
|
||||
stacks: (current?.stacks ?? 0) + 1,
|
||||
};
|
||||
});
|
||||
this.tryPlayCard("end-turn");
|
||||
},
|
||||
});
|
||||
|
||||
// Start the game loop
|
||||
this.gameHost.start();
|
||||
}
|
||||
|
||||
private onCardClick(cardId: string): void {
|
||||
const state = this.state;
|
||||
const card = state.player.deck.cards[cardId];
|
||||
if (!card) return;
|
||||
|
||||
const targetType = card.cardData.targetType;
|
||||
|
||||
if (targetType === "single") {
|
||||
this.selectedCardId = cardId;
|
||||
this.isTargeting = true;
|
||||
this.targetingText.setText("Select a target!");
|
||||
this.targetingText.setAlpha(1);
|
||||
this.updateSelectionRect();
|
||||
} else {
|
||||
this.tryPlayCard(cardId);
|
||||
}
|
||||
}
|
||||
|
||||
public onEnemyClick(enemyId: string): void {
|
||||
if (!this.isTargeting || !this.selectedCardId) return;
|
||||
this.tryPlayCard(this.selectedCardId, enemyId);
|
||||
}
|
||||
|
||||
public getIsTargeting(): boolean {
|
||||
return this.isTargeting;
|
||||
}
|
||||
|
||||
private tryPlayCard(cardId: string, targetId?: string): void {
|
||||
const error = this.gameHost.tryAnswerPrompt(
|
||||
prompts.mainAction,
|
||||
cardId,
|
||||
targetId,
|
||||
);
|
||||
if (error) {
|
||||
console.warn("Play failed:", error);
|
||||
}
|
||||
this.clearTargeting();
|
||||
}
|
||||
|
||||
private clearTargeting(): void {
|
||||
this.selectedCardId = null;
|
||||
this.isTargeting = false;
|
||||
this.targetingText.setAlpha(0);
|
||||
this.selectionRect.setAlpha(0);
|
||||
}
|
||||
|
||||
private updateSelectionRect(): void {
|
||||
if (!this.selectedCardId) {
|
||||
this.selectionRect.setAlpha(0);
|
||||
return;
|
||||
}
|
||||
|
||||
const state = this.state;
|
||||
const handIds = state.player.deck.regions.hand.childIds;
|
||||
const index = handIds.indexOf(this.selectedCardId);
|
||||
if (index === -1) {
|
||||
this.selectionRect.setAlpha(0);
|
||||
return;
|
||||
}
|
||||
|
||||
const { width, height } = this.scale;
|
||||
const total = handIds.length;
|
||||
const spacing = Math.min(
|
||||
CARD_SPACING,
|
||||
(width - HAND_MARGIN * 2) / Math.max(1, total),
|
||||
);
|
||||
const startX = width / 2 - ((total - 1) * spacing) / 2;
|
||||
const x = startX + index * spacing;
|
||||
const y = height - HAND_Y;
|
||||
|
||||
this.selectionRect.setPosition(x, y);
|
||||
this.selectionRect.setAlpha(1);
|
||||
}
|
||||
}
|
||||
|
||||
class UnitSpawner implements Spawner<CombatUnitData, CombatUnitContainer> {
|
||||
constructor(private scene: CombatTestScene) {}
|
||||
|
||||
*getData(): Iterable<CombatUnitData> {
|
||||
const state = this.scene.state;
|
||||
yield {
|
||||
key: "player",
|
||||
entity: state.player,
|
||||
name: "Player",
|
||||
isPlayer: true,
|
||||
};
|
||||
for (let i = 0; i < state.enemies.length; i++) {
|
||||
const enemy = state.enemies[i];
|
||||
yield {
|
||||
key: `enemy-${i}`,
|
||||
entity: enemy,
|
||||
name: enemy.enemy.name,
|
||||
isPlayer: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
getKey(t: CombatUnitData): string {
|
||||
return t.key;
|
||||
}
|
||||
|
||||
onSpawn(t: CombatUnitData): CombatUnitContainer {
|
||||
const { width, height } = this.scene.scale;
|
||||
const state = this.scene.state;
|
||||
const totalUnits = 1 + state.enemies.length;
|
||||
const spacing = 220;
|
||||
const totalWidth = (totalUnits - 1) * spacing;
|
||||
const startX = width / 2 - totalWidth / 2;
|
||||
|
||||
let x = startX;
|
||||
if (t.key.startsWith("enemy-")) {
|
||||
const index = parseInt(t.key.replace("enemy-", ""), 10);
|
||||
x = startX + (index + 1) * spacing;
|
||||
}
|
||||
|
||||
const container = new CombatUnitContainer(
|
||||
this.scene,
|
||||
x,
|
||||
height / 2 - 80,
|
||||
t,
|
||||
);
|
||||
container.playSpawnEffect();
|
||||
|
||||
// Make enemies clickable when targeting
|
||||
if (!t.isPlayer) {
|
||||
const hitArea = new Phaser.Geom.Rectangle(-100, -130, 200, 260);
|
||||
container.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains);
|
||||
if (container.input) {
|
||||
container.input.cursor = "pointer";
|
||||
}
|
||||
container.on("pointerdown", () => {
|
||||
if (this.scene.getIsTargeting()) {
|
||||
this.scene.onEnemyClick(t.entity.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
onUpdate(t: CombatUnitData, obj: CombatUnitContainer): void {
|
||||
obj.updateFromData(t);
|
||||
}
|
||||
|
||||
onDespawn(obj: CombatUnitContainer): void {
|
||||
obj.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user