Nicer key rebinding

This commit is contained in:
Gwilym Inzani 2023-07-05 11:23:59 +01:00 committed by Corwin
parent ce75b15716
commit bf722ecdfa
No known key found for this signature in database
6 changed files with 95 additions and 42 deletions

View file

@ -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 (
<div>
{showBindings && (
<BindingsWindow
bindings={bindings}
setBindings={setBindings}
setPaused={setPaused}
volume={volume}
setVolume={setVolume}
hide={() => setShowBindings(false)}
/>
)}
<Mgba
gameUrl="/game.gba"
volume={volume}
controls={bindings.Actual}
paused={paused}
/>
<input
type="range"
value={volume}
min="0"
max="1"
step="0.05"
onChange={(e) => setVolume(Number(e.target.value))}
></input>
</div>
);
}
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 (
<BindingsDialog open onClose={hide}>
<VolumeLabel>
Volume:
<input
type="range"
value={volume}
min="0"
max="1"
step="0.05"
onChange={(e) => {
console.log("e.target.value", e.target.value);
console.log("volume", volume);
setVolume(Number(e.target.value));
}}
/>
</VolumeLabel>
<BindingsControl
bindings={bindings}
setBindings={setBindings}
setPaused={setPaused}
/>
</div>
<CloseButton onClick={hide}>Close</CloseButton>
</BindingsDialog>
);
}

View file

@ -63,7 +63,7 @@ export type KeyBindings = {
[key in GbaKey]: string;
};
interface Bindings {
export interface Bindings {
Displayed: KeyBindings;
Actual: KeyBindings;
}

View file

@ -5,6 +5,7 @@ import App from "./App";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<App />

View file

@ -78,7 +78,7 @@ export const Mgba: FC<MgbaProps> = ({ gameUrl, volume, controls, paused }) => {
try {
mgbaModule.current.quitGame();
mgbaModule.current.quitMgba();
} catch { }
} catch {}
};
}, [state]);
@ -114,33 +114,5 @@ export const Mgba: FC<MgbaProps> = ({ gameUrl, volume, controls, paused }) => {
}
}, [gameLoaded, paused]);
return (
<>
<MgbaCanvas ref={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 <MgbaCanvas ref={canvas} />;
};

View file

@ -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);
};
}, []);
};