fix(web/skillcheck): fail on wrong key press

This commit is contained in:
Luke
2023-07-20 22:39:56 +02:00
parent 9c90b5be5f
commit 5b9bb531a9

View File

@@ -14,7 +14,7 @@ interface Props {
const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete, skillCheck, className }) => { const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete, skillCheck, className }) => {
const [indicatorAngle, setIndicatorAngle] = useState(-90); const [indicatorAngle, setIndicatorAngle] = useState(-90);
const [keyPressed, setKeyPressed] = useState(false); const [keyPressed, setKeyPressed] = useState<false | string>(false);
const interval = useInterval( const interval = useInterval(
() => () =>
setIndicatorAngle((prevState) => { setIndicatorAngle((prevState) => {
@@ -25,8 +25,7 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete,
const keyHandler = useCallback( const keyHandler = useCallback(
(e: KeyboardEvent) => { (e: KeyboardEvent) => {
if (e.key.toLowerCase() !== skillCheck.key.toLowerCase()) return; setKeyPressed(e.key.toLowerCase());
setKeyPressed(true);
}, },
[skillCheck] [skillCheck]
); );
@@ -49,11 +48,13 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, handleComplete,
interval.stop(); interval.stop();
setKeyPressed(false);
window.removeEventListener('keydown', keyHandler); window.removeEventListener('keydown', keyHandler);
if (indicatorAngle < angle || indicatorAngle > angle + offset) handleComplete(false); if (keyPressed !== skillCheck.key.toLowerCase() || indicatorAngle < angle || indicatorAngle > angle + offset)
handleComplete(false);
else handleComplete(true); else handleComplete(true);
setKeyPressed(false);
}, [keyPressed]); }, [keyPressed]);
return ( return (