diff --git a/heap.js b/heap.js
index 7468b9a..b6d4b17 100644
--- 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();
+ }
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 3255858..d720749 100644
--- a/index.html
+++ b/index.html
@@ -24,5 +24,6 @@
-
Loading...
+
Loading...
+
For the best experience, please rotate your device to landscape mode.
diff --git a/loadingAnimation.js b/loadingAnimation.js
index 9371c4d..a3a0c96 100644
--- 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);
-}
\ No newline at end of file
diff --git a/style.css b/style.css
index 2b84131..4400fed 100644
--- 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 */
- }
\ No newline at end of file
+ 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;
+}
\ No newline at end of file