import './styles/global.css';
import './styles/responsive.css';
import { GameApp } from './app/GameApp';

const root = document.querySelector<HTMLElement>('#app');

function showFatal(error: unknown): void {
  console.error('Application bootstrap failed', error);
  if (!root) return;
  const message = error instanceof Error ? error.message : 'Unknown startup error';
  root.innerHTML = `<main class="fatal-screen"><div><span>!</span><h1>Chronicle recovery</h1><p>The game could not start safely.</p><pre>${message.replace(/[<>&]/g, (char) => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;' })[char]!)}</pre><button onclick="location.reload()">Reload game</button></div></main>`;
}

if (!root) throw new Error('Application root is missing');

try {
  if (!HTMLCanvasElement.prototype.getContext) throw new Error('Canvas is not supported by this browser');
  new GameApp(root);
} catch (error) {
  showFatal(error);
}

window.addEventListener('error', (event) => console.error('Unhandled window error', event.error));
window.addEventListener('unhandledrejection', (event) => console.error('Unhandled async error', event.reason));