import * as Phaser from 'phaser';
import { GAME_HEIGHT, GAME_WIDTH, COLORS } from './config.js';
import BootScene from './scenes/BootScene.js';
import PreloadScene from './scenes/PreloadScene.js';
import LandingScene from './scenes/LandingScene.js';
import LoginScene from './scenes/LoginScene.js';
import RegisterScene from './scenes/RegisterScene.js';
import VerifyScene from './scenes/VerifyScene.js';
import ProfileScene from './scenes/ProfileScene.js';
import GameMenuScene from './scenes/GameMenuScene.js';
import OpponentSelectScene from './scenes/OpponentSelectScene.js';
import GameRoomScene from './scenes/GameRoomScene.js';
import BackgammonGame from './games/backgammon/BackgammonGame.js';
import HoldemGame from './games/holdem/HoldemGame.js';
import BlackjackGame from './games/blackjack/BlackjackGame.js';
import ParchisiGame from './games/parchisi/ParchisiGame.js';
import YatziGame from './games/yatzi/YatziGame.js';
import SkipBoGame from './games/skipbo/SkipBoGame.js';
import Phase10Game from './games/phase10/Phase10Game.js';
import ChineseCheckersGame from './games/chinesecheckers/ChineseCheckersGame.js';
import GoFishGame from './games/gofish/GoFishGame.js';
import UnoGame from './games/uno/UnoGame.js';
import CrapsGame from './games/craps/CrapsGame.js';
import RouletteGame from './games/roulette/RouletteGame.js';
import MexicanTrainGame from './games/mexicantrain/MexicanTrainGame.js';
import HeartsGame from './games/hearts/HeartsGame.js';
import CatanGame from './games/catan/CatanGame.js';
import NertsGame from './games/nerts/NertsGame.js';
import BingoGame from './games/bingo/BingoGame.js';
import BaccaratGame from './games/baccarat/BaccaratGame.js';
import DominionGame from './games/dominion/DominionGame.js';
import CheckersGame from './games/checkers/CheckersGame.js';
import ChessGame from './games/chess/ChessGame.js';
import WordleGame from './games/wordle/WordleGame.js';
import ScrabbleGame from './games/scrabble/ScrabbleGame.js';
import GhostGame from './games/ghost/GhostGame.js';

const config = {
  type: Phaser.AUTO,
  parent: 'game-container',
  backgroundColor: COLORS.bgHex,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: GAME_WIDTH,
    height: GAME_HEIGHT,
  },
  dom: { createContainer: true },
  scene: [
    BootScene,
    PreloadScene,
    LandingScene,
    LoginScene,
    RegisterScene,
    VerifyScene,
    ProfileScene,
    GameMenuScene,
    OpponentSelectScene,
    GameRoomScene,
    BackgammonGame,
    HoldemGame,
    BlackjackGame,
    ParchisiGame,
    YatziGame,
    SkipBoGame,
    Phase10Game,
    ChineseCheckersGame,
    GoFishGame,
    UnoGame,
    CrapsGame,
    RouletteGame,
    MexicanTrainGame,
    HeartsGame,
    CatanGame,
    NertsGame,
    BingoGame,
    BaccaratGame,
    DominionGame,
    CheckersGame,
    ChessGame,
    WordleGame,
    ScrabbleGame,
    GhostGame,
  ],
};

const game = new Phaser.Game(config);

// Phaser positions its DOM overlay container with margins only (no explicit
// left/top); under Scale.FIT the absolutely-positioned container drifts away
// from the letterboxed canvas as the viewport narrows, dragging DOM video
// portraits below their canvas targets. Pin the container to the canvas's real
// box on every resize so game coordinates map exactly onto the canvas.
function syncDomContainer() {
  const container = game.domContainer;
  const canvas = game.scale.canvas;
  if (!container || !canvas) return;
  const baseW = game.scale.gameSize.width;
  const baseH = game.scale.gameSize.height;
  const rect = canvas.getBoundingClientRect();
  const parent = container.offsetParent;
  const pRect = parent ? parent.getBoundingClientRect() : { left: 0, top: 0 };
  const st = container.style;
  st.margin = '0';
  st.transformOrigin = 'left top';
  st.left = `${rect.left - pRect.left}px`;
  st.top = `${rect.top - pRect.top}px`;
  st.transform = `scale(${rect.width / baseW}, ${rect.height / baseH})`;
}

game.scale.on('resize', syncDomContainer);
game.events.once('ready', syncDomContainer);