added bug reporting

index.html

@@ -11,6 +11,15 @@
             overflow: hidden;
         }
 
+        .custom-button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
         canvas {
             display: block;
             background-image: url('https://mateo-johnson.github.io/hosted-assets/aa745548020a507cf4a07051dcd0faa446607840.png');
@@ -26,12 +35,16 @@
     <label for="relativeMovement">Relative Movement:</label>
     <input type="checkbox" id="relativeMovement">
 </div>
+
+<!-- Button element -->
+<button class="custom-button" onclick="submitBugReport()">Submit Bug Report</button>
+
 <script>
     // Constants
     const canvas = document.getElementById('robotCanvas');
     const ctx = canvas.getContext('2d');
     const ROTATION_SPEED = Math.PI / 30; // Rotation speed constant (in radians per frame)
-    
+
     // Robot parameters
     let robot = {
         x: canvas.width / 2, // Initial x position
@@ -48,10 +61,10 @@
         forwardDirection: { x: -1, y: 0 }, // Initial forward direction (upwards)
         frictionCoefficient: 0.5 // Friction coefficient
     };
-    
+
     // Convert inches to pixels
     const inchesToPixels = (inches) => inches * 24;
-    
+
     // Keyboard input
     const keys = {};
     window.addEventListener("keydown", function (e) {
@@ -60,31 +73,31 @@
     window.addEventListener("keyup", function (e) {
         delete keys[e.key];
     });
-    
+
     // Update function
     function update() {
         // Clear canvas
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        
+
         // Apply friction
         robot.velocity.x *= 1 - robot.frictionCoefficient;
         robot.velocity.y *= 1 - robot.frictionCoefficient;
-        
-      // Define deadzone threshold
-      const deadzoneThreshold = 0.1;
-
-      // Update velocity based on joystick input
-      const gamepads = navigator.getGamepads();
-      if (gamepads[0]) { // Make sure a gamepad is connected
-          const gamepad = gamepads[0];
-          const leftStickX = gamepad.axes[0]; // Left stick horizontal axis
-          const leftStickY = gamepad.axes[1]; // Left stick vertical axis
-          const rightStickX = gamepad.axes[2]; // Right stick horizontal axis
-
-          // Check if joystick input exceeds deadzone threshold
-          const leftStickMagnitude = Math.sqrt(leftStickX ** 2 + leftStickY ** 2);
-        
-          if (leftStickMagnitude > deadzoneThreshold) {
+
+        // Define deadzone threshold
+        const deadzoneThreshold = 0.1;
+
+        // Update velocity based on joystick input
+        const gamepads = navigator.getGamepads();
+        if (gamepads[0]) { // Make sure a gamepad is connected
+            const gamepad = gamepads[0];
+            const leftStickX = gamepad.axes[0]; // Left stick horizontal axis
+            const leftStickY = gamepad.axes[1]; // Left stick vertical axis
+            const rightStickX = gamepad.axes[2]; // Right stick horizontal axis
+
+            // Check if joystick input exceeds deadzone threshold
+            const leftStickMagnitude = Math.sqrt(leftStickX ** 2 + leftStickY ** 2);
+
+            if (leftStickMagnitude > deadzoneThreshold) {
                 if (document.getElementById('relativeMovement').checked) {
                     // Control translation relative to robot's orientation
                     const forwardDirectionX = Math.cos(robot.rotation);
@@ -96,34 +109,33 @@
 
                 } else {
                     // Control translation unilaterally
-                  robot.velocity.x += -leftStickY * robot.acceleration;
-                  robot.velocity.y += leftStickX * robot.acceleration;
+                    robot.velocity.x += -leftStickY * robot.acceleration;
+                    robot.velocity.y += leftStickX * robot.acceleration;
 
                 }
             }
-        // Control rotation with right stick
-        robot.rotation += rightStickX * ROTATION_SPEED; // Adjust rotation
+            // Control rotation with right stick
+            robot.rotation += rightStickX * ROTATION_SPEED; // Adjust rotation
         }
 
-
-
-
+
+
         // Limit velocity to max speed
         const speed = Math.sqrt(robot.velocity.x ** 2 + robot.velocity.y ** 2);
         if (speed > robot.maxSpeed) {
             const scale = robot.maxSpeed / speed;
             robot.velocity.x *= scale;
             robot.velocity.y *= scale;
         }
-        
+
         // Update position
         robot.x += robot.velocity.x;
         robot.y += robot.velocity.y;
-        
+
         // Ensure the robot stays within the canvas boundaries
         robot.x = Math.max(robot.width / 2, Math.min(canvas.width - robot.width / 2, robot.x));
         robot.y = Math.max(robot.height / 2, Math.min(canvas.height - robot.height / 2, robot.y));
-        
+
         // Draw robot
         ctx.save(); // Save the current transformation matrix
         ctx.translate(robot.x, robot.y); // Translate to the robot's position
@@ -133,18 +145,23 @@
         ctx.lineWidth = 2; // Set outline width
         ctx.fillRect(-robot.width / 2, -robot.height / 2, robot.width, robot.height); // Draw the robot
         ctx.strokeRect(-robot.width / 2, -robot.height / 2, robot.width, robot.height); // Draw the outline
-        
+
         // Draw front indicator with a red dot at the front
         ctx.beginPath(); // Start a new path
         ctx.arc(-robot.width * 0.5, 0 / 2, 5, 0, 2 * Math.PI); // Draw a red dot at the front
         ctx.fillStyle = 'red'; // Set the fill color to red
         ctx.fill(); // Fill the dot
         ctx.restore(); // Restore the saved transformation matrix
-        
+
         // Request next frame
         requestAnimationFrame(update);
     }
-
+
+    // Function to handle button click event
+    function submitBugReport() {
+        alert('kill yourself :)');
+    }
+
     // Start the simulation
     update();
 </script>