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> </head>
<body> <body>
<div id="container"></div> <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> <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 loadMngr = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(loadMngr); 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 = () => { loadMngr.onLoad = () => {
message.innerHTML = ""
message.className = ""
animate(); animate();
}; };
@ -503,6 +514,7 @@ function playerCollisions() {
function gameEnd() { function gameEnd() {
escaped = true; escaped = true;
message.innerHTML = '<a href="" title="Rejouer">Libre !</a>';
message.className = "escaped"; message.className = "escaped";
piano.play(); piano.play();

11
style.css
View File

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