Gameboy: tap the canvas to show/hide controls

environments/review-wasmboy-2avzcf/deployments/4280
Alex Gleason 2023-11-24 22:28:29 -06:00
rodzic 4d840e0290
commit a317152e3f
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
1 zmienionych plików z 11 dodań i 1 usunięć

Wyświetl plik

@ -24,6 +24,7 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
const [paused, setPaused] = useState(false); const [paused, setPaused] = useState(false);
const [muted, setMuted] = useState(true); const [muted, setMuted] = useState(true);
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
const [showControls, setShowControls] = useState(true);
async function init() { async function init() {
await WasmBoy.config(WasmBoyOptions, canvas.current!); await WasmBoy.config(WasmBoyOptions, canvas.current!);
@ -49,6 +50,10 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
setFullscreen(isFullscreen()); setFullscreen(isFullscreen());
}, []); }, []);
const handleCanvasClick = useCallback(() => {
setShowControls(!showControls);
}, [showControls]);
const pause = async () => { const pause = async () => {
await WasmBoy.pause(); await WasmBoy.pause();
setPaused(true); setPaused(true);
@ -100,6 +105,7 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
> >
<canvas <canvas
ref={canvas} ref={canvas}
onClick={handleCanvasClick}
className={clsx('h-full w-full bg-black ', { className={clsx('h-full w-full bg-black ', {
'object-contain': aspect === 'normal', 'object-contain': aspect === 'normal',
'object-cover': aspect === 'stretched', 'object-cover': aspect === 'stretched',
@ -107,7 +113,11 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
{...rest} {...rest}
/> />
<div className='absolute inset-x-0 bottom-0 flex w-full bg-gradient-to-t from-black/50 to-transparent p-2'> <div
className={clsx('absolute inset-x-0 bottom-0 flex w-full bg-gradient-to-t from-black/50 to-transparent p-2 opacity-0 transition-opacity', {
'opacity-100': showControls,
})}
>
<IconButton <IconButton
className='text-white' className='text-white'
onClick={togglePaused} onClick={togglePaused}