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

mtg fixes

Browse Source
This commit is contained in:
chris 2021-12-29 18:12:15 -05:00
parent 595dc73ed5
commit e73724bcbc
4 changed files with 113 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
MTG/index.html
View File

@ -28,74 +28,121 @@
<div class="name" id="name1" contenteditable="true">
Player 1</div>
<div class="life">
<div onclick="lifeIncrease1()" id="lifeUp">▲</div>
<div id="lifeCount1">20</div>
<div onclick="lifeDecrease1()" id="lifeDown">▼</div>
<span class="vert">
<div onclick="lifeIncrease5(1)" id="lifeUp" class="fiveLife">▲</div>
<div onclick="lifeIncrease(1)" id="lifeUp">▲</div>
</span>
<div id="lifeCount1">20</div>
<span class="vert">
<div onclick="lifeDecrease5(1)" id="lifeDown" class="fiveLife">▼</div>
<div onclick="lifeDecrease(1)" id="lifeDown">▼</div>
</span>
</div>
</div>
<div id="player2" class="player">
<div class="name" id="name2" contenteditable="true">
Player 2</div>
<div class="life">
<div onclick="lifeIncrease2()" ondblclick="" id="lifeUp">▲</div>
<div onclick="lifeIncrease2()" ondblclick="" id="lifeUp">▲</div>
<div id="lifeCount2">20</div>
<div onclick="lifeDecrease2()" id="lifeDown">▼</div>
<div class="life">
<span class="vert">
<div onclick="lifeIncrease5(2)" id="lifeUp" class="fiveLife">▲</div>
<div onclick="lifeIncrease(2)" id="lifeUp">▲</div>
</span>
<div id="lifeCount2">20</div>
<span class="vert">
<div onclick="lifeDecrease5(2)" id="lifeDown" class="fiveLife">▼</div>
<div onclick="lifeDecrease(2)" id="lifeDown">▼</div>
</span>
</div>
</div>
<div id="player3" class="player">
<div class="name" id="name3" contenteditable="true">
Player 3</div>
<div class="life">
<div onclick="lifeIncrease3()" id="lifeUp">▲</div>
<span class="vert">
<div onclick="lifeIncrease5(3)" id="lifeUp" class="fiveLife">▲</div>
<div onclick="lifeIncrease(3)" id="lifeUp">▲</div>
</span>
<div id="lifeCount3">20</div>
<div onclick="lifeDecrease3()" id="lifeDown">▼</div>
<span class="vert">
<div onclick="lifeDecrease5(3)" id="lifeDown" class="fiveLife">▼</div>
<div onclick="lifeDecrease(3)" id="lifeDown">▼</div>
</span>
</div>
</div>
<div id="player4" class="player">
<div class="name" id="name4" contenteditable="true">
Player 4</div>
<div class="life">
<div onclick="lifeIncrease4()" id="lifeUp">▲</div>
<div id="lifeCount4">20</div>
<div onclick="lifeDecrease4()" id="lifeDown">▼</div>
<span class="vert">
<div onclick="lifeIncrease5(4)" id="lifeUp" class="fiveLife">▲</div>
<div onclick="lifeIncrease(4)" id="lifeUp">▲</div>
</span>
<div id="lifeCount4">20</div>
<span class="vert">
<div onclick="lifeDecrease5(4)" id="lifeDown" class="fiveLife">▼</div>
<div onclick="lifeDecrease(4)" id="lifeDown">▼</div>
</span>
</div>
</div>
<div id="player5" class="player">
<div class="name" id="name5" contenteditable="true">
Player 5</div>
<div class="life">
<div onclick="lifeIncrease5()" id="lifeUp">▲</div>
<div id="lifeCount5">20</div>
<div onclick="lifeDecrease5()" id="lifeDown">▼</div>
<span class="vert">
<div onclick="lifeIncrease5(5)" id="lifeUp" class="fiveLife">▲</div>
<div onclick="lifeIncrease(5)" id="lifeUp">▲</div>
</span>
<div id="lifeCount5">20</div>
<span class="vert">
<div onclick="lifeDecrease5(5)" id="lifeDown" class="fiveLife">▼</div>
<div onclick="lifeDecrease(5)" id="lifeDown">▼</div>
</span>
</div>
</div>
<div id="player6" class="player">
<div class="name" id="name6" contenteditable="true">
Player 6</div>
<div class="life">
<div onclick="lifeIncrease6()" id="lifeUp">▲</div>
<div id="lifeCount6">20</div>
<div onclick="lifeDecrease6()" id="lifeDown">▼</div>
<span class="vert">
<div onclick="lifeIncrease5(6)" id="lifeUp" class="fiveLife">▲</div>
<div onclick="lifeIncrease(6)" id="lifeUp">▲</div>
</span>
<div id="lifeCount6">20</div>
<span class="vert">
<div onclick="lifeDecrease5(6)" id="lifeDown" class="fiveLife">▼</div>
<div onclick="lifeDecrease(6)" id="lifeDown">▼</div>
</span>
</div>
</div>
<div id="player7" class="player">
<div class="name" id="name7" contenteditable="true">
Player 7</div>
<div class="life">
<div onclick="lifeIncrease7()" id="lifeUp">▲</div>
<div id="lifeCount7">20</div>
<div onclick="lifeDecrease7()" id="lifeDown">▼</div>
<span class="vert">
<div onclick="lifeIncrease5(7)" id="lifeUp" class="fiveLife">▲</div>
<div onclick="lifeIncrease(7)" id="lifeUp">▲</div>
</span>
<div id="lifeCount7">20</div>
<span class="vert">
<div onclick="lifeDecrease5(7)" id="lifeDown" class="fiveLife">▼</div>
<div onclick="lifeDecrease(7)" id="lifeDown">▼</div>
</span>
</div>
</div>
<div id="player8" class="player">
<div class="name" id="name8" contenteditable="true">
Player 8</div>
<div class="life">
<div onclick="lifeIncrease8()" id="lifeUp">▲</div>
<div id="lifeCount8">20</div>
<div onclick="lifeDecrease8()" id="lifeDown">▼</div>
<span class="vert">
<div onclick="lifeIncrease5(8)" id="lifeUp" class="fiveLife">▲</div>
<div onclick="lifeIncrease(8)" id="lifeUp">▲</div>
</span>
<div id="lifeCount8">20</div>
<span class="vert">
<div onclick="lifeDecrease5(8)" id="lifeDown" class="fiveLife">▼</div>
<div onclick="lifeDecrease(8)" id="lifeDown">▼</div>
</span>
</div>
</div>
<div id="buttonWrapper">

123
MTG/script.js
View File

@ -44,111 +44,28 @@ for (i=playerCount1; i<9; i++){document.getElementById("player"+i).style.display
// 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 lifeIncrease = (playerNum) => {
let counter = Number(this.document.getElementById("lifeCount"+playerNum).innerHTML);
counter++;
if (counter >= 0) document.getElementById("lifeCount"+playerNum).style.color = "black";
document.getElementById("lifeCount"+playerNum).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 lifeDecrease = (playerNum) => {
let counter = Number(document.getElementById("lifeCount"+playerNum).innerHTML);
counter--;
if (counter <= 0) document.getElementById("lifeCount"+playerNum).style.color = "red";
document.getElementById("lifeCount"+playerNum).innerHTML = counter;
};
let lifeIncrease5 = (playerNum) => {
for (i=0; i<5; i++) lifeIncrease(playerNum);
};
let lifeDecrease5 = (playerNum) => {
for (i=0; i<5; i++) lifeDecrease(playerNum);
};
let reset = () => {
Swal.fire({

27
MTG/style.css
View File

@ -25,7 +25,9 @@ main {
align-items: center;
position: relative;
/* margin: 0 auto; */
padding-bottom: 2.5rem;
padding-bottom: 70px;
margin-top: 70px;
margin-bottom: 70px;
}
.name {
font-size: 3rem;
@ -74,13 +76,13 @@ main {
border-bottom: 1px solid #bbb;
border-radius: 30px;
color: #333;
padding: 10px 0;
/* padding: 10px 0; */
text-shadow: 0 1px 0 #eee;
display: flex;
justify-content: center;
align-items: center;
/* height:250px; */
width: auto;
min-width: auto;
font-size: 6rem;
user-select: none;
}
@ -119,17 +121,26 @@ main {
flex-direction: row;
justify-content: space-evenly;
width: 100%;
position: absolute;
position:absolute;
bottom: 0;
height:fit-content;
}
.buttonText {
font-size: 0.65rem;
}
#lifeCount {
padding: 10px;
}
.fiveLifeUp {
.fiveLife {
display: flex;
color: blue;
/* font-size: 3rem; */
}
.vert{
flex-direction: column;
font-size: 5rem ;
}
.fiveLifeDown {
color: greenyellow;
}
.lifeFlex{
flex-direction: column
}

4
menu/menu.css
View File

@ -60,7 +60,8 @@
#body {z-index:0;
box-sizing: border-box;
margin: 0;
padding: 0%;}
padding: 0%;
margin-top: 60px}
#nav-menu{
display: flex;
align-self: center;
@ -72,5 +73,4 @@ nav{
position: absolute;
left: 0;
top: 0;
}