diff --git a/www/src/index.old.html b/www/src/index.old.html deleted file mode 100644 index 8538a9c..0000000 --- a/www/src/index.old.html +++ /dev/null @@ -1,305 +0,0 @@ - - - - - - Stationeers IC10 Emulator - - - - - - - - - - - - - - - - - - -
- - -
-
-
Editor Settings
- -
-
-
-
Editor Keyboard Bindings
-
- - - - - - - - - - -
-
-
-
Editor Cursor Style
-
- - - - - - - - - - -
-
-
- Font Size - - px -
-
-
- - -
-
-
-
- - - -
-
-
-
-
-
-
IC10 editor!
-
-
-
-
-
-
-
-
- - - -
-
-
- -
-
Instruction Pointer
-
-
-
-
-
Last Run Operations Count
-
-
-
-
-
Last State
-
-
- -
-
- -
- -
-
-
-
-
-
-
-
-

- -

-
-
-
- -
-
-
-
-
-

- -

-
-
-
-
-
-
-
-
-

- -

-
-
-
-
-
-
-
-
-
-
-
-
- - -
- - -
- - - - -
-
-
Devices
- -
-
-
-
-
- - - diff --git a/www/src/ts/virtual_machine/device.ts b/www/src/ts/virtual_machine/device.ts index 93138fd..5d025d4 100644 --- a/www/src/ts/virtual_machine/device.ts +++ b/www/src/ts/virtual_machine/device.ts @@ -286,7 +286,7 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { _handleChangeName(e: CustomEvent) { const input = e.target as SlInput; - this.device.setName(input.value); + window.VM?.setDeviceName(this.deviceID, input.value) this.updateDevice(); } @@ -294,7 +294,7 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { const input = e.target as SlInput; const field = input.getAttribute("key")!; const val = parseNumber(input.value); - this.device.setField(field, val); + window.VM?.setDeviceField(this.deviceID, field, val) this.updateDevice(); } @@ -303,7 +303,7 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { const slot = parseInt(input.getAttribute("slotIndex")!); const field = input.getAttribute("key")!; const val = parseNumber(input.value); - this.device.setSlotField(slot, field, val); + window.VM?.setDeviceSlotField(this.deviceID, slot, field, val) this.updateDevice(); } diff --git a/www/src/ts/virtual_machine/index.ts b/www/src/ts/virtual_machine/index.ts index c709e37..dff5710 100644 --- a/www/src/ts/virtual_machine/index.ts +++ b/www/src/ts/virtual_machine/index.ts @@ -26,7 +26,6 @@ type DeviceDB = { class VirtualMachine extends EventTarget { ic10vm: VM; - ui: VirtualMachineUI; _devices: Map; _ics: Map; db: DeviceDB; @@ -217,280 +216,51 @@ class VirtualMachine extends EventTarget { } } + setDeviceName(id: number, name: string): boolean { + const device = this._devices.get(id); + if (device) { + device.setName(name); + this.dispatchEvent(new CustomEvent("vm-device-modified", { detail: id })); + return true; + } + return false; + } + + setDeviceField(id: number, field: string, val: number) { + const device = this._devices.get(id); + if (device) { + try { + device.setField(field, val); + this.dispatchEvent( + new CustomEvent("vm-device-modified", { detail: id }), + ); + return true; + } catch (e) { + console.log(e); + } + } + return false; + } + + setDeviceSlotField(id: number, slot: number, field: string, val: number) { + const device = this._devices.get(id); + if (device) { + try { + device.setSlotField(slot, field, val); + this.dispatchEvent( + new CustomEvent("vm-device-modified", { detail: id }), + ); + return true; + } catch (e) { + console.log(e); + } + } + return false; + } setupDeviceDatabase(db: DeviceDB) { this.db = db; console.log("Loaded Device Database", this.db); } - } -class VirtualMachineUI { - vm: VirtualMachine; - state: VMStateUI; - registers: VMRegistersUI; - stack: VMStackUI; - - constructor(vm: VirtualMachine) { - this.vm = vm; - this.state = new VMStateUI(this); - this.registers = new VMRegistersUI(this); - this.stack = new VMStackUI(this); - - const that = this; - - document.getElementById("vmControlRun")!.addEventListener( - "click", - (_event) => { - that.vm.run(); - }, - { capture: true }, - ); - document.getElementById("vmControlStep")!.addEventListener( - "click", - (_event) => { - that.vm.step(); - }, - { capture: true }, - ); - document.getElementById("vmControlReset")!.addEventListener( - "click", - (_event) => { - that.vm.reset(); - }, - { capture: true }, - ); - } - - update(ic: DeviceRef) { - this.state.update(ic); - this.registers.update(ic); - this.stack.update(ic); - } -} - -class VMStateUI { - ui: VirtualMachineUI; - instructionPointer: HTMLElement; - instructionCounter: HTMLElement; - lastState: HTMLElement; - constructor(ui: VirtualMachineUI) { - this.ui = ui; - - this.instructionPointer = document.getElementById("vmActiveICStateIP")!; - this.instructionCounter = document.getElementById("vmActiveICStateICount")!; - this.lastState = document.getElementById("vmActiveICStateLastRun")!; - } - - update(ic: DeviceRef) { - if (ic) { - this.instructionPointer.innerText = ic.ip!.toString(); - this.instructionCounter.innerText = ic.instructionCount!.toString(); - this.lastState.innerText = ic.state!.toString(); - } - } -} - -class VMRegistersUI { - ui: VirtualMachineUI; - tbl: HTMLDivElement; - regCells: { - cell: HTMLDivElement; - nameLabel: HTMLSpanElement; - aliasesLabel: HTMLSpanElement; - input: HTMLInputElement; - }[]; - default_aliases: Map; - ic_aliases: Map; - constructor(ui: VirtualMachineUI) { - const that = this; - this.ui = ui; - const regDom = document.getElementById("vmActiveRegisters")!; - this.tbl = document.createElement("div"); - this.tbl.classList.add( - "d-flex", - "flex-wrap", - "justify-content-start", - "align-items-end", - ); - this.regCells = []; - for (var i = 0; i < 18; i++) { - const container = document.createElement("div"); - container.classList.add("vm_reg_cel", "align-that-stretch"); - const cell = document.createElement("div"); - cell.classList.add("input-group", "input-group-sm"); - // cell.style.width = "30%"; - const nameLabel = document.createElement("span"); - nameLabel.innerText = `r${i}`; - nameLabel.classList.add("input-group-text"); - cell.appendChild(nameLabel); - const input = document.createElement("input"); - input.type = "text"; - input.value = (0).toString(); - input.dataset.index = i.toString(); - cell.appendChild(input); - const aliasesLabel = document.createElement("span"); - aliasesLabel.classList.add("input-group-text", "reg_label"); - cell.appendChild(aliasesLabel); - this.regCells.push({ - cell, - nameLabel, - aliasesLabel, - input, - }); - container.appendChild(cell); - this.tbl.appendChild(container); - } - this.regCells.forEach((cell) => { - cell.input.addEventListener("change", that.onCellUpdate); - }); - this.default_aliases = new Map([ - ["sp", 16], - ["ra", 17], - ]); - this.ic_aliases = new Map(); - regDom.appendChild(this.tbl); - } - - onCellUpdate(e: Event) { - let index: number; - let val: number; - let target = e.target as HTMLInputElement; - try { - index = parseInt(target.dataset.index!); - val = parseFloat(target.value); - } catch (e) { - // reset the edit - console.log(e); - window.VM!.update(); - return; - } - window.VM!.setRegister(index, val); - } - - update(ic: DeviceRef) { - if (ic) { - const registers = ic.registers; - if (registers) { - for (var i = 0; i < registers.length; i++) { - this.regCells[i].input.value = registers[i].toString(); - } - } - const aliases = ic.aliases; - if (aliases) { - this.ic_aliases = new Map(); - aliases.forEach((target, alias, _map) => { - if ( - "RegisterSpec" in target && - target.RegisterSpec.indirection == 0 - ) { - const index = target.RegisterSpec.target; - this.ic_aliases.set(alias, index); - } - }); - } - } - // this.updateAliases(); - } - - updateAliases() { - const aliases = new Map([ - ...Array.from(this.default_aliases), - ...Array.from(this.ic_aliases), - ]); - const labels = new Map(); - for (const [alias, target] of aliases) { - if (labels.hasOwnProperty(target)) { - labels.get(target)!.push(alias); - } else { - labels.set(target, [alias]); - } - } - - for (const [index, label_list] of labels) { - this.regCells[index].aliasesLabel.innerText = label_list.join(", "); - } - } -} - -class VMStackUI { - ui: VirtualMachineUI; - tbl: HTMLDivElement; - stackCells: { - cell: HTMLDivElement; - nameLabel: HTMLSpanElement; - input: HTMLInputElement; - }[]; - constructor(ui: VirtualMachineUI) { - this.ui = ui; - const stackDom = document.getElementById("vmActiveStack")!; - this.tbl = document.createElement("div"); - this.tbl.classList.add( - "d-flex", - "flex-wrap", - "justify-content-start", - "align-items-end", - ); - this.stackCells = []; - for (var i = 0; i < 512; i++) { - const container = document.createElement("div"); - container.classList.add("vm_stack_cel", "align-that-stretch"); - const cell = document.createElement("div"); - cell.classList.add("input-group", "input-group-sm"); - const nameLabel = document.createElement("span"); - nameLabel.innerText = `${i}`; - nameLabel.classList.add("input-group-text"); - cell.appendChild(nameLabel); - const input = document.createElement("input"); - input.type = "text"; - input.value = (0).toString(); - input.dataset.index = i.toString(); - cell.appendChild(input); - - this.stackCells.push({ - cell, - nameLabel, - input, - }); - container.appendChild(cell); - this.tbl.appendChild(container); - } - this.stackCells.forEach((cell) => { - cell.input.addEventListener("change", this.onCellUpdate); - }); - stackDom.appendChild(this.tbl); - } - - onCellUpdate(e: Event) { - let index: number; - let val: number; - let target = e.target as HTMLInputElement; - try { - index = parseInt(target.dataset.index!); - val = parseFloat(target.value); - } catch (e) { - // reset the edit - window.VM!.update(); - return; - } - window.VM!.setStack(index, val); - } - - update(ic: DeviceRef) { - if (ic) { - const stack = ic.stack; - const sp = ic.registers![16]; - if (stack) { - for (var i = 0; i < stack.length; i++) { - this.stackCells[i].input.value = stack[i].toString(); - if (i == sp) { - this.stackCells[i].nameLabel.classList.add("stack_pointer"); - } else { - this.stackCells[i].nameLabel.classList.remove("stack_pointer"); - } - } - } - } - } -} - -export { VirtualMachine, VirtualMachineUI, DeviceDB }; +export { VirtualMachine, DeviceDB };