From 41f702a18ba5b41cd12a590494bfaa38db4f394b Mon Sep 17 00:00:00 2001
From: Marcel <kingofdog@web.de>
Date: Sun, 17 Dec 2017 19:50:46 +0100
Subject: [PATCH] Add transition to menu opening

---
 language.js  |  2 +-
 menu.js      | 49 +++++++++++++++++++++++++++++++++++++++++--------
 package.json |  2 +-
 style.css    | 27 +++++++++++++++++----------
 tetris.js    |  8 ++++----
 5 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/language.js b/language.js
index 21ff57b..8de0e86 100644
--- a/language.js
+++ b/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 {
diff --git a/menu.js b/menu.js
index cbdd49e..44b76e9 100644
--- a/menu.js
+++ b/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);
     }
diff --git a/package.json b/package.json
index f1b1ead..32b47e6 100644
--- a/package.json
+++ b/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": {
diff --git a/style.css b/style.css
index 5a5ee46..1a867e7 100644
--- a/style.css
+++ b/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 {
diff --git a/tetris.js b/tetris.js
index 9b91c4f..b926485 100644
--- a/tetris.js
+++ b/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 [