From 149dd04abd7cbc2a54797509f7dbfc0a8dd81311 Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Thu, 4 Apr 2024 22:02:42 +0200
Subject: [PATCH] Added loading animation

---
 index.html     |  1 +
 src/loading.js | 21 +++++++++++++++++++++
 src/main.js    |  1 +
 src/menu.js    |  2 +-
 4 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/loading.js

diff --git a/index.html b/index.html
index e1bb1ed..b35dd55 100644
--- a/index.html
+++ b/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>
 		
diff --git a/src/loading.js b/src/loading.js
new file mode 100644
index 0000000..0419dfc
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index de6ed89..98d6445 100644
--- a/src/main.js
+++ b/src/main.js
@@ -60,6 +60,7 @@ function startThreeJS(quality){
 
     }
     console.log("Ready to render scene, placed objects : "+scene.children.length);
+    document.stopLoadingAnimation();
     animate();
     
   });
diff --git a/src/menu.js b/src/menu.js
index 72b96ce..d247805 100644
--- a/src/menu.js
+++ b/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);