One-shot button until reset [Javascript beginner]

Phaser 3
1

I’m trying to write button that will deal three cards face down (each separated by 100px). My current code works to stop dealing when three cards are dealt, until the reset button is clicked. The problem occurs if the user rapidly clicks dealButton before three cards are dealt. It will deal more cards than I need. Is there an easy way to make the button a one-shot from the moment it is clicked, until it is reset?

Also, how can I remove the cards that are dealt when I press the reset button?

 // DEAL BUTTON
  const dealButton = this.add.text(100, 100, 'Deal', { fill: '#BBF651' });
  dealButton.setInteractive();
  var locX = 300;
  var t = this
  dealButton.on('pointerdown', () => function dealLoop(w, i) {
    setTimeout(function () {
      if (i == 1) {
        dealButton.disableInteractive();
        dealButton.setColor('#E7F7CC');
      };
      card = t.add.image(400,50, 'back');
      tween = t.tweens.add({
        targets: card,
        x: locX,
        y: 200,
        duration: 150
      });
      locX += 100;
      if (--i) {
        dealLoop(t, i);
      };
    }, 150);
    if (locX == 600) {
      locX = 300;
    };
  }(t, 3));

  // RESET BUTTON
  const resetButton = this.add.text(100, 120, 'Reset', { fill: '#BBF651' });
  resetButton.setInteractive();
  resetButton.on('pointerdown', () => {
    dealButton.setInteractive();
    dealButton.setColor('#BBF651');
  });

Any other refactoring tips appreciated :slight_smile:

2

Instead of .on you could use .once. Or, set a flag when the pointerdown function is called to track that the cards are dealing/dealt, and run/don’t run the function based on it.
And don’t use setTimeout; either use a phaser timer, or incorporate onComplete parameters into your tween.

1 Like
3

You can repeat the same tween multiple times by setting repeat property and you can add onRepeat callback that will be called every time tween repeats. You can change value of x before tween repeats.

You can also use onStart callback to disable dealing btn and enable it in onComplete callback.

1 Like
4

Thank you. This is helpful. I’ve solved part of the problem but I think I am using onRepeat incorrectly:

  // BUTTON
  const dealButton = this.add.text(100, 100, 'Deal', { fill: '#BBF651' });
  dealButton.setInteractive();
  var locX = 300;
  dealButton.on('pointerdown', (i) => {
    dealButton.disableInteractive();
    dealButton.setColor('#E7F7CC');
    card = this.add.image(400,50, 'back');
    tween = this.tweens.add({
      targets: card,
      x: locX,
      y: 200,
      duration: 150,
      repeat: 2,
      onRepeatParams: [x=locX+=100],
      repeatDelay: 100,
    });
  });

With the code above, when I click dealButton, three cards are dealt at x=300. After I reset the button and press it again it will deal three cards at x=400 and so on. I’ve also tried to use loop instead of repeat and it’s not exactly clear what is the difference between them.
How can I change x to x+=100 so that the cards are dealt 100px away from each other?

5

you neeed to give callback function to onRepeat property. and to get updated value of locX you can do something like this.

targets: card,
x: {value: function () { return locX; }},
y: 200,
duration: 150,
repeat: 2,
onRepeat: () => {
    locX += 300;
}

Check out these examples.
Dynamic Property
Tween Callbacks

1 Like