Updates

mattrussell2 · Oct 1, 2024 · 2ac7651 · 2ac7651
1 parent 7a39a16
commit 2ac7651
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 54 deletions.
diff --git a/heap.js b/heap.js
@@ -57,6 +57,10 @@ var BUILD_START_BUTTON;
 var REMOVE_START_BUTTON;
 var HEAPSORT_START_BUTTON;
 
+function isPortrait() {
+    return window.innerHeight > window.innerWidth;
+}
+
 function reset_camera() {
 
     renderer.setSize(window.innerWidth, window.innerHeight);
@@ -888,4 +892,7 @@ render();
 
 window.addEventListener('resize', () => {
     reset_camera();
-});
+    if (document.getElementById('loading').style.display !== 'none') {
+        showLoading();
+    }
+});
diff --git a/index.html b/index.html
@@ -24,5 +24,6 @@
 
 <div id="loading">
   <canvas id="loadingCanvas"></canvas>
-  <p>Loading...</p>
+  <p id="loading-message">Loading...</p>
+  <p id="orientation-message" style="display: none;">For the best experience, please rotate your device to landscape mode.</p>
 </div>
diff --git a/loadingAnimation.js b/loadingAnimation.js
@@ -8,7 +8,7 @@ function initLoadingAnimation() {
     // Get the loading div dimensions
     const loadingDiv = document.getElementById('loading');
     const width = loadingDiv.clientWidth;
-    const height = loadingDiv.clientHeight;
+    const height = loadingDiv.clientHeight * 0.7; // Match the 70% height from CSS
 
     // Use the correct aspect ratio
     loadingCamera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
@@ -47,28 +47,47 @@ function animateLoading() {
     loadingRenderer.render(loadingScene, loadingCamera);
 }
 
+function isMobile() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+
+function isPortrait() {
+    return window.innerHeight > window.innerWidth;
+}
+
 export function showLoading() {
-    if (!loadingScene) {
-        initLoadingAnimation();
-        animateLoading();
-    }
-    document.getElementById('loading').style.display = 'flex';
+    return new Promise((resolve) => {
+        if (!loadingScene) {
+            initLoadingAnimation();
+        }
+        document.getElementById('loading').style.display = 'flex';
+
+        const loadingMessage = document.getElementById('loading-message');
+        const orientationMessage = document.getElementById('orientation-message');
+
+        if (isMobile() && isPortrait()) {
+            loadingMessage.style.display = 'none';
+            orientationMessage.style.display = 'block';
+        } else {
+            loadingMessage.style.display = 'block';
+            orientationMessage.style.display = 'none';
+        }
+
+        requestAnimationFrame(() => {
+            animateLoading();
+            resolve();
+        });
+    });
 }
 
 export function hideLoading() {
     document.getElementById('loading').style.display = 'none';
 }
 
-// Add window resize handler
-window.addEventListener('resize', onWindowResize, false);
-
-function onWindowResize() {
-    const loadingDiv = document.getElementById('loading');
-    const width = loadingDiv.clientWidth;
-    const height = loadingDiv.clientHeight;
-
-    loadingCamera.aspect = width / height;
-    loadingCamera.updateProjectionMatrix();
+// Add orientation change listener
+window.addEventListener('orientationchange', () => {
+    if (document.getElementById('loading').style.display !== 'none') {
+        showLoading();
+    }
+});
 
-    loadingRenderer.setSize(width, height);
-}
diff --git a/style.css b/style.css
@@ -11,37 +11,47 @@ canvas {
 }
 
 #loading {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(39, 49, 53, 0.8);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
-  }
-
-  #loadingCanvas {
-    width: 100%;
-    height: calc(100% - 60px); /* Reduced height to make room for text */
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  #loading p {
-    position: absolute;
-    bottom: 20px; /* Position text at the bottom */
-    left: 0;
-    width: 100%;
-    z-index: 1;
-    margin: 0;
-    padding: 10px;
-    color: #f3f3f3;
-    font-family: Arial, sans-serif;
-    text-align: center;
-    background-color: rgba(39, 49, 53, 0.6); /* Semi-transparent background for better readability */
-  }
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(39, 49, 53, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 9999;
+}
+
+#loadingCanvas {
+  width: 100%;
+  height: 70%; /* Adjust this value to control the cube's space */
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#loading p {
+  position: relative;
+  z-index: 1;
+  margin: 10px 0;
+  color: #f3f3f3;
+  font-family: Arial, sans-serif;
+  text-align: center;
+  padding: 0 20px;
+  width: 100%;
+}
+
+#loading-message {
+  position: absolute;
+  bottom: -50px;
+}
+
+#orientation-message {
+  position: absolute;
+  bottom: 20px;
+  background-color: #fe6d7e;
+  padding: 10px;
+  border-radius: 5px;
+}