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

26 lines
1.1 KiB
TypeScript

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