From dfa46c85a6c6c94537f841da66bc73d096cbaff3 Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Sat, 29 Nov 2025 05:42:53 -0600
Subject: [PATCH] Hide canvas until XR camera positioned in ship cockpit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hide #gameCanvas by default in CSS (display: none)
- Show canvas in setupXRCamera() after camera is parented to ship
- Show canvas in flat mode fallback paths
- Fix preloader to append to document.body (was hidden with #levelSelect)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/styles.css                         |  1 +
 src/core/handlers/levelSelectedHandler.ts | 10 ++++++++++
 src/levels/level1.ts                      |  6 ++++++
 src/ui/screens/preloader.ts               |  6 ++----
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index 6824b50..0b011ae 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -107,6 +107,7 @@ body {
     margin: 0;
     padding: 0;
     background: transparent;
+    display: none; /* Hidden until camera is positioned in ship */
 }
 
 /* ============================================================================
diff --git a/src/core/handlers/levelSelectedHandler.ts b/src/core/handlers/levelSelectedHandler.ts
index 7f93914..381ed75 100644
--- a/src/core/handlers/levelSelectedHandler.ts
+++ b/src/core/handlers/levelSelectedHandler.ts
@@ -92,6 +92,11 @@ export function createLevelSelectedHandler(context: LevelSelectedContext): (e: C
                 } catch (error) {
                     log.debug('Failed to enter XR, will fall back to flat mode:', error);
                     DefaultScene.XR = null;
+                    // Show canvas for flat mode
+                    const canvas = document.getElementById('gameCanvas');
+                    if (canvas) {
+                        canvas.style.display = 'block';
+                    }
                     engine.runRenderLoop(() => {
                         DefaultScene.MainScene.render();
                     });
@@ -154,6 +159,11 @@ export function createLevelSelectedHandler(context: LevelSelectedContext): (e: C
                     log.debug('[Main] XR setup and mission brief complete');
                 } else {
                     log.info('[Main] XR not active yet - will use onInitialXRPoseSetObservable instead');
+                    // Show canvas for non-XR mode
+                    const canvas = document.getElementById('gameCanvas');
+                    if (canvas) {
+                        canvas.style.display = 'block';
+                    }
                     engine.runRenderLoop(() => {
                         DefaultScene.MainScene.render();
                     });
diff --git a/src/levels/level1.ts b/src/levels/level1.ts
index ec859d4..4a1e5b0 100644
--- a/src/levels/level1.ts
+++ b/src/levels/level1.ts
@@ -106,6 +106,12 @@ export class Level1 implements Level {
         xr.baseExperience.camera.position = new Vector3(0, 1.2, 0);
         log.debug('[Level1] XR camera parented to cameraRig at position (0, 1.2, 0)');
 
+        // Show the canvas now that camera is properly positioned in ship
+        const canvas = document.getElementById('gameCanvas');
+        if (canvas) {
+            canvas.style.display = 'block';
+        }
+
         // Ensure render loop is running
         const engine = DefaultScene.MainScene.getEngine();
         engine.runRenderLoop(() => {
diff --git a/src/ui/screens/preloader.ts b/src/ui/screens/preloader.ts
index 91614e8..186842b 100644
--- a/src/ui/screens/preloader.ts
+++ b/src/ui/screens/preloader.ts
@@ -14,9 +14,6 @@ export class Preloader {
     }
 
     private createUI(): void {
-        const levelSelect = document.getElementById('levelSelect');
-        if (!levelSelect) return;
-
         // Create preloader container
         this.container = document.createElement('div');
         this.container.className = 'preloader';
@@ -45,7 +42,8 @@ export class Preloader {
             </div>
         `;
 
-        levelSelect.appendChild(this.container);
+        // Append to body so it's visible even when other UI elements are hidden
+        document.body.appendChild(this.container);
 
         // Get references
         this.progressBar = document.getElementById('preloaderProgress');