Added a loading screen

SapienzaInteractiveGraphicsCourse · Sep 20, 2023 · e6e4cd1 · e6e4cd1
1 parent 4aac9e3
commit e6e4cd1
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -169,7 +169,28 @@
 				font-size: 32px;
 				color:#22ff00;
 			}
+
+			.loader {
+				border: 4px solid rgba(255, 255, 255, 0.3);
+				border-top: 4px solid #3498db;
+				border-radius: 50%;
+				width: 50px;
+				height: 50px;
+				animation: spin 2s linear infinite;
+			}
+
+			@keyframes spin {
+				0% { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
 
+			#loading {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				text-align: center;
+			}
 		</style>
 	</head>
 	<body>
@@ -222,6 +243,10 @@
 				<button id="exitWinButton">Exit the Game</button>
 			</div>
 		</div>
+
+		<div id="loading" style="display: none;">
+			<div class="loader"></div>
+		</div>
 		<script type="importmap">
 			{
 			  "imports": {

diff --git a/main.js b/main.js
@@ -5,6 +5,7 @@ const scene = new THREE.Scene();
 const renderer = new THREE.WebGLRenderer();
 
 
+var firstStart = true;
 
 const startButton = document.getElementById("startButton");
 startButton.addEventListener("click", startGame);
@@ -33,6 +34,7 @@ const exitClue = document.getElementById("exitClue");
 const instructions = document.getElementById("instructions")
 const lostGame = document.getElementById("lostGame");
 const winGame = document.getElementById("winGame");
+const loading = document.getElementById("loading");
 
 /***************************
  * CAMERA
@@ -892,17 +894,27 @@ function checkSpotlight(spotlight0, underTheLight){
 }
 
 var inGame = false;
-function startGame(){
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function startGame(){
   menu.style.display = 'none';
-  hud.style.display = 'block';
   lostGame.style.display = 'none';
   winGame.style.display = 'none';
-  while(!guy){}
+  loading.style.display = 'block';
+  if(firstStart){
+    firstStart = false;
+    await sleep(2000);
+  }
+  loading.style.display = 'none';
+  hud.style.display = 'block';
+  while(!guy || !table || !alley){}
   guy.visible = true;
   resetPositions();
-  while(!table){}
+  //while(!table){}
   table.visible = true;
-  while(!alley){}
+  //while(!alley){}
   alley.visible = true;
   inGame = true;
 }
@@ -987,8 +999,6 @@ function animate() {
         lost();
     } else
       exclamation.visible = false;
-    console.log("menuWall Position:", menuWall.position);
-    console.log("menuWall Visibility:", menuWall.visible);
   }
   const elapsedTime = performance.now() * 0.001;
   material.uniforms.time.value = elapsedTime;