improved layout + stack

www/src/js/session.js

@@ -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
 

www/src/js/virtual_machine/index.js

@@ -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 }