Pause game and Jquery functions

[remka]

I am currently working a a dialogue system, using DOM and Jquery to have a bit more flexibility.

In short, I have an issue where I need to click two times my "close" button for the dialogue to disappear (the first one reloads the pause screen).

Not sure if the problem comes from the way Phaser handles pause, an issue with Jquery, or just the way I wrote my code.

A simplified version of the code would look like this:

Darkness.GameState = {

  create: function() {
    ...
  },

  update: function() {
    ...
  },

  interactNpc: function(player, npc) {
    if (this.isActionPressed && BasicGame.gamePaused == false) {
      BasicGame.gamePaused = true;
      var game = this.game;
      game.paused = true;
      $('#dialogues').one('click', '#close-dialogue', function() {
        BasicGame.gamePaused = false;
        game.paused = false;
      });
    }
  },
};

The this.isActionPressed bit is set to true or false in the update function. InteractNpc is triggered when the player overlaps a npc and presses the action key.

I wonder if my var game = this.game; is not the culprit, but I don't know how to access the game object from inside the click function in another way...

[bruno_]

You are using jquery one, that only triggers the event once.

Is that what you wanted, or is it on?

[remka]

Yeah, I've been trying this, thinking that might have been the cause of the problem, since at first I was thinking that there might be several click events fired, but the result is the same.
When I click on #close-dialogue, it plays the whole interactNpc function again...

[bruno_]

Where are you calling interactNpc?

Is it propagation of events problems?

Try to prevent the event from propagation like this:

$('#dialogues').on('click', '#close-dialogue', function(event) {
        event.preventDefault();
	event.stopPropagation();
	BasicGame.gamePaused = false;
        game.paused = false;
});