MTG Life counter. Display fluctuations in count

Question

MTG Life counter. Display fluctuations in count

I am currently working on a fun project creating an MTG (Magic The Gathering) life tracker, even though the code is quite messy. Despite its flaws, it still gets the job done.

Click here to view the MTG life tracker

https://i.stack.imgur.com/Su17J.png

Objective / Challenges I'm facing

My goal is to incorporate an indicator that displays how many times someone has adjusted the life total of one of the players by clicking a button. This indicator would briefly show the number of clicks before fading out, essentially resetting for the next adjustment.

If the life total is adjusted again, the indicator should visualize the changes made, both up and down. Is there a straightforward way to achieve this using jquery or vanilla JS?

If not, I might resort to utilizing jquery's .change

.change(function(){//"count recent clicks somehow"

function to track the clicks and display a + or - accordingly.

Any advice or assistance on this matter would be greatly appreciated!

javascript html jquery css ecmascript-6

Answer 1

Answer №1

I ended up complicating things way too much

Check out this example of it in action!

var lastFadeOutTime = 0;
var fadeOutTimeout;

function modifyLife(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>

Answer 2

I ended up complicating things way too much

Check out this example of it in action!

var lastFadeOutTime = 0;
var fadeOutTimeout;

function modifyLife(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>

MTG Life counter. Display fluctuations in count

Click here to view the MTG life tracker

Objective / Challenges I'm facing

Answer №1

Similar questions

navigate to a new page in vue with node.js

What is the most efficient way to find the sum of duplicates in an array based on two different properties and then return the

Desktop display issue: Fontawesome icon not appearing

Struggling with displaying MySQL data in JSON format using Highcharts

The Ajax request is not successfully communicating with the PHP script

Necessary CSS selector input equivalent in Reactive Forms

Is a single f.select impacting another f.select in the same form? (undesired)

Selenium: Utilizing the get_attribute() function with a CSS query

Steps to efficiently enumerate the array of parameters in the NextJS router:

Filtering data with AngularJS upon user clicks

Ways to implement real-time search feature in Rails 4.2

What is the technique for implementing a slide animation on hover to move a div identified by the class `box`?

Blend field and JavaScript functions while retrieving data from MongoDB

What is the best way to submit several files along with additional fields simultaneously using FormData?

Do we really need to create our own action creators in Redux Toolkit?

"Exploring the dynamic duo of Angular2 and ng2Material

Nested child objects causing interference with mouseenter and mouseleave events

Ways to verify if a variable holds a JSON object or a string

Avoid directing to target selectors when using jQuery UI tabs

Combine the input element's value with a string using jQuery