chore: new settings panel for debug

frontends/web/react/components/debug/debug.tsx

-import React, { FC } from "react";
+import React, { FC, useEffect, useState } from "react";
+import { ButtonSwitch, Info, Pair } from "emukit";
 import { AudioGB } from "../audio-gb/audio-gb";
 import { RegistersGB } from "../registers-gb/registers-gb";
 import { TilesGB } from "../tiles-gb/tiles-gb";
@@ -63,3 +64,102 @@ export const DebugAudio: FC<EmulatorProps> = ({ emulator }) => {
         </>
     );
 };
+
+export const DebugSettings: FC<EmulatorProps> = ({ emulator }) => {
+    return (
+        <>
+            <DebugSettingsContent emulator={emulator}></DebugSettingsContent>
+        </>
+    );
+};
+
+const DebugSettingsContent: FC<EmulatorProps> = ({ emulator }) => {
+    const [updated, setUpdated] = useState(Date.now());
+
+    useEffect(() => {
+        const onAudioState = () => {
+            setUpdated(Date.now());
+        };
+        emulator.bind("audio-state", onAudioState);
+        return () => {
+            emulator.unbind("audio-state", onAudioState);
+        };
+    }, []);
+
+    const onPpuChange = (option: string) => {
+        emulator.instance?.set_ppu_enabled(option === "on");
+    };
+
+    const onApuChange = (option: string) => {
+        emulator.instance?.set_apu_enabled(option === "on");
+    };
+
+    const onTimerChange = (option: string) => {
+        emulator.instance?.set_timer_enabled(option === "on");
+    };
+
+    const onSerialChange = (option: string) => {
+        emulator.instance?.set_serial_enabled(option === "on");
+    };
+
+    return (
+        <Info key={updated}>
+            <Pair
+                name={"PPU"}
+                valueNode={
+                    <ButtonSwitch
+                        options={["on", "off"]}
+                        value={emulator.instance?.ppu_enabled() ? "on" : "off"}
+                        uppercase={true}
+                        size={"large"}
+                        style={["simple"]}
+                        onChange={onPpuChange}
+                    />
+                }
+            />
+            <Pair
+                name={"APU"}
+                valueNode={
+                    <ButtonSwitch
+                        options={["on", "off"]}
+                        value={emulator.instance?.apu_enabled() ? "on" : "off"}
+                        uppercase={true}
+                        size={"large"}
+                        style={["simple"]}
+                        onChange={onApuChange}
+                    />
+                }
+            />
+            <Pair
+                name={"Timer"}
+                valueNode={
+                    <ButtonSwitch
+                        options={["on", "off"]}
+                        value={
+                            emulator.instance?.timer_enabled() ? "on" : "off"
+                        }
+                        uppercase={true}
+                        size={"large"}
+                        style={["simple"]}
+                        onChange={onTimerChange}
+                    />
+                }
+            />
+            <Pair
+                name={"Serial"}
+                valueNode={
+                    <ButtonSwitch
+                        options={["on", "off"]}
+                        value={
+                            emulator.instance?.serial_enabled() ? "on" : "off"
+                        }
+                        uppercase={true}
+                        size={"large"}
+                        style={["simple"]}
+                        onChange={onSerialChange}
+                    />
+                }
+            />
+        </Info>
+    );
+};

frontends/web/ts/gb.ts

@@ -20,6 +20,7 @@ import { PALETTES, PALETTES_MAP } from "./palettes";
 import { base64ToBuffer, bufferToBase64 } from "./util";
 import {
     DebugAudio,
+    DebugSettings,
     DebugVideo,
     HelpFaqs,
     HelpKeyboard,
@@ -446,6 +447,10 @@ export class GameboyEmulator extends EmulatorBase implements Emulator {
         this.cartridge = cartridge;
     }
 
+    get instance(): GameBoy | null {
+        return this.gameBoy;
+    }
+
     get name(): string {
         return "Boytacean";
     }
@@ -493,9 +498,7 @@ export class GameboyEmulator extends EmulatorBase implements Emulator {
             {
                 name: "Serial",
                 icon: require("../res/serial.svg"),
-                node: SerialSection({
-                    emulator: this
-                })
+                node: SerialSection({ emulator: this })
             }
         ];
     }
@@ -522,6 +525,10 @@ export class GameboyEmulator extends EmulatorBase implements Emulator {
             {
                 name: "Audio",
                 node: DebugAudio({ emulator: this })
+            },
+            {
+                name: "Settings",
+                node: DebugSettings({ emulator: this })
             }
         ];
     }
@@ -736,10 +743,12 @@ export class GameboyEmulator extends EmulatorBase implements Emulator {
 
     pauseAudio() {
         this.gameBoy?.set_apu_enabled(false);
+        this.trigger("audio-state", { state: "paused", stateBool: false });
     }
 
     resumeAudio() {
         this.gameBoy?.set_apu_enabled(true);
+        this.trigger("audio-state", { state: "resumed", stateBool: true });
     }
 
     getAudioState(): boolean {