Scorciatoie da tastiera

Le scorciatoie da tastiera permettono ai giocatori di attivare azioni direttamente dalla tastiera, come il salvataggio rapido, saltare i dialoghi o controllare un minigioco. Invece di gestire manualmente le chiamate a window.addEventListener("keydown", ...), si consiglia di utilizzare TanStack Hotkeys, una libreria che trasforma l'input da tastiera in un sistema di comandi tipizzato con scope, sequenze, tasti tenuti premuti e rilevamento dei conflitti.

Utilizzo

Registra una scorciatoia da tastiera con l'hook useHotkey:

import { useHotkey } from "@tanstack/react-hotkeys";

useHotkey("Mod+S", () => {
    quickSave();
});

Il modificatore Mod si risolve automaticamente in Meta (Cmd) su macOS e in Control su Windows/Linux, quindi lo stesso codice funziona su tutte le piattaforme.

Ambito e attivazione condizionale

useHotkey è un hook, quindi registra la scorciatoia quando il componente viene montato e la rimuove automaticamente quando il componente viene smontato — non è necessario rimuovere il listener manualmente, a differenza di un window.addEventListener manuale.

Usa l'opzione target per limitare una scorciatoia da tastiera a un elemento specifico, e enabled per attivarla o disattivarla in base allo stato del gioco, ad esempio mentre è in esecuzione un minigioco:

const panelRef = useRef<HTMLDivElement>(null);

useHotkey("Escape", () => closePanel(), { target: panelRef });
useHotkey("ArrowUp", () => setDirection(0, -1), { enabled: !gameOver });

Per saperne di più

TanStack Hotkeys supporta anche sequenze di tasti (ad es. "G poi D"), tasti tenuti premuti, rilevamento dei conflitti e un pannello devtools. Consulta la documentazione ufficiale per l'elenco completo delle funzionalità.