import {useEffect,useRef,useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Game} from './game/Game';
import {GameUI} from './UI/GameUI';
import type {GameSnapshot} from './game/contracts';
const initial:GameSnapshot={ready:false,loading:'Opening Elaria…',started:false,paused:false,realm:'gate',objective:null,objectiveIndex:0,totalObjectives:0,completed:[],nearby:null,cinematic:null,puzzle:null,notice:'',error:null,hasSave:false,audioAvailable:true,quality:'high',muted:false,volume:.85,secretFound:false};
function App(){
  const host=useRef<HTMLDivElement>(null);const [game,setGame]=useState<Game|null>(null);const [snapshot,setSnapshot]=useState<GameSnapshot>(initial);
  useEffect(()=>{if(!host.current)return;const instance=new Game(host.current,setSnapshot);setGame(instance);return()=>instance.dispose();},[]);
  return <><div ref={host} className="world-canvas"/><GameUI snapshot={snapshot} api={game}/></>;
}
createRoot(document.getElementById('root')!).render(<App/>);