kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Gameboy: tap the canvas to show/hide controls
rodzic
4d840e0290
commit
a317152e3f
|
@ -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}
|
||||||
|
|
Ładowanie…
Reference in New Issue