prettier'd

website/.prettierrc.json

@@ -0,0 +1 @@
+{}

website/package-lock.json

@@ -20,6 +20,9 @@
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "prettier": "2.8.7"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -13679,6 +13682,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -26594,6 +26612,12 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
+    "prettier": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

website/package.json

@@ -39,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "2.8.7"
   }
 }

website/src/App.tsx

@@ -1,18 +1,28 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import { Mgba } from './mgba';
+import { Mgba } from "./mgba";
 
 function App() {
-
   const [onGame, setOnGame] = useState(false);
   const [volume, setVolume] = useState(1.0);
 
   return (
     <div>
-      {
+      {onGame && (
-        onGame && <><Mgba gameUrl="/game.gba" volume={volume} />
+        <>
-          <input type="range" value={volume} min="0" max="1" step="0.05" onChange={(e) => setVolume(Number(e.target.value))}></input></>
+          <Mgba gameUrl="/game.gba" volume={volume} />
-      }
+          <input
-      <button onClick={() => setOnGame(!onGame)}>{onGame ? "End Game" : "Start Game"}</button>
+            type="range"
+            value={volume}
+            min="0"
+            max="1"
+            step="0.05"
+            onChange={(e) => setVolume(Number(e.target.value))}
+          ></input>
+        </>
+      )}
+      <button onClick={() => setOnGame(!onGame)}>
+        {onGame ? "End Game" : "Start Game"}
+      </button>
     </div>
   );
 }

website/src/index.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import App from './App';
+import App from "./App";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>

website/src/mgba.tsx

@@ -4,8 +4,8 @@ import mGBA from "./vendor/mgba";
 type Module = any;
 
 interface MgbaProps {
-    gameUrl: string,
+  gameUrl: string;
-    volume?: Number,
+  volume?: Number;
 }
 
 enum MgbaState {
@@ -16,9 +16,7 @@ enum MgbaState {
 
 const MGBA_ROM_DIRECTORY = "/data/games";
 
-
 export const Mgba: FC<MgbaProps> = ({ gameUrl, volume }) => {
-
   const canvas = useRef(null);
   const mgbaModule = useRef<Module>({});
 
@@ -33,13 +31,12 @@ export const Mgba: FC<MgbaProps> = ({ gameUrl, volume }) => {
       const gamePath = `${MGBA_ROM_DIRECTORY}/${gameUrl}`;
       mgbaModule.current.FS.writeFile(gamePath, new Uint8Array(gameData));
       mgbaModule.current.loadGame(gamePath);
-        })()
+    })();
   }, [state, gameUrl]);
 
   // init mgba
   useEffect(() => {
     (async () => {
-
       if (canvas === null) return;
       if (state !== MgbaState.Uninitialised) return;
 
@@ -52,7 +49,7 @@ export const Mgba: FC<MgbaProps> = ({ gameUrl, volume }) => {
             return "/vendor/mgba.wasm";
           }
           return file;
-                }
+        },
       };
 
       mGBA(mgbaModule.current).then((module: Module) => {
@@ -60,15 +57,14 @@ export const Mgba: FC<MgbaProps> = ({ gameUrl, volume }) => {
         module.FSInit();
         setState(MgbaState.Initialised);
       });
-        }
+    })();
-        )();
 
     if (state === MgbaState.Initialised)
       return () => {
         try {
           mgbaModule.current.quitGame();
           mgbaModule.current.quitMgba();
-                } catch { }
+        } catch {}
       };
   }, [state]);
 
@@ -77,21 +73,33 @@ export const Mgba: FC<MgbaProps> = ({ gameUrl, volume }) => {
     mgbaModule.current.setVolume(volume ?? 1.0);
   }, [state, volume]);
 
-    return <>
+  return (
-
+    <>
       <canvas ref={canvas}></canvas>
-        <button onClick={() => {
+      <button
+        onClick={() => {
           if (state !== MgbaState.Initialised) return;
           mgbaModule.current.saveState(0);
-        }}>Save State</button>
+        }}
-        <button onClick={() => {
+      >
+        Save State
+      </button>
+      <button
+        onClick={() => {
           if (state !== MgbaState.Initialised) return;
           mgbaModule.current.loadState(0);
-        }}>Load State</button>
+        }}
-        <button onClick={() => {
+      >
+        Load State
+      </button>
+      <button
+        onClick={() => {
           if (state !== MgbaState.Initialised) return;
           mgbaModule.current.quickReload();
-        }}>Restart</button>
+        }}
-
+      >
-    </>;
+        Restart
+      </button>
+    </>
+  );
 };