Upload 11 files

README.md

@@ -34,9 +34,10 @@ This project is pre-configured to be deployed as a **Docker Space** on Hugging F
 ## Controls
 
 ### Flight Controls
-- **W/S**: Pitch up/down
-- **A/D**: Roll left/right
-- **Q/E**: Yaw left/right
+- **Click**: Lock mouse pointer to the screen to take control
+- **Mouse Up/Down**: Pitch up/down
+- **Mouse Left/Right**: Roll left/right
+- **A/D**: Yaw left/right
 - **Shift**: Afterburn (cyan glowing thruster boost)
 - **Arrow Up / Down**: Increase / Decrease base cruise throttle
 

index.html

@@ -1159,15 +1159,11 @@
     <div class="controls-tip glass">
       <div class="tip-title">Controls</div>
       <div class="ctrl-row">
-        <span class="ctrl-keys"><kbd id="key-w">W</kbd><kbd id="key-s">S</kbd></span>
-        <span class="ctrl-label">Pitch</span>
+        <span class="ctrl-keys"><kbd id="key-mouse">MOUSE</kbd></span>
+        <span class="ctrl-label">Pitch/Roll</span>
       </div>
       <div class="ctrl-row">
         <span class="ctrl-keys"><kbd id="key-a">A</kbd><kbd id="key-d">D</kbd></span>
-        <span class="ctrl-label">Roll</span>
-      </div>
-      <div class="ctrl-row">
-        <span class="ctrl-keys"><kbd id="key-q">Q</kbd><kbd id="key-e">E</kbd></span>
         <span class="ctrl-label">Yaw</span>
       </div>
       <div class="ctrl-row">

src/Aircraft.js

@@ -247,6 +247,30 @@ export class Aircraft {
   setupControls() {
     document.addEventListener('keydown', (event) => this.handleKeyDown(event));
     document.addEventListener('keyup', (event) => this.handleKeyUp(event));
+
+    // Set up mouse flight controls
+    document.addEventListener('mousemove', (event) => this.handleMouseMove(event));
+
+    // Request pointer lock on click to capture mouse movement infinitely
+    document.addEventListener('click', () => {
+      if (document.pointerLockElement !== document.body) {
+        document.body.requestPointerLock();
+      }
+    });
+  }
+
+  handleMouseMove(event) {
+    // Only apply mouse controls if pointer is locked (Simulator focused)
+    if (document.pointerLockElement === document.body) {
+      const mouseSensX = 0.005;
+      const mouseSensY = 0.005;
+
+      // Map mouse Y to Pitch: inverted movementY so mouse Up = plane nose Up
+      this.pitch = THREE.MathUtils.clamp(this.pitch - event.movementY * mouseSensY, -1, 1);
+
+      // Map mouse X to Roll
+      this.roll = THREE.MathUtils.clamp(this.roll + event.movementX * mouseSensX, -1, 1);
+    }
   }
 
   handleKeyDown(event) {
@@ -263,12 +287,8 @@ export class Aircraft {
       return;
     }
     switch (event.key.toLowerCase()) {
-      case 'w': this.pitch = -1; break;  // Pitch up (nose rises)
-      case 's': this.pitch = 1; break;   // Pitch down (nose drops)
-      case 'a': this.roll = -1; break;   // Roll left (left wing down)
-      case 'd': this.roll = 1; break;    // Roll right (right wing down)
-      case 'q': this.yaw = 1; break;     // Yaw left (turn left)
-      case 'e': this.yaw = -1; break;    // Yaw right (turn right)
+      case 'a': this.yaw = 1; break;     // Yaw left (turn left)
+      case 'd': this.yaw = -1; break;    // Yaw right (turn right)
     }
   }
 
@@ -286,9 +306,7 @@ export class Aircraft {
       return;
     }
     switch (event.key.toLowerCase()) {
-      case 'w': case 's': this.pitch = 0; break;
-      case 'a': case 'd': this.roll = 0; break;
-      case 'q': case 'e': this.yaw = 0; break;
+      case 'a': case 'd': this.yaw = 0; break;
     }
   }
 
@@ -312,13 +330,21 @@ export class Aircraft {
     // Banked turns: roll naturally induces yaw at speed
     this.rotation.y -= this.rotation.z * this.turnAssist * speedRatio * deltaTime;
 
-    // Clamp pitch/roll and gently stabilize when no input
+    // Apply drag to the sticks so they recenter automatically if mouse stops moving
+    if (document.pointerLockElement === document.body) {
+      this.pitch = THREE.MathUtils.lerp(this.pitch, 0, deltaTime * 2.0);
+      this.roll = THREE.MathUtils.lerp(this.roll, 0, deltaTime * 2.0);
+    }
+
+    // Clamp pitch/roll rotation limits and gently stabilize when no input
     this.rotation.x = THREE.MathUtils.clamp(this.rotation.x, -1.1, 1.1);
     this.rotation.z = THREE.MathUtils.clamp(this.rotation.z, -1.2, 1.2);
-    if (this.roll === 0) {
+
+    // Auto-leveling logic
+    if (Math.abs(this.roll) < 0.05) {
       this.rotation.z = THREE.MathUtils.lerp(this.rotation.z, 0, deltaTime * 0.8);
     }
-    if (this.pitch === 0) {
+    if (Math.abs(this.pitch) < 0.05) {
       this.rotation.x = THREE.MathUtils.lerp(this.rotation.x, 0, deltaTime * 0.3);
     }
 

src/main.js

@@ -132,6 +132,12 @@ class FlightSimulator {
   setupInputIndicators() {
     window.addEventListener('keydown', (event) => this.handleKeyHighlight(event, true));
     window.addEventListener('keyup', (event) => this.handleKeyHighlight(event, false));
+    window.addEventListener('mousedown', () => {
+      if (this.keyElements['mouse']) this.keyElements['mouse'].classList.add('active');
+    });
+    window.addEventListener('mouseup', () => {
+      if (this.keyElements['mouse']) this.keyElements['mouse'].classList.remove('active');
+    });
     window.addEventListener('blur', () => {
       this.activeKeys.clear();
       this.renderInputHighlights();
@@ -145,6 +151,10 @@ class FlightSimulator {
     else if (key === 'ArrowUp') key = 'arrowup';
     else if (key === 'ArrowDown') key = 'arrowdown';
     else key = key.toLowerCase();
+
+    // Ignore W and S since they are no longer used for flight
+    if (key === 'w' || key === 's') return;
+
     if (!Object.prototype.hasOwnProperty.call(this.keyElements, key)) return;
     if (isPressed) {
       this.activeKeys.add(key);