From e1f5f2eea1d23e3d9a93160b4c983bdbfba45940 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Sun, 28 Jan 2024 20:44:44 -0500
Subject: [PATCH] fixed mtg add/remove buttons and dice roll

---
 MTG/index.html | 23 ++++++++---------------
 MTG/script.js  |  2 +-
 MTG/style.css  | 27 ++++++++++++++++++---------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/MTG/index.html b/MTG/index.html
index 1187423..60392a4 100644
--- a/MTG/index.html
+++ b/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>
diff --git a/MTG/script.js b/MTG/script.js
index 3a52461..4e1d299 100755
--- a/MTG/script.js
+++ b/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(){
diff --git a/MTG/style.css b/MTG/style.css
index 49c1ec5..fe414f6 100755
--- a/MTG/style.css
+++ b/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;
 }