Buttons in action bar behaving not as expected

[ShashaKrismas]

Hello,
My buttons on my action bar are behaving weirdly :

Code: Select all

 onUpdateActionButtons: function( stateName, args )
        {
            console.log( 'onUpdateActionButtons: '+stateName );
                      
            if( this.isCurrentPlayerActive() )
            {            
                switch( stateName )
                {   
                    
                    case "playerChooseNumber":
                        // this doesn't work with a for loop...
                        // The only way for this to work is having VARIABLE names for the parameter, probably because values are passed when we run the button 
                        //(takes the last value)
                        var numberTable = new Array(1, 2, 3, 4, 5, 6, 7, 8);
                        var stringnumber = numberTable[0].toString();
                        this.addActionButton( 'number_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('chooseNumber', {number: numberTable[0]})); 
                        stringnumber = numberTable[1].toString();
                        this.addActionButton( 'number_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('chooseNumber', {number: numberTable[1]}));
                        stringnumber = numberTable[2].toString();
                        this.addActionButton( 'number_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('chooseNumber', {number: numberTable[2]}));
                        stringnumber = numberTable[3].toString();
                        this.addActionButton( 'number_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('chooseNumber', {number: numberTable[3]}));
                        stringnumber = numberTable[4].toString();
                        this.addActionButton( 'number_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('chooseNumber', {number: numberTable[4]}));
                        stringnumber = numberTable[5].toString();
                        this.addActionButton( 'number_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('chooseNumber', {number: numberTable[5]}));
                        stringnumber = numberTable[6].toString();
                        this.addActionButton( 'number_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('chooseNumber', {number: numberTable[6]}));
                        stringnumber = numberTable[7].toString();
                        this.addActionButton( 'number_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('chooseNumber', {number: numberTable[7]}));
                        break;
                        
                    case "playerChoosePlayer":
                        var player_ids = [2372932, 2372933, 2372934, 2372935];
                        var stringnumber = player_ids[0].toString();
                        this.addActionButton( 'player_button' + stringnumber, _(stringnumber), () => this.ajaxcallwrapper('choosePlayer', {player_id: player_ids[0]}));
                        // stringnumber = player_ids[1].toString();
                        // this.addActionButton( 'player_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('choosePlayer', {player_id: player_ids[1]}));  
                        // stringnumber = player_ids[2].toString();
                        // this.addActionButton( 'player_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('choosePlayer', {player_id: player_ids[2]}));  
                        // stringnumber = player_ids[3].toString();
                        // this.addActionButton( 'player_button'+stringnumber, _(stringnumber), () => this.ajaxcallwrapper('choosePlayer', {player_id: player_ids[3]}));  
                        break;
                }
            }
        },        

First, the issue with this is that I can't write for loops to create all the buttons, I have to create them one by one which is going to be a problem as the number of buttons will vary given the number of players in the future. If I write a for loop, for the chooseNumber buttons, they will be created as expected with the 1-8 labels but will all send to the server a value of 9.

Second, in the state "playerChoosePlayer", when I click on the button, it has the correct label but it sends to the server the function chooseNumber instead.
Here are the logs for this:

Code: Select all

23/10 19:06:19 [info] [T418239] [85.229.71.116] [2372933/whitemoon1] Game action impossible: chooseNumber for state playerChoosePlayer2
23/10 19:06:19 [info] [T418239] [85.229.71.116] [2372933/whitemoon1] DB rollback: action cancelled2
23/10 19:06:19 [notice] [T418239] [85.229.71.116] [2372933/whitemoon1] Exception: This game action is impossible right now2

chooseNumber is indeed a forbidden action for playerChoosePlayer so that's alright. I made sure that the code that you see is indeed the code on the server.

Any ideas on how to fix this? Thanks in advance!

[Tisaac]

You should learn about variable scope in js and/or closures for your first issue.

[ShashaKrismas]

Hi, thank you for your answer, both of my issues are fixed now.
For the first one I changed the call of the loop parameter "var" into "let"
For the second one, my ajax called was copy pasted and was wrong...
Thank you!