loading bar

This commit is contained in:
Adrien MALINGREY 2023-06-19 21:16:42 +02:00
parent d5eb58334c
commit 5c45488760
3 changed files with 21 additions and 8 deletions

13
app.js
View File

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

View File

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

View File

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