Add transition to menu opening

language.js

@@ -33,7 +33,7 @@ const de = {
     reset: "Zurücksetzen"
 };
 
-let currentLang = "en";
+let currentLang = ["de", "en"].includes(navigator.language || navigator.userLanguage) ? navigator.language || navigator.userLanguage : "en";
 let firstRun = true;
 
 class Language {

menu.js

@@ -55,22 +55,55 @@ function toggleMenu() {
     }
 }
 
+function fadeBlurIn() {
+    const blurEl = document.getElementById("f1").children[0];
+    const finalVal = 15;
+    let currentVal = 0;
+
+    const id = setInterval(frame, 1);
+    function frame() {
+        if(currentVal >= finalVal) {
+            clearInterval(id);
+        } else {
+            currentVal += 0.1;
+            blurEl.setAttribute("stdDeviation", currentVal);
+        }
+    }
+}
+
+function fadeBlurOut() {
+    const blurEl = document.getElementById("f1").children[0];
+    const finalVal = 0;
+    let currentVal = 15;
+
+    const id = setInterval(frame, 1);
+    function frame() {
+        if(currentVal <= finalVal) {
+            clearInterval(id);
+        } else {
+            currentVal -= 0.1;
+            blurEl.setAttribute("stdDeviation", currentVal);
+        }
+    }
+}
+
 function showMenu() {
     isPaused = true;
-    document.getElementById("background").classList.add("blurred");
-    document.getElementById("game-title").style.display = "block";
-    document.getElementById("game-play").style.display = "block";
+    document.getElementById("game-title").style.opacity = "1";
+    document.getElementById("game-play").style.opacity = "1";
+    fadeBlurIn();
     if(!firstRun) {
-        document.getElementById("game-reset").style.display = "block";
+        document.getElementById("game-reset").style.opacity = "1";
     }
 }
 
 function hideMenu() {
     isPaused = false;
-    document.getElementById("background").classList.remove("blurred");
-    document.getElementById("game-title").style.display = "none";
-    document.getElementById("game-play").style.display = "none";
-    document.getElementById("game-reset").style.display = "none";
+    // document.getElementById("background").classList.remove("blurred");
+    document.getElementById("game-title").style.opacity = "0";
+    document.getElementById("game-play").style.opacity = "0";
+    document.getElementById("game-reset").style.opacity = "0";
+    fadeBlurOut();
     if(!firstRun) {
         update(lastTime);
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Tetris.js",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "main.js",
   "description": "Tetris.js is a decent but cool clone of the retro game classic Tetris",
   "scripts": {

style.css

@@ -14,6 +14,7 @@ body {
     top: 10px;
     font-size: 14px;
     font-weight: 300;
+    z-index: 1;
 }
 
 .lang {
@@ -31,8 +32,10 @@ body {
 #game-title {
     position: absolute;
     left: 50%;
-    top: 25%;
-    transform: translate(-50%, -25%);
+    top: 50%;
+    transform: translate(-50%, -25%) translateY(-200px);
+    opacity: 1;
+    transition: opacity .5s;
 }
 
 #game-play, #game-reset {
@@ -44,30 +47,34 @@ body {
     height: 75px;
     font-size: 30px;
     box-shadow: none;
-    color: #ffff;
-    background: #3877FF;
-    border: 0;
-    border-radius: 0;
-    transition: box-shadow .2s;
+    color: #ffff !important;
+    background: #3877FF !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    transition: box-shadow .2s, opacity .5s;
     cursor: pointer;
+    opacity: 1;
 }
 
 #game-reset {
     display: none;
-    background-color: #FF0D72;
+    background-color: #FF0D72 !important;
     transform: translate(-50%, -50%) translateY(85px);
+    opacity: 0;
 }
 
 #game-play:hover, #game-play:active, #game-play:focus {
-    outline: none;
-    box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2);
+    outline: none !important;
+    box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2) !important;
 }
+
 #background {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
+    filter: none;
 }
 
 #background.blurred {

tetris.js

@@ -76,10 +76,10 @@ function createPiece(type) {
             ];
         case 'I':
             return [
-                [0, 5, 0, 0],
-                [0, 5, 0, 0],
-                [0, 5, 0, 0],
-                [0, 5, 0, 0]
+                [0, 0, 5, 0],
+                [0, 0, 5, 0],
+                [0, 0, 5, 0],
+                [0, 0, 5, 0]
             ];
         case 'S':
             return [