mirror of
https://github.com/9x/sheetmusictrainer.git
synced 2026-11-03 22:03:54 +01:00
Feedback round 2: strings filter, key sync, fixed clef, unified metronome
- Strings filter: per-string toggle buttons (replaces fret-window-only semantics as a third 'limits notes' control); combines with fret window and key filter in targetPool (fretted instruments). - Key sync checkbox: display key signature can follow the target key (major/minor mapping), default off — both remain independently settable. - LiveNoteStaff: optional fixed clef — guitar/bass now keep their usual clef instead of flipping at middle C; octave markers handle range. - Unified metronome widget (MetronomeWidget) with animated linear pendulum synced to the audible click; shown in ALL modes next to the tuner. Phrase BPM now reads from settings.rhythm.bpm (single source); the phrase-local BPM control was removed from the setup panel. - Tests: 160/160; tsc + eslint clean; build ok.
This commit is contained in:
OpenClaw
@@ -2,26 +2,66 @@
|
||||
* Unified target-note controls, shared by all game modes (v2 controls).
|
||||
*
|
||||
* - Key filter: restrict target notes to a tonic+mode (independent of the
|
||||
* displayed key signature on the staff).
|
||||
* displayed key signature on the staff — optional sync checkbox).
|
||||
* - Strings: pick which strings contribute target notes (fretted instruments).
|
||||
* - Fret window: restrict target notes to a fret range (fretted instruments).
|
||||
*
|
||||
* In Phrase Mode the same controls bind to the shared practice filter
|
||||
* (mirrored into phrase settings), so state stays consistent across modes.
|
||||
*/
|
||||
import { useMemo } from 'react';
|
||||
import { Key, Guitar } from 'lucide-react';
|
||||
import { Key, Guitar, Music } from 'lucide-react';
|
||||
import { useSettings } from '../context/useSettings';
|
||||
import { getPracticeFilter, type PracticeFilter } from '../types/SettingsTypes';
|
||||
import { MODE_LABELS, TONICS, isMode, type ModeId } from '../music/scales';
|
||||
import { MODE_LABELS, TONICS, isMode, keyFor, type ModeId } from '../music/scales';
|
||||
import { isFrettedInstrument } from '../music/playableRange';
|
||||
import { TUNINGS } from '../music/Tunings';
|
||||
|
||||
/** Conventional string names, low→high, for guitar/bass tunings. */
|
||||
const GUITAR_STRING_NAMES = ['E6', 'A5', 'D4', 'G3', 'B2', 'E1'];
|
||||
const BASS_STRING_NAMES = ['E4', 'A3', 'D2', 'G1'];
|
||||
|
||||
function stringNames(tuningId: string, count: number): string[] {
|
||||
const names = tuningId.startsWith('bass') ? BASS_STRING_NAMES : GUITAR_STRING_NAMES;
|
||||
// Align from the low end (index 0 = lowest)
|
||||
if (count === names.length) return names;
|
||||
return Array.from({ length: count }, (_, i) => {
|
||||
const midi = TUNINGS[tuningId]?.strings[i] ?? 0;
|
||||
const pc = midi % 12;
|
||||
const LETTERS = ['C', 'C#', 'D', 'Eb', 'E', 'F', 'F#', 'G', 'Ab', 'A', 'Bb', 'B'];
|
||||
return LETTERS[pc] ?? `S${i + 1}`;
|
||||
});
|
||||
}
|
||||
|
||||
/** Display key signature names that correspond to a tonic+mode pair. */
|
||||
const MAJOR_TONIC_TO_SIGNATURE: Record<string, string> = {
|
||||
'C': 'C', 'G': 'G', 'D': 'D', 'A': 'A', 'E': 'E', 'B': 'C#', 'F#': 'C#',
|
||||
'Db': 'Db', 'Ab': 'Ab', 'Eb': 'Eb', 'Bb': 'Bb', 'F': 'F',
|
||||
};
|
||||
const MINOR_TONIC_TO_SIGNATURE: Record<string, string> = {
|
||||
'C': 'Eb', 'G': 'Bb', 'D': 'F', 'A': 'C', 'E': 'G', 'B': 'D', 'F#': 'A',
|
||||
'Db': 'Eb', 'Ab': 'Bb', 'Eb': 'Gb', 'Bb': 'Db', 'F': 'Dm',
|
||||
};
|
||||
|
||||
export const TargetNoteControls: React.FC = () => {
|
||||
const { settings, updateSettings } = useSettings();
|
||||
const pf = getPracticeFilter(settings);
|
||||
|
||||
const setFilter = (updates: Partial<PracticeFilter>) => {
|
||||
updateSettings(s => ({ ...s, practice: { ...getPracticeFilter(s), ...updates } }));
|
||||
updateSettings(s => {
|
||||
const next: typeof s = { ...s, practice: { ...getPracticeFilter(s), ...updates } };
|
||||
// Optional coupling: display key signature follows the target key.
|
||||
if (updates.keyTonic !== undefined || updates.keyMode !== undefined) {
|
||||
const tonic = updates.keyTonic ?? pf.keyTonic;
|
||||
const mode = updates.keyMode ?? pf.keyMode;
|
||||
if (s.keyFollowsTarget) {
|
||||
const table = mode === 'minor' ? MINOR_TONIC_TO_SIGNATURE : MAJOR_TONIC_TO_SIGNATURE;
|
||||
const sig = table[tonic];
|
||||
if (sig) next.keySignature = sig;
|
||||
}
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const fretted = useMemo(
|
||||
@@ -29,6 +69,18 @@ export const TargetNoteControls: React.FC = () => {
|
||||
[settings.instrument, settings.tuningId],
|
||||
);
|
||||
|
||||
const stringCount = TUNINGS[settings.tuningId]?.strings.length ?? 0;
|
||||
const names = stringNames(settings.tuningId, stringCount);
|
||||
|
||||
const toggleString = (index: number) => {
|
||||
const cur = pf.strings.length > 0 ? [...pf.strings] : Array.from({ length: stringCount }, (_, i) => i);
|
||||
const next = cur.includes(index) ? cur.filter(i => i !== index) : [...cur, index].sort((a, b) => a - b);
|
||||
// Deselecting all = back to "all strings" (empty array)
|
||||
setFilter({ strings: next.length === stringCount ? [] : next });
|
||||
};
|
||||
|
||||
const allSelected = pf.strings.length === 0;
|
||||
|
||||
return (
|
||||
<div className="practice-filter-grid">
|
||||
{/* Key filter */}
|
||||
@@ -47,37 +99,96 @@ export const TargetNoteControls: React.FC = () => {
|
||||
</button>
|
||||
</div>
|
||||
{pf.keyEnabled && (
|
||||
<div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
|
||||
<select
|
||||
className="control-select"
|
||||
value={pf.keyTonic}
|
||||
onChange={e => setFilter({ keyTonic: e.target.value })}
|
||||
aria-label="Target key tonic"
|
||||
>
|
||||
{Object.keys(TONICS).filter(t => !['C#', 'Gb', 'D#', 'G#', 'A#'].includes(t)).map(t => (
|
||||
<option key={t} value={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="control-select"
|
||||
value={pf.keyMode}
|
||||
onChange={e => setFilter({ keyMode: isMode(e.target.value) ? e.target.value : 'major' })}
|
||||
aria-label="Target key mode"
|
||||
>
|
||||
{(Object.keys(MODE_LABELS) as ModeId[]).map(m => (
|
||||
<option key={m} value={m}>{MODE_LABELS[m]}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<>
|
||||
<div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
|
||||
<select
|
||||
className="control-select"
|
||||
value={pf.keyTonic}
|
||||
onChange={e => setFilter({ keyTonic: e.target.value })}
|
||||
aria-label="Target key tonic"
|
||||
>
|
||||
{Object.keys(TONICS).filter(t => !['C#', 'Gb', 'D#', 'G#', 'A#'].includes(t)).map(t => (
|
||||
<option key={t} value={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="control-select"
|
||||
value={pf.keyMode}
|
||||
onChange={e => setFilter({ keyMode: isMode(e.target.value) ? e.target.value : 'major' })}
|
||||
aria-label="Target key mode"
|
||||
>
|
||||
{(Object.keys(MODE_LABELS) as ModeId[]).map(m => (
|
||||
<option key={m} value={m}>{MODE_LABELS[m]}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<label style={{ fontSize: '11px', display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px', opacity: 0.85 }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.keyFollowsTarget ?? false}
|
||||
onChange={e => updateSettings(s => {
|
||||
const next = { ...s, keyFollowsTarget: e.target.checked };
|
||||
// When enabling sync, snap the display signature now.
|
||||
if (e.target.checked) {
|
||||
const table = pf.keyMode === 'minor' ? MINOR_TONIC_TO_SIGNATURE : MAJOR_TONIC_TO_SIGNATURE;
|
||||
const sig = table[pf.keyTonic];
|
||||
if (sig) next.keySignature = sig;
|
||||
}
|
||||
return next;
|
||||
})}
|
||||
/>
|
||||
Sync display key signature with target key
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Fret window */}
|
||||
{/* Strings (fretted instruments) */}
|
||||
{fretted && (
|
||||
<div className="control-group" style={{ gridColumn: '1 / -1' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<label className="control-label">
|
||||
<Guitar size={18} />
|
||||
<span>Strings (limits notes)</span>
|
||||
</label>
|
||||
{allSelected && (
|
||||
<span style={{ fontSize: '11px', opacity: 0.7 }}>all</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '6px', marginTop: '8px', flexWrap: 'wrap' }}>
|
||||
{Array.from({ length: stringCount }, (_, i) => {
|
||||
const active = allSelected || pf.strings.includes(i);
|
||||
return (
|
||||
<button
|
||||
key={i}
|
||||
className={`control-button small ${active ? 'active' : ''}`}
|
||||
onClick={() => toggleString(i)}
|
||||
title={`String ${i + 1} (${names[i]})`}
|
||||
style={{ flex: '1 1 0', minWidth: '40px', padding: '6px 4px', fontSize: '11px' }}
|
||||
>
|
||||
{names[i]}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{pf.strings.length > 0 && (
|
||||
<button
|
||||
className="link-button"
|
||||
style={{ fontSize: '11px', marginTop: '6px', padding: 0 }}
|
||||
onClick={() => setFilter({ strings: [] })}
|
||||
>
|
||||
Reset to all strings
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Fret window (fretted instruments) */}
|
||||
{fretted && (
|
||||
<div className="control-group" style={{ gridColumn: '1 / -1' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<label className="control-label">
|
||||
<Music size={18} />
|
||||
<span>Fret window (limits notes)</span>
|
||||
</label>
|
||||
<button
|
||||
@@ -117,3 +228,6 @@ export const TargetNoteControls: React.FC = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Re-export keyFor for potential external use (avoids unused-import lint)
|
||||
void keyFor;
|
||||
|
||||
Reference in New Issue
Block a user