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 ( +
+
+ Tap a chord to practice it, then strum on your guitar: +
+
+ {chords.map(name=>( + + ))} +
+ {activeChord && ( +
+ +
+ {heard[activeChord] + ? 🎸 {kudos[activeChord]} + : Strum the {activeChord} chord - listening for the root note ({CHORD_ROOTS[activeChord]})} +
+
+ )} +
+ ); +} + + const LESSONS = [ {title:"How to Hold a Guitar", eyebrow:"Lesson 1 - Getting Started", next:"Next: Reading Tab"}, {title:"Reading Guitar Tab", eyebrow:"Lesson 2 - Tab Basics", next:"Next: Your First Notes"}, @@ -944,19 +1000,15 @@ function LessonBody({ id, detected, onTarget, listening, onStartMic }) { ); if (id === 3) 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!

+ Em: middle finger 2nd fret A string, ring finger 2nd fret D string. Strum all 6 strings.
); if (id === 4) return (
-

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!

+ Classic progression: G - D - Em - C. Drill the transitions slowly, accuracy before speed.
);