refactor: simplify scene routing

packages/sample-game/src/main.tsx

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

packages/sample-game/src/scenes/MenuScene.ts

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

packages/sample-game/src/ui/App.tsx

@@ -1,35 +1,27 @@
-import {useComputed, useSignalEffect} from '@preact/signals';
-import { createGameHost, type GameModule } from 'boardgame-core';
+import { createGameHost } from 'boardgame-core';
 import { h } from 'preact';
-import {PhaserGame, PhaserScene, ReactiveScene, phaserContext} from 'boardgame-phaser';
-import {useContext} from 'preact/hooks';
+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";
 
-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 = createGameHost(props.gameModule);
+    const gameHost = useMemo(() => {
+        const gameHost = createGameHost(gameModule);
         return { gameHost };
-    });
+    }, []);
 
-    const gameScene = useComputed(() => new props.gameScene());
-    const menuScene = useComputed(() => new MenuScene());
-
-    // 自动启动菜单场景
-    const phaserSignal = useContext(phaserContext);
-    useSignalEffect(() => {
-        const ctx = phaserSignal?.value;
-        if (ctx?.sceneController) {
-            ctx.sceneController.launch('MenuScene', { gameHost: gameHost.value });
-        }
-    });
+    const gameScene = useMemo(() => new GameScene(), []);
+    const menuScene = useMemo(() => new MenuScene(), []);
 
     return (
         <div className="flex flex-col h-screen">
             <div className="flex-1 flex relative justify-center items-center">
-                <PhaserGame>
-                    <PhaserScene sceneKey="MenuScene" scene={menuScene.value} />
-                    <PhaserScene sceneKey="GameScene" scene={gameScene.value} />
+                <PhaserGame initialScene="MenuScene">
+                    <PhaserScene sceneKey="MenuScene" scene={menuScene} />
+                    <PhaserScene sceneKey="GameScene" scene={gameScene} data={gameHost}/>
                 </PhaserGame>
             </div>
         </div>