diff --git a/index.html b/index.html index 66d3a55..a3f47c7 100644 --- a/index.html +++ b/index.html @@ -823,6 +823,62 @@ function SongSearch({ detected, listening, onStartMic }) { ); } +function ChordPractice({ chords, detected, onTarget }) { + const CHORD_ROOTS = {Em:"E2", Am:"A2", G:"G2", C:"C3", D:"D3"}; + const KUDOS = ["Sounds good!","Nice strum!","That sounds right!","Great job!","Keep it up!","Well done!"]; + const [activeChord, setActiveChord] = useState(null); + const [heard, setHeard] = useState({}); + const [kudos, setKudos] = useState({}); + + useEffect(()=>{ + if (activeChord) onTarget(CHORD_ROOTS[activeChord]); + else onTarget(null); + },[activeChord]); + + useEffect(()=>{ + if (!detected || !activeChord || heard[activeChord]) return; + const root = CHORD_ROOTS[activeChord]; + if (detected === root) { + setHeard(h=>({...h,[activeChord]:true})); + setKudos(k=>({...k,[activeChord]:KUDOS[Math.floor(Math.random()*KUDOS.length)]})); + } + },[detected, activeChord, heard]); + + return ( +
Em is the easiest chord on guitar. Only 2 fingers. Am uses 3 fingers in a similar shape.
-Em is the easiest chord on guitar. Only 2 fingers. Am uses 3 fingers in a similar shape. Tap one to see the fingering, then strum it - the mic will confirm!
+G, C, and D unlock hundreds of songs. Together with Em and Am you have most of what you need.
-G, C, and D unlock hundreds of songs. Tap each chord to see the fingering and strum it - the mic will confirm when it hears you!
+