Add mouse as analogue joystick support

mattgodbolt · claude · mattgodbolt · commit d191082c9203 · 2025-06-03T13:22:06.000-05:00
Implements analogue joystick emulation using the mouse position, addressing issue #501. The mouse position on the BBC display is mapped to ADC channels 0 (X-axis) and 1 (Y-axis), with left mouse button acting as fire button 1. Key features: - Mouse position tracked globally, even when not over the BBC display - Accessible via ADVAL(0) for X and ADVAL(1) for Y in BBC BASIC - Fire button triggered by left mouse click when over the display - Can be enabled via config dialog or URL parameter (?mouseJoystickEnabled) - Works alongside existing gamepad support Implementation details: - Created MouseJoystickSource class implementing AnalogueSource interface - Simplified ADC source management with updateAdcSources() helper function - Added proper cleanup and disposal of event listeners - Full test coverage for the new functionality Closes #501 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/index.html b/index.html
@@ -888,6 +888,30 @@ <h5 class="modal-title" id="configurationModalLabel">Emulation Configuration</h5
               </div>
               <div id="micPermissionStatus" class="mt-2 small text-muted"></div>
             </div>
+
+            <div id="mouseJoystickSettings" style="margin-top: 15px">
+              <div class="row align-items-center">
+                <div class="col-sm-6">
+                  <label class="col-form-label">Mouse joystick:</label>
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      id="mouseJoystickEnabled"
+                      name="mouseJoystickEnabled"
+                    />
+                    <label class="form-check-label" for="mouseJoystickEnabled">
+                      Enable mouse as analogue joystick
+                    </label>
+                  </div>
+                </div>
+                <div class="col-sm-6">
+                  <div class="small text-muted mt-2">
+                    Maps mouse position on BBC display to channels 0 (X) and 1 (Y)
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
diff --git a/src/config.js b/src/config.js
@@ -15,6 +15,7 @@ export class Config {
             this.setTeletext(this.model.hasTeletextAdaptor);
             this.setMusic5000(this.model.hasMusic5000);
             this.setEconet(this.model.hasEconet);
+            // Note: mouseJoystickEnabled state will be set from main.js
         });
 
         $configuration.addEventListener("hide.bs.modal", () => onClose(this.changed));
@@ -52,6 +53,10 @@ export class Config {
             this.changed.microphoneChannel = channel;
             this.setMicrophoneChannel(channel);
         });
+
+        $("#mouseJoystickEnabled").on("click", () => {
+            this.changed.mouseJoystickEnabled = $("#mouseJoystickEnabled").prop("checked");
+        });
     }
 
     setMicrophoneChannel(channel) {
@@ -62,6 +67,10 @@ export class Config {
         }
     }
 
+    setMouseJoystickEnabled(enabled) {
+        $("#mouseJoystickEnabled").prop("checked", !!enabled);
+    }
+
     setModel(modelName) {
         this.model = findModel(modelName);
         $(".bbc-model").text(this.model.name);
diff --git a/src/main.js b/src/main.js
@@ -26,6 +26,7 @@ import { toHfe } from "./disc-hfe.js";
 import { Keyboard } from "./keyboard.js";
 import { GamepadSource } from "./gamepad-source.js";
 import { MicrophoneInput } from "./microphone-input.js";
+import { MouseJoystickSource } from "./mouse-joystick-source.js";
 import {
     buildUrlFromParams,
     guessModelFromHostname,
@@ -93,6 +94,7 @@ const paramTypes = {
     logFdcCommands: ParamTypes.BOOL,
     logFdcStateChanges: ParamTypes.BOOL,
     coProcessor: ParamTypes.BOOL,
+    mouseJoystickEnabled: ParamTypes.BOOL,
 
     // Numeric parameters
     speed: ParamTypes.INT,
@@ -241,13 +243,15 @@ const config = new Config(function (changed) {
         emulationConfig.keyLayout = changed.keyLayout;
         keyboard.setKeyLayout(changed.keyLayout);
     }
-    // Restore gamepad as source for the old channels
-    for (let oldChannel = 0; oldChannel < 4; ++oldChannel)
-        processor.adconverter.setChannelSource(oldChannel, gamepadSource);
-    if (changed.microphoneChannel !== undefined) {
-        const channel = changed.microphoneChannel;
-        console.log(`Moving microphone to channel ${channel}`);
-        setupMicrophone(channel).then(() => {});
+    // Handle ADC source changes
+    if (changed.mouseJoystickEnabled !== undefined || changed.microphoneChannel !== undefined) {
+        // Update sources based on new settings
+        updateAdcSources(parsedQuery.mouseJoystickEnabled, parsedQuery.microphoneChannel);
+
+        // Handle microphone initialization if needed
+        if (changed.microphoneChannel !== undefined) {
+            setupMicrophone().then(() => {});
+        }
     }
     updateUrl();
 });
@@ -262,6 +266,7 @@ config.setEconet(parsedQuery.hasEconet);
 config.setMusic5000(parsedQuery.hasMusic5000);
 config.setTeletext(parsedQuery.hasTeletextAdaptor);
 config.setMicrophoneChannel(parsedQuery.microphoneChannel);
+config.setMouseJoystickEnabled(parsedQuery.mouseJoystickEnabled);
 
 model = config.model;
 
@@ -507,19 +512,41 @@ processor = new Cpu6502(
     econet,
 );
 
-// Set up gamepad as the default source for all channels
+// Create input sources
 const gamepadSource = new GamepadSource(emulationConfig.getGamepads);
-processor.adconverter.setChannelSource(0, gamepadSource);
-processor.adconverter.setChannelSource(1, gamepadSource);
-processor.adconverter.setChannelSource(2, gamepadSource);
-processor.adconverter.setChannelSource(3, gamepadSource);
 
 // Create MicrophoneInput but don't enable by default
 const microphoneInput = new MicrophoneInput();
 microphoneInput.setErrorCallback((message) => {
     showError("accessing microphone", message);
 });
 
+// Create MouseJoystickSource but don't enable by default
+const screenCanvas = document.getElementById("screen");
+const mouseJoystickSource = new MouseJoystickSource(screenCanvas);
+
+// Helper to manage ADC source configuration
+function updateAdcSources(mouseJoystickEnabled, microphoneChannel) {
+    // Default all channels to gamepad
+    for (let ch = 0; ch < 4; ch++) {
+        processor.adconverter.setChannelSource(ch, gamepadSource);
+    }
+
+    // Apply mouse joystick if enabled (takes priority on channels 0 & 1)
+    if (mouseJoystickEnabled) {
+        processor.adconverter.setChannelSource(0, mouseJoystickSource);
+        processor.adconverter.setChannelSource(1, mouseJoystickSource);
+        mouseJoystickSource.setVia(processor.sysvia);
+    } else {
+        mouseJoystickSource.setVia(null);
+    }
+
+    // Apply microphone if configured (can override any channel)
+    if (microphoneChannel !== undefined) {
+        processor.adconverter.setChannelSource(microphoneChannel, microphoneInput);
+    }
+}
+
 async function ensureMicrophoneRunning() {
     if (microphoneInput.audioContext && microphoneInput.audioContext.state !== "running") {
         try {
@@ -533,19 +560,14 @@ async function ensureMicrophoneRunning() {
     return true;
 }
 
-async function setupMicrophone(channel) {
+async function setupMicrophone() {
     const $micPermissionStatus = $("#micPermissionStatus");
     $micPermissionStatus.text("Requesting microphone access...");
 
     // Try to initialise the microphone
     const success = await microphoneInput.initialise();
     if (success) {
-        console.log("Microphone: Successfully initialised from URL parameters");
-        // Set microphone as source for its channel
-        console.log(`Setting microphone as source for channel ${channel}`);
-        processor.adconverter.setChannelSource(channel, microphoneInput);
         $micPermissionStatus.text("Microphone connected successfully");
-
         await ensureMicrophoneRunning();
 
         // Try starting audio context from user gesture
@@ -554,7 +576,6 @@ async function setupMicrophone(channel) {
         };
         document.addEventListener("click", tryAgain);
     } else {
-        console.error("Microphone: Failed to initialise from URL parameters:", microphoneInput.getErrorMessage());
         $micPermissionStatus.text(`Error: ${microphoneInput.getErrorMessage() || "Unknown error"}`);
         config.setMicrophoneChannel(undefined);
         // Update URL to remove the parameter
@@ -564,16 +585,16 @@ async function setupMicrophone(channel) {
 }
 
 if (parsedQuery.microphoneChannel !== undefined) {
-    console.log("Microphone: Initialising from URL parameters");
-
     // We need to use setTimeout to make sure this runs after the page has loaded
     // This is needed because some browsers require user interaction for audio context
     setTimeout(async () => {
-        console.log("Microphone: Delayed initialisation starting");
-        await setupMicrophone(parsedQuery.microphoneChannel);
+        await setupMicrophone();
     }, 1000);
 }
 
+// Apply ADC source settings from URL parameters
+updateAdcSources(parsedQuery.mouseJoystickEnabled, parsedQuery.microphoneChannel);
+
 // Initialise keyboard now that processor exists
 keyboard = new Keyboard({
     processor,
diff --git a/src/mouse-joystick-source.js b/src/mouse-joystick-source.js
@@ -0,0 +1,179 @@
+import { AnalogueSource } from "./analogue-source.js";
+
+/**
+ * Mouse-based joystick implementation of AnalogueSource
+ * Maps mouse position relative to BBC display center to ADC channels
+ */
+export class MouseJoystickSource extends AnalogueSource {
+    /**
+     * Create a new MouseJoystickSource
+     * @param {HTMLCanvasElement} canvas - The BBC display canvas element
+     */
+    constructor(canvas) {
+        super();
+        this.canvas = canvas;
+        this.mouseX = 0.5; // Normalized position (0-1)
+        this.mouseY = 0.5; // Normalized position (0-1)
+        this.isActive = false;
+        this.via = null; // Will be set later
+
+        // Bind event handlers
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleMouseEnter = this.handleMouseEnter.bind(this);
+        this.handleMouseLeave = this.handleMouseLeave.bind(this);
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+        this.handleMouseUp = this.handleMouseUp.bind(this);
+        this.handleGlobalMouseMove = this.handleGlobalMouseMove.bind(this);
+
+        // Attach event listeners
+        this.canvas.addEventListener("mousemove", this.handleMouseMove);
+        this.canvas.addEventListener("mouseenter", this.handleMouseEnter);
+        this.canvas.addEventListener("mouseleave", this.handleMouseLeave);
+        this.canvas.addEventListener("mousedown", this.handleMouseDown);
+        this.canvas.addEventListener("mouseup", this.handleMouseUp);
+
+        // Also listen to global mouse moves to track position even when not over canvas
+        document.addEventListener("mousemove", this.handleGlobalMouseMove);
+    }
+
+    /**
+     * Handle mouse movement over the canvas
+     * @param {MouseEvent} event - The mouse event
+     */
+    handleMouseMove(event) {
+        if (!this.isActive) return;
+
+        const rect = this.canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        // Normalize to 0-1 range
+        this.mouseX = x / rect.width;
+        this.mouseY = y / rect.height;
+
+        // Clamp values
+        this.mouseX = Math.max(0, Math.min(1, this.mouseX));
+        this.mouseY = Math.max(0, Math.min(1, this.mouseY));
+    }
+
+    /**
+     * Handle mouse entering the canvas
+     */
+    handleMouseEnter() {
+        this.isActive = true;
+    }
+
+    /**
+     * Handle mouse leaving the canvas
+     */
+    handleMouseLeave() {
+        this.isActive = false;
+        // Don't center when mouse leaves - keep last position
+    }
+
+    /**
+     * Handle global mouse movement (even when not over canvas)
+     * @param {MouseEvent} event - The mouse event
+     */
+    handleGlobalMouseMove(event) {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        // Normalize to 0-1 range
+        this.mouseX = x / rect.width;
+        this.mouseY = y / rect.height;
+
+        // Clamp values to 0-1 range
+        this.mouseX = Math.max(0, Math.min(1, this.mouseX));
+        this.mouseY = Math.max(0, Math.min(1, this.mouseY));
+    }
+
+    /**
+     * Handle mouse button press
+     * @param {MouseEvent} event - The mouse event
+     */
+    handleMouseDown(event) {
+        if (!this.isActive || !this.via) return;
+
+        // Only handle left mouse button (button 0)
+        if (event.button === 0) {
+            // Set fire button 1 pressed (PB4)
+            this.via.setJoystickButton(0, true);
+            event.preventDefault();
+        }
+    }
+
+    /**
+     * Handle mouse button release
+     * @param {MouseEvent} event - The mouse event
+     */
+    handleMouseUp(event) {
+        if (!this.via) return;
+
+        // Only handle left mouse button (button 0)
+        if (event.button === 0) {
+            // Release fire button 1 (PB4)
+            this.via.setJoystickButton(0, false);
+            event.preventDefault();
+        }
+    }
+
+    /**
+     * Set the VIA reference for button handling
+     * @param {object} via - The system VIA
+     */
+    setVia(via) {
+        this.via = via;
+    }
+
+    /**
+     * Get analog value from mouse position for the specified channel
+     * @param {number} channel - The ADC channel (0-3)
+     * @returns {number} A value between 0 and 0xffff
+     */
+    getValue(channel) {
+        let value;
+
+        // Use mouse position when enabled (always active when assigned to a channel)
+        {
+            switch (channel) {
+                case 0:
+                    // X axis for joystick 1
+                    // Convert from [0,1] to [0,0xffff]
+                    value = Math.floor(this.mouseX * 0xffff);
+                    break;
+                case 1:
+                    // Y axis for joystick 1
+                    // Convert from [0,1] to [0,0xffff]
+                    value = Math.floor(this.mouseY * 0xffff);
+                    break;
+                case 2:
+                    // X axis for joystick 2 (not used for mouse)
+                    value = 0x8000;
+                    break;
+                case 3:
+                    // Y axis for joystick 2 (not used for mouse)
+                    value = 0x8000;
+                    break;
+                default:
+                    value = 0x8000;
+                    break;
+            }
+        }
+
+        return value;
+    }
+
+    /**
+     * Clean up event listeners when source is no longer needed
+     */
+    dispose() {
+        this.canvas.removeEventListener("mousemove", this.handleMouseMove);
+        this.canvas.removeEventListener("mouseenter", this.handleMouseEnter);
+        this.canvas.removeEventListener("mouseleave", this.handleMouseLeave);
+        this.canvas.removeEventListener("mousedown", this.handleMouseDown);
+        this.canvas.removeEventListener("mouseup", this.handleMouseUp);
+        document.removeEventListener("mousemove", this.handleGlobalMouseMove);
+    }
+}
diff --git a/src/via.js b/src/via.js
diff --git a/tests/unit/test-mouse-joystick-source.js b/tests/unit/test-mouse-joystick-source.js
