MTG Life Counter 2

MTG Counter with Adjustable Number of Players

by Koding Kamp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
</main>
<footer>
  <section>
    <input class="resetBtn" type="button" value="Reset(20)" onclick="reset(20)">
    <input class="resetBtn" type="button" value="Reset(40)" onclick="reset(40)">
  </section>
  <section>
    <input type="number" id="numOfPlayers" value="2">
    <input type="button" value="Update No. of Players" onclick="updatePlayers()">
  </section>
</footer>

CSS

body {
  text-align: center;
}

main {
  display: inline-grid;
}

#numOfPlayers {
  text-align: center;
  padding-right: 5px;
  width: 50px;
}

container {
  text-align: center;
  padding: 5px;
  width: 350px;
  font-size: 0;
  border: 1px solid black;
  background-color: #eee;
  min-height: 100px;
}

.playerName {
  margin-bottom: 5px;
}

footer {
  margin-top: 30px;
  padding-bottom: 30px;
}

.damage10 {
  background-color: #900;
  border-width: 3px 0 3px 3px;
  border-style: solid;
  border-color: #111;
}

.damage1 {
  background-color: #f00;
  border-width: 3px 3px 3px 0;
  border-style: solid;
  border-color: #AAA;
}

.heal10 {
  background-color: #090;
  border-width: 3px 3px 3px 0;
  border-style: solid;
  border-color: #111;
}

.heal1 {
  background-color: #0f0;
  border-width: 3px 0 3px 3px;
  border-style: solid;
  border-color: #AAA;
}

.healthWindow {
  height: 50px;
  width: 100px;
  text-align: center;
  font-size: 50px;
  position: relative;
  top: 15px;
  margin: 0 10px;
}

.poisonWindow {
  text-align: center;
  width: 50px;
}

.btn {
  font-size: 20px;
  width: 55px;
}

.btn:active {
  color: #fff;
  border-style: inset;
}

.poisonTitle {
  font-size: 18px;
}
.poisonBtn{
  border-width: 3px;
  margin: 0 5px;
}

.poisonSection {
  display: none;
}

JavaScript

// Global Variable for tracking number of Players and their inputted names
var players = 2;

// Function(s) to run when document is loaded
$(document).ready(function() {
  addPlayer(players); // Used to condense HTML code
});

/* Function used to empty main element and loop for filling it. Loop concatenates to existing elements in main, therefore requiring emptying of main element first. */
function addPlayer(n) {
  $('main').html("");
  for (var i = 0; i < n; i++) {
    createPlayerContainer(i);
  }
}

// Function for creating html elements in respect to number of players selected.
function createPlayerContainer(n) {
  var htmlString = '<container>' +
    '<input class="playerName" placeholder="Player ' + (n + 1) + '">' +
    '<section>' +
    '<input class="damage10 btn" type="button" value="-10" onclick="adjustHP(' + n + ', 10, true)">' +
    '<input class="damage1 btn" type="button" value="-1" onclick="adjustHP(' + n + ', 1, true)">' +
    '<input class="healthWindow" id="hp' + n + '" type="number" value="20">' +
    '<input class="heal1 btn" type="button" value="+1" onclick="adjustHP(' + n + ', 1)">' +
    '<input class="heal10 btn" type="button" value="+10" onclick="adjustHP(' + n + ', 10)">' +
    '</section>' +
    '<section class="poisonSection"><p class="poisonTitle">Player ' + (n + 1) + ' Posion Count</p>' +
    '<section>' +
    '<input class="heal1 btn poisonBtn" type="button" value="-1" onclick="adjustPoison(' + n + ', true)">' +
    '<input class="poisonWindow" id="poison' + n + '" type="number" value="0">' +
    '<input class="damage1 btn poisonBtn" type="button" value="+1" onclick="adjustPoison(' + n + ')">' +
    '</section></<section>' +
    '</container>';
  if ((n + 1) % 2 == 0 && n > 1) {
   // htmlString = "<p />" + htmlString
  }
  $('main').html($('main').html() + htmlString);
}

function adjustHP(playerIndex, adjustAmount, negative = false) {
  var hpValue = parseInt(document.getElementById("hp" + playerIndex).value, 10);
  if (negative)...