adrien/daedalus
adrien/daedalus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

loading bar

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-06-21 01:42:31 +02:00
parent af8befcf72
commit 9ca6c3a2e9
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -143,7 +143,7 @@
</head>
<body>
<div id="container"></div>
<span id="message"><a href="" title="Rejouer">Libre !</a></span>
<span id="message" class="loading"></span>
<script type="module" src="main.js"></script>

12
main.js
View File

@ -35,7 +35,18 @@ piano.loop = false
const loadMngr = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(loadMngr);
loadMngr.onStart = function (url, itemsLoaded, itemsTotal) {
message.innerHTML = 'Chargement : 0%...'
}
loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) {
message.innerHTML = 'Chargement : ' + 100 * itemsLoaded / itemsTotal + '%...'
}
loadMngr.onError = function (url) {
message.innerHTML = 'Erreur de chargement'
}
loadMngr.onLoad = () => {
message.innerHTML = ""
message.className = ""
animate();
};
@ -503,6 +514,7 @@ function playerCollisions() {
function gameEnd() {
escaped = true;
message.innerHTML = '<a href="" title="Rejouer">Libre !</a>';
message.className = "escaped";
piano.play();

11
style.css
View File

@ -30,21 +30,28 @@ body {
position: absolute;
left: 0;
width: 100%;
font-size: 10vh;
font-family: Georgia, serif;
background: transparent;
justify-content: center;
z-index: 1;
color: gray;
}
#message.loading {
display: flex;
top: 30vh;
font-size: 4vh;
}
#message a {
color: gray;
text-decoration: none;
color: inherit;
}
#message.escaped {
display: flex;
opacity: 100%;
font-size: 10vh;
top: 30vh;
animation: escaped 5s;
}