MTG added sweet alert

MTG/index.html

@@ -30,7 +30,7 @@
                     <div class="name" id="name2" contenteditable="true">
                             Player 2</div>
                             <div class="life">
-                                <div onclick="lifeIncrease2()" id="lifeUp">▲</div>
+                                <div onclick="lifeIncrease2()" ondblclick="" id="lifeUp">▲</div>
                                 <div id="lifeCount2">20</div>
                                 <div onclick="lifeDecrease2()" id="lifeDown">▼</div>
                                 </div>
@@ -91,8 +91,8 @@
                                             </div>
                                           <div id="buttonWrapper">
                                                 <div onclick="removePlayer()" id="removePlayer" class="buttons">−</div>
-                                            <div onclick="resetLife()" id="reset" class="buttons">↺<span class="buttonText">life</span></div>
-                                            <div onclick="resetName()" id="reset" class="buttons">↻<span class="buttonText">name</span></div>
+                                            <div onclick="reset()" id="reset" class="buttons">↺<span class="buttonText"></span></div>
+                                            <!-- <div onclick="resetName()" id="reset" class="buttons">↻<span class="buttonText">reset name</span></div> -->
                                             <div onclick="addPlayer()" id="addPlayer" class="buttons">+</div>
                                             </div>  
                                                                                                                                                 
@@ -100,7 +100,7 @@
     </main>
     
     
-
+ <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <script src="script.js"></script>
 </body>
 </html>

MTG/script.js

@@ -30,13 +30,20 @@ playerCount = localStorage.getItem('playerCount');
 let playerCount1 = Number(playerCount)+1;
 for (i=playerCount1; i<9; i++){document.getElementById("player"+i).style.display = "none" }
 
-let lifeIncrease1 = () => {
+    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 fiveIncreaseLife1 = () => {
+    //     let counter = Number(this.document.getElementById("lifeCount1").innerHTML);
+    // counter +=5;
+    // if (counter > 0) document.getElementById("lifeCount1").style.color = "black";
+    // document.getElementById("lifeCount1").innerHTML = counter;
+    // }
+
     let lifeDecrease1 = () => {
     let counter = Number(document.getElementById("lifeCount1").innerHTML);
     counter--;
@@ -142,6 +149,26 @@ let lifeIncrease1 = () => {
     document.getElementById("lifeCount8").innerHTML = counter;
     };
 
+
+    let reset = () => {
+        Swal.fire({
+            title: 'What would you like to reset?',
+            showDenyButton: true,
+            showCancelButton: true,
+            confirmButtonText: 'Life',
+            denyButtonText: `Names`,
+          }).then((result) => {
+            /* Read more about isConfirmed, isDenied below */
+            if (result.isConfirmed) {
+              Swal.fire('Life reset', '', 'success');
+              resetLife();
+            } else if (result.isDenied) {
+              Swal.fire('All player names reset', '', 'success');
+              resetName();
+            }
+          })
+        
+        }
 let resetLife = () => {
 for (i=1; i<9; i++){
   document.getElementById("lifeCount"+i).innerHTML = 20  

MTG/style.css

@@ -3,6 +3,10 @@
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
+  html{
+      height:100%;
+      width: 100%
+  }
   body{
       background-color: darkslategray;
       height: 100vh;
@@ -15,7 +19,7 @@
         font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
   flex-wrap: wrap;
   align-items: center;
- height: 100%
+
           }
   .name{
       font-size: xx-large;
@@ -37,6 +41,7 @@
       background-color: #EEE;
       width: auto;
       justify-content: center;
+      align-content: center;
           }
           .life{
       opacity: 0.9;
@@ -56,13 +61,17 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      height:200px;
+      height:250px;
+      width: 250px;
       font-size: 4.5rem;
       user-select: none;
   }
   
   .player{
       padding: 20px;
+      display: flex;
+      flex-direction: column;
+      
   }
   
   .buttons{
@@ -85,14 +94,18 @@
       flex-direction: row;
       justify-content:space-evenly;
       width: 100%;
-      position: relative;
-      bottom: 0px;
+      position: fixed;
+      bottom: 0;
      
   }
   .buttonText{
-      font-size: .6rem;     
+      font-size: .6rem; 
   
   }
   #lifeCount{
   padding: 10px;
+  }
+
+  .fiveLifeUp{
+color:greenyellow
   }