Merge pull request #68 from FluffyLabs/instructions-fixes

Instructions fixes
FluffyLabs · Aug 17, 2024 · aa0ff05 · aa0ff05
2 parents 22c25e0 + 9477016
commit aa0ff05
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/src/components/Instructions/index.tsx b/src/components/Instructions/index.tsx
@@ -2,7 +2,7 @@ import { Table, TableRow, TableBody, TableCell } from "@/components/ui/table.tsx
 import { mapInstructionsArgsByType, valueToNumeralSystem } from "./utils";
 import classNames from "classnames";
 import { InstructionMode } from "@/components/Instructions/types.ts";
-import { NumeralSystemContext } from "@/context/NumeralSystem.tsx";
+import { NumeralSystem, NumeralSystemContext } from "@/context/NumeralSystem.tsx";
 import { useContext, useMemo } from "react";
 import { isEqual, omit } from "lodash";
 import { CurrentInstruction } from "@/types/pvm";
@@ -46,13 +46,15 @@ export const Instructions = ({
     }
     let counter = 0;
     return programPreviewResult?.map((result) => {
-      const addressVal = valueToNumeralSystem(counter, numeralSystem);
+      const isHex = numeralSystem === NumeralSystem.HEXADECIMAL;
+      const valInNumeralSystem = isHex ? `${(counter >>> 0).toString(16)}` : counter.toString();
       const address = (
         <div>
-          {[...Array(8 - addressVal.length)].map(() => (
-            <span className="text-gray-400">0</span>
+          {isHex && <span className="opacity-20">0x</span>}
+          {[...Array(8 - (isHex ? 2 : 0) - valInNumeralSystem.length)].map(() => (
+            <span className="opacity-20">0</span>
           ))}
-          <span>{addressVal}</span>
+          <span>{valInNumeralSystem}</span>
         </div>
       );
       if ("args" in result) {
@@ -74,9 +76,7 @@ export const Instructions = ({
                     {programRow.instructionBytes && (
                       <span className="text-gray-500">
                         {[...programRow.instructionBytes]
-                          ?.map((byte) =>
-                            valueToNumeralSystem(byte, numeralSystem).padStart(numeralSystem ? 2 : 3, "0"),
-                          )
+                          ?.map((byte) => valueToNumeralSystem(byte, numeralSystem, numeralSystem ? 2 : 3))
                           .join(" ")}
                       </span>
                     )}
@@ -85,7 +85,7 @@ export const Instructions = ({
                 {instructionMode === InstructionMode.ASM && (
                   <>
                     <TableCell className="p-1.5">
-                      <span className="uppercase font-bold">{programRow.address}</span>
+                      <span className="uppercase">{programRow.address}</span>
                     </TableCell>
                     <TableCell className="p-1.5">
                       <span className="uppercase font-bold">{programRow.name}</span>

diff --git a/src/components/Instructions/utils.tsx b/src/components/Instructions/utils.tsx
@@ -1,8 +1,10 @@
 import { NumeralSystem } from "@/context/NumeralSystem.tsx";
 import { ArgumentType } from "@/packages/pvm/pvm/args-decoder/argument-type";
 
-export const valueToNumeralSystem = (value: number, numeralSystem: NumeralSystem): string => {
-  return numeralSystem === NumeralSystem.HEXADECIMAL ? `0x${(value >>> 0).toString(16)}` : value.toString();
+export const valueToNumeralSystem = (value: number, numeralSystem: NumeralSystem, padStartVal?: number): string => {
+  return numeralSystem === NumeralSystem.HEXADECIMAL
+    ? `0x${(value >>> 0).toString(16).padStart(padStartVal || 0, "0")}`
+    : value.toString().padStart(padStartVal || 0, "0");
 };
 
 export const mapInstructionsArgsByType = (args: any, numeralSystem: NumeralSystem) => {

diff --git a/src/components/Registers/index.tsx b/src/components/Registers/index.tsx
@@ -111,7 +111,7 @@ export const Registers = ({
                   <div
                     className={classNames({
                       "flex-[3]": true,
-                      "text-gray-300": currentState.regs?.[regNo] === 0,
+                      "opacity-20": currentState.regs?.[regNo] === 0,
                     })}
                   >
                     {valueToNumeralSystem(currentState.regs?.[regNo] ?? 0, numeralSystem)}

diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,3 @@
+body {
+  overflow: hidden;
+}