merge levelSpan and scoreSpan

app.js

@@ -29,7 +29,7 @@ const CLEARED_LINES_NAMES = [
     "SINGLE",
     "DOUBLE",
     "TRIPLE",
-    "<h4>QUATRIS</h4>",
+    "QUATRIS",
 ]
 
 const DELAY = {
@@ -379,11 +379,9 @@ class Settings {
     load() {
         for (let input of keyBindFielset.getElementsByTagName("input")) {
             this[input.name] = KEY_NAMES[input.value] || input.value
-            localStorage[input.name] = input.value
         }
         for (let input of autorepearFieldset.getElementsByTagName("input")) {
             this[input.name] = input.valueAsNumber
-            localStorage[input.name] = input.value
         }
     
         this.keyBind = {}
@@ -447,8 +445,10 @@ class Stats {
             this.lockDelay = 500 * Math.pow(0.9, level - 15)
         levelInput.value = level
         levelCell.innerText = level
-        levelSpan.innerHTML =  `<h1>LEVEL<br/>${this.level}</h1>`
-        levelSpan.classList.add("show-level-animation")
+        let div = document.createElement("div")
+        div.className = "show-level-animation"
+        div.innerHTML = `<h1>LEVEL<br/>${this.level}</h1>`
+        messagesSpan.appendChild(div)
     }
 
     get level() {
@@ -480,20 +480,20 @@ class Stats {
             let div = document.createElement("div")
             div.className = "rotate-in-animation"
             div.innerHTML = tSpin
-            scoreSpan.appendChild(div)
+            messagesSpan.appendChild(div)
         }
         if (nbClearedLines) {
             let div = document.createElement("div")
             div.className = "zoom-in-animation"
             div.innerHTML = CLEARED_LINES_NAMES[nbClearedLines]
-            scoreSpan.appendChild(div)
+            messagesSpan.appendChild(div)
         }
         if (patternScore) {
             let div = document.createElement("div")
             div.className = "zoom-in-animation"
-            div.style = "animation-delay: .2s; animation-duration: .8s"
+            div.style = "animation-delay: .2s"
             div.innerHTML = patternScore
-            scoreSpan.appendChild(div)
+            messagesSpan.appendChild(div)
             this.score += patternScore
         }
 
@@ -504,9 +504,9 @@ class Stats {
                 let comboScore = (nbClearedLines == 1 ? 20 : 50) * this.combo * this.level
                 let div = document.createElement("div")
                 div.className = "zoom-in-animation"
-                div.style = "animation-delay: .4s; animation-duration: .6s"
+                div.style = "animation-delay: .4s"
                 div.innerHTML = `COMBO x${this.combo}<br/>${comboScore}`
-                scoreSpan.appendChild(div)
+                messagesSpan.appendChild(div)
                 this.score += comboScore
             }
         } else {
@@ -520,9 +520,9 @@ class Stats {
                 let b2bScore = patternScore / 2
                 let div = document.createElement("div")
                 div.className = "zoom-in-animation"
-                div.style = "animation-delay: .4s; animation-duration: .6s"
+                div.style = "animation-delay: .4s"
                 div.innerHTML = `BACK TO BACK x${this.b2b}<br/>${b2bScore}`
-                scoreSpan.appendChild(div)
+                messagesSpan.appendChild(div)
                 this.score += b2bScore
             }
         } else if ((0 < nbClearedLines) && (nbClearedLines < 4) && !tSpin) {
@@ -545,7 +545,7 @@ onanimationend = function (event) {
     event.target.classList.remove(event.animationName)
 }
 
-scoreSpan.onanimationend = function(event) {
+messagesSpan.onanimationend = function(event) {
     event.target.remove() 
 }
 
@@ -570,7 +570,7 @@ function pause() {
     settings.modal.show()
 }
 
-//window.onblur = pause()
+window.onblur = pause()
 
 pause()
 
@@ -767,9 +767,17 @@ function gameOver() {
     
     scheduler.clearInterval(clock)
 
+    let div = document.createElement("div")
+    div.className = "show-level-animation"
+    div.innerHTML = "<h1>GAME<br/>OVER</h1>"
+    messagesSpan.appendChild(div)
+}
+
+window.onbeforeunload = function(event) {
     localStorage["highScore"] = stats.highScore
-    levelSpan.innerHTML =  "<h1>GAME<br/>OVER</h1>"
-    levelSpan.classList.add("show-level-animation")
+    for (let input of settingsForm.getElementsByTagName("input")) {
+        localStorage[input.name] = input.value
+    }
 }
 
 if ('serviceWorker' in navigator) {

css/common.css

@@ -72,7 +72,7 @@ td.hard-drop-animation {
     from {
         background-color: rgb(206, 255, 255, 40%);
         filter: saturate(50%) brightness(300%);
-        box-shadow: -60px 0 5px white, 60px 0 5px white;
+        box-shadow: -100px 0 5px white, 100px 0 5px white;
     }
     to {
         background-color: transparent;
@@ -85,7 +85,7 @@ tr.cleared-line-animation{
 
 span {
     position: absolute;
-    top: 20%;
+    top: 25%;
     left: 50%;
     transform: translate(-50%, 0);
     color: rgba(255, 255, 255, 0.8);
@@ -94,29 +94,27 @@ span {
     text-align: center;
 }
 
-#levelSpan {
-    font-size: 4vmin;
-    font-weight: bold;
+#messagesSpan div {
     opacity: 0;
 }
 
 @keyframes show-level-animation {
     from {
         opacity: 0;
-        top: 70%;
+        transform: translateY(200%);
     }
     50% {
         opacity: 100%;
-        top: 40%
+        transform: translateY(0);
     }
     to {
         opacity: 0;
-        top: 20%
+        transform: translateY(-100%);
     }
 }
 
-#levelSpan.show-level-animation {
-    animation: cubic-bezier(0.4, 0, 0.6, 1) 2s show-level-animation;
+div.show-level-animation {
+    animation: show-level-animation cubic-bezier(0.4, 0, 0.6, 1) 2s 1s;
 }
 
 @keyframes zoom-in-animation {
@@ -162,19 +160,15 @@ span {
     }
 }
 
-#scoreSpan div {
-    opacity: 0;
-}
-
-#scoreSpan div.rotate-in-animation {
+#messagesSpan div.rotate-in-animation {
     animation-name:  rotate-in-animation;
     animation-timing-function: cubic-bezier(.25,.46,.45,.94);
-    animation-duration: 1s;
+    animation-duration: 1.5s;
 }
 
-#scoreSpan div.zoom-in-animation {
+#messagesSpan div.zoom-in-animation {
     animation-name: zoom-in-animation;
     animation-timing-function: cubic-bezier(.25,.46,.45,.94);
     transform-origin:center;
-    animation-duration: 1s;
+    animation-duration: 1.5s;
 }

index.html

@@ -157,8 +157,7 @@
               <tr class="border"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
             </table>
           </div>
-          <span id="levelSpan"></span>
-          <span id="scoreSpan"></span>
+          <span id="messagesSpan"></span>
         </div>
         <div class="col">
           <div class="card">