From 5bb90559ab6a7004581b9d7ee7ed5d7514840bc4 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 22:37:52 +0000
Subject: [PATCH] feat: better debugging
---
examples/web/react/app.tsx | 4 ++-
.../components/registers-gb/registers-gb.tsx | 34 +++++++++++++++----
examples/web/react/components/tiles/tiles.tsx | 2 +-
3 files changed, 32 insertions(+), 8 deletions(-)
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index ae936530..0e72b11e 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -566,7 +566,9 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
}}
>
<h3>Registers</h3>
- <RegistersGB registers={emulator.registers} />
+ <RegistersGB
+ getRegisters={() => emulator.registers}
+ />
</div>
</Section>
)}
diff --git a/examples/web/react/components/registers-gb/registers-gb.tsx b/examples/web/react/components/registers-gb/registers-gb.tsx
index 96db4a1c..11843d27 100644
--- a/examples/web/react/components/registers-gb/registers-gb.tsx
+++ b/examples/web/react/components/registers-gb/registers-gb.tsx
@@ -1,29 +1,51 @@
-import React, { FC } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
import "./registers-gb.css";
type RegistersGBProps = {
- registers: Record<string, string | number>;
+ getRegisters: () => Record<string, string | number>;
+ interval?: number;
style?: string[];
};
export const RegistersGB: FC<RegistersGBProps> = ({
- registers,
+ getRegisters,
+ interval = 100,
style = []
}) => {
const classes = () => ["registers-gb", ...style].join(" ");
+ const [registers, setRegisters] = useState<Record<string, string | number>>(
+ {}
+ );
+ const intervalsRef = useRef<number>();
+ useEffect(() => {
+ const updateRegisters = () => {
+ const registers = getRegisters();
+ setRegisters(registers);
+ };
+ setInterval(() => updateRegisters(), interval);
+ updateRegisters();
+ return () => {
+ if (intervalsRef.current) {
+ clearInterval(intervalsRef.current);
+ }
+ };
+ }, []);
const renderRegister = (
key: string,
- value: number,
+ value?: number,
size = 2,
styles: string[] = []
) => {
const classes = ["register", ...styles].join(" ");
- const valueS = value.toString(16).toUpperCase().padStart(size, "0");
+ const valueS =
+ value?.toString(16).toUpperCase().padStart(size, "0") ?? value;
return (
<div className={classes}>
<span className="register-key">{key}</span>
- <span className="register-value">0x{valueS}</span>
+ <span className="register-value">
+ {valueS ? `0x${valueS}` : "-"}
+ </span>
</div>
);
};
diff --git a/examples/web/react/components/tiles/tiles.tsx b/examples/web/react/components/tiles/tiles.tsx
index 483b6cf0..78b340e1 100644
--- a/examples/web/react/components/tiles/tiles.tsx
+++ b/examples/web/react/components/tiles/tiles.tsx
@@ -18,7 +18,7 @@ export const Tiles: FC<TilesProps> = ({
tileCount,
width,
contentBox = true,
- interval = 500,
+ interval = 1000,
style = []
}) => {
const classes = () =>
--
GitLab