Function to pause the game with options to resume and reset

menu.js

@@ -1,7 +1,4 @@
-// const canvas = document.getElementById("tetris");
-// const context = canvas.getContext('2d');
-
-window.onresize = function (event) {
+window.onresize = () => {
     scaleWindow();
 };
 
@@ -9,12 +6,75 @@ function scaleWindow() {
     canvas.height = window.innerHeight - 40;
     canvas.width = canvas.height / (5 / 3);
     context.scale(canvas.width / fieldSize.x, canvas.height / fieldSize.y);
+    if(!firstRun && isPaused) {
+        draw();
+    }
 }
 
 scaleWindow();
 
-document.getElementById("game-play").addEventListener("click", (event) => {
-    document.getElementById("game-title").parentNode.removeChild(document.getElementById("game-title"));
-    document.getElementById("game-play").parentNode.removeChild(document.getElementById("game-play"));
+document.addEventListener("keydown", (event) => {
+    if(event.keyCode === 32) {
+        if(firstRun) {
+            initGame();
+        } else {
+            if(!isPaused){
+                showMenu();
+            } else {
+                hideMenu();
+            }
+        }
+    } else if(event.keyCode === 27) {
+        toggleMenu();
+    }
+});
+
+document.getElementById("game-play").addEventListener("click", () => {
+    if(firstRun) {
+        initGame();
+    } else {
+        hideMenu();
+    }
+});
+
+document.getElementById("game-reset").addEventListener("click", () => {
+    firstRun = true;
+    clearArena();
+    hideMenu();
+    switchLang(currentLang);
+    showMenu();
+});
+
+function toggleMenu() {
+    if(!isPaused){
+        showMenu();
+    } else {
+        hideMenu();
+    }
+}
+
+function showMenu() {
+    isPaused = true;
+    document.getElementById("game-title").style.display = "block";
+    document.getElementById("game-play").style.display = "block";
+    if(!firstRun) {
+        document.getElementById("game-reset").style.display = "block";
+    }
+}
+
+function hideMenu() {
+    isPaused = false;
+    document.getElementById("game-title").style.display = "none";
+    document.getElementById("game-play").style.display = "none";
+    document.getElementById("game-reset").style.display = "none";
+    if(!firstRun) {
+        update(lastTime);
+    }
+}
+
+function initGame() {
+    hideMenu();
     startGame();
-});
+    firstRun = false;
+    switchLang(currentLang);
+}