fixed mtg add/remove buttons and dice roll

MTG/index.html

@@ -16,25 +16,18 @@
 
     <div id="navContainer"></div>
     <div class="buttons1" id="buttonWrapper">
-      <!-- <i class="fa-solid fa-arrow-up-from-bracket"></i> -->
-      <span>
-        <i
-          id="remove"
-          class="fa-solid fa-circle-minus"
-          onclick="removePlayer()"
-        ></i>
+      <span class="icon">
+        <i onclick="removePlayer()" class="fa-solid fa-circle-minus"></i>
       </span>
-      <span>
-        <i id="reset" class="fa-solid fa-rotate-left" onclick="reset()"></i>
+      <span class="icon" onclick="reset()">
+        <i id="reset" class="fa-solid fa-rotate-left"></i>
+      </span>
+      <span onclick="addPlayer()">
+        <i class="fa-solid fa-circle-plus"></i>
       </span>
-
-      <!-- <span class="buttonText"></span> -->
-      <span onclick="addPlayer()"
-        ><i id="add" class="fas fa-plus-circle"></i
-      ></span>
 
       <span class="dice">
-        <img id="d20" src="img/dice.webp" />
+        <img id="d20" src="img/dice.webp" onclick="random()" />
         <div id="d20-face">1</div>
       </span>
     </div>

MTG/script.js

@@ -166,7 +166,7 @@ let random = () => {
   spin();
   let rand = Math.floor(Math.random() * 20 + 1);
   console.log(rand);
-  document.getElementById("center").innerHTML = rand;
+  document.getElementById("d20-face").innerHTML = rand;
 };
 
 // function rolar(){

MTG/style.css

@@ -17,12 +17,12 @@ body {
   );
   /* background-color: #85640b; */
   margin: 0;
-  display: flex;
+  /* display: flex; */
   /* height: 100vh; */
   height: 100%;
 }
 html {
-  height: 100vh;
+  height: 100%;
   font-size: 110%;
 }
 #full {
@@ -121,7 +121,7 @@ main {
 }
 
 .buttons1 {
-  font-size: 3vh;
+  font-size: 4vh;
 
   /* font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
     Verdana, sans-serif; */
@@ -129,9 +129,9 @@ main {
   color: rgb(141, 140, 140);
 
   text-shadow: 0 1px 0 #eee;
-  margin-top: 3px;
+  /* margin-top: 3px; */
 
-  user-select: none;
+  /* user-select: none; */
   align-items: center;
   justify-content: space-between;
 }
@@ -161,28 +161,37 @@ main {
   top: -40px;
   right: 0;
   margin-top: 100px;
-  padding-right: 5px;
+  /* padding-right: 5px; */
   align-content: center;
 }
+.buttonSpan {
+  /* padding: 15px 15px; */
+  font-size: 4vh;
+  border-radius: 25%;
+}
+i {
+  pointer-events: auto;
+}
 .buttonText {
   font-size: 1.5vw;
 }
 #d20 {
-  width: 3vh;
+  width: 6vh;
   height: auto;
   vertical-align: middle;
+  top: -5px;
 }
 #d20-face {
   position: absolute;
 
-  top: 53%;
+  top: 48%;
 
   left: 50%;
 
   transform: translate(-50%, -50%);
 
   text-align: center;
-  font-size: 0.75vh;
+  font-size: 1.75vh;
   /* width: 100%; */
   color: red;
 }