loading bar

app.js

@@ -519,7 +519,7 @@ class Settings {
         this.form.onsubmit = newGame
         levelInput.name = "startLevel"
         levelInput.disabled = false
-        titleHeader.innerHTML = "teTrois"
+        //titleHeader.innerHTML = "teTrois"
         resumeButton.innerHTML = "Jouer"
     }
 
@@ -756,16 +756,16 @@ Stats.prototype.timeFormat = new Intl.DateTimeFormat("fr-FR", {
 
 const manager = new THREE.LoadingManager()
 manager.onStart = function (url, itemsLoaded, itemsTotal) {
-    messagesSpan.innerHTML = 'Chargement : 0%...'
+    loadingBar.style.setProperty("width", '0%')
+}
+manager.onProgress = function (url, itemsLoaded, itemsTotal) {
+    loadingBar.style.setProperty("width", 100 * itemsLoaded / itemsTotal + '%')
 }
 manager.onLoad = function () {
     restart()
     messagesSpan.innerHTML = ""
     animate()
 }
-manager.onProgress = function (url, itemsLoaded, itemsTotal) {
-    messagesSpan.innerHTML = 'Chargement : ' + 100 * itemsLoaded / itemsTotal + '%...'
-}
 manager.onError = function (url) {
     messagesSpan.innerHTML = 'Erreur de chargement'
 }
@@ -900,7 +900,6 @@ let ghost = new Ghost()
 const lineClearSound = new Audio("audio/line-clear.wav")
 const tetrisSound    = new Audio("audio/tetris.wav")
 const hardDropSound  = new Audio("audio/hard-drop.wav")
-const tSpinSound     = new Audio("audio/t-spin.wav")
 const music          = new Audio("https://iterations.org/files/music/remixes/Tetris_CheDDer_OC_ReMix.mp3")
       music.loop     = true
 
@@ -986,7 +985,7 @@ function newGame(event) {
     } else {
         levelInput.name = "level"
         levelInput.disabled = true
-        titleHeader.innerHTML = "PAUSE"
+        //titleHeader.innerHTML = "PAUSE"
         resumeButton.innerHTML = "Reprendre"
         event.target.onsubmit = resume
         nextQueue.init()

index.html

@@ -125,7 +125,11 @@
         </div>
       </div>
 
-      <span id="messagesSpan" class ="position-absolute"></span>
+      <span id="messagesSpan" class ="position-absolute">
+        <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>
 
       <div class="modal fade" id="statsModal" tabindex="-1">
         <div class="modal-dialog modal-dialog-centered">

style.css

@@ -2,6 +2,15 @@ body {
     margin: 0
 }
 
+#messagesSpan .progress {
+    margin-top: 70vh;
+    opacity: 1;
+}
+
+#messagesSpan .progress-bar {
+    opacity: inherit;
+}
+
 @supports (backdrop-filter: blur()) {
     .card,
     .modal-content {
@@ -22,6 +31,7 @@ canvas {
     position: absolute;
     top: 10%;
     left: 50%;
+    width: 50%;
     transform: translate(-50%, 0);
     color: rgba(255, 255, 255, 0.8);
     text-shadow: 1px 1px rgba(0, 0, 0, 0.8);