Highlight root note of each chord

Refactor the Piano component to highlight the root note of each chord. If this
makes things too easy, I can support this as a preference.

Also:
- Reduced the number of keys that the piano displays and increased the key
  thickness to reclaim the space
- Preferred using Tailwind selectors instead of inline styling where applicable
- Call List.reverse on the keys to ensure that the top-most note is a lower note
  than the bottom-most note

TODO:
- Support showing only the name of the chord and not just the notes that
  comprise that chord
- Rewrite the function that generates the chords for a given range of notes
- Consider supporting a dark mode
This commit is contained in:
William Carroll 2020-04-19 00:21:37 +01:00
parent c6132ab1d6
commit 11b140b6ae
2 changed files with 70 additions and 37 deletions

View file

@ -37,8 +37,8 @@ render model =
, isVisible = model.isPaused
}
, Piano.render
{ highlight = model.selectedChord |> Maybe.andThen Theory.notesForChord |> Maybe.withDefault []
, start = model.firstNote
, end = model.lastNote
{ chord = model.selectedChord
, firstNote = model.firstNote
, lastNote = model.lastNote
}
]