Change joystick to control pitch and roll

- Joystick X axis: Roll (tilt head left/right)
- Joystick Y axis: Pitch (look up/down)
- Vertical slider: Yaw (turn head left/right)

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

index.html

@@ -725,13 +725,13 @@
                             <div class="joystick-knob" id="joystickKnob"></div>
                             <span class="joystick-label top">Up</span>
                             <span class="joystick-label bottom">Down</span>
-                            <span class="joystick-label left">Left</span>
-                            <span class="joystick-label right">Right</span>
+                            <span class="joystick-label left">Tilt L</span>
+                            <span class="joystick-label right">Tilt R</span>
                         </div>
                         <div class="roll-control">
-                            <span class="roll-label">Roll +</span>
-                            <input type="range" class="roll-slider" id="rollJoystick" min="-100" max="100" value="0">
-                            <span class="roll-label">Roll -</span>
+                            <span class="roll-label">Turn L</span>
+                            <input type="range" class="roll-slider" id="yawSlider" min="-100" max="100" value="0">
+                            <span class="roll-label">Turn R</span>
                         </div>
                     </div>
                     <div class="joystick-hint">Hold and drag to move head continuously</div>
@@ -1156,7 +1156,6 @@
         function initJoystick() {
             const joystick = document.getElementById('joystick');
             const knob = document.getElementById('joystickKnob');
-            const rollSlider = document.getElementById('rollJoystick');
 
             function getPosition(e) {
                 const rect = joystick.getBoundingClientRect();
@@ -1220,8 +1219,9 @@
             document.addEventListener('mouseup', endJoystick);
             document.addEventListener('touchend', endJoystick);
 
-            rollSlider.addEventListener('mouseup', () => { rollSlider.value = 0; });
-            rollSlider.addEventListener('touchend', () => { rollSlider.value = 0; });
+            const yawSlider = document.getElementById('yawSlider');
+            yawSlider.addEventListener('mouseup', () => { yawSlider.value = 0; });
+            yawSlider.addEventListener('touchend', () => { yawSlider.value = 0; });
         }
 
         function startContinuousMovement() {
@@ -1231,15 +1231,16 @@
                 if (!joystickActive) return;
 
                 const speed = 1.5; // degrees per tick
-                const rollSlider = document.getElementById('rollJoystick');
-                const rollInput = parseFloat(rollSlider.value) / 100;
+                const yawSlider = document.getElementById('yawSlider');
+                const yawInput = parseFloat(yawSlider.value) / 100;
 
                 // Joystick mapping:
-                // Left/Right (X) controls Yaw: right = turn head right (negative yaw)
-                // Up/Down (Y) controls Pitch: up = look up (negative pitch in this coord system)
-                targetYaw += -joystickX * speed;
-                targetPitch += joystickY * speed;     // Fixed: up (neg Y) → neg pitch → look up
-                targetRoll += rollInput * speed;
+                // Left/Right (X) controls Roll: right = tilt head right (positive roll)
+                // Up/Down (Y) controls Pitch: up = look up (negative pitch)
+                // Slider controls Yaw: left = turn left (positive yaw)
+                targetRoll += joystickX * speed;
+                targetPitch += joystickY * speed;
+                targetYaw += -yawInput * speed;
 
                 // Clamp to limits
                 targetYaw = Math.max(-45, Math.min(45, targetYaw));