Improve menu control via ESC and fix display error

js/menu.js

@@ -1,3 +1,10 @@
+/*
+0 -> Game
+1 -> Paused
+2 -> Settings
+ */
+let escState = 1;
+
 window.onresize = () => {
     scaleWindow();
 };
@@ -42,9 +49,12 @@ document.addEventListener("keydown", (event) => {
             }
         }
     } else if(event.keyCode === 27) {
-        if(!firstRun) {
+        escState++;
-            toggleMenu();
+        if (firstRun && escState % 3 === 0) {
+            escState++;
         }
+        escState = escState % 3;
+        toggleMenu();
     }
 });
 
@@ -86,10 +96,14 @@ menuButton.addEventListener("click", () => {
 });
 
 function toggleMenu() {
-    if(!isPaused){
+    if (escState === 0) {
+        document.getElementsByTagName("body")[0].classList.remove("menu-open");
+        hideMenu();
+    } else if (escState === 1) {
+        document.getElementsByTagName("body")[0].classList.remove("menu-open");
         showMenu();
     } else {
-        hideMenu();
+        document.getElementsByTagName("body")[0].classList.add("menu-open");
     }
 }
 
@@ -99,6 +113,7 @@ function fadeBlurIn() {
     let currentVal = 0;
 
     const id = setInterval(frame, 16);
+
     function frame() {
         if(currentVal >= finalVal) {
             clearInterval(id);
@@ -123,6 +138,7 @@ function fadeBlurOut() {
     let currentVal = 15;
 
     const id = setInterval(frame, 16);
+
     function frame() {
         if(currentVal <= finalVal) {
             clearInterval(id);
@@ -150,6 +166,7 @@ function scoreUpdateAni() {
     let upscaling = true;
 
     const id = setInterval(frame, 5);
+
     function frame() {
         if(currentScale <= scale && upscaling) {
             currentScale += 0.02;
@@ -166,6 +183,7 @@ function scoreUpdateAni() {
 
 function showMenu() {
     isPaused = true;
+    escState = 1;
     document.getElementById("game-title").style.display = "block";
     document.getElementById("game-play").style.display = "block";
     document.getElementById("game-reset").style.display = "block";
@@ -180,6 +198,7 @@ function showMenu() {
 
 function hideMenu() {
     isPaused = false;
+    escState = 0;
     document.getElementById("game-title").style.opacity = "0";
     document.getElementById("game-play").style.opacity = "0";
     document.getElementById("game-reset").style.opacity = "0";

js/tetris.js

@@ -69,7 +69,6 @@ function arenaSweep() {
 }
 
 function centerOffset(matrix) {
-    // const tempMatrix = rotate(matrix, 1);
     let offsetX = 0;
     let offsetY = 0;
     matrix.forEach((row, y) => {
@@ -99,18 +98,6 @@ function centerOffset(matrix) {
                 offsetX += .5;
         }
     }
-    // tempMatrix.forEach((col, x) => {
-    //     let onlyZeroes = true;
-    //     col.forEach((value, y) => {
-    //         if (value > 0) {
-    //             onlyZeroes = false;
-    //         }
-    //     });
-    //     if (onlyZeroes)
-    //         matrix.forEach((row, y) => {
-    //             matrix[y].splice(x, 1);
-    //         });
-    // });
     return {x: offsetX, y: offsetY};
 }
 
@@ -262,7 +249,6 @@ function drawTile(x, y, offset, color, matrix, useContext = context) {
     const ctx = useContext;
     switch (theme) {
         case "default":
-            if (ctx === holdContext)
             ctx.fillStyle = color;
             ctx.fillRect(x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
             break;

js/touch-control.js

@@ -8,6 +8,10 @@ hammertime.on('swiperight', (e) => {
     keys.right.action();
 });
 
+hammertime.on('swipeup', () => {
+    keys.holdTile.action();
+});
+
 hammertime.on('pandown swipedown', (e) => {
     keys.down.action();
 });