Draw each module

script.js

@@ -201,13 +201,32 @@ function drawGrid(ctx, sideLength, gridSquareSize) {
     }
 }
 
+function drawModule(ctx, module) {
+    const x = module.position.x;
+    const y = module.position.y;
+
+    ctx.save();
+    ctx.translate(x, y);
+
+    ctx.fillStyle = rootStyles.getPropertyValue('--swerve-fill-color');
+    ctx.beginPath();
+    ctx.arc(0, 0, 10, 0, Math.PI * 2);
+    ctx.fill();
+
+    ctx.strokeStyle = rootStyles.getPropertyValue('--swerve-module-color');
+    ctx.lineWidth = 4;
+    ctx.stroke();
+
+
+    ctx.restore();
+}
+
 function drawRobot(ctx, robot) {
     ctx.strokeStyle = rootStyles.getPropertyValue('--robot-frame-color')
     ctx.fillStyle = rootStyles.getPropertyValue('--robot-fill-color');
     ctx.lineWidth = 4;
 
     const modules = robot.modules.sort((a, b) => Math.atan2(a.position.y, a.position.x) - Math.atan2(b.position.y, b.position.x));
-    console.log(modules);
 
     ctx.beginPath();
     ctx.moveTo(modules[0].position.x, modules[0].position.y);
@@ -217,8 +236,13 @@ function drawRobot(ctx, robot) {
     ctx.closePath();
     ctx.fill();
     ctx.stroke();
+
+    modules.forEach(module => drawModule(ctx, module));
 }
 
+const robot = new SwerveDrive(PresetConfigs.eightWheel(200));
+robot.drive(100, 0, 1, 500);
+
 ctx.translate(canvas.width / 2, canvas.height / 2);
 drawGrid(ctx, 600, 50);
-drawRobot(ctx, new SwerveDrive(PresetConfigs.eightWheel(200)));
+drawRobot(ctx, robot);

styles.css

@@ -26,7 +26,8 @@
   --grid-color: #e4e4e733;
   --robot-frame-color: #1e81bf;
   --robot-fill-color: #5f9ec4;
-  --swerve-module-color: #7bb6db;
+  --swerve-module-color: #1e81bf;
+  --swerve-fill-color: #7986cb;
   --swerve-arrow-color: #c73c3c;
 }