Add keybaord shortcuts for mic and virtual instrument

This commit is contained in:
2025-12-28 14:32:07 +01:00
parent c76a172c1c
commit dbe7d9a38e

View File

@@ -341,6 +341,12 @@ function App() {
gameMode: s.gameMode === 'sight_reading' ? 'ear_training' : 'sight_reading' gameMode: s.gameMode === 'sight_reading' ? 'ear_training' : 'sight_reading'
})); }));
break; break;
case 'v': // Virtual Instrument
setSettings(s => ({ ...s, showFretboard: !s.showFretboard }));
break;
case 'l': // Listening (Mic)
setListening(l => !l);
break;
} }
// Check non-character keys via code to avoid layout issues for function keys // Check non-character keys via code to avoid layout issues for function keys
@@ -509,7 +515,7 @@ function App() {
<button <button
className={`hint-button ${settings.showFretboard ? 'active' : ''}`} className={`hint-button ${settings.showFretboard ? 'active' : ''}`}
onClick={() => setSettings(s => ({ ...s, showFretboard: !s.showFretboard }))} onClick={() => setSettings(s => ({ ...s, showFretboard: !s.showFretboard }))}
title={`Toggle Virtual ${currentInstrumentDef.displayName}`} title={`Toggle Virtual ${currentInstrumentDef.displayName} (Keyboard Shortcut: V)`}
> >
<Guitar size={18} /> <Guitar size={18} />
{currentInstrumentDef.id === 'piano' ? 'Piano' : 'Guitar'} {currentInstrumentDef.id === 'piano' ? 'Piano' : 'Guitar'}
@@ -550,6 +556,7 @@ function App() {
className={`mic-button ${listening ? 'listening' : ''}`} className={`mic-button ${listening ? 'listening' : ''}`}
onClick={() => setListening(!listening)} onClick={() => setListening(!listening)}
aria-label={listening ? "Stop Listening" : "Start Listening"} aria-label={listening ? "Stop Listening" : "Start Listening"}
title="Toggle Monitor (Keyboard Shortcut: L)"
> >
{listening ? <Mic size={28} /> : <MicOff size={28} />} {listening ? <Mic size={28} /> : <MicOff size={28} />}
</button> </button>
@@ -614,6 +621,14 @@ function App() {
<span>Toggle Hint</span> <span>Toggle Hint</span>
<span className="shortcut-key">H</span> <span className="shortcut-key">H</span>
</div> </div>
<div className="help-item">
<span>Toggle Virtual Instrument</span>
<span className="shortcut-key">V</span>
</div>
<div className="help-item">
<span>Toggle Mic</span>
<span className="shortcut-key">L</span>
</div>
<div className="help-item"> <div className="help-item">
<span>Toggle Zen Mode</span> <span>Toggle Zen Mode</span>
<span className="shortcut-key">Z</span> <span className="shortcut-key">Z</span>