stats

app.js

@@ -592,6 +592,7 @@ class Stats {
         if (score > this.highScore) {
             this.highScore = score
         }
+        scoreDiv.innerText = score.toLocaleString()
     }
 
     get score() {
@@ -608,12 +609,22 @@ class Stats {
             this.lockDelay = 500 * Math.pow(0.9, level - 15)
         levelInput.value = level
         messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>NIVEAU<br/>${this.level}</h1>` })
+        levelDiv.innerText = level
     }
 
     get level() {
         return this._level
     }
 
+    set goal(goal) {
+        this._goal = goal
+        goalDiv.innerText = goal
+    }
+
+    get goal() {
+        return this._goal
+    }
+
     set combo(combo) {
         this._combo = combo
         if (combo > this.maxCombo) this.maxCombo = combo
@@ -750,6 +761,10 @@ Stats.prototype.timeFormat = new Intl.DateTimeFormat("fr-FR", {
     timeZone: "UTC"
 })
 
+function tick() {
+    timeDiv.innerText = stats.timeFormat.format(stats.time)
+}
+
 
 /* Scene */
 
@@ -983,6 +998,7 @@ function pauseSettings() {
     scheduler.clearTimeout(lockDown)
     scheduler.clearTimeout(repeat)
     scheduler.clearInterval(autorepeat)
+    scheduler.clearInterval(tick)
 
     music.pause()
     document.onkeydown = null
@@ -1036,6 +1052,8 @@ function resume(event) {
             music.play()
         }
 
+        scheduler.setInterval(tick)
+
         if (piece) scheduler.setInterval(fall, stats.fallPeriod)
         else generate()
     }
@@ -1199,6 +1217,8 @@ function gameOver() {
     playing = false
     music.pause()
 
+    scheduler.clearInterval(tick)
+
     stats.show()
 }
 

index.html

@@ -125,12 +125,17 @@
         </div>
       </div>
 
-      <span id="messagesSpan" class ="position-absolute">
+      <span id="messagesSpan">
         <div class="progress" role="progressbar">
           <div id="loadingBar" class="progress-bar overflow-visible progress-bar-striped progress-bar-animated" style="width: 0%">Chargement...</div>
         </div>
       </span>
 
+      <span id="scoreSpan">Score<br/><div id="scoreDiv">0</div></span>
+      <span id="timeSpan">Temps<br/><div id="timeDiv">00:00:00</div></span>
+      <span id="levelSpan">Niveau<br/><div id="levelDiv">0</div></span>
+      <span id="goalSpan">Objectif<br/><div id="goalDiv">0</div></span>
+
       <div class="modal fade" id="statsModal" tabindex="-1">
         <div class="modal-dialog modal-dialog-centered">
           <div class="modal-dialog">

style.css

@@ -2,6 +2,10 @@ body {
     margin: 0
 }
 
+span {
+    position: absolute;
+}
+
 #messagesSpan .progress {
     margin-top: 70vh;
     opacity: 1;
@@ -11,6 +15,30 @@ body {
     opacity: inherit;
 }
 
+#scoreSpan {
+    top: 1rem;
+    left: 1rem;
+    text-align: left;
+}
+
+#timeSpan {
+    top: 1rem;
+    right: 1rem;
+    text-align: right;
+}
+
+#levelSpan {
+    bottom: 1rem;
+    left: 1rem;
+    text-align: left;
+}
+
+#goalSpan {
+    bottom: 1rem;
+    right: 1rem;
+    text-align: right;
+}
+
 @supports (backdrop-filter: blur()) {
     .card,
     .modal-content {