From 2e7b773bb5b370067514b9a97f33e7149a6eb464 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 22 Nov 2023 22:39:45 -0600
Subject: [PATCH] Gameboy: release keyboard when canvas isn't focused

---
 src/components/gameboy.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/gameboy.tsx b/src/components/gameboy.tsx
index ec6617304..c3a67b3d4 100644
--- a/src/components/gameboy.tsx
+++ b/src/components/gameboy.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 // @ts-ignore No types available
 import { WasmBoy } from 'wasmboy';
 
@@ -8,21 +8,39 @@ interface IGameboy extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
 }
 
 /** Component to display a playable Gameboy emulator. */
-const Gameboy: React.FC<IGameboy> = ({ src, ...rest }) => {
+const Gameboy: React.FC<IGameboy> = ({ src, onFocus, onBlur, ...rest }) => {
   const canvas = useRef<HTMLCanvasElement>(null);
 
   async function init() {
     await WasmBoy.config(WasmBoyOptions, canvas.current!);
     await WasmBoy.loadROM(src);
     await WasmBoy.play();
+
+    if (document.activeElement !== canvas.current) {
+      await WasmBoy.disableDefaultJoypad();
+    }
   }
 
+  const handleFocus: React.FocusEventHandler<HTMLCanvasElement> = useCallback(() => {
+    WasmBoy.enableDefaultJoypad();
+  }, []);
+
+  const handleBlur: React.FocusEventHandler<HTMLCanvasElement> = useCallback(() => {
+    WasmBoy.disableDefaultJoypad();
+  }, []);
+
   useEffect(() => {
     init();
   }, []);
 
   return (
-    <canvas ref={canvas} {...rest} />
+    <canvas
+      ref={canvas}
+      tabIndex={0}
+      onFocus={onFocus ?? handleFocus}
+      onBlur={onBlur ?? handleBlur}
+      {...rest}
+    />
   );
 };