title: Phaser 3 Tweens with changing variable value
body: <p>I'm building an HTML5 game with Phaser 3. I have a counter tween that I add to the scene upon a certain if condition being met on click of a game object. (It is a text value that flashes red if the card's maximum stat value is lower than the player's value of that stat.)</p>
  <p>First, I set the variable based on which card was clicked:</p>
  <pre><code>if (this == action1_card) {
                  action = action1
                  energy_cost = action1_energy_cost
                  max_suspicion = action1_suspicion_threshold
                  selected_card = action1_card_selected
  } else if (this == action2_card) {
                  action = action2
                  energy_cost = action2_energy_cost
                  max_suspicion = action2_suspicion_threshold
                  selected_card = action2_card_selected
  }
  </code></pre>
  <p>Once I have the values I want (max suspicion is the relevant variable in this case), I then apply the flashing color animation to it if the condition is met.</p>
  <pre><code>if (action.suspicion_threshold &lt; game_data.player.stats.suspicion) {
      t.tweens.addCounter({
          from: 0,
          to: 100,
          duration: 250,
          repeat: 1,
          yoyo: true,
          ease: Phaser.Math.Easing.Sine.InOut,
          onUpdate: function(tween) {
              const value = Math.floor(tween.getValue());
              const colorObject = Phaser.Display.Color.Interpolate.ColorWithColor(
                                  Phaser.Display.Color.ValueToColor('#000000'),
                                  Phaser.Display.Color.ValueToColor('#FF0000'),
                                  100,
                                  value
                              )
              const color = Phaser.Display.Color.RGBToString(colorObject.r, colorObject.g, colorObject.b)
              max_suspicion.setColor(color);
      }
  });
  </code></pre>
  <p>The issue is that, if I was to click on card 1 and then card 2 before the animation was finished on card 1, the animation from card 1's text would resume on card 2. This makes sense, as the variable &quot;max_suspicion&quot; was reassigned to the text object on card 2, and the tween's onUpdate function is continuing as it should.</p>
  <p><strong>How do I either:</strong></p>
  <p><strong>1)</strong> prevent this from being reassigned (e.g. setting max_suspicion to permanently represent card 1's text object for the scope of the tween)</p>
  <p><em>or</em></p>
  <p><strong>2)</strong> reset card 1's value to it's original color and end the tween prematurely so it doesn't carry over to card 2?</p>
  <p>I will gladly clarify anything as needed. Thank you so much for any help on this!</p>