Add controls information and fix TypeScript build errors

Added "How to Play" section to landing page:
- VR controls: left/right thumbsticks for movement and rotation, front trigger to fire
- Desktop controls: WSAD for movement/yaw, arrow keys for pitch, space to fire
- Warning note that game is designed for VR with desktop as preview mode
- Styled with color-coded sections and responsive design
- Added overflow scroll to main div for better mobile experience

Fixed TypeScript build errors:
- Cast canvas context to CanvasRenderingContext2D in sphereLightmap.ts
- Resolved createImageData type errors

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

Co-Authored-By: Claude <noreply@anthropic.com>

index.html

@@ -24,6 +24,34 @@
       <div id="mainDiv">
         <div id="loadingDiv">Loading...</div>
         <div id="levelSelect">
+
+
+          <!-- Controls Section -->
+          <div class="controls-info">
+            <h2>🎮 How to Play</h2>
+            <div class="controls-grid">
+              <div class="control-section">
+                <h3>VR Controllers (Required for VR)</h3>
+                <ul>
+                  <li><strong>Left Thumbstick:</strong> Move forward/backward and yaw left/right</li>
+                  <li><strong>Right Thumbstick:</strong> Pitch up/down and Roll left/right</li>
+                  <li><strong>Front Trigger:</strong> Fire weapon</li>
+                </ul>
+              </div>
+              <div class="control-section">
+                <h3>Desktop Controls (Preview Mode)</h3>
+                <ul>
+                  <li><strong>W/S:</strong> Move forward/backward</li>
+                  <li><strong>A/D:</strong> Yaw left/right</li>
+                  <li><strong>Arrow Keys:</strong> Pitch up, down</li>
+                  <li><strong>Space:</strong> Fire weapon</li>
+                </ul>
+              </div>
+            </div>
+            <p class="controls-note">
+              ⚠️ <strong>Note:</strong> This game is designed for VR headsets with controllers. Desktop controls are provided for preview and testing purposes only.
+            </p>
+          </div>
             <h1>Select Your Level</h1>
           <div id="levelCardsContainer" class="card-container">
             <!-- Level cards will be dynamically populated from localStorage -->

public/styles.css

@@ -35,6 +35,7 @@ body {
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1000;
+    overflow: scroll;
 }
 
 #gameCanvas {
@@ -61,6 +62,75 @@ body {
     text-shadow: 0 0 10px rgba(255,255,255,0.5);
 }
 
+.controls-info {
+    background: rgba(255, 255, 255, 0.1);
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-radius: 15px;
+    padding: 30px;
+    margin: 0 auto 40px;
+    max-width: 900px;
+    backdrop-filter: blur(10px);
+}
+
+.controls-info h2 {
+    margin-top: 0;
+    margin-bottom: 25px;
+    font-size: 2em;
+    color: #4CAF50;
+    text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
+}
+
+.controls-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 25px;
+    margin-bottom: 20px;
+}
+
+.control-section {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 10px;
+    padding: 20px;
+}
+
+.control-section h3 {
+    margin-top: 0;
+    margin-bottom: 15px;
+    color: #64B5F6;
+    font-size: 1.3em;
+}
+
+.control-section ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.control-section li {
+    margin-bottom: 12px;
+    padding-left: 20px;
+    position: relative;
+    line-height: 1.6;
+    font-size: 0.95em;
+}
+
+
+.control-section strong {
+    color: #FFD54F;
+}
+
+.controls-note {
+    background: rgba(255, 152, 0, 0.15);
+    border: 1px solid rgba(255, 152, 0, 0.3);
+    border-radius: 8px;
+    padding: 15px;
+    margin-top: 20px;
+    font-size: 0.9em;
+    line-height: 1.6;
+    color: #FFE082;
+}
+
 .card-container {
     display: flex;
     flex-wrap: wrap;
@@ -414,6 +484,32 @@ body {
 
 /* Mobile-specific adjustments */
 @media (max-width: 768px) {
+    .controls-info {
+        padding: 20px;
+        margin-bottom: 30px;
+    }
+
+    .controls-info h2 {
+        font-size: 1.5em;
+    }
+
+    .controls-grid {
+        grid-template-columns: 1fr;
+        gap: 15px;
+    }
+
+    .control-section h3 {
+        font-size: 1.1em;
+    }
+
+    .control-section li {
+        font-size: 0.9em;
+    }
+
+    .controls-note {
+        font-size: 0.85em;
+    }
+
     [data-view="editor"] {
         padding: 10px;
     }

src/sphereLightmap.ts

@@ -23,7 +23,7 @@ export function createSphereLightmap(
     ambientIntensity: number = 0.1
 ): DynamicTexture {
     const texture = new DynamicTexture(name, { width: size, height: size }, scene, false);
-    const context = texture.getContext();
+    const context = texture.getContext() as CanvasRenderingContext2D;
     const imageData = context.createImageData(size, size);
 
     // Normalize light directions
@@ -99,7 +99,7 @@ export function createColoredSphereLightmap(
     ambientColor: { r: number; g: number; b: number } = { r: 0.1, g: 0.1, b: 0.1 }
 ): DynamicTexture {
     const texture = new DynamicTexture(name, { width: size, height: size }, scene, false);
-    const context = texture.getContext();
+    const context = texture.getContext() as CanvasRenderingContext2D;
     const imageData = context.createImageData(size, size);
 
     const brightDir = brightLightDir.normalize();