Dynamic Popup

[Abhijeet]

I want to make a dynamic popup where the message and buttons come from the server, So can anyone help me on this.

[mattstyles]

What have you tried so far? What are you stuck on?

[Abhijeet]

I tried to make a dynamic popup where I make a function and pass the arguments like msg, button, headertxt

Here I don't know how to make a dynamic buttons using callback function. Total numbers of buttons I created are four. Please check the code below:

 

 

function GamePopup() {
    PIXI.Container.call(this);
}

GamePopup.prototype = Object.create(PIXI.Container.prototype);
GamePopup.prototype.constructor = GamePopup;

var p = GamePopup.prototype;

p.createView = function (msg,button,headertxt) {

    //this.visible = false;
    this.gameInfoTxt = headertxt;
    this.gameMsg = msg;
    
    // this.header = displayUtil.getContainer();
    // this.addChild(this.header);
    
    this.headerBg = displayUtil.getRectangle(400, 50, 0xffffff);
    this.addChild(this.headerBg);
    this.headerBg.tint = this.getConfig().theme.bgCol;

    this.msgBg = displayUtil.getRectangle(400, 200, 0xcccccc);
    this.addChild(this.msgBg);
    
    // this.btnBg = displayUtil.getRectangle(400, 50, 0xcccccc);
    // this.addChild(this.btnBg);
    
    //font objects-------------------------
    this.popuptitlefontObj = this.getConfig().textProps.titleTxt;
    this.msgfontObj = this.getConfig().textProps.msgTxt;
    
    //Creating title -------------------
    this.gameInfoTxt = displayUtil.getTextField(headertxt, this.popuptitlefontObj);
    this.addChild(this.gameInfoTxt);
    this.gameInfoTxt.x = (this.width - this.gameInfoTxt.width) / 2;
    this.gameInfoTxt.y = this.headerBg.y+(this.headerBg.height-this.gameInfoTxt.height) / 2;

    //Creating Alert msg -------------------
    this.gameMsg = displayUtil.getTextField(msg, this.msgfontObj)
    this.addChild(this.gameMsg);
    this.gameMsg.x = (this.width - this.gameMsg.width) / 2;
    this.gameMsg.y = this.msgBg.y+(this.msgBg.height - this.gameMsg.height) / 2;

    //buttons----------------------------------------------

    //ButtonComp() is define in some  other file

    this.yesBtn = new ButtonComp();
    this.yesBtn.createView("YES", 80, 40, this.getConfig().theme.showButtonStyle, this.getConfig().textProps.showButtonTxt, false, null);
    this.addChild(this.yesBtn);
    this.yesBtn.x =710;
    this.yesBtn.y =45;
    this.yesBtn.interactive = true;
    this.yesBtn.buttonMode = true;  
    this.yesBtn.mousedown = this.yesBtn.tap = this.onShowClick.bind(this);

    this.noBtn = new ButtonComp();
    this.noBtn.createView("NO", 80, 40, this.getConfig().theme.showButtonStyle, this.getConfig().textProps.showButtonTxt, false, null);
    this.addChild(this.noBtn);
    this.noBtn.x =710;
    this.noBtn.y =45;
    this.noBtn.interactive = true;
    this.noBtn.buttonMode = true;  
    this.noBtn.mousedown = this.noBtn.tap = this.onShowClick.bind(this);

    this.okBtn = new ButtonComp();
    this.okBtn.createView("OK", 80, 40, this.getConfig().theme.showButtonStyle, this.getConfig().textProps.showButtonTxt, false, null);
    this.addChild(this.okBtn);
    this.okBtn.x =710;
    this.okBtn.y =45;
    this.okBtn.interactive = true;
    this.okBtn.buttonMode = true;  
    this.okBtn.mousedown = this.okBtn.tap = this.onShowClick.bind(this);

    this.cancelBtn = new ButtonComp();
    this.cancelBtn.createView("CANCEL", 80, 40, this.getConfig().theme.showButtonStyle, this.getConfig().textProps.showButtonTxt, false, null);
    this.addChild(this.cancelBtn);
    this.cancelBtn.x =710;
    this.cancelBtn.y =45;
    this.cancelBtn.interactive = true;
    this.cancelBtn.buttonMode = true;  
    this.cancelBtn.mousedown = this.cancelBtn.tap = this.onShowClick.bind(this);

    this.btnArr = [this.yesBtn, this.noBtn, this.okBtn, this.cancelBtn]
    this.len = this.btnArr.length;

    for(var i = 0; i < this.len; i++) {
        this.btn = displayUtil.getRectangle(400, 50, 0x999797);
        this.addChild(this.btn);
        
        this.btnTxt = displayUtil.getTextField(this.btnArr);
        this.btn.addChild(this.btnTxt);
        
        this.btnTxt.x = (this.btn.width - this.btnTxt.width) / 2;
        this.btnTxt.y = (this.btn.height - this.btnTxt.height) / 2;

        // this.btn.x = i * this.btn.width + 10;
        this.btn.y = 200;
    }    
    this.msgBg.y = 50;
};

p.getConfig = function () {
    return {
        layout:{
            
        },
        theme:{
            bgCol : 0xFBA72D
        },
        textProps:{
            titleTxt: {fontSize:12, fontFamily:'mediumFont', fill :0x000000},
            msgTxt: {fontSize:12, fontFamily:'mediumFont', fill :0x000000}
        }
    }
}