Fix joysticks not being visible by default on mobile

index.html

@@ -207,10 +207,10 @@ if scale < 1:
                 <legend>Translation &amp; Rotation</legend>
 
                 <div class="control-group">
-                    <button id="control-mode-toggle" type="button">Switch to Keyboard/Joystick Controls</button>
+                    <button id="control-mode-toggle" type="button">Switch to Slider Controls</button>
                 </div>
 
-                <div id="slider-controls">
+                <div id="slider-controls" style="display: none;">
                     <div class="control-group">
                         <label for="vy-slider">Move Forward/Backward (pixels/s)</label>
                         <input type="range" id="vy-slider" min="-300" max="300" step="10" value="0">
@@ -232,7 +232,7 @@ if scale &lt; 1:
                     <button id="reset-btn" type="button">Reset Controls</button>
                 </div>
 
-                <div id="keyboard-controls" style="display: none;">
+                <div id="keyboard-controls">
                     <div class="control-group">
                         <label for="keyboard-max-speed">Max Speed (pixels/s)</label>
                         <input type="range" id="keyboard-max-speed" min="50" max="300" step="10" value="150">

script.js

@@ -5,7 +5,7 @@
 import GrahamScan from "./vendor/lucio/graham-scan.mjs";
 
 class Joystick {
-    constructor(ctx, x, y, radius) {
+    constructor(ctx, x, y, radius, visibleByDefault) {
         this.ctx = ctx;
         this.x = x;
         this.y = y;
@@ -13,7 +13,7 @@ class Joystick {
         this.nubX = x;
         this.nubY = y;
         this.active = false;
-        this.visible = false;
+        this.visible = visibleByDefault;
     }
 
     draw() {
@@ -45,9 +45,13 @@ class Joystick {
 
     deactivate() {
         this.active = false;
+        this.reset();
     }
 
     touchInRange(x, y) {
+        if (!this.visible)
+            return false;
+
         const deltaX = x - this.x;
         const deltaY = y - this.y;
         const dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -398,7 +402,7 @@ const preset16OctBtn = document.getElementById('preset-16oct');
 */
 
 // Control mode state
-let isManualInputMode = false; // true = keyboard/gamepad mode, false = slider mode
+let isManualInputMode = true; // true = keyboard/gamepad mode, false = slider mode
 
 // Keyboard state tracking
 const keyState = {
@@ -446,6 +450,9 @@ keyboardMaxRotation.addEventListener('input', (e) => {
 });
 keyboardMaxRotationOutput.textContent = parseFloat(keyboardMaxRotation.value);
 
+
+const supportsTouch = (navigator.maxTouchPoints > 0);
+
 // Control mode toggle
 controlModeToggle.addEventListener('click', () => {
     isManualInputMode = !isManualInputMode;
@@ -463,13 +470,15 @@ controlModeToggle.addEventListener('click', () => {
         vxOutput.textContent = '0';
         vyOutput.textContent = '0';
         omegaOutput.textContent = '0';
+        if (supportsTouch) {
             leftJoystick.setIsVisible(true);
             rightJoystick.setIsVisible(true);
+        }
     } else {
         // Switch to slider mode
         sliderControls.style.display = 'block';
         keyboardControls.style.display = 'none';
-        controlModeToggle.textContent = 'Switch to Keyboard/Joystick Controls';
+        controlModeToggle.textContent = supportsTouch ? 'Switch to Keyboard/Joystick Controls' : 'Switch to Keyboard';
 
         // Reset manual input state
         Object.keys(keyState).forEach(key => keyState[key] = false);
@@ -883,8 +892,8 @@ function updateModuleDisplays(robot) {
 * BEGIN ANIMATION CODE
 */
 
-const leftJoystick = new Joystick(ctx, -250, 250, 100);
+const leftJoystick = new Joystick(ctx, -250, 250, 100, supportsTouch);
-const rightJoystick = new Joystick(ctx, 250, 250, 100);
+const rightJoystick = new Joystick(ctx, 250, 250, 100, supportsTouch);
 
 function drawGrid(ctx, sideLength, gridSquareSize, xOffset, yOffset) {
     ctx.save();
@@ -990,9 +999,6 @@ function drawRobot(ctx, robot, heading) {
 }
 
 // Initialize Variables
-// Joysticks
-const supportsTouch = (navigator.maxTouchPoints > 0);
-
 
 // General robot
 const robotSize = 200;
@@ -1018,13 +1024,20 @@ function animate() {
     if (isManualInputMode) {
         const maxSpeed = parseFloat(keyboardMaxSpeed.value);
         const maxRotation = parseFloat(keyboardMaxRotation.value);
-        // xSpeed = manualInputVelX;
-        // ySpeed = -manualInputVelY; // Negative because canvas Y axis is inverted
-        // turnSpeed = manualInputOmega;
 
-        xSpeed = leftJoystick.getX() * maxSpeed;
+        // Combine keyboard and joystick inputs
-        ySpeed = -leftJoystick.getY() * maxSpeed;
+        const keyboardX = manualInputVelX;
-        turnSpeed = rightJoystick.getX() * maxRotation;
+        const keyboardY = -manualInputVelY; // Negative because canvas Y axis is inverted
+        const keyboardOmega = manualInputOmega;
+
+        const joystickX = leftJoystick.getX() * maxSpeed;
+        const joystickY = -leftJoystick.getY() * maxSpeed;
+        const joystickOmega = rightJoystick.getX() * maxRotation;
+
+        // Use joystick if active, otherwise use keyboard
+        xSpeed = leftJoystick.active ? joystickX : keyboardX;
+        ySpeed = leftJoystick.active ? joystickY : keyboardY;
+        turnSpeed = rightJoystick.active ? joystickOmega : keyboardOmega;
     } else {
         xSpeed = parseFloat(vxSlider.value);
         ySpeed = -parseFloat(vySlider.value);