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 { Mgba } from './mgba';
+import React, { useState } from "react";
+import { Mgba } from "./mgba";
 
 function App() {
-
   const [onGame, setOnGame] = useState(false);
   const [volume, setVolume] = useState(1.0);
 
   return (
     <div>
-      {
-        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></>
-      }
-      <button onClick={() => setOnGame(!onGame)}>{onGame ? "End Game" : "Start Game"}</button>
+      {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>
+        </>
+      )}
+      <button onClick={() => setOnGame(!onGame)}>
+        {onGame ? "End Game" : "Start Game"}
+      </button>
     </div>
   );
 }

website/src/index.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+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,94 +4,102 @@ import mGBA from "./vendor/mgba";
 type Module = any;
 
 interface MgbaProps {
-    gameUrl: string,
-    volume?: Number,
+  gameUrl: string;
+  volume?: Number;
 }
 
 enum MgbaState {
-    Uninitialised,
-    Initialising,
-    Initialised,
+  Uninitialised,
+  Initialising,
+  Initialised,
 }
 
 const MGBA_ROM_DIRECTORY = "/data/games";
 
-
 export const Mgba: FC<MgbaProps> = ({ gameUrl, volume }) => {
+  const canvas = useRef(null);
+  const mgbaModule = useRef<Module>({});
 
-    const canvas = useRef(null);
-    const mgbaModule = useRef<Module>({});
+  const [state, setState] = useState(MgbaState.Uninitialised);
 
-    const [state, setState] = useState(MgbaState.Uninitialised);
+  useEffect(() => {
+    if (state !== MgbaState.Initialised) return;
+    (async () => {
+      const game = await fetch(gameUrl);
+      const gameData = await game.arrayBuffer();
 
-    useEffect(() => {
-        if (state !== MgbaState.Initialised) return;
-        (async () => {
-            const game = await fetch(gameUrl);
-            const gameData = await game.arrayBuffer();
+      const gamePath = `${MGBA_ROM_DIRECTORY}/${gameUrl}`;
+      mgbaModule.current.FS.writeFile(gamePath, new Uint8Array(gameData));
+      mgbaModule.current.loadGame(gamePath);
+    })();
+  }, [state, gameUrl]);
 
-            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;
 
-    // init mgba
-    useEffect(() => {
-        (async () => {
+      setState(MgbaState.Initialising);
 
-            if (canvas === null) return;
-            if (state !== MgbaState.Uninitialised) return;
+      mgbaModule.current = {
+        canvas: canvas.current,
+        locateFile: (file: string) => {
+          if (file === "mgba.wasm") {
+            return "/vendor/mgba.wasm";
+          }
+          return file;
+        },
+      };
 
-            setState(MgbaState.Initialising);
+      mGBA(mgbaModule.current).then((module: Module) => {
+        mgbaModule.current = module;
+        module.FSInit();
+        setState(MgbaState.Initialised);
+      });
+    })();
 
-            mgbaModule.current = {
-                canvas: canvas.current,
-                locateFile: (file: string) => {
-                    if (file === "mgba.wasm") {
-                        return "/vendor/mgba.wasm";
-                    }
-                    return file;
-                }
-            };
+    if (state === MgbaState.Initialised)
+      return () => {
+        try {
+          mgbaModule.current.quitGame();
+          mgbaModule.current.quitMgba();
+        } catch {}
+      };
+  }, [state]);
 
-            mGBA(mgbaModule.current).then((module: Module) => {
-                mgbaModule.current = module;
-                module.FSInit();
-                setState(MgbaState.Initialised);
-            });
-        }
-        )();
+  useEffect(() => {
+    if (state !== MgbaState.Initialised) return;
+    mgbaModule.current.setVolume(volume ?? 1.0);
+  }, [state, volume]);
 
-        if (state === MgbaState.Initialised)
-            return () => {
-                try {
-                    mgbaModule.current.quitGame();
-                    mgbaModule.current.quitMgba();
-                } catch { }
-            };
-    }, [state]);
-
-    useEffect(() => {
-        if (state !== MgbaState.Initialised) return;
-        mgbaModule.current.setVolume(volume ?? 1.0);
-    }, [state, volume]);
-
-    return <>
-
-        <canvas ref={canvas}></canvas>
-        <button onClick={() => {
-            if (state !== MgbaState.Initialised) return;
-            mgbaModule.current.saveState(0);
-        }}>Save State</button>
-        <button onClick={() => {
-            if (state !== MgbaState.Initialised) return;
-            mgbaModule.current.loadState(0);
-        }}>Load State</button>
-        <button onClick={() => {
-            if (state !== MgbaState.Initialised) return;
-            mgbaModule.current.quickReload();
-        }}>Restart</button>
-
-    </>;
+  return (
+    <>
+      <canvas ref={canvas}></canvas>
+      <button
+        onClick={() => {
+          if (state !== MgbaState.Initialised) return;
+          mgbaModule.current.saveState(0);
+        }}
+      >
+        Save State
+      </button>
+      <button
+        onClick={() => {
+          if (state !== MgbaState.Initialised) return;
+          mgbaModule.current.loadState(0);
+        }}
+      >
+        Load State
+      </button>
+      <button
+        onClick={() => {
+          if (state !== MgbaState.Initialised) return;
+          mgbaModule.current.quickReload();
+        }}
+      >
+        Restart
+      </button>
+    </>
+  );
 };