jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-09-02 09:34:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Virtual guitar

Browse Source
This commit is contained in:
Jens Mohrmann
2025-12-27 13:24:59 +01:00
parent 31843095a3
commit 5a78d0ff04
3 changed files with 207 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/App.tsx
View File

@@ -15,9 +15,9 @@ import {
getFirstPositionNotes,
} from './music/Tunings';
import { INSTRUMENT_DEFINITIONS } from './music/InstrumentConfigs';
import { FretboardHint } from './components/FretboardHint';
import { TuningMeter } from './components/TuningMeter';
import { Mic, MicOff, SkipForward, HelpCircle, Volume2, X } from 'lucide-react';
import { Fretboard } from './components/Fretboard';
import { Mic, MicOff, SkipForward, HelpCircle, Volume2, X, Guitar } from 'lucide-react';
import './App.css';
import './styles/skip-button.css';
@@ -32,6 +32,7 @@ function App() {
const [settings, setSettings] = useState<AppSettings>({
difficulty: 'first_pos',
showHint: false,
showFretboard: false,
showTuningMeter: false,
tuningId: 'standard',
keySignature: 'C',
@@ -49,7 +50,8 @@ function App() {
gameMode: 'sight_reading',
customMinFret: 0,
customMaxFret: 12,
autoPlaySightReading: false
autoPlaySightReading: false,
autoPlayVolume: 0.5
});
const [matchStartTime, setMatchStartTime] = useState<number | null>(null);
@@ -160,7 +162,7 @@ function App() {
if (shouldAutoPlay && !revealed) {
// Add a small delay to ensure state settles or allow UI to update
const timer = setTimeout(() => {
playNote(targetMidi, 1.0); // Play for 1 second
playNote(targetMidi, 1.0, settings.autoPlayVolume ?? 0.5); // Play for 1 second
}, 100);
return () => clearTimeout(timer);
}
@@ -197,6 +199,49 @@ function App() {
});
// Common success handler
const handleMatchSuccess = useCallback(() => {
// Success!
setFeedbackMessage("Good!");
setRevealed(true);
setMatchStartTime(null);
const isRhythmActive = settings.rhythm.active && settings.rhythm.autoAdvance;
const isTimerMode = settings.rhythm.mode === 'seconds';
if (!isRhythmActive) {
// Standard or Rhythm-Manual
setTimeout(() => {
generateNewNote();
}, 800);
} else {
// Rhythm Active AND Auto-Advance
if (isTimerMode) {
// Dynamic Timer Mode: Success triggers advance
restartMetronome(); // Reset the countdown
setTimeout(() => {
generateNewNote();
}, 200);
setMatchStartTime(null);
} else {
// Strict BPM Mode: Consumed success, but wait for tick.
// Logic handled by tick
}
}
}, [settings.rhythm, restartMetronome, generateNewNote]);
// Virtual Guitar Handler
const handleVirtualGuitarPlay = useCallback((playedMidi: number) => {
playNote(playedMidi, 0.5); // Feedback sound
if (playedMidi === targetMidi) {
// Instant match
if (feedbackMessage !== "Good!") {
handleMatchSuccess();
}
}
}, [playNote, targetMidi, feedbackMessage, handleMatchSuccess]);
// Match Logic
useEffect(() => {
if (!pitchData) {
@@ -213,43 +258,13 @@ function App() {
} else {
const duration = Date.now() - matchStartTime;
if (duration > NOTE_MATCH_THRESHOLD_MS) {
// Success!
setFeedbackMessage("Good!");
setRevealed(true);
setMatchStartTime(null);
const isRhythmActive = settings.rhythm.active && settings.rhythm.autoAdvance;
const isTimerMode = settings.rhythm.mode === 'seconds';
if (!isRhythmActive) {
// Standard or Rhythm-Manual
setTimeout(() => {
generateNewNote();
}, 800);
} else {
// Rhythm Active AND Auto-Advance
if (isTimerMode) {
// Dynamic Timer Mode: Success triggers advance
restartMetronome(); // Reset the countdown
setTimeout(() => {
generateNewNote();
}, 200);
setMatchStartTime(null);
} else {
// Strict BPM Mode: Consumed success, but wait for tick.
if (feedbackMessage !== "Good!") { // Only increment if not already good
}
}
}
handleMatchSuccess();
}
}
} else {
setMatchStartTime(null);
}
}, [pitchData, targetMidi, matchStartTime, generateNewNote, settings.rhythm, restartMetronome, feedbackMessage]);
}, [pitchData, targetMidi, matchStartTime, feedbackMessage, handleMatchSuccess]);
/* Keyboard Shortcuts */
const [showHelp, setShowHelp] = useState(false);
@@ -300,11 +315,25 @@ function App() {
// Hint text construction
const hintPositions = useMemo(() => {
// If showing full hint OR detecting via fretboard, we need positions?
// Actually, showHint=true renders the red dots.
// If showFretboard=true but showHint=false, we render empty board (interactive).
if (!settings.showHint && !settings.showFretboard) return [];
if (!currentInstrumentDef.showTuning || !currentTuning) return [];
// If hint is hidden but board is explicit, we still need data if we want to support 'hint-on-hover' or similar later.
// But for now, if settings.showHint is FALSE, we pass EMPTY positions to Fretboard so it doesn't draw dots,
// UNLESS we want to decouple 'positions' prop from 'showHint' prop in the component.
// It's cleaner to pass the positions regardless and let the component decide based on a prop,
// OR filter here.
// The request says: "If hints are enabled simultaneously, they can be shown on the same fretboard"
// So if showHint is true -> pass positions. If false -> pass empty.
if (!settings.showHint) return [];
if (!currentInstrumentDef.showTuning || !currentTuning) return []; // No fretboard hints for piano/voice
return getFretboardPositions(targetMidi, currentTuning);
}, [settings.showHint, targetMidi, currentTuning, currentInstrumentDef]);
}, [settings.showHint, settings.showFretboard, targetMidi, currentTuning, currentInstrumentDef]);
// Auto-enable mic when tuner is turned on
useEffect(() => {
@@ -377,13 +406,21 @@ function App() {
{settings.showHint && (
{(settings.showHint || settings.showFretboard) && (
<div className="hint-card">
<div className="hint-note landscape-hint-note">
{getNoteDetails(targetMidi + currentInstrumentDef.transpose).scientific}
</div>
{settings.showHint && (
<div className="hint-note landscape-hint-note">
{getNoteDetails(targetMidi + currentInstrumentDef.transpose).scientific}
</div>
)}
{currentInstrumentDef.showTuning && currentTuning && (
<FretboardHint tuning={currentTuning} positions={hintPositions} />
<Fretboard
tuning={currentTuning}
positions={hintPositions}
interactive={settings.showFretboard}
onPlayNote={handleVirtualGuitarPlay}
showHints={settings.showHint}
/>
)}
</div>
)}
@@ -401,6 +438,15 @@ function App() {
{settings.showHint ? "Hide Hint" : "Show Hint"}
</button>
<button
className={`hint-button ${settings.showFretboard ? 'active' : ''}`}
onClick={() => setSettings(s => ({ ...s, showFretboard: !s.showFretboard }))}
title="Toggle Virtual Guitar"
>
<Guitar size={18} />
Guitar
</button>
<button
className="hint-button"
onClick={() => playNote(targetMidi, 1.0)}

56
src/components/Controls.tsx
View File

@@ -1,4 +1,4 @@
import { Settings, Guitar, Music, Gauge } from 'lucide-react';
import { Settings, Guitar, Music, Gauge, Volume2 } from 'lucide-react';
import { TUNINGS, INSTRUMENT_TUNINGS } from '../music/Tunings';
import { INSTRUMENT_DEFINITIONS } from '../music/InstrumentConfigs';
import { getTempoMarking } from '../music/TempoMarkings';
@@ -19,6 +19,7 @@ export interface RhythmSettings {
export interface AppSettings {
difficulty: Difficulty;
showHint: boolean;
showFretboard: boolean;
tuningId: string;
keySignature: string;
instrument: string;
@@ -29,6 +30,7 @@ export interface AppSettings {
customMinFret?: number;
customMaxFret?: number;
autoPlaySightReading?: boolean;
autoPlayVolume?: number;
}
interface ControlsProps {
@@ -354,24 +356,42 @@ export const Controls: React.FC<ControlsProps> = ({ settings, onUpdateSettings,
</div>
{/* Tool 3: Auto-play */}
{settings.gameMode === 'sight_reading' ? (
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', border: '1px solid rgba(128,128,128,0.2)', padding: '12px', borderRadius: '8px' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<label className="control-label" style={{ marginBottom: 0, textTransform: 'none' }}>
<span>Auto-play</span>
</label>
<button
className={`switch-button ${settings.autoPlaySightReading ? 'active' : ''}`}
onClick={() => onUpdateSettings({ ...settings, autoPlaySightReading: !settings.autoPlaySightReading })}
style={{ transform: 'scale(1)' }} /* Reset scale for consistency */
>
<div className="switch-thumb" />
</button>
</div>
{/* Tool 3: Auto-play */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', border: '1px solid rgba(128,128,128,0.2)', padding: '12px', borderRadius: '8px' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<label className="control-label" style={{ marginBottom: 0, textTransform: 'none' }}>
<span>Auto-play</span>
</label>
<button
className={`switch-button ${settings.gameMode === 'ear_training' || settings.autoPlaySightReading ? 'active' : ''}`}
onClick={() => {
if (settings.gameMode !== 'ear_training') {
onUpdateSettings({ ...settings, autoPlaySightReading: !settings.autoPlaySightReading });
}
}}
disabled={settings.gameMode === 'ear_training'}
style={{ cursor: settings.gameMode === 'ear_training' ? 'not-allowed' : 'pointer', opacity: settings.gameMode === 'ear_training' ? 0.8 : 1 }}
title={settings.gameMode === 'ear_training' ? "Forced On in Ear Training" : "Toggle Auto-play"}
>
<div className="switch-thumb" />
</button>
</div>
) : (
<div /> /* Empty placeholder for grid 3rd column if not sight reading? Or just 2 cols? */
)}
{(settings.gameMode === 'ear_training' || settings.autoPlaySightReading) && (
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', paddingTop: '8px', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
<Volume2 size={14} style={{ opacity: 0.7 }} />
<input
type="range"
min="0"
max="1"
step="0.05"
value={settings.autoPlayVolume ?? 0.5}
onChange={(e) => onUpdateSettings({ ...settings, autoPlayVolume: parseFloat(e.target.value) })}
style={{ flex: 1 }}
/>
</div>
)}
</div>
</div>
</div>
);

114
src/components/FretboardHint.tsx → src/components/Fretboard.tsx
View File

@@ -1,12 +1,22 @@
import type { Tuning, FretPosition } from '../music/Tunings';
interface FretboardHintProps {
interface FretboardProps {
tuning: Tuning;
positions: FretPosition[];
maxFrets?: number; // How many frets to display
maxFrets?: number;
interactive?: boolean;
showHints?: boolean;
onPlayNote?: (midi: number) => void;
}
export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHintProps) {
export function Fretboard({
tuning,
positions,
maxFrets = 15,
interactive = false,
showHints = true,
onPlayNote
}: FretboardProps) {
// Config
const numStrings = tuning.strings.length;
// Visual params
@@ -24,23 +34,18 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
const markers = [3, 5, 7, 9, 12, 15, 17, 19, 21].filter(m => m <= maxFrets);
// Helper to get Y coordinate for a string index
// String 0 is lowest pitch. In tab/charts, lowest pitch is usually the BOTTOM line.
// So index 0 -> max Y.
// String 0 is lowest pitch (Bottom line)
// String N is highest pitch (Top line)
const getStringY = (stringIndex: number) => {
// stringIndex 0 (Low E) -> bottom line
// stringIndex N (High E) -> top line
return height - paddingY - (stringIndex * stringSpacing);
};
// Helper to get X coordinate for a fret line
// Fret N line is at x = padding + nut + N * width
const getFretLineX = (fretNum: number) => {
return paddingX + nutWidth + (fretNum * fretWidth);
};
// Helper to get Center X for a note at fret N
// If fret 0 (open), place it to left of nut.
// If fret > 0, place it in middle of Fret N-1 and Fret N.
const getNoteX = (fretNum: number) => {
if (fretNum === 0) {
return paddingX + (nutWidth / 2) - 15; // To the left of nut
@@ -50,13 +55,19 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
return (startX + endX) / 2;
};
const handleFretClick = (stringIndex: number, fret: number) => {
if (!interactive || !onPlayNote) return;
const baseMidi = tuning.strings[stringIndex];
const noteMidi = baseMidi + fret;
onPlayNote(noteMidi);
};
return (
<div className="fretboard-container" style={{ overflowX: 'auto', maxWidth: '100%' }}>
<div className="fretboard-container" style={{ overflowX: 'auto', maxWidth: '100%', cursor: interactive ? 'pointer' : 'default' }}>
<svg
width="100%"
height="100%"
viewBox={`0 0 ${width} ${height}`}
style={{ display: 'block', margin: '0 auto', maxHeight: '100%' }}
width={width}
height={height}
style={{ display: 'block', margin: '0 auto' }}
>
{/* Fretboard background */}
<rect
@@ -64,7 +75,7 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
y={paddingY}
width={width - (paddingX * 2) - nutWidth}
height={height - (paddingY * 2)}
fill="#999999" // Requested dark gray
fill="#999999"
stroke="none"
/>
@@ -74,17 +85,15 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
y={paddingY}
width={nutWidth}
height={height - (paddingY * 2)}
fill="#333" // Dark nut
fill="#333"
/>
{/* Fret Markers (Dots) on fretboard */}
{/* Fret Markers (Dots) */}
{markers.map(m => {
const cx = getNoteX(m);
const cy = height / 2;
const isDouble = m % 12 === 0;
if (isDouble) {
// Draw two dots
return (
<g key={`marker-${m}`}>
<circle cx={cx} cy={height / 2 - stringSpacing} r={6} fill="#777" />
@@ -92,15 +101,14 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
</g>
);
}
return (
<circle key={`marker-${m}`} cx={cx} cy={cy} r={6} fill="#777" />
<circle key={`marker-${m}`} cx={cx} cy={height / 2} r={6} fill="#777" />
);
})}
{/* Frets (Vertical lines) */}
{Array.from({ length: maxFrets + 1 }).map((_, i) => {
if (i === 0) return null; // Nut handles 0
if (i === 0) return null;
const x = getFretLineX(i);
return (
<line
@@ -109,7 +117,7 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
y1={paddingY}
x2={x}
y2={height - paddingY}
stroke="#CCCCCC" // Lighter frets
stroke="#CCCCCC"
strokeWidth={1}
/>
);
@@ -118,11 +126,7 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
{/* Strings (Horizontal lines) */}
{tuning.strings.map((_, i) => {
const y = getStringY(i);
// i=0 is LOW pitch (thickest).
// Bolder: Increase base thick
const visualThickness = 4 - (i * 0.4); // 4 down to ~2
const visualThickness = 4 - (i * 0.4);
return (
<line
key={`string-${i}`}
@@ -130,22 +134,21 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
y1={y}
x2={width - paddingX}
y2={y}
stroke="#EEEEEE" // Lighter strings
stroke="#EEEEEE"
strokeWidth={Math.max(1.5, visualThickness)}
/>
);
})}
{/* Target Note Positions */}
{positions.map((p, idx) => {
// Verify if fret is within range
{/* Target Note Positions (Hints) */}
{showHints && positions.map((p, idx) => {
if (p.fret > maxFrets) return null;
const cx = getNoteX(p.fret);
const cy = getStringY(p.stringIndex);
return (
<g key={`pos-${idx}`}>
<g key={`pos-${idx}`} style={{ pointerEvents: 'none' }}>
{/* Add pointerEvents: none so hints don't block clicks if they overlay logic */}
<circle
cx={cx}
cy={cy}
@@ -168,6 +171,47 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
</g>
);
})}
{/* Interaction Overlay (Invisible hit targets) */}
{interactive && tuning.strings.map((_, stringIndex) => {
const y = getStringY(stringIndex);
// Hit area height (centered on string)
const hitHeight = stringSpacing; // Full coverage between strings
const yStart = y - (hitHeight / 2);
return Array.from({ length: maxFrets + 1 }).map((_, fret) => {
// Calculate X range for this fret
let xStart = 0;
let xEnd = 0;
if (fret === 0) {
xStart = paddingX - 25; // Extend left a bit
xEnd = paddingX + nutWidth;
} else {
xStart = getFretLineX(fret - 1);
xEnd = getFretLineX(fret);
}
const rectWidth = xEnd - xStart;
return (
<rect
key={`hit-${stringIndex}-${fret}`}
x={xStart}
y={yStart}
width={rectWidth}
height={hitHeight}
fill="transparent"
style={{ cursor: 'pointer' }}
onClick={() => handleFretClick(stringIndex, fret)}
// Hover effect could be added here via CSS class if we want
className="fret-hit-target"
>
<title>String {stringIndex + 1}, Fret {fret}</title>
</rect>
);
});
})}
</svg>
</div>
);