import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from "@angular/core";
import Phaser from "phaser";
import { GameScene } from "./scenes/game.scene";

@Component({
  selector: 'app-game',
  template: `<div #gameContainer class="game-container"></div>`,
  styleUrls: ['./game.scss']
})
export class GameComponent implements OnInit, OnDestroy {
  @ViewChild('gameContainer', { static: true }) gameContainer!: ElementRef<HTMLDivElement>;
  private game?: Phaser.Game;

  ngOnInit(): void {
    const config: Phaser.Types.Core.GameConfig = {
      type: Phaser.AUTO,
      width: window.innerWidth,
      height: window.innerHeight,
      backgroundColor: '#0f111a',
      parent: this.gameContainer.nativeElement,
      scene: [GameScene],
      physics: { default: 'arcade' }
    };

    this.game = new Phaser.Game(config);
    // 👇 Debug: global im Fenster verfügbar machen
(window as any).game = this.game;
  }

  ngOnDestroy(): void {
    this.game?.destroy(true);
  }
}