diff --git a/src/components/gameboy.tsx b/src/components/gameboy.tsx index e7bbe9309..50ba4b08b 100644 --- a/src/components/gameboy.tsx +++ b/src/components/gameboy.tsx @@ -1,7 +1,9 @@ // @ts-ignore No types available import { WasmBoy } from '@soapbox.pub/wasmboy'; import clsx from 'clsx'; -import React, { useCallback, useEffect, useRef } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; + +import { IconButton } from './ui'; interface IGameboy extends Pick, 'onFocus' | 'onBlur'> { /** Classname of the outer `
`. */ @@ -16,10 +18,12 @@ interface IGameboy extends Pick, ' const Gameboy: React.FC = ({ className, src, aspect = 'normal', onFocus, onBlur, ...rest }) => { const canvas = useRef(null); + const [paused, setPaused] = useState(false); + async function init() { await WasmBoy.config(WasmBoyOptions, canvas.current!); await WasmBoy.loadROM(src); - await WasmBoy.play(); + await play(); if (document.activeElement === canvas.current) { await WasmBoy.enableDefaultJoypad(); @@ -36,6 +40,18 @@ const Gameboy: React.FC = ({ className, src, aspect = 'normal', onFocu WasmBoy.disableDefaultJoypad(); }, []); + const pause = async () => { + await WasmBoy.pause(); + setPaused(true); + }; + + const play = async () => { + await WasmBoy.play(); + setPaused(false); + }; + + const togglePaused = () => paused ? play() : pause(); + useEffect(() => { init(); @@ -46,7 +62,7 @@ const Gameboy: React.FC = ({ className, src, aspect = 'normal', onFocu }, []); return ( -
+
= ({ className, src, aspect = 'normal', onFocu onBlur={onBlur ?? handleBlur} {...rest} /> + +
+ +
); };