From a317152e3f007d1520d81a0d5d827561ee1aee93 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 24 Nov 2023 22:28:29 -0600
Subject: [PATCH] Gameboy: tap the canvas to show/hide controls

---
 src/components/gameboy.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/gameboy.tsx b/src/components/gameboy.tsx
index 2edb52065..d5e371e4d 100644
--- a/src/components/gameboy.tsx
+++ b/src/components/gameboy.tsx
@@ -24,6 +24,7 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
   const [paused, setPaused] = useState(false);
   const [muted, setMuted] = useState(true);
   const [fullscreen, setFullscreen] = useState(false);
+  const [showControls, setShowControls] = useState(true);
 
   async function init() {
     await WasmBoy.config(WasmBoyOptions, canvas.current!);
@@ -49,6 +50,10 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
     setFullscreen(isFullscreen());
   }, []);
 
+  const handleCanvasClick = useCallback(() => {
+    setShowControls(!showControls);
+  }, [showControls]);
+
   const pause = async () => {
     await WasmBoy.pause();
     setPaused(true);
@@ -100,6 +105,7 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
     >
       <canvas
         ref={canvas}
+        onClick={handleCanvasClick}
         className={clsx('h-full w-full bg-black ', {
           'object-contain': aspect === 'normal',
           'object-cover': aspect === 'stretched',
@@ -107,7 +113,11 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
         {...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
           className='text-white'
           onClick={togglePaused}