Display visual metronome hints in lead up to fill sound.

[dcallus]

Presently Every 4 (or 2 if you set it this way in settings) bars we have a fill (helper) sound playing on the metronome.

It would be nice if we had a visual queue that the helper sound is coming up.

For example.

If the helper sound is on beat 4 of bar 4. We should have beat 2 be red (instead of blue), beat 3 will be amber and beat 4 will be green.

As well as changing the colour we should change the border (in case somebody is colour blind).
The red beat would be e.g. twice as much border (make sure it's an internal border)
The amber beat would have a border that takes up a quarter of the box size
The green will take up, say 2 /3rds of the box size.

If the helper sound is on beat 1 of bar 4, then the 'countdown colours' would need to start on bar 3.

The (possibly) hard bit is this: In the near future we will allow for helper sounds to appear on the '&' or 'e' or 'a' of the beat (in between beats). This is already programmed in, but not called yet. They're called subdivisions.

So we need to account for this. So basically make sure subBeats are in the equation. So that if we have a beat on the & of 4. We would have the 'countdown colours' appear on the & of 2, the & of 3 and finally the & of 4. This is despite the fact that the notes would appear (blue) on beat.

Feel free to get in touch if this doesn't make much sense.

There should also be an option to remove this option from the settings as this may be distracting for some.

• Change colour and style of the metronome blocks starting 2 before the helper sound. e.g. red, amber then green on the helper sound (then back to blue).
• Make sure to account for subdivisions. To test this. Change line 58 (in the useEffect) of Metronome.tsx to playFillOn: { beat: fillStart as BeatPosition, subBeat: '4' }, - this will play the helper sound half a beat later. The 'countdown colours' should sync up to this. Please revert the subBeat back to 0 after you're done testing.
• Add an option in the menu to remove this setting. Should be directly under the 'disable helper sound'. Call it 'disable helper visuals' or something.

This should all be possible (as far as I'm aware) in Metronome.tsx, mostly in the render function of the