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

import {useComputed } from '@preact/signals';
import { createGameHost, GameModule } from "boardgame-core";
import Phaser from "phaser";
import {h} from "preact";
import {PhaserGame, PhaserScene} from "@/ui/PhaserGame";

export default function App<T extends Record<string, unknown>>(props: { gameModule: GameModule<T>, gameScene: {new(): Phaser.Scene} }) {
    
    const gameHost = useComputed(() => {
        const gameHost = createGameHost(props.gameModule);
        gameHost.setup('setup');
        return {
            gameHost
        }
    });
    
    const scene = useComputed(() => new props.gameScene());
    
    return (
        <div className="flex flex-col h-screen">
            <div className="flex-1 relative">
                <PhaserGame>
                    <PhaserScene sceneKey="GameScene" scene={scene.value} autoStart data={gameHost.value}/>
                </PhaserGame>
            </div>
        </div>
    );
}