diff --git a/src/index.html b/src/index.html index c9ac337..b6d819e 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,6 @@ Tetris - @@ -25,13 +24,18 @@ document.addEventListener("DOMContentLoaded", function () { // check if the device prefers dark mode if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) { - document.documentElement.classList.add("dark"); + document.body.classList.add("dark"); } // check if dark mode preference is eneabled in localstorage if (localStorage.getItem("theme") == "dark") { document.body.classList.add("dark"); } + + // check if username is in localstorage + if (window.localStorage.getItem("username")) { + document.querySelector("#username").value = window.localStorage.getItem("username"); + } }); @@ -41,109 +45,109 @@
-
-
+
+

all time best

- + + +
+

daily best

+ +
+
@@ -204,7 +214,7 @@

all time best

personal best

- + personal best
- + press any key to start id="optionsToggle" alt="toggle options" height="24" - viewbox="0 -960 960 960" + viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg" > @@ -449,6 +459,7 @@

press any key to start

d="M479.987-130.001q-12.756 0-21.371-8.625-8.615-8.624-8.615-21.374v-160q0-12.75 8.628-21.374 8.629-8.625 21.384-8.625 12.756 0 21.371 8.625 8.615 8.624 8.615 21.374v50.001H800q12.75 0 21.375 8.628 8.624 8.629 8.624 21.384 0 12.756-8.624 21.371-8.625 8.615-21.375 8.615H509.999V-160q0 12.75-8.628 21.374-8.629 8.625-21.384 8.625Zm-319.987-80q-12.75 0-21.374-8.628-8.625-8.629-8.625-21.384 0-12.756 8.625-21.371 8.624-8.615 21.374-8.615h160q12.75 0 21.374 8.628 8.625 8.629 8.625 21.384 0 12.756-8.625 21.371-8.624 8.615-21.374 8.615H160Zm159.987-160q-12.756 0-21.371-8.625-8.615-8.624-8.615-21.374v-50.001H160q-12.75 0-21.374-8.628-8.625-8.629-8.625-21.384 0-12.756 8.625-21.371 8.624-8.615 21.374-8.615h130.001V-560q0-12.75 8.628-21.375 8.629-8.624 21.384-8.624 12.756 0 21.371 8.624 8.615 8.625 8.615 21.375v160q0 12.75-8.628 21.374-8.629 8.625-21.384 8.625Zm160.013-80q-12.75 0-21.374-8.628-8.625-8.629-8.625-21.384 0-12.756 8.625-21.371 8.624-8.615 21.374-8.615h320q12.75 0 21.375 8.628 8.624 8.629 8.624 21.384 0 12.756-8.624 21.371-8.625 8.615-21.375 8.615H480Zm159.987-160q-12.756 0-21.371-8.624-8.615-8.625-8.615-21.375v-160q0-12.75 8.628-21.375 8.629-8.624 21.384-8.624 12.756 0 21.371 8.624 8.615 8.625 8.615 21.375v50.001H800q12.75 0 21.375 8.628 8.624 8.629 8.624 21.384 0 12.756-8.624 21.371-8.625 8.615-21.375 8.615H669.999V-640q0 12.75-8.628 21.375-8.629 8.624-21.384 8.624Zm-479.987-80q-12.75 0-21.374-8.628-8.625-8.629-8.625-21.384 0-12.756 8.625-21.371 8.624-8.615 21.374-8.615h320q12.75 0 21.374 8.628 8.625 8.629 8.625 21.384 0 12.756-8.625 21.371-8.624 8.615-21.374 8.615H160Z" > +
press any key to start id="light" fill="grey" height="24" - viewbox="0 -960 960 960" + viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg" > @@ -493,7 +504,7 @@

press any key to start

id="dark" fill="grey" height="24" - viewbox="0 -960 960 960" + viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg" > @@ -504,7 +515,7 @@

press any key to start

- + { }; window.onload = () => { + // load preferences in localstorage + if (localStorage.getItem("sound_effects")) { + let old_state = Number(effectsIcon.dataset.state); + effectsIcon.dataset.state = localStorage.getItem("sound_effects"); + effectsIcon.src = effectsIcon.src.replace(`${old_state}.svg`, `${effectsIcon.dataset.state}.svg`); + iconChangeVolume(effectsIcon); + } + + if (localStorage.getItem("soundtrack")) { + let old_state = Number(trackIcon.dataset.state); + trackIcon.dataset.state = localStorage.getItem("soundtrack"); + trackIcon.src = trackIcon.src.replace(`${old_state}.svg`, `${trackIcon.dataset.state}.svg`); + } + + if (localStorage.getItem("speed")) { + let old_state = Number(speedIcon.dataset.state); + speedIcon.dataset.state = localStorage.getItem("speed"); + speedIcon.src = speedIcon.src.replace(`${old_state}.svg`, `${speedIcon.dataset.state}.svg`); + speed = 40 - Number(speedIcon.dataset.state) * 10; + } + soundtrack.loop = true; soundtrack.volume = 0.5 * trackIcon.dataset.state; bgColor = window.getComputedStyle(document.querySelector(".main_layout")).backgroundColor; change_dimensions(); - usernameHTML.value = username ? username : ""; local_scores(); // set listeners @@ -99,6 +119,7 @@ window.onload = () => { if (element.id == "speedIcon") { toggleMusicIcon(e, false); let state = Number(speedIcon.dataset.state); + localStorage.setItem("speed", state); speed = 40 - state * 10; return; } @@ -114,6 +135,11 @@ window.onload = () => { bgColor = window.getComputedStyle(document.querySelector(".main_layout")).backgroundColor; }); } + + const dropDownBtn = document.querySelector("#toggleDropDown"); + dropDownBtn.addEventListener("click", () => { + dropDownBtn.parentElement.classList.toggle("toggled"); + }); }; // functions @@ -157,6 +183,10 @@ function iconChangeVolume(icon) { let changes = Array.from(soundOptions); let effectsLevel = effectsIcon.dataset.state; let trackLevel = trackIcon.dataset.state; + localStorage.setItem("sound_effects", effectsLevel); + if (icon == trackIcon) { + localStorage.setItem("soundtrack", trackLevel); + } icon.src?.includes("effects") ? changes.splice(0, 2) : 0; icon.src?.includes("music") ? changes.splice(2) : 0; diff --git a/src/style-dark.css b/src/style-dark.css index 33060e6..e38f9f9 100644 --- a/src/style-dark.css +++ b/src/style-dark.css @@ -5,7 +5,6 @@ --colorGradientStart: rgb(93.725% 22.353% 13.725%); --colorGradientEnd: rgb(64.052% 0% 0%); --stroke: rgb(155, 30, 15); - --settingsOpacity: 0; --primaryDark: #1d1d1d; --secondaryDark: ghostwhite; diff --git a/src/style.css b/src/style.css index 1169f75..94e708b 100644 --- a/src/style.css +++ b/src/style.css @@ -5,7 +5,7 @@ --colorGradientStart: rgb(93.725% 22.353% 13.725%); --colorGradientEnd: rgb(64.052% 0% 0%); --stroke: rgb(155, 30, 15); - --settingsOpacity: 0; + --settingsOpacity: 1; --lightBackground: #FAFAFA; --darkBackground: #212121; @@ -298,6 +298,11 @@ input.rang:invalid { opacity: 100%; font-size: 0.85rem; font-family: "DM Mono"; + max-width: 95%; +} + +li>b { + line-break: anywhere; } .scores ol li::marker, @@ -346,12 +351,25 @@ input.rang:invalid { user-select: none; } +.sepperator { + border: none; + width: calc(100% - 20px); + height: 2px; + background-color: grey; + border-radius: 2px; + margin-top: 0px; + margin-bottom: 5px; + opacity: var(--settingsOpacity); + transition: opacity 1s; +} + .settingIcon2 { margin-top: 5px; margin-bottom: 5px; opacity: var(--settingsOpacity); } + .settingIcon2:hover { filter: brightness(0%); } @@ -371,7 +389,7 @@ input.rang:invalid { .dropIcon, .resetIcon { fill: grey; - transition: fill 1s, filter 1s; + transition: fill 1s, filter 1s, rotate 0.5s; } .settingIcon:hover, @@ -389,4 +407,47 @@ input.rang:invalid { .logo>svg { width: 80%; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2)); +} + +.dropdown-options { + position: absolute; + width: 100%; + max-width: 90%; + background: var(--lightBackground); + border: 1px solid lightgrey; + border-radius: 5px; + z-index: 1 !important; + top: 0.5rem; + transition: opacity 1s; +} + +.dropdown-options>h2 { + width: 100%; + margin-left: 0; + margin-right: 0; +} + +/* .dropdown-options>h2:hover { + font-weight: bolder; +} */ + +.h2_wrapper>* { + z-index: 2; + user-select: none; + cursor: pointer; +} + +.dropdown-options :first-child { + margin-top: calc(3rem + 4px); + border-top: 1px solid lightgrey; + padding-top: 1rem; +} + +.toggled .dropIcon { + rotate: 180deg; +} + +.toggled .dropdown-options { + opacity: 0; + pointer-events: none; } \ No newline at end of file