hypercross
/
boardgame-phaser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: simplify scene routing

This commit is contained in:
hyper 2026-04-12 17:21:49 +08:00
parent 50531446c2
commit 713a14c128
3 changed files with 16 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/sample-game/src/main.tsx
View File

@ -1,13 +1,11 @@
import { h } from 'preact'; import { h } from 'preact';
import { GameUI } from 'boardgame-phaser'; import { GameUI } from 'boardgame-phaser';
import * as gameModule from './game/tic-tac-toe';
import './style.css'; import './style.css';
import App from "@/ui/App"; import App from "@/ui/App";
import {GameScene} from "@/scenes/GameScene";
const ui = new GameUI({ const ui = new GameUI({
container: document.getElementById('ui-root')!, container: document.getElementById('ui-root')!,
root: <App gameModule={gameModule} gameScene={GameScene}/>, root: <App/>,
}); });
ui.mount(); ui.mount();

3
packages/sample-game/src/scenes/MenuScene.ts
View File

@ -79,7 +79,6 @@ export class MenuScene extends ReactiveScene {
} }
private async startGame(): Promise<void> { private async startGame(): Promise<void> {
const data = this.initData as unknown as Record<string, unknown>; await this.sceneController.launch('GameScene');
await this.sceneController.launch('GameScene', data);
} }
} }

36
packages/sample-game/src/ui/App.tsx
View File

@ -1,35 +1,27 @@
import {useComputed, useSignalEffect} from '@preact/signals'; import { createGameHost } from 'boardgame-core';
import { createGameHost, type GameModule } from 'boardgame-core';
import { h } from 'preact'; import { h } from 'preact';
import {PhaserGame, PhaserScene, ReactiveScene, phaserContext} from 'boardgame-phaser'; import {PhaserGame, PhaserScene } from 'boardgame-phaser';
import {useContext} from 'preact/hooks';
import {MenuScene} from "@/scenes/MenuScene"; import {MenuScene} from "@/scenes/MenuScene";
import {useMemo} from "preact/hooks";
import * as gameModule from '../game/tic-tac-toe';
import {GameScene} from "@/scenes/GameScene";
export default function App<TState extends Record<string, unknown>>(props: { gameModule: GameModule<TState>, gameScene: { new(): ReactiveScene } }) { export default function App() {
const gameHost = useComputed(() => { const gameHost = useMemo(() => {
const gameHost = createGameHost(props.gameModule); const gameHost = createGameHost(gameModule);
return { gameHost }; return { gameHost };
}); }, []);
const gameScene = useComputed(() => new props.gameScene()); const gameScene = useMemo(() => new GameScene(), []);
const menuScene = useComputed(() => new MenuScene()); const menuScene = useMemo(() => new MenuScene(), []);
// 自动启动菜单场景
const phaserSignal = useContext(phaserContext);
useSignalEffect(() => {
const ctx = phaserSignal?.value;
if (ctx?.sceneController) {
ctx.sceneController.launch('MenuScene', { gameHost: gameHost.value });
}
});
return ( return (
<div className="flex flex-col h-screen"> <div className="flex flex-col h-screen">
<div className="flex-1 flex relative justify-center items-center"> <div className="flex-1 flex relative justify-center items-center">
<PhaserGame> <PhaserGame initialScene="MenuScene">
<PhaserScene sceneKey="MenuScene" scene={menuScene.value} /> <PhaserScene sceneKey="MenuScene" scene={menuScene} />
<PhaserScene sceneKey="GameScene" scene={gameScene.value} /> <PhaserScene sceneKey="GameScene" scene={gameScene} data={gameHost}/>
</PhaserGame> </PhaserGame>
</div> </div>
</div> </div>