refactor: boop to use new api

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

@@ -1,38 +1,25 @@
-import {useComputed} from '@preact/signals';
-import { createGameHost, type GameModule } from 'boardgame-core';
-import Phaser from 'phaser';
 import { h } from 'preact';
-import { PhaserGame, PhaserScene } from 'boardgame-phaser';
+import {PhaserGame, PhaserScene } from 'boardgame-phaser';
+import {MenuScene} from "@/scenes/MenuScene";
+import {useMemo} from "preact/hooks";
+import * as gameModule from '../game';
+import {GameScene} from "@/scenes/GameScene";
+import {createGameHost, type GameModule} from "boardgame-core";
+import type {BoopState} from "@/game";
 
-export default function App<TState extends Record<string, unknown>>(props: { gameModule: GameModule<TState>, gameScene: { new(): Phaser.Scene } }) {
-
-    const gameHost = useComputed(() => {
-        const gameHost = createGameHost(props.gameModule);
-        return { gameHost };
-    });
-
-    const scene = useComputed(() => new props.gameScene());
-
-    const handleReset = async () => {
-        gameHost.value.gameHost.start();
-    };
-    const label = useComputed(() => gameHost.value.gameHost.status.value === 'running' ? 'Restart' : 'Start');
+export default function App() {
+    const gameHost = useMemo(() => createGameHost(gameModule as unknown as GameModule<BoopState>), []);
+    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 config={{ width: 640, height: 750 }}>
-                    <PhaserScene sceneKey="GameScene" scene={scene.value} autoStart data={gameHost.value} />
+                <PhaserGame initialScene="MenuScene" config={{ width: 640, height: 720 }}>
+                    <PhaserScene sceneKey="MenuScene" scene={menuScene} />
+                    <PhaserScene sceneKey="GameScene" scene={gameScene} data={{gameHost}}/>
                 </PhaserGame>
             </div>
-            <div className="p-4 bg-gray-100 border-t border-gray-200">
-                <button
-                    onClick={handleReset}
-                    className="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
-                >
-                    {label}
-                </button>
-            </div>
         </div>
     );
 }