bind stack and register cell edits

cleanup prep for merge

www/src/ts/virtual_machine/controls.ts

@@ -17,11 +17,12 @@ export class VMICControls extends VMActiveIC {
     ...defaultCss,
     css`
       :host {
+        display: block;
+        box-sizing: border-box;
       }
       .card {
-        margin-left: 1rem;
-        margin-right: 1rem;
-        margin-top: 0.5rem;
+        width: 100%;
+        box-sizing: border-box;
       }
       .controls {
         display: flex;

www/src/ts/virtual_machine/registers.ts

@@ -8,6 +8,7 @@ import "@shoelace-style/shoelace/dist/components/icon/icon.js";
 import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
 import "@shoelace-style/shoelace/dist/components/input/input.js";
 import { RegisterSpec } from "ic10emu_wasm";
+import SlInput from "@shoelace-style/shoelace/dist/components/input/input.js";
 
 @customElement("vm-ic-registers")
 export class VMICRegisters extends VMActiveIC {
@@ -18,7 +19,7 @@ export class VMICRegisters extends VMActiveIC {
       }
       .card {
         --padding: 0.5rem;
-        --sl-input-font-size-small: 0.75em
+        --sl-input-font-size-small: 0.75em;
       }
       .card-body {
         display: flex;
@@ -29,6 +30,9 @@ export class VMICRegisters extends VMActiveIC {
       .reg-input {
         width: 10rem;
       }
+      .tooltip {
+        --max-width: 6rem;
+      }
     `,
   ];
 
@@ -72,19 +76,34 @@ export class VMICRegisters extends VMActiveIC {
             const aliases = registerAliases
               .filter(([_alias, target]) => index === target)
               .map(([alias, _target]) => alias);
-            return html` <sl-input
-              type="text"
-              value="${displayVal(val)}"
-              pattern="${validation}"
-              size="small"
-              class="reg-input"
-            >
-              <span slot="prefix">r${index}</span>
-              <span slot="suffix">${aliases.join(", ")}</span>
-            </sl-input>`;
+            return html`
+              <sl-tooltip placement="left" class="tooltip">
+                <div slot="content">
+                  <strong>Regster r${index}</strong> Aliases:
+                  <em>${aliases.join(", ") || "None"}</em>
+                </div>
+                <sl-input
+                  type="text"
+                  value="${displayVal(val)}"
+                  pattern="${validation}"
+                  size="small"
+                  class="reg-input"
+                  @sl-change=${this._handleCellChange}
+                  key=${index}
+                >
+                  <span slot="prefix">r${index}</span>
+                  <span slot="suffix">${aliases.join(", ")}</span>
+                </sl-input>
+              </sl-tooltip>
+            `;
           })}
         </div>
       </sl-card>
     `;
   }
+
+  _handleCellChange(e: Event) {
+    const target = e.target as SlInput;
+    console.log(target.getAttribute("key"), target.value);
+  }
 }

www/src/ts/virtual_machine/stack.ts

@@ -8,6 +8,7 @@ import "@shoelace-style/shoelace/dist/components/icon/icon.js";
 import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
 import "@shoelace-style/shoelace/dist/components/input/input.js";
 import { RegisterSpec } from "ic10emu_wasm";
+import SlInput from "@shoelace-style/shoelace/dist/components/input/input.js";
 
 @customElement("vm-ic-stack")
 export class VMICStack extends VMActiveIC {
@@ -56,27 +57,39 @@ export class VMICStack extends VMActiveIC {
       "[-+]?(([0-9]+(\\.[0-9]+)?([eE][+-]?[0-9]+)?)|((\\.[0-9]+)([eE][+-]?[0-9]+)?)|([iI][nN][fF][iI][nN][iI][tT][yY]))";
     const sp = this.registers![16];
 
-
     return html`
       <sl-card class="card">
         <div class="card-body">
           ${this.stack?.map((val, index) => {
-            return html` <sl-input
-              type="text"
-              value="${displayVal(val)}"
-              pattern="${validation}"
-              size="small"
-              class="stack-input ${sp === index ? "stack-pointer" : "" }"
-            >
-              <span
-                slot="prefix"
+            return html`
+              <sl-tooltip
+                placement="left"
               >
-                ${index}
-              </span>
-            </sl-input>`;
+                <div slot="content">
+                ${sp === index ? html`<strong>Stack Pointer</strong>` : ""}
+                Address ${index}
+                </div>
+                <sl-input
+                  type="text"
+                  value="${displayVal(val)}"
+                  pattern="${validation}"
+                  size="small"
+                  class="stack-input ${sp === index ? "stack-pointer" : ""}"
+                  @sl-change=${this._handleCellChange}
+                  key=${index}
+                >
+                  <span slot="prefix"> ${index} </span>
+                </sl-input>
+              </sl-tooltip>
+            `;
           })}
         </div>
       </sl-card>
     `;
   }
+
+  _handleCellChange(e: Event) {
+    const target = e.target as SlInput;
+    console.log(target.getAttribute("key"), target.value);
+  }
 }

www/src/ts/virtual_machine/ui.ts

@@ -22,6 +22,15 @@ export class VMUI extends BaseElement {
       sl-details::part(content) {
         padding: 0.5rem;
       }
+      vm-ic-controls {
+        margin-left: 1rem;
+        margin-right: 1rem;
+        margin-top: 0.5rem;
+      }
+      .side-container {
+        height: 100%
+        overflow-y: auto;
+      }
     `,
   ];
 
@@ -31,13 +40,15 @@ export class VMUI extends BaseElement {
 
   protected render() {
     return html`
-      <vm-ic-controls></vm-ic-controls>
-      <sl-details summary="Registers">
-        <vm-ic-registers></vm-ic-registers>
-      </sl-details>
-      <sl-details summary="Stack">
-        <vm-ic-stack></vm-ic-stack>
-      </sl-details>
+      <div class="side-container">
+        <vm-ic-controls></vm-ic-controls>
+        <sl-details summary="Registers" open>
+          <vm-ic-registers></vm-ic-registers>
+        </sl-details>
+        <sl-details summary="Stack">
+          <vm-ic-stack></vm-ic-stack>
+        </sl-details>
+      </div>
     `;
   }
 }