added name reset

MTG/index.html

@@ -94,9 +94,10 @@
 
     </main>
     <div id="buttonWrapper">
-        <div onclick="removePlayer()" id="removePlayer" class="buttons-left">−</div>
+        <div onclick="removePlayer()" id="removePlayer" class="buttons">−</div>
-    <div onclick="reset()" id="reset" class="buttons-middle">↺</div>
+    <div onclick="resetLife()" id="reset" class="buttons">↺<span class="buttonText">life</span></div>
-    <div onclick="addPlayer()" id="addPlayer" class="buttons-right">+</div>
+    <div onclick="resetName()" id="reset" class="buttons">↻<span class="buttonText">name</span></div>
+    <div onclick="addPlayer()" id="addPlayer" class="buttons">+</div>
     </div>
     
 

MTG/script.js

@@ -33,103 +33,129 @@ for (i=playerCount1; i<9; i++){document.getElementById("player"+i).style.display
 let lifeIncrease1 = () => {
     let counter = Number(this.document.getElementById("lifeCount1").innerHTML);
     counter++;
+    if (counter > 0) document.getElementById("lifeCount1").style.color = "black";
     document.getElementById("lifeCount1").innerHTML = counter;
     };
 
     let lifeDecrease1 = () => {
     let counter = Number(document.getElementById("lifeCount1").innerHTML);
     counter--;
+    if (counter <= 0) document.getElementById("lifeCount1").style.color = "red";
     document.getElementById("lifeCount1").innerHTML = counter;
     };
 
     let lifeIncrease2 = () => {
     let counter = Number(this.document.getElementById("lifeCount2").innerHTML);
     counter++;
+    if (counter > 0) document.getElementById("lifeCount2").style.color = "black";
     document.getElementById("lifeCount2").innerHTML = counter;
     };
 
     let lifeDecrease2 = () => {
     let counter = Number(document.getElementById("lifeCount2").innerHTML);
     counter--;
+    if (counter <= 0) document.getElementById("lifeCount2").style.color = "red";
     document.getElementById("lifeCount2").innerHTML = counter;
     };
 
     let lifeIncrease3 = () => {
     let counter = Number(this.document.getElementById("lifeCount3").innerHTML);
     counter++;
+    if (counter > 0) document.getElementById("lifeCount3").style.color = "black";
     document.getElementById("lifeCount3").innerHTML = counter;
     };
 
     let lifeDecrease3 = () => {
     let counter = Number(document.getElementById("lifeCount3").innerHTML);
     counter--;
+    if (counter <= 0) document.getElementById("lifeCount3").style.color = "red";
     document.getElementById("lifeCount3").innerHTML = counter;
     };
 
     let lifeIncrease4 = () => {
     let counter = Number(this.document.getElementById("lifeCount4").innerHTML);
     counter++;
+    if (counter > 0) document.getElementById("lifeCount4").style.color = "black";
     document.getElementById("lifeCount4").innerHTML = counter;
     };
 
     let lifeDecrease4 = () => {
     let counter = Number(document.getElementById("lifeCount4").innerHTML);
     counter--;
+    if (counter <= 0) document.getElementById("lifeCount4").style.color = "red";
     document.getElementById("lifeCount4").innerHTML = counter;
     };
 
     let lifeIncrease5 = () => {
     let counter = Number(this.document.getElementById("lifeCount5").innerHTML);
     counter++;
+    if (counter > 0) document.getElementById("lifeCount5").style.color = "black";
     document.getElementById("lifeCount5").innerHTML = counter;
     };
 
     let lifeDecrease5 = () => {
     let counter = Number(document.getElementById("lifeCount5").innerHTML);
     counter--;
+    if (counter <= 0) document.getElementById("lifeCount5").style.color = "red";
     document.getElementById("lifeCount5").innerHTML = counter;
     };
 
     let lifeIncrease6 = () => {
     let counter = Number(this.document.getElementById("lifeCount6").innerHTML);
     counter++;
+    if (counter > 0) document.getElementById("lifeCount6").style.color = "black";
     document.getElementById("lifeCount6").innerHTML = counter;
     };
 
     let lifeDecrease6 = () => {
     let counter = Number(document.getElementById("lifeCount6").innerHTML);
     counter--;
+    if (counter <= 0) document.getElementById("lifeCount6").style.color = "red";
     document.getElementById("lifeCount6").innerHTML = counter;
     };
+
     let lifeIncrease7 = () => {
     let counter = Number(this.document.getElementById("lifeCount7").innerHTML);
     counter++;
+    if (counter > 0) document.getElementById("lifeCount7").style.color = "black";
     document.getElementById("lifeCount7").innerHTML = counter;
     };
 
     let lifeDecrease7 = () => {
     let counter = Number(document.getElementById("lifeCount7").innerHTML);
     counter--;
+    if (counter <= 0) document.getElementById("lifeCount7").style.color = "red";
     document.getElementById("lifeCount7").innerHTML = counter;
     };
+
     let lifeIncrease8 = () => {
     let counter = Number(this.document.getElementById("lifeCount8").innerHTML);
     counter++;
+    if (counter > 0) document.getElementById("lifeCount8").style.color = "black";
     document.getElementById("lifeCount8").innerHTML = counter;
     };
 
     let lifeDecrease8 = () => {
     let counter = Number(document.getElementById("lifeCount8").innerHTML);
     counter--;
+    if (counter <= 0) document.getElementById("lifeCount8").style.color = "red";
     document.getElementById("lifeCount8").innerHTML = counter;
     };
-let reset = () => {
+
+let resetLife = () => {
 for (i=1; i<9; i++){
   document.getElementById("lifeCount"+i).innerHTML = 20  
 }
 
 }
 
+let resetName = () => {
+    for (i=1; i<9; i++){
+      document.getElementById("name"+i).innerHTML = "Player " +i
+    }
+    
+    }
+
 let addPlayer = () => {
 if (playerCount != 8){
    playerCount++;

MTG/style.css

@@ -65,7 +65,7 @@
       padding: 20px
   }
   
-  .buttons-left{
+  .buttons{
      
       font-size: 3em;
       line-height: 1.3em;
@@ -75,66 +75,21 @@
       font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
       color: #333;
       text-shadow: 0 1px 0 #EEE;
-      opacity: 0.2;
+      opacity: 0.6;
       background-color: #EEE;
       user-select: none;
-      -webkit-border-top-left-radius: 30px;
+      border-radius: 30px;  
-      -moz-border-radius-topleft: 30px;
-      border-top-left-radius: 30px;
-      -webkit-border-top-right-radius: 30px;
-      -moz-border-radius-topright: 30px;
-      border-top-right-radius: 30px;
-  }
-  .buttons-right{
-     
-      font-size: 3em;
-      line-height: 1.3em;
-      text-align: center;
-      height: 65px;
-      width: 100%;
-      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-      color: #333;
-      text-shadow: 0 1px 0 #EEE;
-      opacity: 0.2;
-      background-color: #EEE;
-      user-select: none;
-      -webkit-border-top-left-radius: 30px;
-      -moz-border-radius-topleft: 30px;
-      border-top-left-radius: 30px;
-      -webkit-border-top-right-radius: 30px;
-      -moz-border-radius-topright: 30px;
-      border-top-right-radius: 30px;
-  }
-  .buttons-middle{
-     
-      font-size: 3em;
-      line-height: 1.3em;
-      text-align: center;
-      height: 65px;
-      width: 100%;
-      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-      color: #333;
-      text-shadow: 0 1px 0 #EEE;
-      opacity: 0.2;
-      background-color: #EEE;
-      user-select: none;
-      -webkit-border-top-left-radius: 30px;
-      -moz-border-radius-topleft: 30px;
-      border-top-left-radius: 30px;
-      -webkit-border-top-right-radius: 30px;
-      -moz-border-radius-topright: 30px;
-      border-top-right-radius: 30px;
-
   }
   #buttonWrapper{
       display: flex;
       flex-direction: row;
-      justify-content:space-around;
+      justify-content:space-evenly;
-      bottom: 0;
-      right: 0;
-      left: 0;
       width: 100%;
-     margin-top: auto;
+     
+  }
+  .buttonText{
+      font-size: .6rem;     
+      margin: auto;
   }
   #lifeCount{
   padding: 10px;