part 3: dynamically add first robo from template when starting

1 files changed, 23 insertions, 6 deletions

diff --git a/site/game.mjs b/site/game.mjs
index 0b1de90..f58f2c2 100644
--- a/site/game.mjs
+++ b/site/game.mjs
@@ -5,6 +5,8 @@ const ARENA_SELECTOR = 'x-arena';
 const TICK_BUTTON_SELECTOR = '#tick';
 const TICK_RATE_SELECTOR = '#tick-rate-select';
 const RUN_BUTTON_SELECTOR = '#run';
+const INSPECTOR_TEMPLATE_SELECTOR = '.inspectors template';
+const INSPECTORS_SECTION_SELECTOR = '.inspectors';
 
 export default class extends HTMLElement {
     static name = 'x-game';
@@ -20,6 +22,8 @@ export default class extends HTMLElement {
     #tickButton;
     #runButton;
     #tickRate;
+    #inspectorTemplate;
+    #inspectorsSection;
 
     constructor() {
         super();
@@ -31,7 +35,9 @@ export default class extends HTMLElement {
         this.#tickButton = this.querySelector(TICK_BUTTON_SELECTOR);
         this.#runButton = this.querySelector(RUN_BUTTON_SELECTOR);
         this.#tickRate = this.querySelector(TICK_RATE_SELECTOR);
-        this.#inspectors = this.querySelectorAll(Inspector.name);
+        this.#inspectorTemplate = this.querySelector(INSPECTOR_TEMPLATE_SELECTOR);
+        this.#inspectorsSection = this.querySelector(INSPECTORS_SECTION_SELECTOR);
+        console.debug('bjc found template', this.#inspectorTemplate, this.#inspectorsSection);
 
         this.#tickButton.onclick = this.#tickHandler.bind(this);
         this.#runButton.onclick = this.#blinkenHandler.bind(this);
@@ -42,6 +48,8 @@ export default class extends HTMLElement {
     }
 
     addRobo() {
+        console.debug('bjc pre inspector', this.#inspectors);
+        const i = this.#robos.length;
         const { x, y } = this.#arena.randStart();
         const robo = {
             worker: new Worker('robo.mjs', { type: 'module' }),
@@ -55,12 +63,21 @@ export default class extends HTMLElement {
         }
         robo.worker.onmessage = msg => this.#messageHandler(i, msg);
         robo.worker.onerror = msg => this.#errorHander(i, msg);
-        this.#robos.push(robo);
-        const i = this.#robos.length - 1;
-        this.#inspectors[i].addEventListener(Inspector.compileRequest, e => {
-            console.debug('compiling for worker', i, e.detail.text, this.#robos[i].worker);
-            this.#robos[i].worker.postMessage({ kind: 'compile', text: e.detail.text });
+
+        // the only reliable way i have of talking to the element
+        // that's attached is to append the template, then fetch that
+        // out of the dom. neither cloneNode(true|false) nor
+        // document.importNode(true|false) worked to fire the event
+        // listener.
+        this.#inspectorsSection.appendChild(this.#inspectorTemplate.content);
+        const inspector = this.#inspectorsSection.children[this.#inspectorsSection.children.length-1];
+        inspector.addEventListener(Inspector.compileRequest, e => {
+            console.debug('compiling for worker', e.detail.text, robo.worker);
+            robo.worker.postMessage({ kind: 'compile', text: e.detail.text });
         });
+
+        this.#robos.push(robo);
+        this.#inspectors.push(inspector);
     }
 
     #messageHandler(i, e) {