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() {
@@ -49,6 +49,9 @@ class Joystick {
     }
 
     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);
@@ -399,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 = {
@@ -447,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;
@@ -464,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);
@@ -884,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();
@@ -991,9 +999,6 @@ function drawRobot(ctx, robot, heading) {
 }
 
 // Initialize Variables
-// Joysticks
-const supportsTouch = (navigator.maxTouchPoints > 0);
-
 
 // General robot
 const robotSize = 200;