boardgame-phaser/packages/framework/src/ui/PhaserBridge.tsx

import Phaser from 'phaser';
import { signal, useSignal, useSignalEffect, type Signal } from '@preact/signals';
import { createContext, h } from 'preact';
import { useContext } from 'preact/hooks';

export const phaserContext = createContext<Signal<Phaser.Game | undefined>>(signal(undefined));

export const defaultPhaserConfig: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    width: 560,
    height: 560,
    parent: 'phaser-container',
    backgroundColor: '#f9fafb',
    scene: [],
};

export interface PhaserGameProps {
    config?: Partial<Phaser.Types.Core.GameConfig>;
    children?: any;
}

export function PhaserGame(props: PhaserGameProps) {
    const gameSignal = useSignal<Phaser.Game>();

    useSignalEffect(() => {
        const phaserGame = new Phaser.Game(props.config || defaultPhaserConfig);
        gameSignal.value = phaserGame;

        return () => {
            gameSignal.value = undefined;
            phaserGame.destroy(true);
        };
    });

    return (
        <div id="phaser-container" className="w-full h-full">
            <phaserContext.Provider value={gameSignal}>
                {props.children}
            </phaserContext.Provider>
        </div>
    );
}

export interface PhaserSceneProps {
    sceneKey: string;
    scene: Phaser.Scene;
    autoStart: boolean;
    data?: object;
}

export function PhaserScene(props: PhaserSceneProps) {
    const context = useContext(phaserContext);

    useSignalEffect(() => {
        const game = context.value;
        if (!game) return;

        game.scene.add(props.sceneKey, props.scene, props.autoStart, props.data);
        return () => {
            game.scene.remove(props.sceneKey);
        };
    });

    return null;
}