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/onitama';
import {OnitamaScene} from "@/scenes/OnitamaScene";
import {createGameHost, type GameModule} from "boardgame-core";
import type {OnitamaState} from "@/game/onitama";

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="flex-1 flex relative justify-center items-center">
                <PhaserGame initialScene="MenuScene">
                    <PhaserScene sceneKey="MenuScene" scene={menuScene} />
                    <PhaserScene sceneKey="OnitamaScene" scene={gameScene} data={{gameHost}}/>
                </PhaserGame>
            </div>
        </div>
    );
}