bind stack and register cell edits

cleanup prep for merge
2024-04-08 13:42:01 -07:00
parent ef0d2e6327
commit fd114f42fc
10 changed files with 758 additions and 90 deletions
--- a/www/src/index.html
+++ b/www/src/index.html
@@ -12,6 +12,30 @@
  <meta property="og:url" content="https://ryex.github.io/ic10emu/" />

  <link rel="stylesheet" href="./main.css">
+<style>
+  body {
+    opacity: 0;
+  }
+
+  body.ready {
+    opacity: 1;
+    transition: 0.25s opacity;
+  }
+</style>
+<script type="module">
+  await Promise.allSettled([
+    customElements.whenDefined('ic10emu-app'),
+    customElements.whenDefined('ace-ic10'),
+    customElements.whenDefined('vm-ui'),
+    customElements.whenDefined('vm-ic-controls'),
+    customElements.whenDefined('vm-ic-registers'),
+    customElements.whenDefined('vm-ic-stack')
+  ]);
+
+  // Button, card, and rating are registered now! Add
+  // the `ready` class so the UI fades in.
+  document.body.classList.add('ready');
+</script>

 </head>

--- a/www/src/ts/editor/index.ts
+++ b/www/src/ts/editor/index.ts
@@ -104,14 +104,11 @@ export class IC10Editor extends BaseElement {
      >
        <div
          id="editor"
-          <!-- style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; isolation: isolate;" -->
+          style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; isolation: isolate;"
        ></div>
        <div id="editorStatusbar"></div>
      </div>
-      <sl-dialog
-        label="Editor Settings"
-        class="dialog-focus e-settings-dialog"
-      >
+      <sl-dialog label="Editor Settings" class="dialog-focus e-settings-dialog">
        <sl-radio-group
          id="editorKeyboardRadio"
          label="Editor Keyboard Bindings"
@@ -262,9 +259,9 @@ export class IC10Editor extends BaseElement {
    });

    this.observer = new ResizeObserver(function (entries) {
-      entries.forEach(function (entry) {
+      for (const _entry of entries) {
        that.resizeEditor();
-      });
+      }
    });

    this.observer.observe(this.editorContainerDiv);
--- a/www/src/ts/virtual_machine/controls.ts
+++ b/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;
--- a/www/src/ts/virtual_machine/registers.ts
+++ b/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);
+  }
 }
--- a/www/src/ts/virtual_machine/stack.ts
+++ b/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);
+  }
 }
--- a/www/src/ts/virtual_machine/ui.ts
+++ b/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>
    `;
  }
 }