chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed mtg add/remove buttons and dice roll

Browse Source
This commit is contained in:
chris 2024-01-28 20:44:44 -05:00
parent 7f0485ec04
commit e1f5f2eea1
3 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
MTG/index.html
View File

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

2
MTG/script.js
View File

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

27
MTG/style.css
View File

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