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

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

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: 800,
        height: 700,
    };

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