Pixi’VNIntecept Events
Intercepting events can be very useful to allow hotkeys or to block/prevent browser actions that can create errors.
Attaching events to keymaps to allow hotkeys
To attach events to keymaps is useful to allow hotkeys.
Example:
import { useEffect } from 'react';
export default function EventInterceptor() {
useEffect(() => {
window.addEventListener('keydown', onkeydown);
return () => {
window.removeEventListener('keydown', onkeydown);
};
}, []);
function onkeydown(event: KeyboardEvent) {
if (event.code == 'Enter' || event.code == 'Space') {
nextStep((prev) => prev + 1)
}
else if (event.code == 'Escape') {
setOpenSettings((prev) => !prev)
}
else if (event.code == 'KeyH') {
setOpenHistory((prev) => !prev)
}
}
return null
}Keyboard shortcuts (hotkeys)
I suggest the following hotkeys:
SpaceorEnter: Continue the dialogue.Keep SpaceorKeep Enter: Skip the dialogue.Alt+S: Quick save the game.Alt+L: Quick load the game.Alt+H: Open the history modal.Esc: Open the settings modal.Alt+V: Hide the UI (Show only the canvas).
Why not use the Ctrl key? Because it is used by the browser for many shortcuts, and it is better to avoid conflicts.