Made UI feel more consistent

index.html

@@ -16,7 +16,7 @@
     <main>
         <section class="visualization-canvas">
             <h2>Robot Visualization</h2>
-            <canvas id="swerve-canvas" width="600" height="600"></canvas>
+            <canvas id="swerve-canvas" width="800" height="800"></canvas>
         </section>
 
         <section class="control-panel">
@@ -78,6 +78,7 @@
                 </div>
 
                 <button id="generate-inputs-btn" type="button">Generate Position Inputs</button>
+                <button id="delete-inputs-btn" type="button">Remove Position Inputs</button>
 
                 <div id="module-position-inputs" class="position-inputs">
                     <!-- Dynamically generated position inputs will appear here -->

script.js

@@ -48,8 +48,13 @@ class SwerveModule {
 
 // Swerve drive class to represent the robot as a whole
 class SwerveDrive {
-    constructor(modulePositionsAndNames) {
+    constructor(modulePositionsAndNames, robotName) {
         this.setModules(modulePositionsAndNames);
+        this.setName(robotName);
+    }
+
+    setName(robotName) {
+        this.name = robotName;
     }
 
     setModules(modulePositionsAndNames) {
@@ -166,6 +171,7 @@ const maxSpeedOutput = document.getElementById('max-speed-value');
 // Get button elements
 const resetBtn = document.getElementById('reset-btn');
 const generateInputsBtn = document.getElementById('generate-inputs-btn');
+const clearInputsBtn = document.getElementById('delete-inputs-btn');
 const applyCustomBtn = document.getElementById('apply-custom-btn');
 
 // Preset buttons
@@ -216,35 +222,168 @@ resetBtn.addEventListener('click', (e) => {
 preset2WheelBtn.addEventListener('click', () => {
     const positions = PresetConfigs.twoWheel(robotSize);
     robot.setModules(positions);
+    robot.setName("2-Wheel Differential");
+    createModuleDisplays(robot);
+    updateModuleDisplays(robot);
 });
 
 preset3WheelBtn.addEventListener('click', () => {
     const positions = PresetConfigs.threeWheel(robotSize);
     robot.setModules(positions);
+    robot.setName("3-Wheel Triangle");
+    createModuleDisplays(robot);
+    updateModuleDisplays(robot);
 });
 
 preset4WheelBtn.addEventListener('click', () => {
     const positions = PresetConfigs.fourWheelSquare(robotSize);
     robot.setModules(positions);
+    robot.setName("4-Wheel Square");
+    createModuleDisplays(robot);
+    updateModuleDisplays(robot);
 });
 
 preset4RectBtn.addEventListener('click', () => {
     const positions = PresetConfigs.fourWheelRectangle(robotSize);
     robot.setModules(positions);
+    robot.setName("4-Wheel Rectangle");
+    createModuleDisplays(robot);
+    updateModuleDisplays(robot);
 });
 
 preset6WheelBtn.addEventListener('click', () => {
     const positions = PresetConfigs.sixWheel(robotSize);
     robot.setModules(positions);
+    robot.setName("6-Wheel Hexagon");
+    createModuleDisplays(robot);
+    updateModuleDisplays(robot);
 });
 
 preset8WheelBtn.addEventListener('click', () => {
     const positions = PresetConfigs.eightWheel(robotSize);
     robot.setModules(positions);
+    robot.setName("8-Wheel Octogon");
+    createModuleDisplays(robot);
+    updateModuleDisplays(robot);
+});
+
+generateInputsBtn.addEventListener('click', () => {
+    const count = parseInt(moduleCountInput.value);
+
+    if (isNaN(count) || count < 2) {
+        alert('Please enter a valid number of modules between 2 and 12.');
+        return;
+    }
+    generateModuleInputs(count);
+    applyCustomBtn.style.display = 'block';
+});
+
+clearInputsBtn.addEventListener('click', () => {
+    generateModuleInputs(0);
+    applyCustomBtn.style.display = 'none';
+});
+
+applyCustomBtn.addEventListener('click', () => {
+    const container = document.getElementById('module-position-inputs');
+    const moduleElements = container.childNodes;
+
+    const customModules = [];
+    for (let i = 0; i < moduleElements.length; i++) {
+        const xInput = document.getElementById(`module-${i}-x`);
+        const yInput = document.getElementById(`module-${i}-y`);
+        const nameInput = document.getElementById(`module-${i}-name`);
+
+        const x = parseFloat(xInput.value);
+        const y = parseFloat(yInput.value);
+        const name = nameInput.value.trim();
+
+        customModules.push({ x, y, name });
+    }
+
+    robot.setModules(customModules);
+    robot.setName("Custom Configuration");
+    createModuleDisplays(robot);
+    updateModuleDisplays(robot);
 });
 
 /*
 * END LISTENER CODE
+* BEGIN DYNAMIC DOM FUNCTIONS
+*/
+
+function generateModuleInputs(count) {
+    const container = document.getElementById('module-position-inputs');
+    container.innerHTML = ''; // Clear existing inputs
+
+    for (let i = 0; i < count; i++) {
+        const moduleFieldset = document.createElement('fieldset');
+        moduleFieldset.className = 'module-input-group';
+        moduleFieldset.innerHTML = `
+        <legend>Module ${i + 1}</legend>
+
+        <div class="control-group">
+            <label for="module-${i}-name">Module Name</label>
+            <input type="text" id="module-${i}-name" value="Module ${i + 1}" required>
+        </div>
+        <div class="control-group">
+            <label for="module-${i}-x">X Position (pixels)</label>
+            <input type="number" id="module-${i}-x" step="1" value="0" required>
+        </div>
+        <div class="control-group">
+            <label for="module-${i}-y">Y Position (pixels)</label>
+            <input type="number" id="module-${i}-y" step="0.1" value="0" required>
+        </div>
+        `;
+        container.appendChild(moduleFieldset);
+    }
+}
+
+function createModuleDisplays(robot) {
+    const grid = document.getElementById('module-grid');
+    grid.innerHTML = ''; // Delete any pre-existing elements before creating new ones
+
+    const modules = robot.modules;
+    modules.forEach((module, i) => {
+        const article = document.createElement('article');
+        article.className = 'module-display';
+        const name = module.name;
+
+        article.innerHTML = `
+            <h3>${name}</h3>
+            <div class="readout">
+                <span class="label">Angle:</span>
+                <span id="module-${i}-angle" class="value">0.0°</span>
+            </div>
+            <div class="readout">
+                <span class="label">Speed:</span>
+                <span id="module-${i}-speed" class="value">0.00 pixels/s</span>
+            </div>
+        `;
+        grid.appendChild(article);
+    });
+}
+
+function updateModuleDisplays(robot) {
+    const configName = document.getElementById('config-name');
+    configName.textContent = robot.name;
+    const moduleCount = document.getElementById('module-count-display');
+    moduleCount.textContent = robot.modules.length;
+
+    const modules = robot.modules;
+    modules.forEach((module, i) => {
+        const angleElement = document.getElementById(`module-${i}-angle`);
+        const speedElement = document.getElementById(`module-${i}-speed`);
+
+        if (angleElement && speedElement) {
+            const angleDeg = (module.angle * 180 / Math.PI).toFixed(1);
+            angleElement.textContent = `${angleDeg}°`;
+            speedElement.textContent = `${module.speed.toFixed(2)} pixels/s`;
+        }
+    });
+}
+
+/*
+* END DYNAMIC DOM FUNCTIONS
 * BEGIN ANIMATION CODE
 */
 
@@ -346,7 +485,9 @@ function drawRobot(ctx, robot) {
 
 // Initialize Variables
 const robotSize = 200;
-const robot = new SwerveDrive(PresetConfigs.fourWheelSquare(robotSize));
+const defaultModulePositions = PresetConfigs.fourWheelSquare(robotSize);
+const robot = new SwerveDrive(defaultModulePositions, "4-Wheel Square");
+createModuleDisplays(robot);
 let xSpeed = 0;
 let ySpeed = 0;
 let turnSpeed = -1;
@@ -382,13 +523,15 @@ function animate() {
     xGridOffset = (xGridOffset + (worldVx / offsetSpeedDivisor)) % gridSquareSize;
     yGridOffset = (yGridOffset + (worldVy / offsetSpeedDivisor)) % gridSquareSize;
 
+    // Update module states before drawing the robot
+    robot.drive(xSpeed, ySpeed, turnSpeed, parseFloat(maxSpeedSlider.value));
+    updateModuleDisplays(robot);
+
     // Draw the robot and it's movement. Grid should be oversized so movement
     // doesn't find the edge of the grid
     drawGrid(ctx, canvas.width * 2, gridSquareSize, xGridOffset, yGridOffset, robotRotation);
     drawRobot(ctx, robot);
 
-    robot.drive(xSpeed, ySpeed, turnSpeed, parseFloat(maxSpeedSlider.value));
-
     // Do it all over again
     ctx.restore();
     requestAnimationFrame(animate);

styles.css

@@ -296,4 +296,69 @@ button:hover {
   border-color: var(--accent-blue);
   transform: translateY(-2px);
   box-shadow: var(--shadow);
+}
+
+/* Module States Grid */
+.module-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--spacing-small);
+  margin-top: var(--spacing-small);
+}
+
+.module-card {
+  background-color: var(--background-dark);
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: var(--spacing-small);
+  transition: all 0.3s ease;
+}
+
+.config-info {
+  background-color: var(--background-dark);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: var(--spacing-small);
+  margin-bottom: var(--spacing-small);
+  color: var(--text-secondary);
+}
+
+.control-group {
+  margin-bottom: var(--spacing-small);
+  display: flex;
+  flex-direction: column;
+}
+
+.position-inputs {
+  max-height: 400px;
+  overflow-y: auto;
+  padding: var(--spacing-small);
+  background-color: var(--background-dark);
+  border-radius: var(--border-radius-sm);
+  margin-top: var(--spacing-small);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.preset-buttons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+
+.module-display {
+  background-color: var(--background-dark);
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: var(--spacing-small);
+}
+
+.readout {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: calc(var(--spacing-small) / 2);
+}
+
+.readout .value {
+  color: var(--text-light);
+  font-weight: bold;
 }