From e0290a49181fc93f7f217d3333fb048697534f2b Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Fri, 21 Apr 2023 20:10:03 +0200
Subject: [PATCH] scoreSpan

---
 app.js         | 16 +++++++++-------
 css/common.css | 39 ++++++++++++++++++++++++---------------
 index.html     |  2 +-
 3 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/app.js b/app.js
index 8f97909..c1ea3c2 100644
--- a/app.js
+++ b/app.js
@@ -464,13 +464,11 @@ class Stats {
     }
 
     lockDown(nbClearedLines, tSpin) {
-        messagesSpan.innerHTML = ""
-
         // Cleared lines & T-Spin
         let patternScore = SCORES[tSpin][nbClearedLines] * this.level
-        if (tSpin) messagesSpan.innerHTML += `<div class="rotate-in-animation">${tSpin}</div>\n`
-        if (nbClearedLines) messagesSpan.innerHTML += `<div class="zoom-in-animation">${CLEARED_LINES_NAMES[nbClearedLines]}</div>\n`
-        if (patternScore) messagesSpan.innerHTML += `<div class="zoom-in-animation">${patternScore}</div>\n`
+        if (tSpin) scoreSpan.innerHTML += `<div class="rotate-in-animation">${tSpin}</div>\n`
+        if (nbClearedLines) scoreSpan.innerHTML += `<div class="zoom-in-animation">${CLEARED_LINES_NAMES[nbClearedLines]}</div>\n`
+        if (patternScore) scoreSpan.innerHTML += `<div class="zoom-in-animation">${patternScore}</div>\n`
         this.score += patternScore
 
         // Combo
@@ -478,7 +476,7 @@ class Stats {
             this.combo++
             if (this.combo >= 1) {
                 let comboScore = (nbClearedLines == 1 ? 20 : 50) * this.combo * this.level
-                messagesSpan.innerHTML += `<div class="zoom-in-animation">COMBO x${this.combo}<br/>${comboScore}</div>\n`
+                scoreSpan.innerHTML += `<div class="zoom-in-animation">COMBO x${this.combo}<br/>${comboScore}</div>\n`
                 this.score += comboScore
             }
         } else {
@@ -490,7 +488,7 @@ class Stats {
             this.b2b++
             if (this.b2b >= 1) {
                 let b2bScore = patternScore / 2
-                messagesSpan.innerHTML += `<div class="zoom-in-animation">BACK TO BACK x${this.b2b}<br/>${b2bScore}</div>\n`
+                scoreSpan.innerHTML += `<div class="zoom-in-animation">BACK TO BACK x${this.b2b}<br/>${b2bScore}</div>\n`
                 this.score += b2bScore
             }
         } else if ((0 < nbClearedLines) && (nbClearedLines < 4) && !tSpin) {
@@ -508,6 +506,10 @@ onanimationend = function (event) {
     event.target.classList.remove(event.animationName)
 }
 
+scoreSpan.onanimationend = function(event) {
+    console.log(event)
+    event.target.remove() 
+}
 
 let scheduler = new Scheduler()
 let settings = new Settings()
diff --git a/css/common.css b/css/common.css
index 8466402..f337de9 100644
--- a/css/common.css
+++ b/css/common.css
@@ -87,9 +87,9 @@ tr.line-cleared-animation{
 
 span {
     position: absolute;
-    top: 35%;
+    top: 20%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, 0);
     color: rgba(255, 255, 255, 0.8);
     text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
     font-size: 3vmin;
@@ -160,37 +160,46 @@ span {
     }
 }
 
-#messagesSpan div {
+#scoreSpan div {
     opacity: 0;
 }
 
-#messagesSpan div.rotate-in-animation {
+#scoreSpan div.rotate-in-animation {
     animation-name:  rotate-in-animation;
     animation-timing-function: cubic-bezier(.25,.46,.45,.94);
     animation-duration: 1s;
 }
 
-#messagesSpan div.zoom-in-animation {
+#scoreSpan div.zoom-in-animation {
     animation-name: zoom-in-animation;
     animation-timing-function: cubic-bezier(.25,.46,.45,.94);
     transform-origin:center;
-}
-#messagesSpan div.zoom-in-animation:first-child {
     animation-duration: 1s;
 }
-#messagesSpan div.zoom-in-animation:nth-child(2) {
+#scoreSpan div.zoom-in-animation:nth-child(2) {
     animation-delay: .2s;
-    animation-duration: .9s;
 }
-#messagesSpan div.zoom-in-animation:nth-child(3) {
+#scoreSpan div.zoom-in-animation:nth-child(3) {
     animation-delay: .4s;
-    animation-duration: .8s;
 }
-#messagesSpan div.zoom-in-animation:nth-child(4) {
+#scoreSpan div.zoom-in-animation:nth-child(4) {
     animation-delay: .6s;
-    animation-duration: .7s;
 }
-#messagesSpan div.zoom-in-animation:nth-child(5) {
+#scoreSpan div.zoom-in-animation:nth-child(5) {
     animation-delay: .8s;
-    animation-duration: .6s;
+}
+#scoreSpan div.zoom-in-animation:nth-child(6) {
+    animation-delay: 1s;
+}
+#scoreSpan div.zoom-in-animation:nth-child(7) {
+    animation-delay: 1.2s;
+}
+#scoreSpan div.zoom-in-animation:nth-child(8) {
+    animation-delay: 1.4s;
+}
+#scoreSpan div.zoom-in-animation:nth-child(9) {
+    animation-delay: 1.6s;
+}
+#scoreSpan div.zoom-in-animation:nth-child(10) {
+    animation-delay: 1.8s;
 }
diff --git a/index.html b/index.html
index 761b8a2..f67a094 100644
--- a/index.html
+++ b/index.html
@@ -157,7 +157,7 @@
             </table>
           </div>
           <span id="levelSpan"></span>
-          <span id="messagesSpan"></span>
+          <span id="scoreSpan"></span>
         </div>
         <div class="col">
           <div class="card">