77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
|
import { h, render } from 'preact';
|
||
|
|
import { signal } from '@preact/signals-core';
|
||
|
|
import Phaser from 'phaser';
|
||
|
|
import { createGameContext } from 'boardgame-core';
|
||
|
|
import { GameUI, PromptDialog, CommandLog } from 'boardgame-phaser';
|
||
|
|
import { createInitialState, registry, type TicTacToeState } from './game/tic-tac-toe';
|
||
|
|
import { GameScene, type GameSceneData } from './scenes/GameScene';
|
||
|
|
import './style.css';
|
||
|
|
|
||
|
|
const gameContext = createGameContext<TicTacToeState>(registry, createInitialState);
|
||
|
|
|
||
|
|
const promptSignal = signal<null | Awaited<ReturnType<typeof gameContext.commands.promptQueue.pop>>>(null);
|
||
|
|
const commandLog = signal<Array<{ input: string; result: string; timestamp: number }>>([]);
|
||
|
|
|
||
|
|
gameContext.commands.on('prompt', (event) => {
|
||
|
|
promptSignal.value = event;
|
||
|
|
});
|
||
|
|
|
||
|
|
const originalRun = gameContext.commands.run.bind(gameContext.commands);
|
||
|
|
(gameContext.commands as any).run = async (input: string) => {
|
||
|
|
const result = await originalRun(input);
|
||
|
|
commandLog.value = [
|
||
|
|
...commandLog.value,
|
||
|
|
{
|
||
|
|
input,
|
||
|
|
result: result.success ? `OK: ${JSON.stringify(result.result)}` : `ERR: ${result.error}`,
|
||
|
|
timestamp: Date.now(),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
|
||
|
|
const sceneData: GameSceneData = {
|
||
|
|
state: gameContext.state,
|
||
|
|
commands: gameContext.commands,
|
||
|
|
};
|
||
|
|
|
||
|
|
const phaserConfig: Phaser.Types.Core.GameConfig = {
|
||
|
|
type: Phaser.AUTO,
|
||
|
|
width: 560,
|
||
|
|
height: 560,
|
||
|
|
parent: 'phaser-container',
|
||
|
|
backgroundColor: '#f9fafb',
|
||
|
|
scene: [],
|
||
|
|
};
|
||
|
|
|
||
|
|
const game = new Phaser.Game(phaserConfig);
|
||
|
|
|
||
|
|
game.scene.add('GameScene', GameScene, true, sceneData);
|
||
|
|
|
||
|
|
const ui = new GameUI({
|
||
|
|
container: document.getElementById('ui-root')!,
|
||
|
|
root: h('div', { className: 'flex flex-col h-screen' },
|
||
|
|
h('div', { className: 'flex-1 relative' },
|
||
|
|
h('div', { id: 'phaser-container', className: 'w-full h-full' }),
|
||
|
|
h(PromptDialog, {
|
||
|
|
prompt: promptSignal.value,
|
||
|
|
onSubmit: (input: string) => {
|
||
|
|
gameContext.commands._tryCommit(input);
|
||
|
|
promptSignal.value = null;
|
||
|
|
},
|
||
|
|
onCancel: () => {
|
||
|
|
gameContext.commands._cancel('cancelled');
|
||
|
|
promptSignal.value = null;
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
h('div', { className: 'p-4 bg-gray-100 border-t' },
|
||
|
|
h(CommandLog, { entries: commandLog }),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
});
|
||
|
|
|
||
|
|
ui.mount();
|
||
|
|
|
||
|
|
gameContext.commands.run('setup');
|