diff --git a/website/package.json b/website/package.json
index 3350f745..550a5e7d 100644
--- a/website/package.json
+++ b/website/package.json
@@ -48,4 +48,4 @@
"@types/styled-components": "^5.1.26",
"prettier": "2.8.8"
}
-}
\ No newline at end of file
+}
diff --git a/website/src/App.tsx b/website/src/App.tsx
index df20fa8d..b638c548 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -1,35 +1,97 @@
import React, { useState } from "react";
import { Mgba } from "./mgba";
-import { BindingsControl, DefaultBindingsSet } from "./bindings";
+import { BindingsControl, DefaultBindingsSet, Bindings } from "./bindings";
+import { styled } from "styled-components";
+import { useOnKeyUp } from "./useOnKeyUp.hook";
+
+const BindingsDialog = styled.dialog`
+ border-radius: 5px;
+ margin-top: 20px;
+`;
+
+const VolumeLabel = styled.label`
+ display: flex;
+ gap: 10px;
+ margin-bottom: 20px;
+`;
+
+const CloseButton = styled.button`
+ width: 100%;
+ margin-top: 20px;
+`;
function App() {
const [volume, setVolume] = useState(1.0);
const [bindings, setBindings] = useState(DefaultBindingsSet());
const [paused, setPaused] = useState(false);
+ const [showBindings, setShowBindings] = useState(false);
+
+ useOnKeyUp("Escape", () => {
+ setShowBindings(!showBindings);
+ });
+
return (
+ {showBindings && (
+ setShowBindings(false)}
+ />
+ )}
- setVolume(Number(e.target.value))}
- >
+
+ );
+}
+function BindingsWindow({
+ bindings,
+ setBindings,
+ setPaused,
+ volume,
+ setVolume,
+ hide,
+}: {
+ bindings: Bindings;
+ setBindings: (b: Bindings) => void;
+ setPaused: (paused: boolean) => void;
+ volume: number;
+ setVolume: (v: number) => void;
+ hide: () => void;
+}) {
+ return (
+
+
+ Volume:
+ {
+ console.log("e.target.value", e.target.value);
+ console.log("volume", volume);
+ setVolume(Number(e.target.value));
+ }}
+ />
+
-
+ Close
+
);
}
diff --git a/website/src/bindings.tsx b/website/src/bindings.tsx
index 3cbd4f58..0e97aed5 100644
--- a/website/src/bindings.tsx
+++ b/website/src/bindings.tsx
@@ -63,7 +63,7 @@ export type KeyBindings = {
[key in GbaKey]: string;
};
-interface Bindings {
+export interface Bindings {
Displayed: KeyBindings;
Actual: KeyBindings;
}
diff --git a/website/src/index.tsx b/website/src/index.tsx
index 153cce06..3fe092e7 100644
--- a/website/src/index.tsx
+++ b/website/src/index.tsx
@@ -5,6 +5,7 @@ import App from "./App";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
+
root.render(
diff --git a/website/src/mgba.tsx b/website/src/mgba.tsx
index d83a9bd4..d793e764 100644
--- a/website/src/mgba.tsx
+++ b/website/src/mgba.tsx
@@ -78,7 +78,7 @@ export const Mgba: FC = ({ gameUrl, volume, controls, paused }) => {
try {
mgbaModule.current.quitGame();
mgbaModule.current.quitMgba();
- } catch { }
+ } catch {}
};
}, [state]);
@@ -114,33 +114,5 @@ export const Mgba: FC = ({ gameUrl, volume, controls, paused }) => {
}
}, [gameLoaded, paused]);
- return (
- <>
-
-
-
-
- >
- );
+ return ;
};
diff --git a/website/src/useOnKeyUp.hook.ts b/website/src/useOnKeyUp.hook.ts
new file mode 100644
index 00000000..fcf441d4
--- /dev/null
+++ b/website/src/useOnKeyUp.hook.ts
@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+export const useOnKeyUp = (targetKey: string, callback: () => void) => {
+ useEffect(() => {
+ const downHandler = (evnt: KeyboardEvent) => {
+ console.log(evnt.key);
+ if (evnt.key === targetKey) {
+ callback();
+ }
+ };
+
+ window.addEventListener("keyup", downHandler);
+
+ return () => {
+ window.removeEventListener("keyup", downHandler);
+ };
+ }, []);
+};