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

make slots account for having occupents. return logic fields that are deived form the device or slot occupant

Browse Source
This commit is contained in:
Rachel Powers
2024-04-13 00:45:39 -07:00
parent 7f4a3a0470
commit d50eabe594
8 changed files with 660 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
www/src/ts/virtual_machine/device.ts
View File

@@ -90,7 +90,7 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
--sl-color-primary-600: var(--sl-color-purple-600);
}
sl-tab::part(base) {
padding: var(--sl-spacing-small) var(--sl-spacing-medium)
padding: var(--sl-spacing-small) var(--sl-spacing-medium);
}
sl-tab-group::part(base) {
height: 16rem;
@@ -169,7 +169,7 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
}
renderFields(): HTMLTemplateResult {
const fields = Array.from(this.fields);
const fields = Array.from(this.fields.entries());
const inputIdBase = `vmDeviceCard${this.deviceID}Field`;
return html`
${fields.map(([name, field], _index, _fields) => {
@@ -192,7 +192,8 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
}
renderSlot(slot: Slot, slotIndex: number): HTMLTemplateResult {
const fields = Array.from(slot.fields);
const _fields = this.device.getSlotFields(slotIndex);
const fields = Array.from(_fields.entries());
const inputIdBase = `vmDeviceCard${this.deviceID}Slot${slotIndex}Field`;
return html`
<sl-card class="slot-card">
@@ -615,7 +616,7 @@ export class VmDeviceTemplate extends BaseElement {
...defaultCss,
css`
.template-card {
--padding: var(--sl-spacing-small)
--padding: var(--sl-spacing-small);
}
.image {
width: 3rem;
@@ -630,7 +631,7 @@ export class VmDeviceTemplate extends BaseElement {
overflow-y: auto;
}
sl-tab::part(base) {
padding: var(--sl-spacing-small) var(--sl-spacing-medium)
padding: var(--sl-spacing-small) var(--sl-spacing-medium);
}
sl-tab-group::part(base) {
height: 14rem;
@@ -676,10 +677,7 @@ export class VmDeviceTemplate extends BaseElement {
const fields = device.logic ? Object.entries(device.logic) : [];
return html`
${fields.map(([name, field_type], _index, _fields) => {
return html` <sl-input
key="${name}"
value="0"
>
return html` <sl-input key="${name}" value="0">
<span slot="prefix">${name}</span>
<span slot="suffix">${field_type}</span>
</sl-input>`;
@@ -688,7 +686,6 @@ export class VmDeviceTemplate extends BaseElement {
}
renderSlot(slot: Slot, slotIndex: number): HTMLTemplateResult {
const fields = Array.from(slot.fields);
return html` <sl-card class="slot-card"> </sl-card> `;
}
@@ -722,28 +719,32 @@ export class VmDeviceTemplate extends BaseElement {
@onerr=${this.onImageErr}
/>
</sl-tooltip>
<div class=vstack>
<div class="vstack">
<span class="prefab-name">${device.name}</span>
<span class="prefab-hash">${device.hash}</span>
</div>
<sl-button class="ms-auto" pill variant="success">Add <sl-icon slot="prefix" name="plus-lg"></sl-icon></sl-button>
<sl-button class="ms-auto" pill variant="success"
>Add <sl-icon slot="prefix" name="plus-lg"></sl-icon
></sl-button>
</div>
<div class=card-body>
<sl-tab-group>
<sl-tab slot="nav" panel="fields">Fields</sl-tab>
<sl-tab slot="nav" panel="slots">Slots</sl-tab>
<sl-tab slot="nav" panel="reagents">Reagents</sl-tab>
<sl-tab slot="nav" panel="networks">Networks</sl-tab>
<sl-tab slot="nav" panel="pins">Pins</sl-tab>
<sl-tab-panel name="fields">${this.renderFields()}</sl-tab-panel>
<sl-tab-panel name="slots">${this.renderSlots()}</sl-tab-panel>
<sl-tab-panel name="reagents">${this.renderReagents()}</sl-tab-panel>
<sl-tab-panel name="networks">${this.renderNetworks()}</sl-tab-panel>
<sl-tab-panel name="pins">${this.renderPins()}</sl-tab-panel>
</sl-tab-group>
<div class="card-body">
<sl-tab-group>
<sl-tab slot="nav" panel="fields">Fields</sl-tab>
<sl-tab slot="nav" panel="slots">Slots</sl-tab>
<sl-tab slot="nav" panel="reagents">Reagents</sl-tab>
<sl-tab slot="nav" panel="networks">Networks</sl-tab>
<sl-tab slot="nav" panel="pins">Pins</sl-tab>
<sl-tab-panel name="fields">${this.renderFields()}</sl-tab-panel>
<sl-tab-panel name="slots">${this.renderSlots()}</sl-tab-panel>
<sl-tab-panel name="reagents"
>${this.renderReagents()}</sl-tab-panel
>
<sl-tab-panel name="networks"
>${this.renderNetworks()}</sl-tab-panel
>
<sl-tab-panel name="pins">${this.renderPins()}</sl-tab-panel>
</sl-tab-group>
</div>
</sl-card>
`;