part 3: dynamically add first robo from template when starting

2 files changed, 63 insertions, 44 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) {
diff --git a/site/index.html b/site/index.html
index a935339..71ca54d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -11,7 +11,7 @@
     <h1>automathon</h1>
 
     <x-game>
-      <section>
+      <section class='arena'>
         <h2>arena</h2>
         <x-arena>
           <p>fps: <span id='fps'>n/a</span></p>
@@ -54,48 +54,50 @@
         </div> <!-- controls -->
       </section> <!-- arena -->
 
-      <section>
-        <x-inspector>
-          <h2>inspector</h2>
-          <details open>
-            <summary>source code</summary>
-            <div>
-              <select class='src-select'>
-                <option>rob.fs</option>
-                <option>fac.fs</option>
-                <option>slo-fac.fs</option>
-              </select>
-              <button class='compile'>compile</button>
-              <br>
-              <div class='src' contenteditable='plaintext-only'></div>
-            </div> <!-- code -->
-          </details>
+      <section class='inspectors'>
+        <template>
+          <x-inspector>
+            <h2>inspector</h2>
+            <details open>
+              <summary>source code</summary>
+              <div>
+                <select class='src-select'>
+                  <option>rob.fs</option>
+                  <option>fac.fs</option>
+                  <option>slo-fac.fs</option>
+                </select>
+                <button class='compile'>compile</button>
+                <br>
+                <div class='src' contenteditable='plaintext-only'></div>
+              </div> <!-- code -->
+            </details>
 
-          <details open>
-            <summary>scope</summary>
-            <fieldset>
-              <legend>word list</legend>
-              <div class='wordlist'></div>
-            </fieldset>
-
-            <div class='state'>
+            <details open>
+              <summary>scope</summary>
               <fieldset>
-                <legend>vars</legend>
-                <dl class='vars'></dl>
+                <legend>word list</legend>
+                <div class='wordlist'></div>
               </fieldset>
 
-              <fieldset>
-                <legend>stack</legend>
-                <ol class='stack'></ol>
-              </fieldset>
+              <div class='state'>
+                <fieldset>
+                  <legend>vars</legend>
+                  <dl class='vars'></dl>
+                </fieldset>
 
-              <fieldset>
-                <legend>call stack</legend>
-                <ol class='callstack'></ol>
-              </fieldset>
-            </div> <!-- state -->
-          </details> <!-- scope -->
-        </x-inspector>
+                <fieldset>
+                  <legend>stack</legend>
+                  <ol class='stack'></ol>
+                </fieldset>
+
+                <fieldset>
+                  <legend>call stack</legend>
+                  <ol class='callstack'></ol>
+                </fieldset>
+              </div> <!-- state -->
+            </details> <!-- scope -->
+          </x-inspector>
+        </template>
       </section>
     </x-game>