diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index ae936530d61a3b160dfecfda383d36af52b19aa8..0e72b11ed173066089341dc5f689b96f8f42b549 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 96db4a1ce1746983baa7fe95bef61abea2dbf00f..11843d27156ec1989ae585810b1c1a6cf1e0a8d6 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 483b6cf00566964ea1dfb88717bef6606a4f58d0..78b340e123425d43ee1d05b7cf13e799f7ea6c83 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 = () =>