Pause the game while you're choosing key bindings

website/src/App.tsx

@@ -6,6 +6,7 @@ function App() {
   const [onGame, setOnGame] = useState(false);
   const [volume, setVolume] = useState(1.0);
   const [bindings, setBindings] = useState(DefaultBindingsSet());
+  const [paused, setPaused] = useState(false);
 
   return (
     <div>
@@ -15,6 +16,7 @@ function App() {
             gameUrl="/game.gba"
             volume={volume}
             controls={bindings.Actual}
+            paused={paused}
           />
           <input
             type="range"
@@ -29,7 +31,11 @@ function App() {
       <button onClick={() => setOnGame(!onGame)}>
         {onGame ? "End Game" : "Start Game"}
       </button>
-      <BindingsControl bindings={bindings} setBindings={setBindings} />
+      <BindingsControl
+        bindings={bindings}
+        setBindings={setBindings}
+        setPaused={setPaused}
+      />
     </div>
   );
 }

website/src/bindings.tsx

@@ -75,7 +75,8 @@ const toHumanName = (keyName: string) => {
 export const BindingsControl: FC<{
   bindings: Bindings;
   setBindings: (a: Bindings) => void;
-}> = ({ bindings, setBindings }) => {
+  setPaused: (pause: boolean) => void;
+}> = ({ bindings, setBindings, setPaused }) => {
   const [buttonToChange, setButtonToChange] = useState<GbaKey | null>(null);
 
   const setKey = (key: string) => {
@@ -91,13 +92,19 @@ export const BindingsControl: FC<{
 
     setButtonToChange(null);
     setBindings(nextBindings);
+    setPaused(false);
+  };
+
+  const onSelectButtonClick = (key: GbaKey) => {
+    setPaused(true);
+    setButtonToChange(key);
   };
 
   return (
-    <ButtonWrapper onKeyDown={(evt) => setKey(evt.key)}>
+    <ButtonWrapper onKeyUp={(evt) => setKey(evt.key)}>
       {BindingsOrder.map((x) => (
         <SelectButton
-          onClick={() => setButtonToChange(x)}
+          onClick={() => onSelectButtonClick(x)}
           key={x}
           selected={buttonToChange === x}
         >

website/src/mgba.tsx

@@ -8,6 +8,7 @@ interface MgbaProps {
   gameUrl: string;
   volume?: Number;
   controls: KeyBindings;
+  paused: boolean;
 }
 
 enum MgbaState {
@@ -18,7 +19,7 @@ enum MgbaState {
 
 const MGBA_ROM_DIRECTORY = "/data/games";
 
-export const Mgba: FC<MgbaProps> = ({ gameUrl, volume, controls }) => {
+export const Mgba: FC<MgbaProps> = ({ gameUrl, volume, controls, paused }) => {
   const canvas = useRef(null);
   const mgbaModule = useRef<Module>({});
 
@@ -92,6 +93,16 @@ export const Mgba: FC<MgbaProps> = ({ gameUrl, volume, controls }) => {
     mgbaModule.current.setVolume(volume ?? 1.0);
   }, [state, volume]);
 
+  useEffect(() => {
+    if (state !== MgbaState.Initialised) return;
+
+    if (paused) {
+      mgbaModule.current.pauseGame();
+    } else {
+      mgbaModule.current.resumeGame();
+    }
+  }, [state, paused]);
+
   return (
     <>
       <canvas ref={canvas}></canvas>

website/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }