View instruction component

src/app/ui/viewInstruction.module.css

@@ -0,0 +1,3 @@
+.viewInstruction {
+    width: auto;
+}

src/components/emulator/emulator.tsx

@@ -20,8 +20,9 @@ import FastForwardIcon from '@mui/icons-material/FastForward';
 import PauseIcon from '@mui/icons-material/Pause';
 import StopIcon from '@mui/icons-material/Stop';
 import MoveDownIcon from '@mui/icons-material/MoveDown';
+import ViewInstruction from "@/components/viewInstruction/viewInstruction";
 
-enum instruction {
+export enum instruction {
     NOP,
     MV,
     LI,
@@ -334,7 +335,6 @@ export default function Emulator() {
                 }
                 case instruction.NAND: {
                     //%dest = %srcA NAND %srcB
-                    console.log(regs[srcA] & regs[srcB]);
                     regs[dest] = parseInt((regs[srcA] & regs[srcB]).toString(2).split("").map((el) => el === '0' ? '1' : '0').join(""), 2);
                     //setReg(dest, parseInt(('0000000000000000' + (getReg(srcA) & getReg(srcB)).toString(2)).slice(-16).split("").map((el) => el === '0' ? '1' : '0').join(""), 2));
                     break;
@@ -945,6 +945,10 @@ export default function Emulator() {
             <Grid size={4}>
                 <Paper className={`${styles.paper} ${styles.visualizer}`}>
                     <Typography variant="subtitle1" sx={{marginLeft: "5px"}}>BBC state</Typography>
+                    <Card variant="outlined" className={styles.registers}>
+                        <Typography variant="h6">Instruction</Typography>
+                        <ViewInstruction memoryContent={ram[reg_PC]? ram[reg_PC] : 0} immContent={ram[reg_PC + 1]? ram[reg_PC + 1] : 0} />
+                    </Card>
                     <Card variant="outlined" className={styles.registers}>
                         <Typography variant="h6" sx={{marginBottom: "10px"}}>Registers</Typography>
                         <TextField className={styles.register} label="PC" sx={{width: "65pt"}} value={showHexValues? "0x" + ('000' + reg_PC.toString(16)).slice(-4) : reg_PC} color="primary" focused />

src/components/viewInstruction/viewInstruction.tsx

@@ -0,0 +1,93 @@
+import {TextField} from "@mui/material";
+import {useEffect, useState} from "react";
+
+import styles from '@/app/ui/viewInstruction.module.css';
+import {instruction} from "@/components/emulator/emulator";
+
+interface IViewInstructionProps {
+    memoryContent: number,
+    immContent: number
+}
+
+export default function ViewInstruction(props: IViewInstructionProps) {
+    const [decodedInstruction, setDecodedInstruction] = useState("");
+
+    useEffect(() => {
+        const val = ('00000000000000' + props.memoryContent.toString(2)).slice(-16);
+        const inst = val.slice(9, 14);
+
+        const srcA = "r" + parseInt(val.slice(6, 9).split("").reverse().join(("")), 2);
+        const srcB = "r" + parseInt(val.slice(3, 6).split("").reverse().join(("")), 2);
+        const dest = "r" + parseInt(val.slice(0, 3).split("").reverse().join(("")), 2);
+        const imm = parseInt(('0000000000000000' + props.immContent.toString(2)).slice(-16), 2);
+
+        const instn = instruction[parseInt(inst, 2)];
+
+        let theRest = " "
+        switch(instruction[instn as keyof typeof instruction]) {
+            case instruction.NOP: {
+                break;
+            }
+            case instruction.LDIND:
+            case instruction.MV:
+            case instruction.NEG:
+            case instruction.NOT: {
+                theRest += dest + ", " + srcA;
+                break;
+            }
+            case instruction.LI:
+            case instruction.LD:  {
+                theRest += dest + ", " + imm;
+                break;
+            }
+            case instruction.STIO:
+            case instruction.LDIO: {
+                theRest += srcA + ", " + srcB + ", " + imm;
+                break;
+            }
+            case instruction.ADD:
+            case instruction.SUB:
+            case instruction.XOR:
+            case instruction.NAND:
+            case instruction.AND:
+            case instruction.OR: {
+                theRest += dest + ", " + srcA + ", " + srcB;
+                break;
+            }
+            case instruction.J: {
+                theRest += srcA;
+                break;
+            }
+            case instruction.JNZ:
+            case instruction.JZ:
+            case instruction.JN: {
+                theRest += srcA + ", " + imm;
+                break;
+            }
+            case instruction.JIMM: {
+                theRest += imm;
+                break;
+            }
+            case instruction.ADDI: {
+                theRest += dest + ", " + srcA + ", " + imm;
+                break;
+            }
+            case instruction.ST: {
+                theRest += imm + ", " + srcA;
+                break;
+            }
+            default: {
+                theRest += ""
+            }
+        }
+
+        setDecodedInstruction(instn? instn.toString().toLowerCase() + theRest : "")
+    }, [props.memoryContent, props.immContent]);
+
+    return <>
+        <TextField className={styles.viewInstruction}
+                   value={decodedInstruction}
+                   size="small"
+        />
+    </>
+}