diff --git a/MTG/icons/mstile-150x150.png b/MTG/icons/mstile-150x150.png new file mode 100644 index 0000000..a438eb9 Binary files /dev/null and b/MTG/icons/mstile-150x150.png differ diff --git a/MTG/index.html b/MTG/index.html index 4cbd299..5926306 100644 --- a/MTG/index.html +++ b/MTG/index.html @@ -12,142 +12,10 @@ MTG Life Counter - +
-
−
Player 1
@@ -225,128 +93,13 @@ padding: 10px
-
↺
+
+
−
+
↺
+
- - + \ No newline at end of file diff --git a/MTG/script.js b/MTG/script.js new file mode 100644 index 0000000..534c4c6 --- /dev/null +++ b/MTG/script.js @@ -0,0 +1,134 @@ +window.onunload = function(){ + localStorage.setItem('playerCount', playerCount) +}; +window.onload = function(){ + localStorage.getItem('playerCount') +}; + + + +const startLife = 20; +let playerCount; +if (!localStorage.getItem('playerCount')) {playerCount = 1; localStorage.setItem('playerCount', playerCount);} +playerCount = localStorage.getItem('playerCount'); +let playerCount1 = Number(playerCount)+1; +for (i=playerCount1; i<9; i++){document.getElementById("player"+i).style.display = "none" } + +let lifeIncrease1 = () => { + let counter = Number(this.document.getElementById("lifeCount1").innerHTML); + counter++; + document.getElementById("lifeCount1").innerHTML = counter; + }; + + let lifeDecrease1 = () => { + let counter = Number(document.getElementById("lifeCount1").innerHTML); + counter--; + document.getElementById("lifeCount1").innerHTML = counter; + }; + + let lifeIncrease2 = () => { + let counter = Number(this.document.getElementById("lifeCount2").innerHTML); + counter++; + document.getElementById("lifeCount2").innerHTML = counter; + }; + + let lifeDecrease2 = () => { + let counter = Number(document.getElementById("lifeCount2").innerHTML); + counter--; + document.getElementById("lifeCount2").innerHTML = counter; + }; + + let lifeIncrease3 = () => { + let counter = Number(this.document.getElementById("lifeCount3").innerHTML); + counter++; + document.getElementById("lifeCount3").innerHTML = counter; + }; + + let lifeDecrease3 = () => { + let counter = Number(document.getElementById("lifeCount3").innerHTML); + counter--; + document.getElementById("lifeCount3").innerHTML = counter; + }; + + let lifeIncrease4 = () => { + let counter = Number(this.document.getElementById("lifeCount4").innerHTML); + counter++; + document.getElementById("lifeCount4").innerHTML = counter; + }; + + let lifeDecrease4 = () => { + let counter = Number(document.getElementById("lifeCount4").innerHTML); + counter--; + document.getElementById("lifeCount4").innerHTML = counter; + }; + + let lifeIncrease5 = () => { + let counter = Number(this.document.getElementById("lifeCount5").innerHTML); + counter++; + document.getElementById("lifeCount5").innerHTML = counter; + }; + + let lifeDecrease5 = () => { + let counter = Number(document.getElementById("lifeCount5").innerHTML); + counter--; + document.getElementById("lifeCount5").innerHTML = counter; + }; + + let lifeIncrease6 = () => { + let counter = Number(this.document.getElementById("lifeCount6").innerHTML); + counter++; + document.getElementById("lifeCount6").innerHTML = counter; + }; + + let lifeDecrease6 = () => { + let counter = Number(document.getElementById("lifeCount6").innerHTML); + counter--; + document.getElementById("lifeCount6").innerHTML = counter; + }; + let lifeIncrease7 = () => { + let counter = Number(this.document.getElementById("lifeCount7").innerHTML); + counter++; + document.getElementById("lifeCount7").innerHTML = counter; + }; + + let lifeDecrease7 = () => { + let counter = Number(document.getElementById("lifeCount7").innerHTML); + counter--; + document.getElementById("lifeCount7").innerHTML = counter; + }; + let lifeIncrease8 = () => { + let counter = Number(this.document.getElementById("lifeCount8").innerHTML); + counter++; + document.getElementById("lifeCount8").innerHTML = counter; + }; + + let lifeDecrease8 = () => { + let counter = Number(document.getElementById("lifeCount8").innerHTML); + counter--; + document.getElementById("lifeCount8").innerHTML = counter; + }; +let reset = () => { +for (i=1; i<9; i++){ + document.getElementById("lifeCount"+i).innerHTML = 20 +} + +} + +let addPlayer = () => { +if (playerCount != 8){ + playerCount++; +document.getElementById("player"+playerCount).style.display = ""; +localStorage.setItem('playerCount', playerCount); +} + +} + +let removePlayer = () => { +if (playerCount != 1){ +document.getElementById("player"+playerCount).style.display = "none"; +playerCount--; +localStorage.setItem('playerCount', playerCount); +} + +} + diff --git a/MTG/style.css b/MTG/style.css new file mode 100644 index 0000000..e0721bb --- /dev/null +++ b/MTG/style.css @@ -0,0 +1,140 @@ +*, *:after, *:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + body{ + background-color: darkslategray; + width:100vw; + height: 100vhs; + } + main{ + display: flex; + justify-content: space-evenly; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + flex-wrap: wrap; + } + #name{ + font-size: xx-large; + display: flex; + margin: 0 0 20px; + padding: 10px 0; + opacity: 0.9; + background-color: #EEE; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(100%, #CCC)); + background-image: -webkit-linear-gradient(top, #EEE, #AAA); + background-image: -moz-linear-gradient(top, #EEE, #AAA); + background-image: -ms-linear-gradient(top, #EEE, #AAA); + background-image: -o-linear-gradient(top, #EEE, #AAA); + background-image: linear-gradient(top, #EEE, #AAA); + border: 1px solid #999; + border-bottom: 1px solid #BBB; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + border-radius: 30px; + text-shadow: 0 1px 0 #EEE; + background-color: #EEE; + width: 400px; + justify-content: center; + } + .life{ + opacity: 0.9; + background-color: #EEE; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(100%, #CCC)); + background-image: -webkit-linear-gradient(top, #EEE, #AAA); + background-image: -moz-linear-gradient(top, #EEE, #AAA); + background-image: -ms-linear-gradient(top, #EEE, #AAA); + background-image: -o-linear-gradient(top, #EEE, #AAA); + background-image: linear-gradient(top, #EEE, #AAA); + border: 1px solid #999; + border-bottom: 1px solid #BBB; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + border-radius: 30px; + color: #333; + padding: 8px 0; + text-shadow: 0 1px 0 #EEE; + display: flex; + justify-content: center; + align-items: center; + min-height: 50%; + font-size: 5rem; + user-select: none; + } + + .player{ + padding: 20px + } + + .buttons-left{ + + 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-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; + + } + #buttonWrapper{ + display: flex; + flex-direction: row; + justify-content: space-around; + position: fixed; + bottom: 0; + width: 100%; + } + #lifeCount{ + padding: 10px; + } \ No newline at end of file