diff --git a/frontends/web/react/components/debug/debug.tsx b/frontends/web/react/components/debug/debug.tsx index 312de1c6ca15de640d83b7f7742c3d06d4227389..424808670d800ac938cd053e30c15d0d409a7871 100644 --- a/frontends/web/react/components/debug/debug.tsx +++ b/frontends/web/react/components/debug/debug.tsx @@ -1,4 +1,5 @@ -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> + ); +}; diff --git a/frontends/web/ts/gb.ts b/frontends/web/ts/gb.ts index 0f7d515aa689b1b88cf9ad1cab2badf007d79ec8..e887b2844f663040dcc284632eb4ec09793b7746 100644 --- a/frontends/web/ts/gb.ts +++ b/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 {