boardgame-phaser/packages/sts-like-viewer/src/scenes/IndexScene.ts

84 lines
1.9 KiB
TypeScript

import Phaser from "phaser";
import { ReactiveScene } from "boardgame-phaser";
import { createButton } from "@/utils/createButton";
import { UI_CONFIG } from "@/config";
import { SceneKey } from "./types";
export class IndexScene extends ReactiveScene {
constructor() {
super("IndexScene");
}
create(): void {
super.create();
const { width, height } = this.scale;
const centerX = width / 2;
const centerY = height / 2;
// Title
this.add
.text(centerX, centerY - 150, "Slay-the-Spire-Like Viewer", {
fontSize: "36px",
color: "#ffffff",
fontStyle: "bold",
})
.setOrigin(0.5);
// Subtitle
this.add
.text(centerX, centerY - 100, "Choose a viewer to explore:", {
fontSize: "18px",
color: "#aaaaaa",
})
.setOrigin(0.5);
// Buttons
const buttons: {
label: string;
scene: SceneKey;
y: number;
}[] = [
{ label: "Combat Test", scene: SceneKey.CombatTestScene, y: centerY },
{ label: "Map Viewer", scene: SceneKey.MapViewerScene, y: centerY + 70 },
{
label: "Grid Inventory Viewer",
scene: SceneKey.GridViewerScene,
y: centerY + 140,
},
{
label: "Shape Viewer",
scene: SceneKey.ShapeViewerScene,
y: centerY + 210,
},
{
label: "Inventory Test",
scene: SceneKey.InventoryTestScene,
y: centerY + 280,
},
];
for (const btn of buttons) {
this.createButton(btn.label, btn.scene, centerX, btn.y);
}
}
private createButton(
label: string,
targetScene: SceneKey,
x: number,
y: number,
): void {
createButton({
scene: this,
label,
x,
y,
width: UI_CONFIG.BUTTON_WIDTH_LARGE,
height: UI_CONFIG.BUTTON_HEIGHT_LARGE,
onClick: async () => {
await this.sceneController.launch(targetScene);
},
});
}
}