From e70ac7886b1dd4a8e553c6c9ca624fe395576a27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Thu, 10 Nov 2022 14:53:47 +0000
Subject: [PATCH] feat: improved register printing
---
.../web/react/components/registers-gb/registers-gb.css | 10 +++++++---
.../web/react/components/registers-gb/registers-gb.tsx | 8 +++++---
2 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/examples/web/react/components/registers-gb/registers-gb.css b/examples/web/react/components/registers-gb/registers-gb.css
index 26765c11..f340c76e 100644
--- a/examples/web/react/components/registers-gb/registers-gb.css
+++ b/examples/web/react/components/registers-gb/registers-gb.css
@@ -14,15 +14,19 @@
}
.registers-gb > .section > .register {
- font-size: 20px;
- line-height: 24px;
+ font-size: 0px;
+ line-height: 22px;
}
.registers-gb > .section > .register > .register-key {
display: inline-block;
- width: 70px;
+ width: 40px;
+ font-size: 20px;
}
.registers-gb > .section > .register > .register-value {
display: inline-block;
+ width: 66px;
+ text-align: right;
+ font-size: 20px;
}
diff --git a/examples/web/react/components/registers-gb/registers-gb.tsx b/examples/web/react/components/registers-gb/registers-gb.tsx
index 02186799..96db4a1c 100644
--- a/examples/web/react/components/registers-gb/registers-gb.tsx
+++ b/examples/web/react/components/registers-gb/registers-gb.tsx
@@ -15,13 +15,15 @@ export const RegistersGB: FC<RegistersGBProps> = ({
const renderRegister = (
key: string,
value: number,
+ size = 2,
styles: string[] = []
) => {
const classes = ["register", ...styles].join(" ");
+ const valueS = value.toString(16).toUpperCase().padStart(size, "0");
return (
<div className={classes}>
<span className="register-key">{key}</span>
- <span className="register-value">0x{value.toString(16)}</span>
+ <span className="register-value">0x{valueS}</span>
</div>
);
};
@@ -29,8 +31,8 @@ export const RegistersGB: FC<RegistersGBProps> = ({
<div className={classes()}>
<div className="section">
<h4>CPU</h4>
- {renderRegister("PC", registers.pc as number)}
- {renderRegister("SP", registers.sp as number)}
+ {renderRegister("PC", registers.pc as number, 4)}
+ {renderRegister("SP", registers.sp as number, 4)}
{renderRegister("A", registers.a as number)}
{renderRegister("B", registers.b as number)}
{renderRegister("C", registers.c as number)}
--
GitLab