diff --git a/examples/web/react/components/registers-gb/registers-gb.css b/examples/web/react/components/registers-gb/registers-gb.css index 26765c112b50a340d2bc4a46110f20bddd5e333a..f340c76e04f06c9354cb5a2b44fe034f4b682ee6 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 021867997ddc4a4fe99a6b663c241461b9e8d93b..96db4a1ce1746983baa7fe95bef61abea2dbf00f 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)}