import Phaser from 'phaser';
import './style.css';
import { gameplay } from './config/gameplay';
import { GameScene } from './game/GameScene';
import { DebugPanel } from './debug/DebugPanel';

const horizontalResolution = gameplay.renderWidth / gameplay.logicalWidth;
const verticalResolution = gameplay.renderHeight / gameplay.logicalHeight;
if (horizontalResolution !== verticalResolution) {
  throw new Error('Render size must preserve the logical 16:9 aspect ratio.');
}

const game = new Phaser.Game({
  type: Phaser.AUTO,
  parent: 'game',
  width: gameplay.renderWidth,
  height: gameplay.renderHeight,
  backgroundColor: '#d8c5a4',
  scene: [GameScene],
  render: {
    antialias: true,
    roundPixels: false,
  },
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: gameplay.renderWidth,
    height: gameplay.renderHeight,
  },
  input: {
    activePointers: 3,
  },
});

const debugPanel = new DebugPanel(game);

const blockGesture = (event: Event): void => event.preventDefault();
document.addEventListener('contextmenu', blockGesture, { passive: false });
document.addEventListener('dblclick', blockGesture, { passive: false });
document.addEventListener('selectstart', blockGesture, { passive: false });
document.addEventListener('gesturestart', blockGesture, { passive: false });

window.addEventListener('beforeunload', () => {
  debugPanel.destroy();
  game.destroy(true);
});