Skip to content

Commit

Permalink
added dropdown menu (all time best, daily best, ...), added preferenc…
Browse files Browse the repository at this point in the history 
…es to localstorage (so that they get remembered), added sepperator between settings
  • Loading branch information
@arthur-adriansens
arthur-adriansens authored Jan 8, 2024
1 parent d389ce9 commit 3a70851
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 51 deletions.
105 changes: 58 additions & 47 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<head>
<title>Tetris</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="A fun Tetris game with weekly updates and a public scoreboard!!" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Expand All @@ -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");
}
});
</script>
</head>
Expand All @@ -41,109 +45,109 @@
<div class="left column">
<div class="logo">
<!-- todo <a href="https://sjh-tetris.glitch.me/"></a> -->
<svg viewbox="0 0 420.2 65.9" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<svg viewBox="0 0 420.2 65.9" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<defs>
<lineargradient
gradientunits="userSpaceOnUse"
<linearGradient
gradientUnits="userSpaceOnUse"
x1="68.332"
y1="227.897"
x2="68.332"
y2="271.597"
id="gradient-0"
spreadmethod="pad"
gradienttransform="matrix(1, 0, 0, 1, -34.832001, -227.896542)"
spreadMethod="pad"
gradientTransform="matrix(1, 0, 0, 1, -34.832001, -227.896542)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
x1="226.072"
y1="227.9"
x2="226.072"
y2="271.2"
id="gradient-2"
gradienttransform="matrix(1, 0, 0, 1, -40.832001, -227.899536)"
gradientTransform="matrix(1, 0, 0, 1, -40.832001, -227.899536)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
x1="303.242"
y1="238.21"
x2="303.242"
y2="281.91"
id="gradient-3"
gradienttransform="matrix(1, 0, 0, 1, -336.445466, 8.305004)"
gradientTransform="matrix(1, 0, 0, 1, -336.445466, 8.305004)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</lineargradient>
<lineargradient id="gradient-7" bx:pinned="true">
</linearGradient>
<linearGradient id="gradient-7" bx:pinned="true">
<stop offset="0" style="stop-color: var(--colorGradientStart);"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd);"></stop>
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
x1="145.996"
y1="238.443"
x2="145.996"
y2="282.143"
id="gradient-6"
gradienttransform="matrix(1, 0, 0, 1, -47.668785, -214.569473)"
gradientTransform="matrix(1, 0, 0, 1, -47.668785, -214.569473)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
x1="226.072"
y1="227.9"
x2="226.072"
y2="271.2"
id="gradient-1"
gradienttransform="matrix(1, 0, 0, 1, 160.528366, -227.914734)"
gradientTransform="matrix(1, 0, 0, 1, 160.528366, -227.914734)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
x1="226.072"
y1="227.9"
x2="226.072"
y2="271.2"
id="gradient-5"
gradienttransform="matrix(1, 0, 0, 1.009188, 117.228027, -229.988894)"
gradientTransform="matrix(1, 0, 0, 1.009188, 117.228027, -229.988894)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
x1="226.072"
y1="227.9"
x2="226.072"
y2="271.2"
id="gradient-4"
gradienttransform="matrix(1, 0, 0, 1.01159, 49.560085, -230.512993)"
gradientTransform="matrix(1, 0, 0, 1.01159, 49.560085, -230.512993)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</lineargradient>
<lineargradient
gradientunits="userSpaceOnUse"
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
x1="303.242"
y1="238.21"
x2="303.242"
y2="281.91"
id="gradient-8"
gradienttransform="matrix(1, 0, 0, 1, -97.24678, 8.305309)"
gradientTransform="matrix(1, 0, 0, 1, -97.24678, 8.305309)"
>
<stop offset="0" style="stop-color: var(--colorGradientStart)"></stop>
<stop offset="1" style="stop-color: var(--colorGradientEnd)"></stop>
</lineargradient>
</linearGradient>
</defs>
<path
d="M 44 43.7 L 22 43.7 L 22 21 L 0 21 L 0 0 L 67 0 L 67 20.8 L 44 21 L 44 43.7 Z"
Expand Down Expand Up @@ -183,16 +187,22 @@
</path>
</svg>
</div>
<div class="public_scores">
<div class="h2_wrapper">
<div class="public_scores toggled">
<div class="h2_wrapper" id="toggleDropDown">
<h2>all time best</h2>
<svg class="dropIcon" height="24" viewbox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<svg class="dropIcon" height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path
d="M460.808-393.04 334.763-519.084q-2.608-2.608-4.108-5.824-1.5-3.217-1.5-6.893 0-7.352 4.972-12.775 4.971-5.423 13.105-5.423h265.536q8.134 0 13.105 5.475 4.972 5.476 4.972 12.776 0 1.826-5.616 12.672L499.192-393.039q-4.346 4.346-8.985 6.346-4.64 2-10.207 2-5.567 0-10.207-2-4.639-2-8.985-6.347Z"
></path>
</svg>

<div class="dropdown-options">
<h2>daily best</h2>
<!-- <h2>weekly best</h2> -->
</div>
</div>

<div class="scores"></div>

<input class="rang" id="username" autocomplete="given-name" placeholder="username" required />
Expand All @@ -204,7 +214,7 @@ <h2>all time best</h2>
<div class="personal_scores">
<div class="h2_wrapper">
<h2>personal best</h2>
<svg class="resetIcon" id="reset" height="24" viewbox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<svg class="resetIcon" id="reset" height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path
d="M292.309-140.001q-29.827 0-51.067-21.241-21.241-21.24-21.241-51.067V-720h-10q-12.75 0-21.375-8.629-8.625-8.628-8.625-21.384 0-12.755 8.625-21.37 8.625-8.616 21.375-8.616H360q0-14.692 10.346-25.038t25.038-10.346h169.232q14.692 0 25.038 10.346T600-779.999h149.999q12.75 0 21.375 8.629t8.625 21.384q0 12.756-8.625 21.371Q762.749-720 749.999-720h-10v507.691q0 29.827-21.241 51.067-21.24 21.241-51.067 21.241H292.309ZM680-720H280v507.691q0 5.385 3.462 8.847 3.462 3.462 8.847 3.462h375.382q5.385 0 8.847-3.462 3.462-3.462 3.462-8.847V-720ZM406.168-280q12.755 0 21.37-8.625 8.616-8.625 8.616-21.374v-300.002q0-12.749-8.629-21.374Q418.896-640 406.141-640q-12.756 0-21.371 8.625-8.615 8.625-8.615 21.374v300.002q0 12.749 8.629 21.374Q393.412-280 406.168-280Zm147.691 0q12.756 0 21.371-8.625 8.615-8.625 8.615-21.374v-300.002q0-12.749-8.629-21.374Q566.588-640 553.832-640q-12.755 0-21.37 8.625-8.616 8.625-8.616 21.374v300.002q0 12.749 8.629 21.374Q541.104-280 553.859-280ZM280-720v520-520Z"
Expand Down Expand Up @@ -238,7 +248,7 @@ <h2>personal best</h2>
<div class="center column">
<div class="game">
<div class="startScreen">
<svg class="throphy" height="24" viewbox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<svg class="throphy" height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<g id="throphy">
<path
Expand Down Expand Up @@ -440,7 +450,7 @@ <h2 class="startText">press any key to start</h2>
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"
>
Expand All @@ -449,6 +459,7 @@ <h2 class="startText">press any key to start</h2>
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"
></path>
</svg>
<hr class="sepperator" />
<img
class="settingIcon2 toggle"
src="./assets/icons/effects-1.svg"
Expand Down Expand Up @@ -479,7 +490,7 @@ <h2 class="startText">press any key to start</h2>
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"
>
Expand All @@ -493,7 +504,7 @@ <h2 class="startText">press any key to start</h2>
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"
>
Expand All @@ -504,7 +515,7 @@ <h2 class="startText">press any key to start</h2>
</svg>
</div>

<svg style="bottom: 0;" class="settingIcon" height="24" viewbox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<svg style="bottom: 0;" class="settingIcon" height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path
d="M479.56-255.386q17.132 0 28.94-11.829 11.807-11.829 11.807-28.961 0-17.132-11.829-28.939-11.829-11.808-28.961-11.808-17.132 0-28.939 11.829-11.808 11.829-11.808 28.961 0 17.132 11.829 28.94 11.829 11.807 28.961 11.807Zm.507 155.385q-78.836 0-148.204-29.92-69.369-29.92-120.682-81.21-51.314-51.291-81.247-120.629-29.933-69.337-29.933-148.173t29.92-148.204q29.92-69.369 81.21-120.682 51.291-51.314 120.629-81.247 69.337-29.933 148.173-29.933t148.204 29.92q69.369 29.92 120.682 81.21 51.314 51.291 81.247 120.629 29.933 69.337 29.933 148.173t-29.92 148.204q-29.92 69.369-81.21 120.682-51.291 51.314-120.629 81.247-69.337 29.933-148.173 29.933ZM480-160q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Zm3.24-171.231q27.683 0 47.914 17.429t20.231 43.572q0 22-12.923 39.384-12.923 17.385-29.538 32.385-21.78 19.321-38.352 42.507-16.571 23.185-17.725 51.647-.385 10.922 7.692 18.307 8.077 7.384 18.846 7.384 11.538 0 19.538-7.692 7.999-7.692 10.23-18.846 4-20.615 17.039-36.73Q539.23-478 554.441-492.532q21.866-21.314 38.173-46.48 16.308-25.167 16.308-56.141 0-47.538-37.461-78.115Q534-703.845 484-703.845q-35.692 0-67.307 15.808-31.615 15.807-49.231 46.115-5.461 9.307-3.506 19.593 1.955 10.285 10.557 15.619 10.949 6.095 22.487 3.479 11.538-2.615 19.615-13.153 12.154-15.77 29.423-25.308 17.269-9.539 37.202-9.539Z"
Expand Down
Loading

0 comments on commit 3a70851

Please sign in to comment.