loading bar
This commit is contained in:
parent
d5eb58334c
commit
5c45488760
13
app.js
13
app.js
@ -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()
|
||||||
|
@ -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">
|
||||||
|
10
style.css
10
style.css
@ -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);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user