Phaser event issue. Why did my change resolve it? - phaser-framework

Question

Apologies for the title but I'm hoping somebody could explain why I was getting the below error and how come what I changed fixed it.
Overview:
I'm creating a game where you have to shoot 3 targets to win. If you hit all 3 a HIT state is loaded (Consequently if you don't hit all 3 a MISS state is loaded). Once in the HIT state you click the screen which then triggers some game logic that determines if you have won a prize. The game logic is a php script that runs and returns a win or lose variable via ajax. Once returned a state change is triggered to direct you to the WIN state or LOSE state depending on the result.
All 4 state code:
Hit State
MyGame.Hit = function () {};
MyGame.Hit.prototype = {
create: function () {
this.bgd = this.add.image( 0, 0, 'hitBgd');
this.bgd.inputEnabled = true;
this.bgd.events.onInputDown.add( this.gameLogic, this);
},
gameLogic: function () {
var username = 'user';
if (typeof username !== 'undefined') {
var request = new XMLHttpRequest();
request.open('GET', '_/api/logic.php?user=' + username, true);
request.onreadystatechange = function () {
if ((request.readyState === 4) && (request.status === 200)) {
var returnedData = JSON.parse(request.responseText);
if (returnedData.outcome === true) { // Winner
MyGame.game.state.start('Won');
} else { // Loser
MyGame.game.state.start('Lose');
}
}
}
request.send();
} else {
MyGame.game.state.start('Lose');
}
}
};
Miss State:
MyGame.Miss = function () {};
MyGame.Miss.prototype = {
create: function (){
this.bgd = this.add.image( 0, 0, 'missBgd');
this.playAgainBtn = this.add.button((this.game.width / 2) - 145, 235, 'playAgainBtn', this.playAgain, this);
this.exitBtn = this.add.button((this.game.width / 2) + 145, 235, 'exitGameBtn', this.exitGame, this);
},
playAgain: function () {
this.state.start('MainMenu');
},
exitGame: function () {
alert('AWAITING LINK FROM CLIENT');
},
};
Won State
MyGame.Won = function () {};
MyGame.Won.prototype = {
create: function () {
this.bgd = this.add.image( 0, 0, 'wonBgd');
this.playAgain = this.add.button(130, 510, 'wonPlayAgainBtn', this.playAgain, this);
this.exitBtn = this.add.button(395, 510, 'wonExitGameBtn', this.exitGame, this);
},
playAgain: function () {
this.state.start('MainMenu');
},
exitGame: function () {
alert('AWAITING LINK FROM CLIENT');
}
};
Lose State
MyGame.Lose = function () {};
MyGame.Lose.prototype = {
create: function (){
this.bgd = this.add.image( 0, 0, 'loseBgd');
this.playAgainBtn = this.add.button((this.game.width / 2) - 145, 235, 'playAgainBtn', this.playAgain, this);
this.exitBtn = this.add.button((this.game.width / 2) + 145, 235, 'exitGameBtn', this.exitGame, this);
},
playAgain: function () {
this.state.start('MainMenu');
},
exitGame: function () {
alert('AWAITING LINK FROM CLIENT');
}
};
As you can see the MISS, WON and LOSE states are all the same apart from in the WON state my button is called this.playAgain instead of this.playAgainBtn.
The first time you win is fine but if you play again without refreshing the page and get to the HIT state, trigger the game logic and win, you get the below error
Uncaught Error: Phaser.Signal: listener is a required param of add() and should be a Function.
It then points out this.playAgain in my WON state.
I want to know why changing this to this.playAgainBtn removes the error. Should I be destroying events/signals? should I be naming my functions differently even though they are in different states/objects?
also why do I need to call MyGame.game.state.start('Won'); in the ajax request instead of this.state.start('Won'); to switch states?
When this goes live and the odds are adjusted the chance of this happening will be ridiculously slim but at the moment for development everyone is a winner.
Any advice is greatly appreciated.

Answer 1

You add a button called playAgain but the callback method is also called playAgain, they have the same name and that is what is causing the error.
When MyGame.Won.create() is called for the first time, and you add the MyGame.Won.playAgain button then the reference to your original callback function MyGame.Won.playAgain() is retained by that button. But the second time you start the Won-state MyGame.Won.create() is also called, and then the reference to your original callback function was lost because it was effectively overwritten by the button.