Show uninitialized memory cells as blank

components/src/chips/memory.tsx

@@ -28,6 +28,11 @@ import VirtualScroll, { VirtualScrollSettings } from "../virtual_scroll.js";
 
 const ITEM_HEIGHT = 34;
 
+interface CellData {
+  value: number;
+  wasChanged: boolean;
+}
+
 export const MemoryBlock = ({
   memory,
   jmp = { value: 0 },
@@ -63,18 +68,21 @@ export const MemoryBlock = ({
     [memory.size, jmp]
   );
   const get = useCallback(
-    (pos: number, count: number) =>
+    (pos: number, count: number): [number, CellData][] =>
       memory
         .range(pos + offset, pos + offset + count)
-        .map((v, i) => [i + pos + offset, v] as [number, number]),
+        .map((v, i) => [
+          i + pos + offset,
+          { value: v, wasChanged: memory.wasChanged(i + pos + offset) },
+        ]),
     [memory]
   );
 
   const row = useCallback(
-    ([i, v]: [number, number]) => (
+    ([i, v]: [number, CellData]) => (
       <MemoryCell
         index={i}
-        value={format(v)}
+        value={v.wasChanged ? format(v.value) : ""}
         label={(cellLabels?.[i] ?? "").padStart(
           cellLabels ? Math.max(...cellLabels.map((label) => label.length)) : 0
         )}
@@ -91,7 +99,7 @@ export const MemoryBlock = ({
   );
 
   return (
-    <VirtualScroll<[number, number], ReactNode>
+    <VirtualScroll<[number, CellData], ReactNode>
       settings={settings}
       get={get}
       row={row}

components/src/inline_edit.tsx

@@ -26,14 +26,17 @@ export const InlineEdit = (props: {
   };
 
   const view = () => (
-    <span
-      style={{ cursor: "text", ...width("full", "inline") }}
+    <div
+      style={{
+        cursor: "text",
+        ...width("full", "inline"),
+      }}
       onClick={() => {
         setMode(Mode.EDIT);
       }}
     >
-      {value}
-    </span>
+      {value}&nbsp;
+    </div>
   );
 
   const doSelect = useCallback(

simulator/src/cpu/memory.ts

@@ -17,6 +17,8 @@ export interface MemoryAdapter {
   size: number;
   get(index: number): number;
   set(index: number, value: number): void;
+  wasChanged(index: number): boolean;
+  setChanged(index: number, value: boolean): void;
   reset(): void;
   update(cell: number, value: string, format: Format): void;
   load(fs: FileSystem, path: string, offset?: number): Promise<void>;
@@ -38,6 +40,7 @@ export interface KeyboardAdapter {
 
 export class Memory implements MemoryAdapter {
   private memory: Int16Array;
+  private changed: boolean[];
 
   get size(): number {
     return this.memory.length;
@@ -46,8 +49,10 @@ export class Memory implements MemoryAdapter {
   constructor(memory: ArrayBuffer | number) {
     if (typeof memory === "number") {
       this.memory = new Int16Array(memory);
+      this.changed = new Array(memory).fill(false);
     } else {
       this.memory = new Int16Array(memory);
+      this.changed = new Array(this.size).fill(true);
     }
   }
 
@@ -58,14 +63,24 @@ export class Memory implements MemoryAdapter {
     return this.memory[index] ?? 0;
   }
 
+  wasChanged(index: number): boolean {
+    return this.changed[index];
+  }
+
+  setChanged(index: number, value: boolean): void {
+    this.changed[index] = value;
+  }
+
   set(index: number, value: number): void {
     if (index >= 0 && index < this.size) {
       this.memory[index] = value & 0xffff;
+      this.setChanged(index, true);
     }
   }
 
   reset(): void {
     this.memory.fill(0);
+    this.changed.fill(false);
   }
 
   update(cell: number, value: string, format: Format) {
@@ -106,7 +121,9 @@ export class Memory implements MemoryAdapter {
 
   loadBytes(bytes: number[], offset?: number): void {
     this.memory.set(new Int16Array(bytes), offset);
+    this.changed.fill(true, 0, bytes.length);
     this.memory.fill(0, bytes.length, this.size);
+    this.changed.fill(false, bytes.length, this.size);
   }
 
   range(start = 0, end = this.size): number[] {
@@ -143,15 +160,24 @@ export class SubMemory implements MemoryAdapter {
     return this.parent.get(this.offset + index);
   }
 
-  set(index: number, value: number): void {
+  wasChanged(index: number): boolean {
+    return this.parent.wasChanged(this.offset + index);
+  }
+
+  setChanged(index: number, value: boolean): void {
+    this.parent.setChanged(index + this.offset, value);
+  }
+
+  set(index: number, value: number, trackChange = true): void {
     if (index >= 0 && index < this.size) {
       this.parent.set(index + this.offset, value);
     }
   }
 
   reset(): void {
     for (let i = 0; i < this.size; i++) {
-      this.set(i, 0);
+      this.set(i, 0, false);
+      this.setChanged(i, false);
     }
   }
 

simulator/src/vm/vm.ts

@@ -522,8 +522,6 @@ export class Vm {
       },
     ];
     this.memory.reset();
-    this.memory.ARG = 0;
-    this.memory.LCL = 0;
     this.memory.SP = 256;
     this.segmentInitializations = {
       local: { initialized: false, n: 0 },

web/src/pages/cpu.scss

@@ -2,19 +2,19 @@
 
 .CpuPage {
   grid-template-areas: "ROM RAM" "IO IO" "test test";
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr !important;
+  grid-template-rows: 1fr 1fr 1fr !important;
 
   @media screen and (min-width: 1024px) {
     grid-template-areas: "ROM RAM IO" "test test test";
-    grid-template-columns: 1fr 1fr var(--screen-size);
-    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr var(--screen-size) !important;
+    grid-template-rows: 1fr 1fr !important;
   }
 
   @media screen and (min-width: 1500px) {
     grid-template-areas: "ROM RAM IO test";
-    grid-template-columns: 350px 350px var(--screen-size) auto;
-    grid-template-rows: 1fr;
+    grid-template-columns: 350px 350px var(--screen-size) auto !important;
+    grid-template-rows: 1fr !important;
     // "IO IO test"
     // "ROM RAM test";
   }