Added loading animation

index.html

@@ -46,6 +46,7 @@
 			<div id="key_down"><img src="/objects/textures/arrow.png" width="100%" height="100%" style="transform: rotate(180deg);"/></div>
 			<div id="key_right"><img src="/objects/textures/arrow.png" width="100%" height="100%" style="transform: rotate(90deg);"/></div>
 		</div>
+		<script type="module" src="/src/loading.js"></script>
 		<script type="module" src="/src/menu.js"></script>
 		<script type="module" src="/src/main.js"></script>
 		

src/loading.js

@@ -0,0 +1,21 @@
+'use strict';
+// Small script used for the loading screen
+
+import $ from 'jquery';
+
+async function loadingOneCycle(){
+  $("#loading").fadeOut(600, ()=>{
+    $("#loading").fadeIn(600);
+  })
+};
+
+let timeoutID;
+function startLoadingAnimation(){
+  timeoutID = setInterval(loadingOneCycle, 200);
+}
+
+function stopLoadingAnimation(){
+  clearInterval(timeoutID);
+}
+document.startLoadingAnimation = startLoadingAnimation;//So that's accessible from everywhere
+document.stopLoadingAnimation = stopLoadingAnimation;

src/main.js

@@ -60,6 +60,7 @@ function startThreeJS(quality){
 
     }
     console.log("Ready to render scene, placed objects : "+scene.children.length);
+    document.stopLoadingAnimation();
     animate();
     
   });

src/menu.js

@@ -4,7 +4,7 @@
 import $ from 'jquery';
 
 $("#menu button").on("click", event=>{
-    $("#menu").fadeOut(300);
+    $("#menu").fadeOut(300, ()=>document.startLoadingAnimation());
     const quality = $("#quality-select").val();
     console.log(`Starting Three.Js, with quality setting ${quality} !`);
     document.startThreeJS(quality);