feat: new abstract emulator logic and button

container

examples/web/index.ts

-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();
 })();

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;

examples/web/react/components/button-container/button-container.css

+.button-container > * {
+    margin-right: 8px;
+}
+
+.button-container > *:last-child {
+    margin-right: 0px;
+}

examples/web/react/components/button-container/button-container.tsx

+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;

examples/web/react/components/index.ts

 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";