Pitch highlighting with scale/interval modes and play button
Created by: jedmund
Summary
- Add highlight mode selector (None / Scale / Interval) to playground configurator
- Scale mode highlights all major scale tones in blue from the selected root
- Interval mode shows an interval picker (Minor 2nd through Octave), highlights root + interval note
- Both modes support optional orange tonic highlighting
- Add Play button: below keyboard in contained, floating above in docked
- Reorganize configurator into three sections: Keyboard, Overlays, Highlights
Test plan
-
Set highlight to Scale, verify all scale tones turn blue -
Set highlight to Interval, pick different intervals, verify correct notes highlight -
Toggle Highlight root on, verify tonic turns orange -
Change root note, verify highlights and play button update -
Tap Play in scale mode: plays ascending scale -
Tap Play in interval mode: plays root then interval note -
Play button appears below keyboard (contained) and above keyboard (docked) -
Docked keyboard keys don't shrink when play button is visible