Dropdown menu

/* Class creates a dropdown menu of n options
the texture for the input arg should be a sprite of the same dimensions as the menua you are making...I fully realize this
is a clunkcy way to do that..
for example, in the scene where I call this Class I have
//        var graphics = this.make.graphics();
//          graphics.fillStyle(0xe4e4e4, 1);
//          graphics.fillRoundedRect(0, 0, this.boxLength,this.boxHeight,2);
//          graphics.generateTexture("box", this.boxLength,this.boxHeight);
//          graphics.destroy();
hope that makes sense
I call it like this var dropMenu = new Menu({scene: this, x:390, y:275, key: "box",textColor: "#000", boxHeight:19, boxLength:108,options:menu,hoverTint: 0x87ceeb, startValue: ["Jack"], buttonFill: 0xe4e4e4})
where options are:  var options = ["Jack", "Mike", "Jeremy","Ngara", "Billy", "Dillon", "David"];
get the selected values from data output or output variable

*/

class Menu extends Phaser.GameObjects.Sprite{
    constructor(config)
    {
            super(config.scene, config.x, config.y, config.key, config.options, config.boxHeight, config.boxLength, config.hoverTint, config.textColor, config.startValue, config.buttonFill);
            config.scene.add.existing(this);// add to exisiting scene
            config.scene.events.on('update', (time, delta) => { this.update(time, delta)}); // force parent scebe to call class update
            this.scene = config.scene;// reference parent scene
            this.x = config.x;// x
            this.y = config.y;// y
            this.key = config.key;// texture
            this.options = config.options;// an array for the text labels for the menu buttons
            this.output=config.startValue;// default meu value
            this.boxHeight = config.boxHeight;// thickness of menu
            this.boxLength = config.boxLength;// length of menu
            this.textColor = config.textColor;// color of the text
            this.hoverTint = config.hoverTint;// color to highlight during hover
            this.buttonFill = config.buttonFill;
            this.show = true;// bool that toggles menu visibility
            this.setInteractive(); //main button interactive
            this.drops = []; //array to hold menu sprites
            this.create(); // create stuff

    }
create(){
    this.setDataEnabled();// data hold the selected menu button
    this.data.set('option', this.output);
    this.data.set('index', 0);
    this.data.set('last option', this.output);

    for(var i=0; i<this.options.length; i++){ //loop that creates all the buttons and offsets the position
         this.drops[i]=this.makeButton(this.scene, this.x,this.y-(i*this.boxHeight)-this.boxHeight,this.options[i], this.hoverTint, i);
        }

    var graphics2 = this.scene.make.graphics();// graphic to create border sprite for main button
    graphics2.lineStyle(1, 0x333333, 0.7); //border parameters
    graphics2.strokeRoundedRect(0, 0, this.boxLength,this.boxHeight,2); //draw the shape
    graphics2.generateTexture("mainOutline", this.boxLength, this.boxHeight);//turn it into a texture
    graphics2.destroy();//destroy it to save resources

    this.text = this.scene.add.text(this.x-50,this.y-8,this.options[0],{color: this.textColor, fontFamily: "Arial", fontSize: "12px"});//label text for main button
    var mainOutline = this.scene.add.image(this.x,this.y, "mainOutline").setScale(1.01).setAlpha(1);//boder for main button

    this.on("pointerover", (pointer)=>{
        mainOutline.setTintFill(0xff0000);//hover effect on border
    },this.scene);

    this.on("pointerdown",(pointer)=>{
        this.show=!this.show;       //toggles show or hide the menu
        mainOutline.clearTint()     //vlears border tint
        for(var i=0;i<this.drops.length;i++){  //checks for which button is currently selected and tints it
            if(this.drops[i][2].text==this.text.text){
                this.drops[i][0].setTint(this.hoverTint);
            }
            else{
                this.drops[i][0].clearTint(); //clears all others
            }}
    },this.scene)

    this.on("pointerout", (pointer)=>{  //clears hover tint
        mainOutline.clearTint()
    },this.scene);

}

update(){                           // loops through to show main button or show menu
    for(var i=0;i<this.drops.length;i++){
            for(var j=0;j<this.drops[i].length;j++){
            this.drops[i][j].setVisible(!this.show)
         }
    }
    this.text.setText(this.output[0]);// sets main button text to match selected text


}

    makeButton(_this,x,y,label,tint, index){
        var d = new Date();
        var n = d.getMilliseconds();// grab date string to ensure unique names for the generated textures
        var graphics = _this.make.graphics(); //grapihics object to create sprites
        graphics.fillStyle(this.buttonFill, 1); //button params
        graphics.fillRoundedRect(0, 0, this.boxLength,this.boxHeight,2); //draw the shape
        graphics.generateTexture("box"+label, this.boxLength, this.boxHeight);  //turn it into texture
        graphics.destroy(); //destroy it
        var graphics2 = _this.make.graphics(); // grab date string to ensure unique names for the generated textures
        graphics2.lineStyle(1, 0x333333, 0.7); //grapihics object to create sprites
        graphics2.strokeRoundedRect(0, 0, this.boxLength,this.boxHeight,2); //draw it
        graphics2.generateTexture("outline"+label, this.boxLength, this.boxHeight); //turn it into texture
        graphics2.destroy(); //kill it
        var sprite = _this.add.image(x, y, "box"+label).setInteractive();  //button is interactive
        var text = _this.add.text(x-35,y-8,label,{color: this.textColor, fontFamily: "Arial", fontSize: "12px"});  //text params ..
        var outline = _this.add.image(x,y, "outline"+label).setScale(1.01).setAlpha(0.4); //border
        sprite.on("pointerdown",(pointer)=>{
            sprite.setTint(tint);               //flash a tint on pointerdown
            this.show = !this.show;            //toggle visibility bool
            this.output = [label,index];        //set ouptu vales
            this.data.set('last option',this.data.get('option')); //set data
            this.data.set('option', label);
            this.data.set('index', index);

            //tint and hover over out effects
        })
        sprite.on("pointerup",(pointer)=>{
               sprite.clearTint();
        },_this);

        sprite.on("pointerout",(pointer)=>{
            sprite.clearTint();
        },_this);

        sprite.on("pointerover",(pointer)=>{
            sprite.setTint(tint);

        },_this);
        return [sprite,outline, text]//, spriteBack
    }

}