bind stack and register cell edits

Signed-off-by: Rachel Powers <508861+Ryex@users.noreply.github.com>

www/src/ts/virtual_machine/device.ts

@@ -93,17 +93,19 @@ export class VMDeviceCard extends VMBaseDevice {
     if (this.deviceID == activeIc?.id) {
       badges.push(html`<sl-badge variant="primary" pill pulse>db</sl-badge>`);
     }
-    activeIc?.pins?.forEach((id, index) => {
+    activeIc?.pins?.forEach((id, _index) => {
       if (this.deviceID == id) {
         badges.push(html`<sl-badge variant="success" pill></sl-badge>`);
       }
     }, this);
     return html`
-      <img
-        class="image"
-        src="img/stationpedia/${this.prefabName}.png"
-        @onerr=${this.onImageErr}
-      />
+      <sl-tooltip content="${this.prefabName}">
+        <img
+          class="image"
+          src="img/stationpedia/${this.prefabName}.png"
+          @onerr=${this.onImageErr}
+        />
+      </sl-tooltip>
       <div class="header-name">
         <sl-input
           id="vmDeviceCard${this.deviceID}Name"
@@ -140,22 +142,30 @@ export class VMDeviceCard extends VMBaseDevice {
 
   renderFields(): HTMLTemplateResult {
     const fields = Array.from(this.fields);
+    const inputIdBase = `vmDeviceCard${this.deviceID}Field`;
     return html`
       ${fields.map(([name, field], _index, _fields) => {
-      return html` <sl-input
+        return html` <sl-input
+          id="${inputIdBase}${name}"
           key="${name}"
           value="${field.value}"
+          ?disabled=${field.field_type === "Read"}
           @sl-change=${this._handleChangeField}
         >
           <span slot="prefix">${name}</span>
+          <sl-copy-button
+            slot="suffix"
+            from="${inputIdBase}${name}.value"
+          ></sl-copy-button>
           <span slot="suffix">${field.field_type}</span>
         </sl-input>`;
-    })}
+      })}
     `;
   }
 
   renderSlot(slot: Slot, slotIndex: number): HTMLTemplateResult {
     const fields = Array.from(slot.fields);
+    const inputIdBase = `vmDeviceCard${this.deviceID}Slot${slotIndex}Field`;
     return html`
       <sl-card class="slot-card">
         <span slot="header" class="slot-header"
@@ -163,18 +173,24 @@ export class VMDeviceCard extends VMBaseDevice {
         >
         <div class="slot-fields">
           ${fields.map(
-      ([name, field], _index, _fields) => html`
+            ([name, field], _index, _fields) => html`
               <sl-input
+                id="${inputIdBase}${name}"
                 slotIndex=${slotIndex}
                 key="${name}"
                 value="${field.value}"
+                ?disabled=${field.field_type === "Read"}
                 @sl-change=${this._handleChangeSlotField}
               >
                 <span slot="prefix">${name}</span>
+                <sl-copy-button
+                  slot="suffix"
+                  from="${inputIdBase}${name}.value"
+                ></sl-copy-button>
                 <span slot="suffix">${field.field_type}</span>
               </sl-input>
             `,
-    )}
+          )}
         </div>
       </sl-card>
     `;
@@ -194,9 +210,9 @@ export class VMDeviceCard extends VMBaseDevice {
     return html`
       <div class="networks">
         ${this.connections.map((connection, index, _conns) => {
-      const conn =
-        typeof connection === "object" ? connection.CableNetwork : null;
-      return html`
+          const conn =
+            typeof connection === "object" ? connection.CableNetwork : null;
+          return html`
             <sl-select
               hoist
               placement="top"
@@ -208,12 +224,12 @@ export class VMDeviceCard extends VMBaseDevice {
             >
               <span slot="prefix">Connection:${index}</span>
               ${vmNetworks.map(
-        (net) =>
-          html`<sl-option value=${net}>Network ${net}</sl-option>`,
-      )}
+                (net) =>
+                  html`<sl-option value=${net}>Network ${net}</sl-option>`,
+              )}
             </sl-select>
           `;
-    })}
+        })}
       </div>
     `;
   }
@@ -223,8 +239,8 @@ export class VMDeviceCard extends VMBaseDevice {
     return html`
       <div class="pins">
         ${pins?.map(
-      (pin, index) =>
-        html`<sl-select
+          (pin, index) =>
+            html`<sl-select
               hoist
               placement="top"
               clearable
@@ -234,13 +250,13 @@ export class VMDeviceCard extends VMBaseDevice {
             >
               <span slot="prefix">d${index}</span>
               ${visibleDevices.map(
-          (device, _index) =>
-            html`<sl-option value=${device.id}>
+                (device, _index) =>
+                  html`<sl-option value=${device.id}>
                     Device ${device.id} : ${device.name ?? device.prefabName}
                   </sl-option>`,
-        )}
+              )}
             </sl-select>`,
-    )}
+        )}
       </div>
     `;
   }
@@ -350,9 +366,9 @@ export class VMDeviceList extends BaseElement {
     return html`
       <div class="device-list">
         ${this.devices.map(
-      (id, _index, _ids) =>
-        html`<vm-device-card .deviceID=${id}></vm-device-card>`,
-    )}
+          (id, _index, _ids) =>
+            html`<vm-device-card .deviceID=${id}></vm-device-card>`,
+        )}
       </div>
     `;
   }

www/src/ts/virtual_machine/registers.ts

@@ -9,6 +9,7 @@ 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";
+import { parseNumber } from "../utils";
 
 @customElement("vm-ic-registers")
 export class VMICRegisters extends VMActiveIC {
@@ -103,7 +104,9 @@ export class VMICRegisters extends VMActiveIC {
   }
 
   _handleCellChange(e: Event) {
-    const target = e.target as SlInput;
-    console.log(target.getAttribute("key"), target.value);
+    const input = e.target as SlInput;
+    const index = parseInt(input.getAttribute("key")!);
+    const val = parseNumber(input.value)
+    window.VM!.setRegister(index, val);
   }
 }

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 SlInput from "@shoelace-style/shoelace/dist/components/input/input.js";
+import { parseNumber } from "../utils";
 
 @customElement("vm-ic-stack")
 export class VMICStack extends VMActiveIC {
@@ -88,7 +89,9 @@ export class VMICStack extends VMActiveIC {
   }
 
   _handleCellChange(e: Event) {
-    const target = e.target as SlInput;
-    console.log(target.getAttribute("key"), target.value);
+    const input = e.target as SlInput;
+    const index = parseInt(input.getAttribute("key")!);
+    const val = parseNumber(input.value)
+    window.VM!.setStack(index, val);
   }
 }