Minor refactoring for organization, added header comments

script.js

@@ -1,3 +1,7 @@
+/*
+* BEGIN CLASS DECLARATIONS
+*/
+
 // 2D vector class to make some of the math easier
 class Vec2D {
     constructor(x, y) {
@@ -102,7 +106,7 @@ const PresetConfigs = {
     },
 
     fourWheelRectangle: (size) => {
-        const width = size * 0.7;
+        const width = size * 0.5;
         const length = size;
         return [
             { x: length / 2, y: width / 2, name: "FL" },
@@ -141,6 +145,11 @@ const PresetConfigs = {
     }
 };
 
+/*
+* END CLASS DECLARATIONS
+* BEGIN DOM VARIABLES
+*/
+
 // Get all control elements
 const vxSlider = document.getElementById('vx-slider');
 const vySlider = document.getElementById('vy-slider');
@@ -167,7 +176,12 @@ const preset4RectBtn = document.getElementById('preset-4rect');
 const preset6WheelBtn = document.getElementById('preset-6wheel');
 const preset8WheelBtn = document.getElementById('preset-8wheel');
 
-// Add event listeners for drive controls
+/*
+* END DOM VARIABLES
+* BEGIN LISTENER CODE
+*/
+
+
 vxSlider.addEventListener('input', (e) => {
     vxOutput.textContent = parseFloat(e.target.value);
 });
@@ -198,9 +212,39 @@ resetBtn.addEventListener('click', (e) => {
     omegaOutput.textContent = parseFloat(omegaSlider.value);
 });
 
+// Preset button event listeners
+preset2WheelBtn.addEventListener('click', () => {
+    const positions = PresetConfigs.twoWheel(robotSize);
+    robot.setModules(positions);
+});
 
+preset3WheelBtn.addEventListener('click', () => {
+    const positions = PresetConfigs.threeWheel(robotSize);
+    robot.setModules(positions);
+});
+
+preset4WheelBtn.addEventListener('click', () => {
+    const positions = PresetConfigs.fourWheelSquare(robotSize);
+    robot.setModules(positions);
+});
+
+preset4RectBtn.addEventListener('click', () => {
+    const positions = PresetConfigs.fourWheelRectangle(robotSize);
+    robot.setModules(positions);
+});
+
+preset6WheelBtn.addEventListener('click', () => {
+    const positions = PresetConfigs.sixWheel(robotSize);
+    robot.setModules(positions);
+});
+
+preset8WheelBtn.addEventListener('click', () => {
+    const positions = PresetConfigs.eightWheel(robotSize);
+    robot.setModules(positions);
+});
 
 /*
+* END LISTENER CODE
 * BEGIN ANIMATION CODE
 */
 
@@ -313,37 +357,6 @@ let xGridOffset = 0;
 let yGridOffset = 0;
 robot.drive(xSpeed, ySpeed, 0, 500);
 
-// Preset button event listeners
-preset2WheelBtn.addEventListener('click', () => {
-    const positions = PresetConfigs.twoWheel(robotSize);
-    robot.setModules(positions);
-});
-
-preset3WheelBtn.addEventListener('click', () => {
-    const positions = PresetConfigs.threeWheel(robotSize);
-    robot.setModules(positions);
-});
-
-preset4WheelBtn.addEventListener('click', () => {
-    const positions = PresetConfigs.fourWheelSquare(robotSize);
-    robot.setModules(positions);
-});
-
-preset4RectBtn.addEventListener('click', () => {
-    const positions = PresetConfigs.fourWheelRectangle(robotSize);
-    robot.setModules(positions);
-});
-
-preset6WheelBtn.addEventListener('click', () => {
-    const positions = PresetConfigs.sixWheel(robotSize);
-    robot.setModules(positions);
-});
-
-preset8WheelBtn.addEventListener('click', () => {
-    const positions = PresetConfigs.eightWheel(robotSize);
-    robot.setModules(positions);
-});
-
 function animate() {
     // Clear and set up canvas
     ctx.clearRect(0, 0, canvas.width, canvas.height);