<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js" ></script>

//JUST FOR DEMO FIXED 3 FRAMES
const FRAMES = 3;

let images = [
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/0aafd5ef37d15a70c4b3da1ce2325ef828da9f57.png", "alt": "body0-0" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/53d6c4598a2b989049a2d4fd6a9e1576cdbb59cf.png", "alt": "body0-1" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/de3fbb16f0a22946c2cc2f22b196b0d8dec42763.png", "alt": "body1-0" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/55397809e7adc15fad03facfcd50077b1980de49.png", "alt": "body1-1" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/72d87a63a541c72301d435697b529e6db9ba9c26.png", "alt": "body2-0" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/96a72c4280d75d8f07e8a8aa6fb8b887c62f177d.png", "alt": "body2-1" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/c612dd8b2e2fdbdd80e9a36886dc1fa502472e65.png", "alt": "head0-0" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/b27d5777342e6cbf4b5dc9e2b28f0bd3bfe197b9.png", "alt": "head1-0" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/b27d5777342e6cbf4b5dc9e2b28f0bd3bfe197b9.png", "alt": "head2-0" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/c612dd8b2e2fdbdd80e9a36886dc1fa502472e65.png", "alt": "head0-1" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/b27d5777342e6cbf4b5dc9e2b28f0bd3bfe197b9.png", "alt": "head1-1" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/b27d5777342e6cbf4b5dc9e2b28f0bd3bfe197b9.png", "alt": "head2-1" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/ce305bdebea403da697b7dfe6dcfec9a4fd91faa.png", "alt": "legs0-0" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/ce305bdebea403da697b7dfe6dcfec9a4fd91faa.png", "alt": "legs1-0" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/ce305bdebea403da697b7dfe6dcfec9a4fd91faa.png", "alt": "legs2-0" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/ce305bdebea403da697b7dfe6dcfec9a4fd91faa.png", "alt": "legs0-1" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/ce305bdebea403da697b7dfe6dcfec9a4fd91faa.png", "alt": "legs1-1" },
 { "url": "https://canada1.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/ce305bdebea403da697b7dfe6dcfec9a4fd91faa.png", "alt": "legs2-1" }, 
];

   let config = {
        type: Phaser.CANVAS,
        width: 320,
        height: 240,
        pixelArt:true,
        physics: {
            default: 'arcade'
        },
        banner: false,
    };

    class GameScene extends Phaser.Scene {
        preload(){
            for(let img of images){
                this.load.image(img.alt, img.url);
            }
        }
        
        updatePlayerTexture(hType, bType, lType){  
            // TEXTURE AND FRAMES
            if(this.textures.exists('player')){
                this.textures.remove('player');
            }

            let canvas = this.textures.createCanvas('player', 42 * FRAMES, 68);
            
            for(let idx = 0; idx < FRAMES; idx++){
                this.drawPlayerSpriteFrame(canvas, idx, hType, bType, lType);
                canvas.add(idx, 0, 42 * idx, 0, 42, 68);
            }
            canvas.refresh();
            
            if(this.player){
                this.player.setTexture('player');
            }
            
            // ANIMATIONS
            if(this.anims.exists('walk')){
                this.anims.remove('walk');
            }
            
            this.anims.create({
                key: 'walk',
                frames: this.anims.generateFrameNames('player', {
                    start: 1,
                    end: 2
                }),
                frameRate: 2,
                repeat: -1
            });                
            
            this.renderTextureForDemo();
        }

        create(){
            const DEFAULT_TYPE = 0;
            
            let headType = DEFAULT_TYPE;
            let bodyType = DEFAULT_TYPE;
            let legsType = DEFAULT_TYPE;
            
            this.info = this.add.text(config.width -10, 10, 'Wait one Second')
                .setOrigin(1,0);
            
            this.updatePlayerTexture(headType, bodyType, bodyType)
            
            this.player = this.add.sprite(config.width / 2, config.height / 2, 'player')
                .setScale(2);
            
            this.player.play('walk');
                        
            setTimeout( ( ) => {
                this.player.stop();
                this.updatePlayerTexture(headType, 1, bodyType);
                this.player.play('walk');
                this.info.setText('Is Done!');
            }, 2000 );
        }

        drawPlayerSpriteFrame (canvas, idx, hType, bType, lType) { 

            let offsets = [
                {legs: 0, body: 0, head: 0},
                {legs: 2, body: -2, head: 0},
                {legs: 2, body: -2, head: 0},
            ]
            canvas.drawFrame(`legs${idx}-${lType}`, null, 42 * idx, 46 + offsets[idx].legs);
            canvas.drawFrame(`body${idx}-${bType}`, null, 42 * idx, 34 + offsets[idx].body);
            canvas.drawFrame(`head${idx}-${hType}`, null, 42 * idx, 2 + offsets[idx].head);
        }
        
        renderTextureForDemo(){
            console.info(123)
            var rt = this.add.renderTexture(0, 0,  42 * FRAMES, 68);
            var textures = this.textures.get('player');
            var frames = textures.getFrameNames();

            rt.beginDraw();

            for (let idx = 0; idx < frames.length; idx++){
                rt.batchDrawFrame('player', frames[idx], idx * 42, 0);
            }

            rt.endDraw();
        }
        
    }

    let game = new Phaser.Game(config);

    game.scene.add('GameScene', GameScene, true);

    console.clear();