Add support for black chords #17
Conversation
This will change the sound of the chords a little (which is why we still support the "old" version of the piano for the light mode), but it also allows us to easily expand colors and instruments. In the future, it will also allow us to play the chord for an arbitrary length of time if desired.
Right now this is a stright expansion of the number of chords to include the 5 black chords. Still to do is adding the chord naming system.
pganssle
force-pushed
the
black_chords
branch
from
62d76f1
to
b47d5b2
Compare
If AUDIO_FILES has been populated, we don't actually use this function, so we should move it inside the `if` statement so that it doesn't get defined on every loop.
pganssle
force-pushed
the
black_chords
branch
from
b47d5b2
to
2cb3cc0
Compare
Hard to reproduce the bug, but the sound would occasionally come out very tinny in the main game mode. Setting the volume any higher than 1 seems to give some clipping, leading to tinniness, so hopefully explicitly initializing the volume to 1 will help.
pganssle
force-pushed
the
black_chords
branch
from
2cb3cc0
to
540b250
Compare
Currently when there are a lot of colors on the screen or when you are using a phone, there's some chance you might have to do some scrolling, or there is other wasted space. This eliminates the big "Chord Identification Method Trainer" text, moves the controls in-line with the menu items, and hides the menu under a hamburger button when using small screens. It also makes some changes to the grid size depending on the screen size and number of colors.
pganssle
force-pushed
the
black_chords
branch
from
e0e1d56
to
9cdbff2
Compare
Apparently on mobile `vh` / `vw` refers to something like the whole screen height / width rather than the actual rendered viewport. You can use `dvh` to refer to just the part that is rendered. It's a relatively new feature so I'm including some fallbacks. Also switching over the logic of how the top-level container contains the whole application.
Previously they were generated on the fly in Javascript.
|
Made some progress on the UI for displaying chord names. This is what I have so far:
I'm not 100% satisfied with it, but it is a good start I think. |
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. |
The chord names are the names of the notes, in circles
pganssle
force-pushed
the
black_chords
branch
from
6da82cc
to
6069f4c
Compare
pganssle
force-pushed
the
black_chords
branch
from
6069f4c
to
6605dfc
Compare
|
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):
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 |
|
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. |
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.