/*
Phaser 3 Percentage Selector
Author: AffectedArc07
Tested on phaser v3.19
*/
let percentage_selector = new Phaser.Scene('mainmenu');

percentage_selector.init = function() {
    this.percentage_number = 10;
}

percentage_selector.create = function() {
    this.headertext = this.add.text(100, 30, 'Percentage: 100%').setOrigin(0.5);
    this.bar = this.add.text(100, 50, '[■■■■■■■■■■]').setOrigin(0.5);

    const increase = this.add.text(160, 43, '+');
    const decrease = this.add.text(30, 43, '-');

    // Make the - button change color when hovered over
    increase.tint = 0xFFFFFF
    increase.setInteractive();
    increase.on('pointerdown', () => (this.updateBar(1)) );
    increase.on('pointerover', () => (increase.tint = 0x00FF00) );
    increase.on('pointerout', () => (increase.tint = 0xFFFFFF) );

    // Make the + button change color when hovered over
    decrease.tint = 0xFFFFFF
    decrease.setInteractive();
    decrease.on('pointerdown', () => (this.updateBar(-1)) );
    decrease.on('pointerover', () => (decrease.tint = 0x00FF00) );
    decrease.on('pointerout', () => (decrease.tint = 0xFFFFFF) );
};

percentage_selector.updateBar = function(num) {
    if(this.percentage_number == 10 && num == 1) {
        return;
    }
    if(this.percentage_number == 0 && num == -1) {
        return;
    }
    this.percentage_number = this.percentage_number + num
    newSliderText = "["
    for (let count = 0; count < this.percentage_number; count++) {
        newSliderText += "■"
    }
    for (let count = 0; count < (10 - this.percentage_number); count++) {
        newSliderText += "□"
    }
    newSliderText += "]"
    this.bar.setText(newSliderText);
    this.headertext.setText('Percentage: '+(this.percentage_number * 10)+'%')
}

// Setup the game configuration
let config = {
    type: Phaser.AUTO, // Phaser will use WebGL if available, if not it will use Canvas
    width: 200,
    height: 75,
    pixelArt: true,
    scene: [percentage_selector]
};

let game = new Phaser.Game(config);