dave/ic10emu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): use new frozen object to fill values for baseObject mixin, proxy vm to webworker to avoid hogging main thread

Browse Source
This commit is contained in:
Rachel Powers
2024-05-29 00:27:28 -07:00
parent e4167efc20
commit c1f4cb23d4
27 changed files with 946 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
www/src/ts/virtual_machine/device/add_device.ts
View File

@@ -41,10 +41,10 @@ export class VMAddDeviceButton extends VMDeviceDBMixin(BaseElement) {
postDBSetUpdate(): void {
this._structures = new Map(
Object.values(this.deviceDB.db)
.filter((entry) => this.deviceDB.structures.includes(entry.name), this)
Object.values(this.templateDB.db)
.filter((entry) => this.templateDB.structures.includes(entry.name), this)
.filter(
(entry) => this.deviceDB.logic_enabled.includes(entry.name),
(entry) => this.templateDB.logic_enabled.includes(entry.name),
this,
)
.map((entry) => [entry.name, entry]),
@@ -133,7 +133,7 @@ export class VMAddDeviceButton extends VMDeviceDBMixin(BaseElement) {
}
_handleDeviceDBLoad(e: CustomEvent) {
this.deviceDB = e.detail;
this.templateDB = e.detail;
}
@state() private page = 0;

42
www/src/ts/virtual_machine/device/card.ts
View File

@@ -1,7 +1,7 @@
import { html, css, HTMLTemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators.js";
import { BaseElement, defaultCss } from "components";
import { VMDeviceDBMixin, VMDeviceMixin } from "virtual_machine/base_device";
import { VMDeviceDBMixin, VMObjectMixin } from "virtual_machine/base_device";
import SlSelect from "@shoelace-style/shoelace/dist/components/select/select.component.js";
import { parseIntWithHexOrBinary, parseNumber } from "utils";
import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js";
@@ -15,7 +15,7 @@ import { repeat } from "lit/directives/repeat.js";
export type CardTab = "fields" | "slots" | "reagents" | "networks" | "pins";
@customElement("vm-device-card")
export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
export class VMDeviceCard extends VMDeviceDBMixin(VMObjectMixin(BaseElement)) {
image_err: boolean;
@property({ type: Boolean }) open: boolean;
@@ -135,14 +135,14 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
}
renderHeader(): HTMLTemplateResult {
const thisIsActiveIc = this.activeICId === this.deviceID;
const thisIsActiveIc = this.activeICId === this.objectID;
const badges: HTMLTemplateResult[] = [];
if (thisIsActiveIc) {
badges.push(html`<sl-badge variant="primary" pill pulse>db</sl-badge>`);
}
const activeIc = window.VM.vm.activeIC;
activeIc?.pins?.forEach((id, index) => {
if (this.deviceID == id) {
if (this.objectID == id) {
badges.push(
html`<sl-badge variant="success" pill>d${index}</sl-badge>`,
);
@@ -154,20 +154,20 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
onerror="this.src = '${VMDeviceCard.transparentImg}'" />
</sl-tooltip>
<div class="header-name">
<sl-input id="vmDeviceCard${this.deviceID}Id" class="device-id me-1" size="small" pill value=${this.deviceID}
<sl-input id="vmDeviceCard${this.objectID}Id" class="device-id me-1" size="small" pill value=${this.objectID}
@sl-change=${this._handleChangeID}>
<span slot="prefix">Id</span>
<sl-copy-button slot="suffix" .value=${this.deviceID}></sl-copy-button>
<sl-copy-button slot="suffix" .value=${this.objectID}></sl-copy-button>
</sl-input>
<sl-input id="vmDeviceCard${this.deviceID}Name" class="device-name me-1" size="small" pill
<sl-input id="vmDeviceCard${this.objectID}Name" class="device-name me-1" size="small" pill
placeholder=${this.prefabName} value=${this.name} @sl-change=${this._handleChangeName}>
<span slot="prefix">Name</span>
<sl-copy-button slot="suffix" from="vmDeviceCard${this.deviceID}Name.value"></sl-copy-button>
<sl-copy-button slot="suffix" from="vmDeviceCard${this.objectID}Name.value"></sl-copy-button>
</sl-input>
<sl-input id="vmDeviceCard${this.deviceID}NameHash" size="small" pill class="device-name-hash me-1"
<sl-input id="vmDeviceCard${this.objectID}NameHash" size="small" pill class="device-name-hash me-1"
value="${this.nameHash}" readonly>
<span slot="prefix">Hash</span>
<sl-copy-button slot="suffix" from="vmDeviceCard${this.deviceID}NameHash.value"></sl-copy-button>
<sl-copy-button slot="suffix" from="vmDeviceCard${this.objectID}NameHash.value"></sl-copy-button>
</sl-input>
${badges.map((badge) => badge)}
</div>
@@ -183,7 +183,7 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
renderFields() {
return this.delayRenderTab(
"fields",
html`<vm-device-fields .deviceID=${this.deviceID}></vm-device-fields>`,
html`<vm-device-fields .deviceID=${this.objectID}></vm-device-fields>`,
);
}
@@ -202,7 +202,7 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
${repeat(this.slots,
(slot, index) => slot.typ + index.toString(),
(_slot, index) => html`
<vm-device-slot .deviceID=${this.deviceID} .slotIndex=${index} class-"flex flex-row max-w-lg mr-2 mb-2">
<vm-device-slot .deviceID=${this.objectID} .slotIndex=${index} class-"flex flex-row max-w-lg mr-2 mb-2">
</vm-device-slot>
`,
)}
@@ -242,7 +242,7 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
return this.delayRenderTab(
"pins",
html`<div class="pins">
<vm-device-pins .deviceID=${this.deviceID}></vm-device-pins>
<vm-device-pins .deviceID=${this.objectID}></vm-device-pins>
</div>`
);
}
@@ -295,7 +295,7 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
<sl-tab slot="nav" panel="slots">Slots</sl-tab>
<sl-tab slot="nav" panel="reagents" disabled>Reagents</sl-tab>
<sl-tab slot="nav" panel="networks">Networks</sl-tab>
<sl-tab slot="nav" panel="pins" ?disabled=${!this.device.pins}>Pins</sl-tab>
<sl-tab slot="nav" panel="pins" ?disabled=${!this.obj.pins}>Pins</sl-tab>
<sl-tab-panel name="fields" active>
${until(this.renderFields(), html`<sl-spinner></sl-spinner>`)}
@@ -318,7 +318,7 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
onerror="this.src = '${VMDeviceCard.transparentImg}'" />
<div class="flex-g">
<p><strong>Are you sure you want to remove this device?</strong></p>
<span>Id ${this.deviceID} : ${this.name ?? this.prefabName}</span>
<span>Id ${this.objectID} : ${this.name ?? this.prefabName}</span>
</div>
</div>
<div slot="footer">
@@ -350,12 +350,12 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
const val = parseIntWithHexOrBinary(input.value);
if (!isNaN(val)) {
window.VM.get().then((vm) => {
if (!vm.changeDeviceID(this.deviceID, val)) {
input.value = this.deviceID.toString();
if (!vm.changeDeviceID(this.objectID, val)) {
input.value = this.objectID.toString();
}
});
} else {
input.value = this.deviceID.toString();
input.value = this.objectID.toString();
}
}
@@ -363,7 +363,7 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
const input = e.target as SlInput;
const name = input.value.length === 0 ? undefined : input.value;
window.VM.get().then((vm) => {
if (!vm.setDeviceName(this.deviceID, name)) {
if (!vm.setObjectName(this.objectID, name)) {
input.value = this.name;
}
this.updateDevice();
@@ -375,7 +375,7 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
_removeDialogRemove() {
this.removeDialog.hide();
window.VM.get().then((vm) => vm.removeDevice(this.deviceID));
window.VM.get().then((vm) => vm.removeDevice(this.objectID));
}
_handleChangeConnection(e: CustomEvent) {
@@ -383,7 +383,7 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
const conn = parseInt(select.getAttribute("key")!);
const val = select.value ? parseInt(select.value as string) : undefined;
window.VM.get().then((vm) =>
vm.setDeviceConnection(this.deviceID, conn, val),
vm.setDeviceConnection(this.objectID, conn, val),
);
this.updateDevice();
}

4
www/src/ts/virtual_machine/device/device_list.ts
View File

@@ -43,7 +43,7 @@ export class VMDeviceList extends BaseElement {
constructor() {
super();
this.devices = [...window.VM.vm.deviceIds];
this.devices = [...window.VM.vm.objectIds];
}
connectedCallback(): void {
@@ -149,7 +149,7 @@ export class VMDeviceList extends BaseElement {
if (this._filter) {
const datapoints: [string, number][] = [];
for (const device_id of this.devices) {
const device = window.VM.vm.devices.get(device_id);
const device = window.VM.vm.objects.get(device_id);
if (device) {
if (typeof device.name !== "undefined") {
datapoints.push([device.name, device.id]);

8
www/src/ts/virtual_machine/device/fields.ts
View File

@@ -1,13 +1,13 @@
import { html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import { BaseElement, defaultCss } from "components";
import { VMDeviceDBMixin, VMDeviceMixin } from "virtual_machine/base_device";
import { VMDeviceDBMixin, VMObjectMixin } from "virtual_machine/base_device";
import { displayNumber, parseNumber } from "utils";
import type { LogicType } from "ic10emu_wasm";
import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js";
@customElement("vm-device-fields")
export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
export class VMDeviceSlot extends VMObjectMixin(VMDeviceDBMixin(BaseElement)) {
constructor() {
super();
this.subscribe("fields");
@@ -15,7 +15,7 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
render() {
const fields = Array.from(this.fields.entries());
const inputIdBase = `vmDeviceCard${this.deviceID}Field`;
const inputIdBase = `vmDeviceCard${this.objectID}Field`;
return html`
${fields.map(([name, field], _index, _fields) => {
return html` <sl-input id="${inputIdBase}${name}" key="${name}" value="${displayNumber(field.value)}" size="small"
@@ -33,7 +33,7 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
const field = input.getAttribute("key")! as LogicType;
const val = parseNumber(input.value);
window.VM.get().then((vm) => {
if (!vm.setDeviceField(this.deviceID, field, val, true)) {
if (!vm.setObjectField(this.objectID, field, val, true)) {
input.value = this.fields.get(field).value.toString();
}
this.updateDevice();

8
www/src/ts/virtual_machine/device/pins.ts
View File

@@ -2,11 +2,11 @@
import { html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import { BaseElement, defaultCss } from "components";
import { VMDeviceDBMixin, VMDeviceMixin } from "virtual_machine/base_device";
import { VMDeviceDBMixin, VMObjectMixin } from "virtual_machine/base_device";
import SlSelect from "@shoelace-style/shoelace/dist/components/select/select.component.js";
@customElement("vm-device-pins")
export class VMDevicePins extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
export class VMDevicePins extends VMObjectMixin(VMDeviceDBMixin(BaseElement)) {
constructor() {
super();
this.subscribe("ic", "visible-devices");
@@ -14,7 +14,7 @@ export class VMDevicePins extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
render() {
const pins = this.pins;
const visibleDevices = window.VM.vm.visibleDevices(this.deviceID);
const visibleDevices = window.VM.vm.visibleDevices(this.objectID);
const pinsHtml = pins?.map(
(pin, index) =>
html`
@@ -37,7 +37,7 @@ export class VMDevicePins extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
const select = e.target as SlSelect;
const pin = parseInt(select.getAttribute("key")!);
const val = select.value ? parseInt(select.value as string) : undefined;
window.VM.get().then((vm) => vm.setDevicePin(this.deviceID, pin, val));
window.VM.get().then((vm) => vm.setDevicePin(this.objectID, pin, val));
this.updateDevice();
}

34
www/src/ts/virtual_machine/device/slot.ts
View File

@@ -1,7 +1,7 @@
import { html, css } from "lit";
import { customElement, property} from "lit/decorators.js";
import { BaseElement, defaultCss } from "components";
import { VMDeviceDBMixin, VMDeviceMixin } from "virtual_machine/base_device";
import { VMDeviceDBMixin, VMObjectMixin } from "virtual_machine/base_device";
import {
clamp,
displayNumber,
@@ -21,7 +21,7 @@ export interface SlotModifyEvent {
}
@customElement("vm-device-slot")
export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
export class VMDeviceSlot extends VMObjectMixin(VMDeviceDBMixin(BaseElement)) {
private _slotIndex: number;
get slotIndex() {
@@ -72,7 +72,7 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
slotOccupantImg(): string {
const slot = this.slots[this.slotIndex];
if (typeof slot.occupant !== "undefined") {
const hashLookup = (this.deviceDB ?? {}).names_by_hash ?? {};
const hashLookup = (this.templateDB ?? {}).names_by_hash ?? {};
const prefabName = hashLookup[slot.occupant.prefab_hash] ?? "UnknownHash";
return `img/stationpedia/${prefabName}.png`;
} else {
@@ -83,7 +83,7 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
slotOccupantPrefabName(): string {
const slot = this.slots[this.slotIndex];
if (typeof slot.occupant !== "undefined") {
const hashLookup = (this.deviceDB ?? {}).names_by_hash ?? {};
const hashLookup = (this.templateDB ?? {}).names_by_hash ?? {};
const prefabName = hashLookup[slot.occupant.prefab_hash] ?? "UnknownHash";
return prefabName;
} else {
@@ -92,8 +92,8 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
}
slotOcccupantTemplate(): { name: string; typ: SlotType } | undefined {
if (this.deviceDB) {
const entry = this.deviceDB.db[this.prefabName];
if (this.templateDB) {
const entry = this.templateDB.db[this.prefabName];
return entry?.slots[this.slotIndex];
} else {
return undefined;
@@ -101,7 +101,7 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
}
renderHeader() {
const inputIdBase = `vmDeviceSlot${this.deviceID}Slot${this.slotIndex}Head`;
const inputIdBase = `vmDeviceSlot${this.objectID}Slot${this.slotIndex}Head`;
const slot = this.slots[this.slotIndex];
const slotImg = this.slotOccupantImg();
const img = html`<img
@@ -111,7 +111,7 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
/>`;
const template = this.slotOcccupantTemplate();
const thisIsActiveIc = this.activeICId === this.deviceID;
const thisIsActiveIc = this.activeICId === this.objectID;
const enableQuantityInput = false;
@@ -202,7 +202,7 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
}
_handleSlotOccupantRemove() {
window.VM.vm.removeDeviceSlotOccupant(this.deviceID, this.slotIndex);
window.VM.vm.removeSlotOccupant(this.objectID, this.slotIndex);
}
_handleSlotClick(_e: Event) {
@@ -210,7 +210,7 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
new CustomEvent<SlotModifyEvent>("device-modify-slot", {
bubbles: true,
composed: true,
detail: { deviceID: this.deviceID, slotIndex: this.slotIndex },
detail: { deviceID: this.objectID, slotIndex: this.slotIndex },
}),
);
}
@@ -220,23 +220,23 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
const slot = this.slots[this.slotIndex];
const val = clamp(input.valueAsNumber, 1, slot.occupant.max_quantity);
if (
!window.VM.vm.setDeviceSlotField(
this.deviceID,
!window.VM.vm.setObjectSlotField(
this.objectID,
this.slotIndex,
"Quantity",
val,
true,
)
) {
input.value = this.device
input.value = this.obj
.getSlotField(this.slotIndex, "Quantity")
.toString();
}
}
renderFields() {
const inputIdBase = `vmDeviceSlot${this.deviceID}Slot${this.slotIndex}Field`;
const _fields = this.device.getSlotFields(this.slotIndex);
const inputIdBase = `vmDeviceSlot${this.objectID}Slot${this.slotIndex}Field`;
const _fields = this.obj.getSlotFields(this.slotIndex);
const fields = Array.from(_fields.entries());
return html`
@@ -273,9 +273,9 @@ export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
}
window.VM.get().then((vm) => {
if (
!vm.setDeviceSlotField(this.deviceID, this.slotIndex, field, val, true)
!vm.setObjectSlotField(this.objectID, this.slotIndex, field, val, true)
) {
input.value = this.device
input.value = this.obj
.getSlotField(this.slotIndex, field)
.toString();
}

24
www/src/ts/virtual_machine/device/slot_add_dialog.ts
View File

@@ -54,8 +54,8 @@ export class VMSlotAddDialog extends VMDeviceDBMixin(BaseElement) {
postDBSetUpdate(): void {
this._items = new Map(
Object.values(this.deviceDB.db)
.filter((entry) => this.deviceDB.items.includes(entry.name), this)
Object.values(this.templateDB.db)
.filter((entry) => this.templateDB.items.includes(entry.name), this)
.map((entry) => [entry.name, entry]),
);
this.setupSearch();
@@ -66,8 +66,8 @@ export class VMSlotAddDialog extends VMDeviceDBMixin(BaseElement) {
setupSearch() {
let filteredItemss = Array.from(this._items.values());
if( typeof this.deviceID !== "undefined" && typeof this.slotIndex !== "undefined") {
const device = window.VM.vm.devices.get(this.deviceID);
const dbDevice = this.deviceDB.db[device.prefabName]
const device = window.VM.vm.objects.get(this.deviceID);
const dbDevice = this.templateDB.db[device.prefabName]
const slot = dbDevice.slots[this.slotIndex]
const typ = slot.typ;
@@ -157,17 +157,17 @@ export class VMSlotAddDialog extends VMDeviceDBMixin(BaseElement) {
}
_handleClickNone() {
window.VM.vm.removeDeviceSlotOccupant(this.deviceID, this.slotIndex);
window.VM.vm.removeSlotOccupant(this.deviceID, this.slotIndex);
this.hide();
}
_handleClickItem(e: Event) {
const div = e.currentTarget as HTMLDivElement;
const key = div.getAttribute("key");
const entry = this.deviceDB.db[key];
const device = window.VM.vm.devices.get(this.deviceID);
const dbDevice = this.deviceDB.db[device.prefabName]
const sorting = this.deviceDB.enums["SortingClass"][entry.item.sorting ?? "Default"] ?? 0;
const entry = this.templateDB.db[key];
const device = window.VM.vm.objects.get(this.deviceID);
const dbDevice = this.templateDB.db[device.prefabName]
const sorting = this.templateDB.enums["SortingClass"][entry.item.sorting ?? "Default"] ?? 0;
console.log("using entry", dbDevice);
const fields: { [key in LogicSlotType]?: LogicField } = Object.fromEntries(
Object.entries(dbDevice.slotlogic[this.slotIndex] ?? {})
@@ -175,7 +175,7 @@ export class VMSlotAddDialog extends VMDeviceDBMixin(BaseElement) {
let slt = slt_s as LogicSlotType;
let value = 0.0
if (slt === "FilterType") {
value = this.deviceDB.enums["GasType"][entry.item.filtertype]
value = this.templateDB.enums["GasType"][entry.item.filtertype]
}
const field: LogicField = { field_type, value};
return [slt, field];
@@ -189,7 +189,7 @@ export class VMSlotAddDialog extends VMDeviceDBMixin(BaseElement) {
const template: SlotOccupantTemplate = {
fields
}
window.VM.vm.setDeviceSlotOccupant(this.deviceID, this.slotIndex, template);
window.VM.vm.setSlotOccupant(this.deviceID, this.slotIndex, template);
this.hide();
}
@@ -197,7 +197,7 @@ export class VMSlotAddDialog extends VMDeviceDBMixin(BaseElement) {
@query(".device-search-input") searchInput: SlInput;
render() {
const device = window.VM.vm.devices.get(this.deviceID);
const device = window.VM.vm.objects.get(this.deviceID);
const name = device?.name ?? device?.prefabName ?? "";
const id = this.deviceID ?? 0;
return html`

6
www/src/ts/virtual_machine/device/template.ts
View File

@@ -63,7 +63,7 @@ export class VmDeviceTemplate extends VMDeviceDBMixin(BaseElement) {
constructor() {
super();
this.deviceDB = window.VM.vm.db;
this.templateDB = window.VM.vm.db;
}
private _prefab_name: string;
@@ -79,7 +79,7 @@ export class VmDeviceTemplate extends VMDeviceDBMixin(BaseElement) {
}
get dbDevice(): DeviceDBEntry {
return this.deviceDB.db[this.prefab_name];
return this.templateDB.db[this.prefab_name];
}
setupState() {
@@ -198,7 +198,7 @@ export class VmDeviceTemplate extends VMDeviceDBMixin(BaseElement) {
}
renderPins(): HTMLTemplateResult {
const device = this.deviceDB.db[this.prefab_name];
const device = this.templateDB.db[this.prefab_name];
return html`<div class="pins"></div>`;
}