import gamepaused from '../../assets/gamepaused.png';
import player from '../../assets/player.png';
import martyLeft from "../../assets/marty-left.png";
import martyRight from "../../assets/marty-right.png";
import martyUp from "../../assets/marty-up.png";
import martyDown from "../../assets/marty-down.png";

import star from '../../assets/star.png';

import tiles from '../../assets/tiles.png';
import map0 from '../../assets/map0.json';
import map1 from '../../assets/map1.json';
import map2 from '../../assets/map2.json';
import map3 from '../../assets/map3.json';
import map4 from '../../assets/map4.json';
import map5 from '../../assets/map5.json';
import map6 from '../../assets/map6.json';
import map7 from '../../assets/map7.json';
import map8 from '../../assets/map8.json';
import map9 from '../../assets/map9.json';
import map10 from '../../assets/map10.json';
import map11 from '../../assets/map11.json';
import map12 from '../../assets/map12.json';
import map13 from '../../assets/map13.json';
import map14 from '../../assets/map14.json';
import map15 from '../../assets/map15.json';

const maps = [map0, map1, map2, map3, map4, map5, map6, map7, map8, map9, map10, map11, map12, map13, map14, map15];


class Preloader extends Phaser.Scene {

    constructor() {
        super({ key: 'preloader' });
    }

    preload() {
        // just a preload bar in graphics
        let progress = this.add.graphics();
        this.load.on('progress', (value: number) => {
            progress.clear();
            progress.fillStyle(0x73c494, 1);
            progress.fillRect(0, (+this.sys.game.config.height / 2) - 30, +this.sys.game.config.width * value, 60);
        });
        this.load.on('complete', () => {
            progress.destroy();
        });

        // Load assets here
        // ...
        this.load.image('tiles', tiles);
        for (let m = 0; m < 16; m++) {
            this.load.tilemapTiledJSON('map' + m, maps[m]);
        }
        this.load.spritesheet('player', player, { frameWidth: 32, frameHeight: 32 });
        this.load.image('marty-left', martyLeft);
        this.load.image('marty-right', martyRight);
        this.load.image('marty-up', martyUp);
        this.load.image('marty-down', martyDown);
        this.load.image('star', star);
        this.load.image('gamepaused', gamepaused);
    }

    create() {
        this.scene.start(this.startPosition.startScene);
    }

}

export default Preloader;
