From 74d6a4fa696e604671dbbdfd6436acc9fcb9bedf Mon Sep 17 00:00:00 2001 From: HearMeWhisper Date: Mon, 8 Nov 2021 13:33:26 -0500 Subject: [PATCH] MTG localstorage player count --- MTG/icons/mstile-150x150.png | Bin 0 -> 8795 bytes MTG/index.html | 259 +---------------------------------- MTG/script.js | 134 ++++++++++++++++++ MTG/style.css | 140 +++++++++++++++++++ 4 files changed, 280 insertions(+), 253 deletions(-) create mode 100644 MTG/icons/mstile-150x150.png create mode 100644 MTG/script.js create mode 100644 MTG/style.css diff --git a/MTG/icons/mstile-150x150.png b/MTG/icons/mstile-150x150.png new file mode 100644 index 0000000000000000000000000000000000000000..a438eb9567e5f0498754cd32036ef96b755d54a0 GIT binary patch literal 8795 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 Zb|{EFPTq;6Jc__jmREmY`R-%b{{y;C4ekH{ literal 0 HcmV?d00001 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