import { Game } from './game'
import { gameMarkup } from './markup'

function getElement<T extends HTMLElement>(id: string, type: new () => T): T {
  const element = document.getElementById(id)
  if (!(element instanceof type)) throw new Error(`Missing #${id} element`)
  return element
}

document.body.insertAdjacentHTML('afterbegin', gameMarkup)

new Game({
  stage: getElement('stage', HTMLElement),
  canvas: getElement('game', HTMLCanvasElement),
  score: getElement('score', HTMLElement),
  highScore: getElement('high-score', HTMLElement),
  lives: getElement('lives', HTMLElement),
  overlay: getElement('overlay', HTMLElement),
  overlayTitle: getElement('overlay-title', HTMLElement),
  overlayMessage: getElement('overlay-message', HTMLElement),
  startButton: getElement('start', HTMLButtonElement),
  pauseButton: getElement('pause', HTMLButtonElement),
  muteButton: getElement('mute', HTMLButtonElement),
})