diff --git a/examples/web/index.ts b/examples/web/index.ts index 7f88a378cb959d69e6b5fc5da16969ef7580ffa8..e2799249e9e9a796e9306b82f25a8ceb07dcf3b9 100644 --- a/examples/web/index.ts +++ b/examples/web/index.ts @@ -1,4 +1,4 @@ -import { startApp } from "./react/app"; +import { Emulator, startApp } from "./react/app"; import { default as _wasm, GameBoy, PadKey, PpuMode } from "./lib/boytacean.js"; import info from "./package.json"; @@ -55,7 +55,7 @@ enum PixelFormat { * and "joins" all the elements together to bring input/output * of the associated machine. */ -class Emulator { +class GameboyEmulator implements Emulator { /** * The Game Boy engine (probably coming from WASM) that * is going to be used for the emulation. @@ -1083,8 +1083,7 @@ const wasm = async () => { }; (async () => { - startApp("app", BACKGROUNDS); - - const emulator = new Emulator(); + const emulator = new GameboyEmulator(); + startApp("app", emulator, BACKGROUNDS); await emulator.main(); })(); diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index 11f5198d7f13246b2dff565c738fff2bab7ac444..39ba6f9760a85431abf6866824f2ac2bdb0ca35b 100644 --- a/examples/web/react/app.tsx +++ b/examples/web/react/app.tsx @@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client"; import { Button, + ButtonContainer, ButtonIncrement, ButtonSwitch, Footer, @@ -17,11 +18,16 @@ import { import "./app.css"; +export interface Emulator { + reset(): void; +} + type AppProps = { + emulator: Emulator; backgrounds?: string[]; }; -export const App: FC<AppProps> = ({ backgrounds = ["264653"] }) => { +export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => { const [count, setCount] = useState(0); const [backgroundIndex, setBackgroundIndex] = useState(0); const getText = () => `Hello World ${count}`; @@ -30,6 +36,9 @@ export const App: FC<AppProps> = ({ backgrounds = ["264653"] }) => { const onThemeClick = () => { setBackgroundIndex((backgroundIndex + 1) % backgrounds.length); }; + const onResetClick = () => { + emulator.reset(); + }; useEffect(() => { document.body.style.backgroundColor = `#${getBackground()}`; }); @@ -83,19 +92,27 @@ export const App: FC<AppProps> = ({ backgrounds = ["264653"] }) => { </Paragraph> </Section> <Section> - <Button text={getText()} onClick={onClick} /> - <Button - text={getText()} - image={require("../res/pause.svg")} - imageAlt="tobias" - onClick={onClick} - /> - <Button - text={"Theme"} - image={require("../res/marker.svg")} - imageAlt="marker" - onClick={onThemeClick} - /> + <ButtonContainer> + <Button text={getText()} onClick={onClick} /> + <Button + text={getText()} + image={require("../res/pause.svg")} + imageAlt="tobias" + onClick={onClick} + /> + <Button + text={"Reset"} + image={require("../res/reset.svg")} + imageAlt="reset" + onClick={onResetClick} + /> + <Button + text={"Theme"} + image={require("../res/marker.svg")} + imageAlt="marker" + onClick={onThemeClick} + /> + </ButtonContainer> <Info> <Pair key="tobias" @@ -134,14 +151,18 @@ export const App: FC<AppProps> = ({ backgrounds = ["264653"] }) => { ); }; -export const startApp = (element: string, backgrounds: string[]) => { +export const startApp = ( + element: string, + emulator: Emulator, + backgrounds: string[] +) => { const elementRef = document.getElementById(element); if (!elementRef) { return; } const root = ReactDOM.createRoot(elementRef); - root.render(<App backgrounds={backgrounds} />); + root.render(<App emulator={emulator} backgrounds={backgrounds} />); }; export default App; diff --git a/examples/web/react/components/button-container/button-container.css b/examples/web/react/components/button-container/button-container.css new file mode 100644 index 0000000000000000000000000000000000000000..eb4dc7f3a15f29db9fcb8a9d7ab5618353281f65 --- /dev/null +++ b/examples/web/react/components/button-container/button-container.css @@ -0,0 +1,7 @@ +.button-container > * { + margin-right: 8px; +} + +.button-container > *:last-child { + margin-right: 0px; +} diff --git a/examples/web/react/components/button-container/button-container.tsx b/examples/web/react/components/button-container/button-container.tsx new file mode 100644 index 0000000000000000000000000000000000000000..b11fc1f10a2234c89d36fc96b987c275c3856699 --- /dev/null +++ b/examples/web/react/components/button-container/button-container.tsx @@ -0,0 +1,18 @@ +import React, { FC, ReactNode } from "react"; + +import "./button-container.css"; + +type ButtonContainerProps = { + children: ReactNode; + style?: string[]; +}; + +export const ButtonContainer: FC<ButtonContainerProps> = ({ + children, + style = [] +}) => { + const classes = () => ["button-container", ...style].join(" "); + return <div className={classes()}>{children}</div>; +}; + +export default ButtonContainer; diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts index b3c9a92d7213831b78a6e795a579590976593570..9f2a21f34b3fc6e70aabd5dcab19b492d09a0b7d 100644 --- a/examples/web/react/components/index.ts +++ b/examples/web/react/components/index.ts @@ -1,4 +1,5 @@ export * from "./button/button"; +export * from "./button-container/button-container"; export * from "./button-increment/button-increment"; export * from "./button-switch/button-switch"; export * from "./footer/footer";