diff --git a/MTG/index.html b/MTG/index.html index 1be23d8..15b124d 100644 --- a/MTG/index.html +++ b/MTG/index.html @@ -94,9 +94,10 @@
-
-
-
+
+
+
life
+
name
+
+
diff --git a/MTG/script.js b/MTG/script.js index 631c4bc..c515d4c 100644 --- a/MTG/script.js +++ b/MTG/script.js @@ -33,103 +33,129 @@ for (i=playerCount1; i<9; i++){document.getElementById("player"+i).style.display 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 lifeDecrease1 = () => { let counter = Number(document.getElementById("lifeCount1").innerHTML); counter--; + if (counter <= 0) document.getElementById("lifeCount1").style.color = "red"; document.getElementById("lifeCount1").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 reset = () => { + +let resetLife = () => { for (i=1; i<9; i++){ document.getElementById("lifeCount"+i).innerHTML = 20 } } +let resetName = () => { + for (i=1; i<9; i++){ + document.getElementById("name"+i).innerHTML = "Player " +i + } + + } + let addPlayer = () => { if (playerCount != 8){ playerCount++; diff --git a/MTG/style.css b/MTG/style.css index 2119268..b62ab10 100644 --- a/MTG/style.css +++ b/MTG/style.css @@ -65,7 +65,7 @@ padding: 20px } - .buttons-left{ + .buttons{ font-size: 3em; line-height: 1.3em; @@ -75,66 +75,21 @@ font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; color: #333; text-shadow: 0 1px 0 #EEE; - opacity: 0.2; + opacity: 0.6; background-color: #EEE; user-select: none; - -webkit-border-top-left-radius: 30px; - -moz-border-radius-topleft: 30px; - border-top-left-radius: 30px; - -webkit-border-top-right-radius: 30px; - -moz-border-radius-topright: 30px; - border-top-right-radius: 30px; - } - .buttons-right{ - - font-size: 3em; - line-height: 1.3em; - text-align: center; - height: 65px; - width: 100%; - font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - color: #333; - text-shadow: 0 1px 0 #EEE; - opacity: 0.2; - background-color: #EEE; - user-select: none; - -webkit-border-top-left-radius: 30px; - -moz-border-radius-topleft: 30px; - border-top-left-radius: 30px; - -webkit-border-top-right-radius: 30px; - -moz-border-radius-topright: 30px; - border-top-right-radius: 30px; - } - .buttons-middle{ - - font-size: 3em; - line-height: 1.3em; - text-align: center; - height: 65px; - width: 100%; - font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - color: #333; - text-shadow: 0 1px 0 #EEE; - opacity: 0.2; - background-color: #EEE; - user-select: none; - -webkit-border-top-left-radius: 30px; - -moz-border-radius-topleft: 30px; - border-top-left-radius: 30px; - -webkit-border-top-right-radius: 30px; - -moz-border-radius-topright: 30px; - border-top-right-radius: 30px; - + border-radius: 30px; } #buttonWrapper{ display: flex; flex-direction: row; - justify-content:space-around; - bottom: 0; - right: 0; - left: 0; + justify-content:space-evenly; width: 100%; - margin-top: auto; + + } + .buttonText{ + font-size: .6rem; + margin: auto; } #lifeCount{ padding: 10px;