MTG Life tracker. Show change in number

Im making a MTG (Magic The Gathering) life tracker. Just for fun really. Even tho its extremely messy written and such.
it does the job OK.

https://isthaturcard.no/Life-Tracker/

Goal / Issues I'm having

I want to add an indicator to show how many times someone clicked or adjusted the life total on one of the players.

Meaning;
If i were to adjust the life total on one of the players either up or down. a little box fading in displaying how many times that button was just then clicked, before it fades out again. but then "resets" that visualization.

So that then also next time someone were to adjust the life total, visualize the changes they made.

Visualizing the changes up and down.

Using jquery or vanilla JS, is there a fairly simple way to do this?

If not ill probably end up doing something with jquery's .change .change(function(){//"count recent clicks somehow" or something. and have it slap on a + or - depending on what button was pressed.

any input and help would mean the world!

Solution

I had overcomplicated stuff A LOT

Here is an example of it working!

var lastFadeOutTime = 0;
var fadeOutTimeout;

function changeLife(player, amount) {
  var lifeTotalElement = $(`#lifeTotal${player.charAt(player.length-1)}`);
  var historyLogElement = $(`#historyLog${player.charAt(player.length-1)}`);
  var visualizationElement = $('#visualization');

  var currentLife = parseInt(lifeTotalElement.text());
  var newLife = currentLife + amount;

  // Update life total
  lifeTotalElement.text(newLife);

  // Update history log
  var historyItem = amount > 0 ? `+${amount}` : `${amount}`;
  historyLogElement.prepend(`<p>${historyItem}</p>`);

  // Update visualization
  var totalChanges = 0;

  // Only consider changes after the last fade out
  historyLogElement.find('p').slice(0, 1000).each(function() {
    totalChanges += parseInt($(this).text());
  });

  // Update visualization
  visualizationElement.text(`${totalChanges}`);
  visualizationElement.fadeIn();

  // Clear the previous timeout
  clearTimeout(fadeOutTimeout);

  // Hide visualization after 5 seconds and reset the history log
  fadeOutTimeout = setTimeout(function() {
    var currentTime = new Date().getTime();
    if (currentTime - lastFadeOutTime >= 3000) {
      visualizationElement.fadeOut(function() {
        historyLogElement.find('p').remove();
        lastFadeOutTime = currentTime;
      });
    }
  }, 5000);
}

body {
  font-family: 'Arial', sans-serif;
  text-align: center;
}

.container {
  display: flex;
  justify-content: space-around;
  margin: 20px;
}

.player {
  width: 150px;
  padding: 10px;
  border: 2px solid #333;
  border-radius: 5px;
}

.life-total {
  font-size: 24px;
  margin-bottom: 10px;
}

.btn {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

.history-log {
  display: none;
  /* hide history log */
}

.visualization {
  margin-top: 20px;
  font-size: 18px;
  display: none;
  /* initially hide */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Magic: The Gathering Life Counter</title>
</head>

<body>
  <div class="container">
    <div class="player" id="player1">
      <h2>Player 1</h2>
      <div class="life-total" id="lifeTotal1">40</div>
      <button class="btn" onclick="changeLife('player1', 1)">+1</button>
      <button class="btn" onclick="changeLife('player1', -1)">-1</button>
      <div class="history-log" id="historyLog1"></div>
    </div>

    <div class="player" id="player2">
      <h2>Player 2</h2>
      <div class="life-total" id="lifeTotal2">40</div>
      <button class="btn" onclick="changeLife('player2', 1)">+1</button>
      <button class="btn" onclick="changeLife('player2', -1)">-1</button>
      <div class="history-log" id="historyLog2"></div>
    </div>
  </div>
  <div class="visualization" id="visualization"></div>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</body>

</html>