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 type { GameHost } from 'boardgame-core';
import { ReactiveScene, type ReactiveScenePhaserData } from './ReactiveScene'; import { ReactiveScene } from './ReactiveScene';
export interface GameHostSceneOptions<TState extends Record<string, unknown>> { export interface GameHostSceneOptions<TState extends Record<string, unknown>> {
gameHost: GameHost<TState>; gameHost: GameHost<TState>;

View File

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

View File

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

View File

@ -86,8 +86,7 @@ export class GameScene extends GameHostScene<TicTacToeState> {
} }
private async goToMenu(): Promise<void> { private async goToMenu(): Promise<void> {
const data = this.initData as unknown as Record<string, unknown>; await this.sceneController.launch('MenuScene');
await this.sceneController.launch('MenuScene', data);
} }
private setupInput(): void { 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 {PhaserGame, PhaserScene } from 'boardgame-phaser';
import {MenuScene} from "@/scenes/MenuScene"; import {MenuScene} from "@/scenes/MenuScene";
import {useMemo} from "preact/hooks"; import {useMemo} from "preact/hooks";
import * as gameModule from '../game/tic-tac-toe'; import * as gameModule from '../game/tic-tac-toe';
import {GameScene} from "@/scenes/GameScene"; import {GameScene} from "@/scenes/GameScene";
import {createGameHost} from "boardgame-core";
export default function App() { export default function App() {
const gameHost = useMemo(() => createGameHost(gameModule), []);
const gameHost = useMemo(() => {
const gameHost = createGameHost(gameModule);
return { gameHost };
}, []);
const gameScene = useMemo(() => new GameScene(), []); const gameScene = useMemo(() => new GameScene(), []);
const menuScene = useMemo(() => new MenuScene(), []); const menuScene = useMemo(() => new MenuScene(), []);
@ -21,7 +16,7 @@ export default function App() {
<div className="flex-1 flex relative justify-center items-center"> <div className="flex-1 flex relative justify-center items-center">
<PhaserGame initialScene="MenuScene"> <PhaserGame initialScene="MenuScene">
<PhaserScene sceneKey="MenuScene" scene={menuScene} /> <PhaserScene sceneKey="MenuScene" scene={menuScene} />
<PhaserScene sceneKey="GameScene" scene={gameScene} data={gameHost}/> <PhaserScene sceneKey="GameScene" scene={gameScene} data={{gameHost}}/>
</PhaserGame> </PhaserGame>
</div> </div>
</div> </div>