MTG Life Counter

Allows for Manual manipulation of the Total Life Points field.

by Koding Kamp

HTML

<body>
  <div id="container">
    <div id="player1">
      <input placeholder="Player 1">
      <p/>
      <div>
        <input type="button" value="-10" class="dec" onclick="changeHP(1, 10, 0)">
        <input type="button" value="-1" class="dec" onclick="changeHP(1, 1, 0)">
      </div>
      <input id="HP1" type="number" class="hp" value=20>
      <div>
        <input type="button" value="+1" class="inc" onclick="changeHP(1, 1, 1)">
        <input type="button" value="+10" class="inc" onclick="changeHP(1, 10, 1)">
      </div>
      <p/>
      <div>
        Poision Counter:
        <input class="poisondown" type="button" value="-1" onclick="poisonDownOne(1)">
        <input type="number" value=0 id="poison1">
        <input class="poisonup" type="button" value="+1" onclick="poisonUpOne(1)">
      </div>
    </div>
    <p/>
    <div id="player2">
      <input placeholder="Player 2">
      <p/>
      <div>
        <input type="button" value="-10" class="dec" onclick="changeHP(2, 10, 0)">
        <input type="button" value="-1" class="dec" onclick="changeHP(2, 1, 0)">
      </div>
      <input id="HP2" type="number" class="hp" value=20>
      <div>
        <input type="button" value="+1" class="inc" onclick="changeHP(2, 1, 1)">
        <input type="button" value="+10" class="inc" onclick="changeHP(2, 10, 1)">
      </div>
      <p/>
      <div>
        Poision Counter:
        <input class="poisondown" type="button" value="-1" onclick="poisonDownOne(2)">
        <input type="number" value=0 id="poison2">
        <input class="poisonup" type="button" value="+1" onclick="poisonUpOne(2)">
      </div>
    </div>
    <p/>
  </div>
  <p/>
  <button onclick="resetGame()">
    Reset Score
  </button>
  <p/>
  <button onclick="THG()">
    2-headed Giant
  </button>
</body>

CSS

div {
  display: inline;
}

input[type=button] {
  border: none;
  width: 50px;
  height: 25px;
  color: white;
}

input[type=button]:active {
  background-color: black;
}

.dec {
  background-color: red;
}

.inc {
  background-color: green;
}

#HP1,
#HP2 {
  padding: 0 3px;
  width: 80px;
  height: 50px;
  text-align: right;
  font-size: 20px;
}

body {
  text-align: center;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button {
  color: grey;
  background-color: black;
  border-color: white;
}

#poison1,
#poison2 {
  width: 30px;
  text-align: right;
}

.poisonup {
  background-color: red;
}

.poisondown {
  background-color: green;
}

JavaScript

var players = 2;

function changeHP(x, y, w) {
  var z = document.getElementById("HP" + x).value;
  if (w < 1) {
    z -= y;
  } else if (w == 1) {
    z -= -y;
  };
  document.getElementById("HP" + x).value = z;
}

function resetGame() {
  for (i = 1; i <= players; i++) {
    document.getElementById("HP" + i).value = 20;
  }
  resetPoison();
}

function poisonUpOne(x) {
  var w = "poison" + x;
  document.getElementById(w).value++;
}

function poisonDownOne(x) {
  var w = "poison" + x;
  document.getElementById(w).value--;
}

function THG() {
  for (i = 1; i <= players; i++) {
    document.getElementById("HP" + i).value = 40;
  }
  resetPoison();
}

function resetPoison() {
  for (i = 1; i <= players; i++) {
    document.getElementById("poison" + i).value = 0;
  }
}