src/main.js

import Phaser from 'phaser';
import GameScene from './scenes/GameScene.js';
import PreloadScene from './scenes/PreloadScene.js';
import ModeSelectScene from './scenes/ModeSelectScene.js';
import { createShaderOverlay } from './shaderOverlay.js';

const config = {
  type: Phaser.WEBGL,
  width: 298, // 256 + 21px borders on each side (42px total)
  height: 224,
  parent: 'game-container',
  backgroundColor: '#0a0a0a', // Dark grey for the borders
  pixelArt: true,
  roundPixels: true,
  antialias: false,
  fps: {
    target: 60,
    forceSetTimeOut: false
  },
  render: {
    antialias: false,
    pixelArt: true,
    roundPixels: true,
    antialiasGL: false
  },
  scale: {
    mode: Phaser.Scale.NONE,
    width: 298,
    height: 224
  },
  scene: [PreloadScene, ModeSelectScene, GameScene]
};

const game = new Phaser.Game(config);

// Apply shader overlay to the scaled canvas
setTimeout(() => {
  createShaderOverlay(game.canvas);
}, 100);