Several bug fixes and improvements

components/src/chips/keyboard.tsx

@@ -46,23 +46,43 @@ function keyPressToHackCharacter(keypress: KeyboardEvent): number {
   return 0;
 }
 
-export const Keyboard = ({ keyboard }: { keyboard: KeyboardChip }) => {
+export const Keyboard = ({
+  keyboard,
+  update,
+}: {
+  keyboard: KeyboardChip;
+  update?: () => void;
+}) => {
   const [showPicker, setShowPicker] = useState(false);
   const [bits, setBits] = useState(keyboard.out().busVoltage);
+  let currentKey = 0;
 
-  const setKey = useCallback(
-    (event: KeyboardEvent<HTMLInputElement>) => {
-      const key = keyPressToHackCharacter(event);
-      if (key === 0) {
-        return;
-      }
-      event.preventDefault();
-      keyboard.setKey(key);
-      setBits(keyboard.out().busVoltage);
-      setShowPicker(false);
-    },
-    [keyboard, setShowPicker, setBits]
-  );
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const key = keyPressToHackCharacter(event);
+    if (key === currentKey) {
+      return;
+    }
+    setKey(key);
+    update?.();
+  };
+
+  const onKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {
+    currentKey = 0;
+    keyboard.clearKey();
+    update?.();
+    setBits(keyboard.out().busVoltage);
+  };
+
+  const setKey = (key: number) => {
+    if (key === 0) {
+      return;
+    }
+    keyboard.setKey(key);
+    setBits(keyboard.out().busVoltage);
+    currentKey = key;
+    // setShowPicker(false);
+  };
 
   const changeKey = useCallback(() => {
     setShowPicker(true);
@@ -75,7 +95,12 @@ export const Keyboard = ({ keyboard }: { keyboard: KeyboardChip }) => {
       </div>
       <div className="flex-1">
         {showPicker ? (
-          <input ref={(e) => e?.focus()} type="text" onKeyDown={setKey} />
+          <input
+            ref={(e) => e?.focus()}
+            type="text"
+            onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+          />
         ) : (
           <button onClick={changeKey}>
             {/* <Icon name="keyboard" /> */}

components/src/chips/visualizations.tsx

@@ -5,7 +5,7 @@ import {
 import { ALU } from "@nand2tetris/simulator/chip/builtins/index.js";
 import {
   PC,
-  VRegister,
+  Register,
 } from "@nand2tetris/simulator/chip/builtins/sequential/bit.js";
 import {
   RAM,
@@ -41,7 +41,7 @@ export function getBuiltinVisualization(part: Chip): ReactElement | undefined {
   }
 }
 
-export function makeVisualization(chip: Chip): ReactElement | undefined {
+export function makeVisualization(chip: Chip, updateAction? : () => void): ReactElement | undefined {
   if (chip instanceof ALU) {
     return (
       <ALUComponent
@@ -59,7 +59,7 @@ export function makeVisualization(chip: Chip): ReactElement | undefined {
       />
     );
   }
-  if (chip instanceof VRegister) {
+  if (chip instanceof Register) {
     return (
       <RegisterComponent
         name={chip.name ?? `Chip ${chip.id}`}
@@ -71,7 +71,7 @@ export function makeVisualization(chip: Chip): ReactElement | undefined {
     return <RegisterComponent name="PC" bits={chip.bits} />;
   }
   if (chip instanceof Keyboard) {
-    return <KeyboardComponent keyboard={chip} />;
+    return <KeyboardComponent keyboard={chip} update={updateAction} />;
   }
   if (chip instanceof Screen) {
     return <ScreenComponent memory={chip.memory} />;
@@ -108,18 +108,18 @@ export function makeVisualization(chip: Chip): ReactElement | undefined {
   }
 
   const vis = [...chip.parts]
-    .map(makeVisualization)
+    .map((chip) => makeVisualization(chip, updateAction))
     .filter((v) => v !== undefined);
   return vis.length > 0 ? <>{vis}</> : undefined;
 }
 
 export function makeVisualizationsWithId(chip: {
   parts: Chip[];
-}): [string, ReactElement][] {
+}, updateAction? : () => void): [string, ReactElement][] {
   return [...chip.parts]
     .map((part, i): [string, ReactElement | undefined] => [
       `${part.id}_${i}`,
-      makeVisualization(part),
+      makeVisualization(part, updateAction),
     ])
     .filter(([_, v]) => v !== undefined) as [string, ReactElement][];
 }

components/src/pin_display.ts

@@ -0,0 +1,48 @@
+import { Ok, isOk } from "@davidsouther/jiffies/lib/esm/result.js";
+import {
+  REGISTRY as BUILTIN_REGISTRY,
+  getBuiltinChip,
+} from "@nand2tetris/simulator/chip/builtins/index.js";
+
+export class ChipDisplayInfo {
+  signBehaviors: Map<string, boolean> = new Map();
+
+  public constructor(chipName: string, unsigned?: string[]) {
+    if (BUILTIN_REGISTRY.has(chipName)) {
+      const chip = getBuiltinChip(chipName);
+      if (isOk(chip)) {
+        const pins = Array.from(Ok(chip).ins.entries()).concat(
+          Array.from(Ok(chip).outs.entries())
+        );
+        for (const pin of pins) {
+          this.signBehaviors.set(
+            pin.name,
+            !unsigned || !unsigned.includes(pin.name)
+          );
+        }
+      }
+    }
+  }
+
+  public isSigned(pin: string) {
+    return this.signBehaviors.get(pin);
+  }
+}
+
+const UNSIGNED_PINS = new Map<string, string[]>([
+  ["Mux4Way16", ["sel"]],
+  ["Mux8Way16", ["sel"]],
+  ["DMux4Way", ["sel"]],
+  ["DMux8Way", ["sel"]],
+  ["RAM8", ["address"]],
+  ["RAM64", ["address"]],
+  ["RAM512", ["address"]],
+  ["RAM4K", ["address"]],
+  ["RAM16K", ["address"]],
+  ["Screen", ["address"]],
+  ["Memory", ["address"]],
+  ["CPU", ["addressM", "pc"]],
+]);
+
+export const getDisplayInfo = (chipName: string) =>
+  new ChipDisplayInfo(chipName, UNSIGNED_PINS.get(chipName));