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

Develop universal style classifications for JSS within material-ui

Is it necessary to download all npm packages when starting a new project?

Exploring the Differences in CSS Styling between Web and Mobile Platforms

Using JQuery template: a guide to accessing recently added option elements with JQuery templates

Creating a list that renders responsively using ReactJS

Fixed Navigation - Employing stickUp.js extension

Guide on deleting an element from an object array based on the content of a specific field (resulting in undefined mapping)

Tips for showing a single progress message when uploading multiple files on eleme.io [vuejs]

Choosing a specific page number - kendo grid

Disable or set input text to read-only in Internet Explorer 9 and earlier versions using JavaScript or jQuery

Updating the DOM through Long Polling allows us to maintain existing attributes in jQuery Plugin

Retrieve files from Amazon S3 using JavaScript

When attempting to create a build using npm run, an error with code ELIFECYCLE occurred despite successfully installing

Trouble with passing the function variable to setState efficiently

Encountering an issue with Material-UI and Next.js: "TypeError: theme.spacing is not a function

Preventing template rendering in Angular until an event is triggered - but how?

JavaScript / Ajax / PHP - A Minor Bug That's Bugging Me

Can we determine if a user's operating system has disabled animations?

A fixed HTML div with a relative div is like having your own

What is the best way to add a URL dynamically when a click event occurs?