step 5: cleanup

 - src highlight
 - multiple robo colors
 - display inspectors side-by-side

1 files changed, 9 insertions, 4 deletions

diff --git a/site/arena.mjs b/site/arena.mjs
index 83f0f05..5ca3c32 100644
--- a/site/arena.mjs
+++ b/site/arena.mjs
@@ -54,7 +54,7 @@ export default class extends HTMLElement {
 
         this.#ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
 
-        robos.forEach(robo => {
+        robos.forEach((robo, i) => {
             // interpolation factor for smoother movement independent
             // of tick rate, but never tween more than 1 tick.
             const delta = robo.lastTick ? now - robo.lastTick : 0;
@@ -66,12 +66,17 @@ export default class extends HTMLElement {
                 ].map(x => timeScale * x);
                 [x, y] = this.clamp(this.constructor.radius, robo.x + velx, robo.y + vely);
             }
-            this.#renderRobo(x, y);
+            this.#renderRobo(i, x, y);
         });
     }
 
-    #renderRobo(x, y) {
-        this.#ctx.fillStyle = 'rgb(200 0 0)';
+    #colors = ['rgb(200 0 0)', 'rgb(0 0 200)'];
+    #colorFor(i) {
+        return this.#colors[i % this.#colors.length];
+    }
+
+    #renderRobo(i, x, y) {
+        this.#ctx.fillStyle = this.#colorFor(i);
         this.#ctx.beginPath();
         this.#ctx.arc(x, y, this.constructor.radius, 0, 2 * Math.PI);
         this.#ctx.fill();