search

pganssle / cim

Chord Identification Method Trainer
https://pganssle.github.io/cim/
Apache License 2.0
6 stars 3 forks source link

Add support for black chords #17

Closed pganssle closed 9 months ago

pganssle commented 9 months ago

This is the first pass at adding support for the "black chords" (#8).

This switches us over to Tone.js, to allow more easily expanding the chords. The Tone.js sampled piano sounds a little different from the original recorded versions, so we leave that available as a "legacy" mode.

Still to-do in this PR:

I will leave it to another PR to figure out a better UI for training with the 10 "black chord" inversions.

pganssle commented 9 months ago

Made some progress on the UI for displaying chord names. This is what I have so far:

image

I'm not 100% satisfied with it, but it is a good start I think.

pganssle commented 9 months ago

Figure out why the hidden "Red" chord option is still showing up on iOS

OK, this seems to be an issue in Safari. I will either just leave it as is and the Safari users can just always have a weird "Level 0" option in the drop-down or I can try to go back to the old way where the option is added and removed programmatically by the Easter egg.

pganssle commented 9 months ago

I decided to add shapes to each of the note names, to help the kids remember them as sequences (you can turn off the shapes or the letters):

image

I'm not totally satisfied with how this came out, but I think it's good enough to ship at this point. I would like to put a border around the shapes, but the way I added the shapes was using clip-path, and it seems like it's annoyingly difficult to get nice-looking borders around clipped paths and I don't want to burn half a day on this.

pganssle commented 9 months ago

OK, so I know why the red chord thing is showing up on iOS, but I'm going to leave that for later to fix. I think everything else is ready to go.