import { h } from 'preact';
import { PhaserGame, PhaserScene } from 'boardgame-phaser';
import { useMemo } from 'preact/hooks';
import { IndexScene } from '@/scenes/IndexScene';
import { MapViewerScene } from '@/scenes/MapViewerScene';
import { GridViewerScene } from '@/scenes/GridViewerScene';
import { ShapeViewerScene } from '@/scenes/ShapeViewerScene';

export default function App() {
  const indexScene = useMemo(() => new IndexScene(), []);
  const mapViewerScene = useMemo(() => new MapViewerScene(), []);
  const gridViewerScene = useMemo(() => new GridViewerScene(), []);
  const shapeViewerScene = useMemo(() => new ShapeViewerScene(), []);

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 flex relative justify-center items-center">
        <PhaserGame initialScene="IndexScene" config={{ width: 1920, height: 1080 }}>
          <PhaserScene sceneKey="IndexScene" scene={indexScene} />
          <PhaserScene sceneKey="MapViewerScene" scene={mapViewerScene} />
          <PhaserScene sceneKey="GridViewerScene" scene={gridViewerScene} />
          <PhaserScene sceneKey="ShapeViewerScene" scene={shapeViewerScene} />
        </PhaserGame>
      </div>
    </div>
  );
}