Id is a property that shoudl be copiable

Signed-off-by: Rachel Powers <508861+Ryex@users.noreply.github.com>
2024-04-10 19:31:20 -07:00
parent f9b2cbee32
commit c85e2f6612
5 changed files with 112 additions and 11 deletions
--- a/www/package.json
+++ b/www/package.json
@@ -50,6 +50,7 @@
    "ts-lit-plugin": "^2.0.2",
    "ts-loader": "^9.5.1",
    "typescript": "^5.4.3",
+    "typescript-lit-html-plugin": "^0.9.0",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
--- a/www/pnpm-lock.yaml
+++ b/www/pnpm-lock.yaml
@@ -133,6 +133,9 @@ devDependencies:
  typescript:
    specifier: ^5.4.3
    version: 5.4.3
+  typescript-lit-html-plugin:
+    specifier: ^0.9.0
+    version: 0.9.0
  webpack:
    specifier: ^5.91.0
    version: 5.91.0(webpack-cli@5.1.4)
@@ -185,6 +188,10 @@ packages:
    engines: {node: '>=10.0.0'}
    dev: true

+  /@emmetio/extract-abbreviation@0.1.6:
+    resolution: {integrity: sha512-Ce3xE2JvTSEbASFbRbA1gAIcMcZWdS2yUYRaQbeM0nbOzaZrUYfa3ePtcriYRZOZmr+CkKA+zbjhvTpIOAYVcw==}
+    dev: true
+
  /@floating-ui/core@1.6.0:
    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
    dependencies:
@@ -4107,6 +4114,10 @@ packages:
      minimist: 1.2.8
    dev: true

+  /jsonc-parser@1.0.3:
+    resolution: {integrity: sha512-hk/69oAeaIzchq/v3lS50PXuzn5O2ynldopMC+SWBql7J2WtdptfB9dy8Y7+Og5rPkTCpn83zTiO8FMcqlXJ/g==}
+    dev: true
+
  /jsonc-parser@3.2.1:
    resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==}
    dev: false
@@ -6453,6 +6464,29 @@ packages:
      mime-types: 2.1.35
    dev: true

+  /typescript-lit-html-plugin@0.9.0:
+    resolution: {integrity: sha512-Ux2I1sPpt2akNbRZiBAND9oA8XNE2BuVmDwsb7rZshJ9T8/Na2rICE5Tnuj9dPHdFUATdOGjVEagn1/v8T4gCQ==}
+    dependencies:
+      typescript-styled-plugin: 0.13.0
+      typescript-template-language-service-decorator: 2.3.2
+      vscode-html-languageservice: 2.1.12
+      vscode-languageserver-types: 3.17.5
+    dev: true
+
+  /typescript-styled-plugin@0.13.0:
+    resolution: {integrity: sha512-GGMzv/JAd4S8mvWgHZslvW2G1HHrdurrp93oSR4h85SM8e5at7+KCqHsZICiTaL+iN25YGkJqoaZe4XklA76rg==}
+    deprecated: Deprecated in favor of https://github.com/styled-components/typescript-styled-plugin
+    dependencies:
+      typescript-template-language-service-decorator: 2.3.2
+      vscode-css-languageservice: 3.0.13
+      vscode-emmet-helper: 1.2.11
+      vscode-languageserver-types: 3.17.5
+    dev: true
+
+  /typescript-template-language-service-decorator@2.3.2:
+    resolution: {integrity: sha512-hN0zNkr5luPCeXTlXKxsfBPlkAzx86ZRM1vPdL7DbEqqWoeXSxplACy98NpKpLmXsdq7iePUzAXloCAoPKBV6A==}
+    dev: true
+
  /typescript@5.2.2:
    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
    engines: {node: '>=14.17'}
@@ -6566,6 +6600,13 @@ packages:
    resolution: {integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==}
    dev: false

+  /vscode-css-languageservice@3.0.13:
+    resolution: {integrity: sha512-RWkO/c/A7iXhHEy3OuEqkCqavDjpD4NF2Ca8vjai+ZtEYNeHrm1ybTnBYLP4Ft1uXvvaaVtYA9HrDjD6+CUONg==}
+    dependencies:
+      vscode-languageserver-types: 3.17.5
+      vscode-nls: 4.1.2
+    dev: true
+
  /vscode-css-languageservice@4.3.0:
    resolution: {integrity: sha512-BkQAMz4oVHjr0oOAz5PdeE72txlLQK7NIwzmclfr+b6fj6I8POwB+VoXvrZLTbWt9hWRgfvgiQRkh5JwrjPJ5A==}
    dependencies:
@@ -6584,6 +6625,23 @@ packages:
      vscode-uri: 3.0.8
    dev: false

+  /vscode-emmet-helper@1.2.11:
+    resolution: {integrity: sha512-ms6/Z9TfNbjXS8r/KgbGxrNrFlu4RcIfVJxTZ2yFi0K4gn+Ka9X1+8cXvb5+5IOBGUrOsPjR0BuefdDkG+CKbQ==}
+    deprecated: This package has been renamed to @vscode/emmet-helper, please update to the new name
+    dependencies:
+      '@emmetio/extract-abbreviation': 0.1.6
+      jsonc-parser: 1.0.3
+      vscode-languageserver-types: 3.17.5
+    dev: true
+
+  /vscode-html-languageservice@2.1.12:
+    resolution: {integrity: sha512-mIb5VMXM5jI97HzCk2eadI1K//rCEZXte0wBqA7PGXsyJH4KTyJUaYk9MR+mbfpUl2vMi3HZw9GUOLGYLc6l5w==}
+    dependencies:
+      vscode-languageserver-types: 3.17.5
+      vscode-nls: 4.1.2
+      vscode-uri: 1.0.8
+    dev: true
+
  /vscode-html-languageservice@3.1.0:
    resolution: {integrity: sha512-QAyRHI98bbEIBCqTzZVA0VblGU40na0txggongw5ZgTj9UVsVk5XbLT16O9OTcbqBGSqn0oWmFDNjK/XGIDcqg==}
    dependencies:
@@ -6638,12 +6696,15 @@ packages:

  /vscode-languageserver-types@3.17.5:
    resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
-    dev: false

  /vscode-nls@4.1.2:
    resolution: {integrity: sha512-7bOHxPsfyuCqmP+hZXscLhiHwe7CSuFE4hyhbs22xPIhQ4jv99FcR4eBzfYYVLP356HNFpdvz63FFb/xw6T4Iw==}
    dev: true

+  /vscode-uri@1.0.8:
+    resolution: {integrity: sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ==}
+    dev: true
+
  /vscode-uri@2.1.2:
    resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==}
    dev: true
--- a/www/src/ts/virtual_machine/controls.ts
+++ b/www/src/ts/virtual_machine/controls.ts
@@ -1,8 +1,7 @@
 import { html, css } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, query } from "lit/decorators.js";
 import { BaseElement, defaultCss } from "../components";
 import { VMActiveICMixin } from "./base_device";
-import { structuralEqual } from "../utils";

 import "@shoelace-style/shoelace/dist/components/card/card.js";
 import "@shoelace-style/shoelace/dist/components/button-group/button-group.js";
@@ -38,10 +37,14 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
      }
      .device-id {
        margin-left: 2rem;
+        flex-grow: 1;
      }
      .button-group-toolbar sl-button-group:not(:last-of-type) {
        margin-right: var(--sl-spacing-x-small);
      }
+      .active-ic-select {
+        width: 100%;
+      }
      sl-divider {
        --spacing: 0.25rem;
      }
@@ -61,10 +64,7 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
    `,
  ];

-  constructor() {
-    super();
-    this.deviceID = window.App!.session.activeIC;
-  }
+  @query(".active-ic-select") accessor activeICSelect: SlSelect;

  protected render() {
    const ics = Array.from(window.VM!.ics);
@@ -116,13 +116,18 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
          <div class="device-id">
            <sl-select
              hoist
+              size="small"
              placement="bottom"
              value="${this.deviceID}"
              @sl-change=${this._handleChangeActiveIC}
+              class="active-ic-select"
            >
              ${ics.map(
                ([id, device], _index) =>
-                  html`<sl-option value=${id}>
+                  html`<sl-option name=${device.name} prefabName=${device.prefabName} value=${id}>
+                    ${device.name
+                      ? html`<span slot="suffix">${device.prefabName}</span>`
+                      : ""}
                    Device:${id} ${device.name ?? device.prefabName}
                  </sl-option>`,
              )}
@@ -173,6 +178,18 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
    window.VM?.reset();
  }

+  updateIC(): void {
+    super.updateIC();
+    this.activeICSelect?.dispatchEvent(new Event("slotchange"));
+    // if (this.activeICSelect) {
+    //   const val = this.activeICSelect.value;
+    //   this.activeICSelect.value = "";
+    //   this.activeICSelect.requestUpdate();
+    //   this.activeICSelect.value = val;
+    //   this.activeICSelect.
+    // }
+  }
+
  _handleChangeActiveIC(e: CustomEvent) {
    const select = e.target as SlSelect;
    const icId = parseInt(select.value as string);
--- a/www/src/ts/virtual_machine/device.ts
+++ b/www/src/ts/virtual_machine/device.ts
@@ -55,6 +55,9 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
      .device-name::part(input) {
        width: 10rem;
      }
+      .device-id::part(input) {
+        width: 2rem;
+      }
      .device-name-hash::part(input) {
        width: 7rem;
      }
@@ -106,6 +109,17 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
        />
      </sl-tooltip>
      <div class="header-name">
+        <sl-input
+          id="vmDeviceCard${this.deviceID}Id"
+          class="device-id"
+          size="small"
+          pill
+          value=${this.deviceID}
+          disabled
+        >
+          <span slot="prefix">Id</span>
+          <sl-copy-button slot="suffix" value=${this.deviceID}></sl-copy-button>
+        </sl-input>
        <sl-input
          id="vmDeviceCard${this.deviceID}Name"
          class="device-name"
@@ -114,7 +128,7 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
          placeholder="${this.prefabName}"
          @sl-change=${this._handleChangeName}
        >
-          <span slot="prefix">Device ${this.deviceID}</span>
+          <span slot="prefix">Name</span>
          <sl-copy-button
            slot="suffix"
            from="vmDeviceCard${this.deviceID}Name.value"
--- a/www/tsconfig.json
+++ b/www/tsconfig.json
@@ -8,12 +8,20 @@
    "allowJs": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
-    "types": ["@types/wicg-file-system-access", "@types/ace"],
+    "types": [
+      "@types/wicg-file-system-access",
+      "@types/ace"
+    ],
    "plugins": [
      {
        "name": "ts-lit-plugin"
+      },
+      {
+        "name": "typescript-lit-html-plugin"
      }
    ]
  },
-  "include": ["node_modules/lit-scss-loader/types.d.ts"]
+  "include": [
+    "node_modules/lit-scss-loader/types.d.ts"
+  ]
 }