added touchscreen buttons, portrait mode, the abality to see where yo…

…u are on the leadderboard, weekly bests, restart the game without having to realod the page

src/js/game.js

@@ -279,7 +279,6 @@ class Game {
 
         if (old_stored_piece == undefined) {
             piece.placeBlock();
-
             return;
         }
 
@@ -291,6 +290,7 @@ class Game {
     }
 
     end() {
+        this.togglePause();
         this.stop = true;
 
         new_score(this.score, this.level, true);
@@ -303,9 +303,8 @@ class Game {
         soundtrack.currentTime = 0;
         endSound.play();
 
-        // reset button
-        // startHTML.disabled = false;
-        // startHTML.style.opacity = "1";
+        // abality to restart
+        document.addEventListener("keydown", start_game);
 
         // sent new highscore to server
         upload_highscore(this.score);

src/js/setup.js

@@ -23,6 +23,7 @@ const trackIcon = document.querySelector("#track");
 const speedIcon = document.querySelector("#speedIcon");
 const usernameHTML = document.querySelector("#username");
 const throphy_logo = document.querySelector(".throphy");
+const phoneIcon = document.querySelector("#phoneIcon");
 
 const soundtrack = new Audio("./assets/music/Tetris Soundtrack.mp3");
 const clearSound = new Audio("./assets/music/clear.mp3");
@@ -72,8 +73,19 @@ window.onload = () => {
         speed = 40 - Number(speedIcon.dataset.state) * 10;
     }
 
+    if (localStorage.getItem("touch_screen")) {
+        let old_state = Number(phoneIcon.dataset.state);
+        phoneIcon.dataset.state = localStorage.getItem("touch_screen");
+        phoneIcon.src = phoneIcon.src.replace(`${old_state}.svg`, `${phoneIcon.dataset.state}.svg`);
+
+        if (phoneIcon.dataset.state == 1) {
+            document.body.classList.add("touch_enabled");
+        }
+    }
+
     soundtrack.loop = true;
     soundtrack.volume = 0.5 * trackIcon.dataset.state;
+    endSound.volume = 0.5 * trackIcon.dataset.state;
     bgColor = window.getComputedStyle(document.querySelector(".main_layout")).backgroundColor;
 
     change_dimensions();
@@ -82,6 +94,12 @@ window.onload = () => {
     // set listeners
     window.addEventListener("resize", () => {
         change_dimensions(true);
+
+        if (screen.availHeight > screen.availWidth) {
+            document.body.classList.add("touch_enabled");
+        } else {
+            document.body.classList.remove("touch_enabled");
+        }
     });
 
     storedBlockCanvas.onclick = () => {
@@ -140,6 +158,69 @@ window.onload = () => {
     dropDownBtn.addEventListener("click", () => {
         dropDownBtn.parentElement.classList.toggle("toggled");
     });
+
+    // touchscreen icons
+    document.querySelectorAll("#touch_pause").forEach((x) => {
+        x.onclick = () => {
+            if (!game) {
+                start_game();
+                return;
+            }
+            game?.togglePause();
+        };
+    });
+
+    document.querySelector("#touch_swap").onclick = () => {
+        if (!game) {
+            start_game();
+            return;
+        }
+        game?.swap_block();
+    };
+
+    document.querySelector("#touch_rotate").onclick = () => {
+        if (!game) {
+            start_game();
+            return;
+        }
+        piece?.rotate();
+    };
+
+    document.querySelector("#touch_drop").onclick = () => {
+        if (!game) {
+            start_game();
+            return;
+        }
+        piece?.drop();
+    };
+
+    document.querySelector("#touch_left").onclick = () => {
+        if (!game) {
+            start_game();
+            return;
+        }
+        piece?.move("x;-1");
+    };
+
+    document.querySelector("#touch_right").onclick = () => {
+        if (!game) {
+            start_game();
+            return;
+        }
+        piece?.move("x;1");
+    };
+
+    document.querySelector("#touch_down").onpointerdown = () => {
+        if (!game) {
+            start_game();
+            return;
+        }
+        keyDown();
+    };
+
+    document.querySelector(".editIcon").onclick = () => {
+        usernameHTML.classList.toggle("hidden");
+    };
 };
 
 // functions
@@ -177,6 +258,11 @@ function toggleMusicIcon(click, changeVolume = true) {
     icon.dataset.state = old_state == icon.dataset.max ? (changeVolume ? 0 : 1) : old_state + 1;
     icon.src = icon.src.replace(`${old_state}.svg`, `${icon.dataset.state}.svg`);
     changeVolume ? iconChangeVolume(icon) : 0;
+
+    if (icon == phoneIcon) {
+        localStorage.setItem("touch_screen", icon.dataset.state);
+        document.body.classList.toggle("touch_enabled");
+    }
 }
 
 function iconChangeVolume(icon) {

src/style-dark.css

@@ -71,7 +71,12 @@
 }
 
 .dark .settingIcon:hover,
-.dark .dropIcon:hover,
-.dark .resetIcon:hover {
+.dark #toggleDropDown:hover .dropIcon,
+.dark .resetIcon:hover,
+.editIcon:hover {
     filter: brightness(200%);
+}
+
+.dark .dropdown-options {
+    background: var(--primaryDark);
 }

src/style-touchScreen.css

@@ -0,0 +1,98 @@
+.touchscreen {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.touchscreen * {
+    user-select: none;
+}
+
+.touchscreen .svg_wrapper {
+    height: 50px;
+    width: auto;
+    aspect-ratio: 1/1;
+}
+
+.touchscreen svg {
+    fill: grey;
+    height: 100%;
+    width: 100%;
+    transition: filter 1s;
+    pointer-events: none;
+}
+
+.touchscreen .svg_wrapper:hover svg {
+    filter: brightness(0%);
+}
+
+.dark .touchscreen .svg_wrapper:hover svg {
+    filter: brightness(200%);
+}
+
+.touchscreen>#right {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    bottom: 0;
+    position: absolute;
+    right: 0;
+    margin: 0 35px 35px 0;
+}
+
+.touchscreen>#left {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    bottom: 0;
+    position: absolute;
+    left: 0;
+    margin: 0 0 35px 35px;
+}
+
+#touch_pause {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 10px 0 0 10px;
+}
+
+#touch_pause.pause {
+    display: none;
+}
+
+.game_started #touch_pause.pause {
+    display: block;
+}
+
+.game_started #touch_pause.play {
+    display: none;
+}
+
+
+.touch_enabled .touchscreen * {
+    pointer-events: all;
+}
+
+.touch_enabled .touchscreen {
+    opacity: 1;
+}
+
+.touch_enabled .right.column,
+.touch_enabled .left.column {
+    display: none;
+}
+
+.touch_enabled .main_layout {
+    display: flex;
+    justify-content: center;
+}
+
+.touch_enabled h2.startText {
+    display: none;
+}
+
+.touch_enabled canvas {
+    width: 100%;
+}