Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 17x 17x 7x 3x 7x 17x 1x 17x 1x 17x 9x 9x 9x 9x 9x 9x 9x 17x | import { useState, useEffect, useCallback } from 'react';
/**
* Custom hook for keyboard input handling
* Tracks the state of pressed keys
*
* @returns {Object} Object with key states (true if pressed)
*/
export function useKeyboard() {
const [keys, setKeys] = useState({});
const handleKeyDown = useCallback((event) => {
// Prevent default for arrow keys to avoid page scrolling
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space'].includes(event.code)) {
event.preventDefault();
}
setKeys(prev => ({
...prev,
[event.code]: true,
[event.key]: true,
}));
}, []);
const handleKeyUp = useCallback((event) => {
setKeys(prev => ({
...prev,
[event.code]: false,
[event.key]: false,
}));
}, []);
// Reset keys when window loses focus
const handleBlur = useCallback(() => {
setKeys({});
}, []);
useEffect(() => {
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);
window.addEventListener('blur', handleBlur);
return () => {
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('keyup', handleKeyUp);
window.removeEventListener('blur', handleBlur);
};
}, [handleKeyDown, handleKeyUp, handleBlur]);
return keys;
}
export default useKeyboard;
|