import { Scene } from 'phaser';

export default class PreloaderScene extends Scene {
  constructor() {
    super('Preloader');
  }

  init() {
    const { centerX, centerY, width, height } = this.cameras.main;
    //  We loaded this image in our Boot Scene, so we can display it here
    const bg = this.add.image(centerX, centerY, 'background01');
    bg.scale = 2;
    //  A simple progress bar. This is the outline of the bar.
    this.add.rectangle(centerX, centerY, 468, 32).setStrokeStyle(2, 0x000000);

    //  This is the progress bar itself. It will increase in size from the left based on the % of progress.
    const bar = this.add.rectangle(centerX - 230, centerY, 4, 28, 0xffffff);

    const text = this.add.text(centerX, centerY, 'LADATAAN...', {
      color: "black",
      backgroundColor: "white",
      stroke: "#AAA",
      strokeThickness: 4,
      fontFamily: "Kenney Bold",
    });
    text.setOrigin(0.5);

    //  Use the 'progress' event emitted by the LoaderPlugin to update the loading bar
    this.load.on('progress', (progress: number) => {
      //  Update the progress bar (our bar is 464px wide, so 100% = 464px)
      bar.width = 4 + (460 * progress);
    });
  }

  preload() {
    this.load.setPath('assets');

    this.load.spritesheet('button-bg', 'panel-000.png', { frameWidth: 16, frameHeight: 16 });
    this.load.spritesheet('card-bg', 'card-bg.png', { frameWidth: 272, frameHeight: 272 });
    this.load.spritesheet('card-shadow', 'card-shadow.png', { frameWidth: 272, frameHeight: 272 });

    const characters = ['akakabuto', 'ben', 'cross', 'gin', 'hyena', 'john', 'madara', 'mosa', 'riki', 'smith', 'sniper']

    characters.forEach(character => {
      this.load.spritesheet('character-' + character + '-card', 'characters/' + character + '_card.png', { frameWidth: 256, frameHeight: 256 });
    });
  }

  create() {
    this.scene.start('MainMenu');
  }
}