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

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';

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.setup('setup');
    };
    const label = useComputed(() => gameHost.value.gameHost.status.value === 'running' ? 'Restart' : 'Start');

    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 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>
    );
}