refactor: api
This commit is contained in:
parent
713a14c128
commit
fe57583a8f
|
|
@ -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>;
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
@ -132,7 +143,7 @@ export function PhaserScene<TData extends Record<string, unknown> = {}>(props: P
|
|||
game.scene.add(props.sceneKey, props.scene, false, initData);
|
||||
}
|
||||
sceneSignal.value = props.scene;
|
||||
|
||||
|
||||
return () => {
|
||||
sceneSignal.value = undefined;
|
||||
// 不在这里移除场景,让 SceneController 管理生命周期
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue