step 5: cleanup

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

3 files changed, 18 insertions, 7 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();
diff --git a/site/inspector.mjs b/site/inspector.mjs
index f4f8669..b500478 100644
--- a/site/inspector.mjs
+++ b/site/inspector.mjs
@@ -7,6 +7,9 @@ const VARS_SELECTOR = '.vars';
 const SRC_SELECTOR = '.src';
 const IP_SELECTOR = '.wordlist .ip';
 
+const HIGHLIGHT = new Highlight();
+CSS.highlights.set('exec', HIGHLIGHT);
+
 function selectorForIP(word, offset) {
     return `.wordlist x-bytecode[x-index='${word}'] x-op[x-index='${offset}']`;
 }
@@ -34,7 +37,6 @@ export default class extends HTMLElement {
     }
 
     #highRange = new Range();
-    #highlight = new Highlight(this.#highRange);
     #srcSelect;
     #compileButton;
     #wordlist;
@@ -45,7 +47,7 @@ export default class extends HTMLElement {
 
     constructor() {
         super();
-        CSS.highlights.set('exec', this.#highlight);
+        HIGHLIGHT.add(this.#highRange);
     }
 
     connectedCallback() {
diff --git a/site/main.css b/site/main.css
index 4f00319..414da4d 100644
--- a/site/main.css
+++ b/site/main.css
@@ -10,9 +10,13 @@ x-game {
     flex-direction: row;
 }
 
-x-game section {
+x-game section.arena {
     flex: 1;
 }
+x-game section.inspectors {
+    flex: 2;
+    display: flex;
+}
 
 x-arena canvas {
     border: 1px solid orangered;