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

improved layout + stack

Browse Source
This commit is contained in:
Rachel
2024-03-28 16:05:31 -07:00
parent 8d62cf407e
commit e6dcc61835
6 changed files with 125 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
www/src/index.html
View File

@@ -219,19 +219,6 @@
</div>
<div class="row mt-2">
<div class="accordion" id="vmActiveIC">
<!-- <div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseState" aria-expanded="true" aria-controls="collapseState">
State
</button>
</h2>
<div id="collapseState" class="accordion-collapse collapse show">
<div class="accordion-body">
</div>
</div>
</div> -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -255,7 +242,8 @@
</h2>
<div id="collapseStack" class="accordion-collapse collapse">
<div class="accordion-body">
<div id="vmActiveStack" class="vm_stack">
</div>
</div>
</div>
</div>

5
www/src/js/session.js
View File

@@ -23,6 +23,7 @@ s db 12 0
# Enums and their values are Known, Hover them!
# vvvvvvvvvvvvvvvvvv
move r2 LogicType.Temperature
push r2
# same with constants
# vvvv
@@ -32,11 +33,13 @@ move r3 pinf
main:
l r1 dr15 RatioWater
move r2 100000.001
push r2
# Hover Hash Strings of Known prefab names
# to get their documentation
# vvvvvvvvvvvvvvv
move r0 HASH("AccessCardBlack")
push r0
beqzal r1 test
# -2045627372 is the crc32 hash of a SolarPanel,
@@ -45,8 +48,10 @@ beqzal r1 test
move r1 -2045627372
jal test
move r1 $FF
push r1
beqzal 0 test
move r1 %1000
push r1
yield
j main

91
www/src/js/virtual_machine/index.js
View File

@@ -89,6 +89,15 @@ class VirtualMachine {
console.log(e);
}
}
setStack(addr, val) {
const ic = this.ics[window.App.session.activeSession];
try {
ic.setStack(addr, val);
} catch (e) {
console.log(e);
}
}
}
@@ -97,11 +106,10 @@ class VirtualMachineUI {
this.vm = vm
this.state = new VMStateUI(this);
this.registers = new VMRegistersUI(this);
this.buildStackDisplay();
this.stack = new VMStackUI(this);
const self = this;
document.getElementById("vmControlRun").addEventListener('click', (_event) => {
self.vm.run();
}, { capture: true });
@@ -117,12 +125,9 @@ class VirtualMachineUI {
update(ic) {
this.state.update(ic);
this.registers.update(ic);
this.stack.update(ic);
}
buildStackDisplay() {
}
}
class VMStateUI {
@@ -132,7 +137,6 @@ class VMStateUI {
this.instructionPointer = document.getElementById("vmActiveICStateIP");
this.instructionCounter = document.getElementById("vmActiveICStateICount");
this.lastState = document.getElementById("vmActiveICStateLastRun");
}
update(ic) {
@@ -187,8 +191,6 @@ class VMRegistersUI {
regDom.appendChild(this.tbl);
}
onCellUpdate(e) {
let index;
let val;
@@ -246,4 +248,75 @@ class VMRegistersUI {
}
}
class VMStackUI {
constructor(ui) {
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.stackCels = [];
for (var i = 0; i < 512; i++) {
const container = document.createElement("div");
container.classList.add("vm_stack_cel", "align-self-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;
input.dataset.index = i;
cell.appendChild(input);
this.stackCels.push({
cell,
nameLabel,
input,
});
container.appendChild(cell);
this.tbl.appendChild(container);
}
this.stackCels.forEach(cell => {
cell.input.addEventListener('change', this.onCellUpdate);
});
stackDom.appendChild(this.tbl);
}
onCellUpdate(e) {
let index;
let val;
try {
index = parseInt(e.target.dataset.index);
val = parseFloat(e.target.value);
} catch (e) {
// reset the edit
console.log(e);
VM.update();
return;
}
VM.setStack(index, val);
}
update(ic) {
const self = this;
if (ic) {
const stack = ic.stack;
const sp = ic.registers[16];
if (stack) {
for (var i = 0; i < stack.length; i++) {
this.stackCels[i].input.value = stack[i];
if (i == sp) {
this.stackCels[i].nameLabel.classList.add("stack_pointer");
} else {
this.stackCels[i].nameLabel.classList.remove("stack_pointer");
}
}
}
}
}
}
export { VirtualMachine }

32
www/src/scss/dark.scss
View File

@@ -431,4 +431,36 @@ code {
#vmActiveICState hr {
margin: 0.25rem 0;
}
.vm_stack {
overflow-x: auto;
overflow-y: auto;
max-width: 180rem;
max-height: 10rem;
align-content: flex-end
}
.vm_stack_cel {
max-width: 20rem;
height: 24px;
}
.vm_stack_cel span {
min-width: 2.5rem;
height: 22px;
}
.vm_stack_cel input {
max-width: 5rem;
background-color: var(--bs-body-bg);
height: 22px;
}
.vm_stack_cel .input-group-text {
border-radius: 0;
}
.vm_stack_cel span.stack_pointer {
background-color: var(--bs-success);
}

1
www/src/scss/styles.scss
View File

@@ -17,6 +17,7 @@ $accordion-button-active-bg: #343a40;
$accordion-button-active-color: #dee2e6;
$accordion-icon-color-dark: #dee2e6;
$accordion-icon-active-color-dark: #dee2e6;
$accordion-button-padding-y: 0.5rem;
// Required
@import "bootstrap/scss/variables";