From 2904062dfee4c4aa87fb9508d60c5dbc090ea88c Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Mon, 26 Jun 2023 01:29:49 +0200
Subject: [PATCH] stats

---
 app.js     | 20 ++++++++++++++++++++
 index.html |  7 ++++++-
 style.css  | 28 ++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/app.js b/app.js
index a8fb80e..9afc8d5 100644
--- a/app.js
+++ b/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()
 }
 
diff --git a/index.html b/index.html
index 4ec5212..613d3c1 100644
--- a/index.html
+++ b/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">
diff --git a/style.css b/style.css
index 4906d8a..9d0b2df 100644
--- a/style.css
+++ b/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 {