refactor: api

This commit is contained in:
hyper 2026-04-12 17:29:02 +08:00
parent 713a14c128
commit fe57583a8f
5 changed files with 26 additions and 21 deletions

View File

@ -1,5 +1,5 @@
import type { GameHost } from 'boardgame-core';
import { ReactiveScene, type ReactiveScenePhaserData } from './ReactiveScene';
import { ReactiveScene } from './ReactiveScene';
export interface GameHostSceneOptions<TState extends Record<string, unknown>> {
gameHost: GameHost<TState>;

View File

@ -6,7 +6,7 @@ type CleanupFn = void | (() => void);
// 前向声明,避免循环导入
export interface SceneController {
launch(sceneKey: string, data?: Record<string, unknown>): Promise<void>;
launch(sceneKey: string): Promise<void>;
currentScene: ReadonlySignal<string | null>;
isTransitioning: ReadonlySignal<boolean>;
}

View File

@ -1,14 +1,14 @@
import Phaser from 'phaser';
import { computed, signal, useSignal, useSignalEffect } from '@preact/signals';
import { signal, useSignal, useSignalEffect } from '@preact/signals';
import { createContext, h } from 'preact';
import { useContext } from 'preact/hooks';
import {ReadonlySignal} from "@preact/signals-core";
import type { ReactiveScene, ReactiveScenePhaserData } from '../scenes';
import type { ReactiveScene } from '../scenes';
import { FadeScene as FadeSceneClass, FADE_SCENE_KEY } from '../scenes/FadeScene';
export interface SceneController {
/** 启动场景(带淡入淡出过渡) */
launch(sceneKey: string, data?: Record<string, unknown>): Promise<void>;
launch(sceneKey: string): Promise<void>;
/** 当前活跃场景 key */
currentScene: ReadonlySignal<string | null>;
/** 是否正在过渡 */
@ -33,12 +33,14 @@ export const defaultPhaserConfig: Phaser.Types.Core.GameConfig = {
export interface PhaserGameProps {
config?: Partial<Phaser.Types.Core.GameConfig>;
/** 初始启动的场景 key */
initialScene?: string;
children?: any;
}
export function PhaserGame(props: PhaserGameProps) {
const gameSignal = useSignal<PhaserGameContext>({ game: undefined!, sceneController: undefined! });
const registeredScenes = useSignal<Map<string, ReactiveScene>>(new Map());
const initialSceneLaunched = useSignal(false);
useSignalEffect(() => {
const config: Phaser.Types.Core.GameConfig = {
@ -56,7 +58,7 @@ export function PhaserGame(props: PhaserGameProps) {
const isTransitioning = signal(false);
const sceneController: SceneController = {
async launch(sceneKey: string, data?: Record<string, unknown>) {
async launch(sceneKey: string) {
if (isTransitioning.value) {
console.warn('SceneController: 正在进行场景切换');
return;
@ -74,7 +76,7 @@ export function PhaserGame(props: PhaserGameProps) {
}
// 启动新场景
phaserGame.scene.start(sceneKey, data);
phaserGame.scene.start(sceneKey);
currentScene.value = sceneKey;
// 淡入
@ -89,11 +91,20 @@ export function PhaserGame(props: PhaserGameProps) {
return () => {
gameSignal.value = { game: undefined!, sceneController: undefined! };
registeredScenes.value.clear();
initialSceneLaunched.value = false;
phaserGame.destroy(true);
};
});
// 启动初始场景
useSignalEffect(() => {
const ctx = gameSignal.value;
if (!initialSceneLaunched.value && props.initialScene && ctx?.sceneController) {
initialSceneLaunched.value = true;
ctx.sceneController.launch(props.initialScene);
}
});
return (
<div id="phaser-container" className="w-full h-full">
<phaserContext.Provider value={gameSignal}>

View File

@ -86,8 +86,7 @@ export class GameScene extends GameHostScene<TicTacToeState> {
}
private async goToMenu(): Promise<void> {
const data = this.initData as unknown as Record<string, unknown>;
await this.sceneController.launch('MenuScene', data);
await this.sceneController.launch('MenuScene');
}
private setupInput(): void {

View File

@ -1,18 +1,13 @@
import { createGameHost } from 'boardgame-core';
import { h } from 'preact';
import { h } from 'preact';
import {PhaserGame, PhaserScene } from 'boardgame-phaser';
import {MenuScene} from "@/scenes/MenuScene";
import {useMemo} from "preact/hooks";
import * as gameModule from '../game/tic-tac-toe';
import {GameScene} from "@/scenes/GameScene";
import {createGameHost} from "boardgame-core";
export default function App() {
const gameHost = useMemo(() => {
const gameHost = createGameHost(gameModule);
return { gameHost };
}, []);
const gameHost = useMemo(() => createGameHost(gameModule), []);
const gameScene = useMemo(() => new GameScene(), []);
const menuScene = useMemo(() => new MenuScene(), []);
@ -21,7 +16,7 @@ export default function App() {
<div className="flex-1 flex relative justify-center items-center">
<PhaserGame initialScene="MenuScene">
<PhaserScene sceneKey="MenuScene" scene={menuScene} />
<PhaserScene sceneKey="GameScene" scene={gameScene} data={gameHost}/>
<PhaserScene sceneKey="GameScene" scene={gameScene} data={{gameHost}}/>
</PhaserGame>
</div>
</div>