refactor: fix onitama api usage

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

@@ -1,41 +1,23 @@
-import {useComputed} from '@preact/signals';
-import { createGameHost } 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/onitama';
+import {OnitamaScene} from "@/scenes/OnitamaScene";
+import {createGameHost, type GameModule} from "boardgame-core";
+import type {OnitamaState} from "@/game/onitama";
 
-export default function App(props: { gameModule: any, gameScene: { new(): Phaser.Scene } }) {
-
-    const gameHost = useComputed(() => {
-        const gameHost = createGameHost(props.gameModule);
-        return { gameHost };
-    });
-
-    const scene = useComputed(() => new props.gameScene());
-
-    const handleReset = () => {
-        gameHost.value.gameHost.start();
-    };
-    const label = useComputed(() => gameHost.value.gameHost.status.value === 'running' ? 'Restart' : 'Start');
-
-    const phaserConfig: Partial<Phaser.Types.Core.GameConfig> = {
-        width: 700,
-        height: 800,
-    };
+export default function App() {
+    const gameHost = useMemo(() => createGameHost(gameModule as unknown as GameModule<OnitamaState>), []);
+    const gameScene = useMemo(() => new OnitamaScene(), []);
+    const menuScene = useMemo(() => new MenuScene(), []);
 
     return (
         <div className="flex flex-col h-screen">
-            <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 className="flex-1 flex relative justify-center items-center">
-                <PhaserGame config={phaserConfig}>
-                    <PhaserScene sceneKey="OnitamaScene" scene={scene.value} autoStart data={gameHost.value} />
+                <PhaserGame initialScene="MenuScene">
+                    <PhaserScene sceneKey="MenuScene" scene={menuScene} />
+                    <PhaserScene sceneKey="OnitamaScene" scene={gameScene} data={{gameHost}}/>
                 </PhaserGame>
             </div>
         </div>