prettier'd

This commit is contained in:
Corwin 2023-04-13 21:44:00 +01:00
parent f2e5bf432b
commit 4a630fe85b
No known key found for this signature in database
6 changed files with 131 additions and 85 deletions

1
website/.prettierrc.json Normal file
View file

@ -0,0 +1 @@
{}

View file

@ -20,6 +20,9 @@
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
},
"devDependencies": {
"prettier": "2.8.7"
} }
}, },
"node_modules/@adobe/css-tools": { "node_modules/@adobe/css-tools": {
@ -13679,6 +13682,21 @@
"node": ">= 0.8.0" "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": { "node_modules/pretty-bytes": {
"version": "5.6.0", "version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", "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", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" "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": { "pretty-bytes": {
"version": "5.6.0", "version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

View file

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

View file

@ -1,18 +1,28 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import { Mgba } from './mgba'; import { Mgba } from "./mgba";
function App() { function App() {
const [onGame, setOnGame] = useState(false); const [onGame, setOnGame] = useState(false);
const [volume, setVolume] = useState(1.0); const [volume, setVolume] = useState(1.0);
return ( return (
<div> <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> </div>
); );
} }

View file

@ -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( const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement document.getElementById("root") as HTMLElement
); );
root.render( root.render(
<React.StrictMode> <React.StrictMode>

View file

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