New effects and timer

index.html

@@ -18,6 +18,7 @@
     <div id="lang-de" class="lang" data-lang="de">Deutsch</div>
 </div>
 <div id="background" class="blurred">
+    <div id="time">0:00</div>
     <div id="score" data-prefix="Score: ">0</div>
     <canvas id="tetris" width="240" height="400"></canvas>
     <div id="controls"></div>

menu.js

@@ -87,6 +87,30 @@ function fadeBlurOut() {
     }
 }
 
+function scoreUpdateAni() {
+    const scoreEl = document.getElementById("score");
+    const nativeTransform = "translate(-50%, -50%)";
+
+    const scale = 1.5;
+    const finalScale = 1;
+    let currentScale = 1;
+    let upscaling = true;
+
+    const id = setInterval(frame, 5);
+    function frame() {
+        if(currentScale <= scale && upscaling) {
+            currentScale += 0.02;
+            scoreEl.style.transform = nativeTransform + " scale(" + currentScale + ")";
+        } else if (currentScale >= finalScale) {
+            upscaling = false;
+            currentScale -= 0.02;
+            scoreEl.style.transform = nativeTransform + " scale(" + currentScale + ")";
+        } else {
+            clearInterval(id);
+        }
+    }
+}
+
 function showMenu() {
     isPaused = true;
     document.getElementById("game-title").style.opacity = "1";

style.css

@@ -65,7 +65,7 @@ body {
 
 #game-play:hover, #game-play:active, #game-play:focus {
     outline: none !important;
-    box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2) !important;
+    box-shadow: 3px 4px 0 3px rgba(0, 0, 0, 0.2) !important;
 }
 
 #background {
@@ -111,4 +111,4 @@ body {
     font-size: 20px;
     font-weight: 300;
     transform: translate(0, -50%);
-}
+}

tetris.js

@@ -5,6 +5,8 @@ const fieldSize = {x: 12, y: 20};
 
 let isPaused = true;
 
+let startTime = 0;
+
 function clearScreen() {
     context.clearRect(0, 0, canvas.width, canvas.height);
 }
@@ -198,6 +200,8 @@ let dropInterval = 1000;
 
 let lastTime = 0;
 
+const timeEl = document.getElementById("time");
+
 function update(time = 0) {
     if(!isPaused) {
         const deltaTime = time - lastTime;
@@ -208,12 +212,24 @@ function update(time = 0) {
             playerDrop();
         }
 
+        timeEl.innerHTML = formatMillis(Date.now() - startTime);
+
         draw();
         requestAnimationFrame(update);
     }
 }
 
+function formatMillis(millis) {
+    const d = new Date(1000*Math.round(millis / 1000));
+    return (d.getUTCMinutes() < 10 ? "0" : "") + d.getUTCMinutes() + ":" + (d.getUTCSeconds() < 10 ? "0" : "") + d.getUTCSeconds();
+}
+
+let lastScore = 0;
 function updateScore() {
+    if(lastScore !== player.score) {
+        scoreUpdateAni();
+        lastScore = player.score;
+    }
     document.getElementById('score').innerText = player.score.toString();
 }
 
@@ -274,4 +290,5 @@ function startGame() {
     playerReset();
     update();
     updateScore();
+    startTime = Date.now();
 }