I had an idea of how the notes fell down the canvas along with the time, and I had a rough understanding of Tone.now() worked, but there were things happening on the page I could not wrap my head around when I started pressing the Toggle Play button. Trying to add a debugger was not very helpful due to how the game progressed in 20 millisecond increments. So one of the first commits I made was to give myself more data while the game played. You can see where I started adding more info to the debug version of the page in this line on this commit. . This commit also had some code in it tied to the horizontal placement of the letters on the canvas, because some letters hung off the edges, and I needed to start making changes to understand how they would affect the frames. By examining the time, duration, and initial x and y values, I was able to reverse engineer the calculations needed to get all the letters to appear within their boxes and within the canvas the way I expected them to appear. The debug page was a valuable tool in getting things aligned correctly.
I spent alot of time trying to get things to be more useful, like setting a delay so the player could have a chance to get ready before the notes were playing. and adding a better naming scheme for the options in the Tracks dropdown menu.
No game is complete without a way to measure how well you played. The code did not put me in a good position to add scoring as it was, so I had to take a bit of time to rearrange things to make room for scoring outside the Song Renderer. One thing I had to do was move the concern of calculating the visible notes for the game from the Song Renderer and move it into the main page so that code for score keeping could happen between getting the visible notes and rendering them out to the page. That change is captured in this commit.
Once I had the concerns separated out, I could introduce ScoreKeeper Component and start keeping track of a score for the game.
The most I did to improve performance was to hide the text renderer when the page was not in debug mode. It saved me a few extra loops, but nothing huge. The addition of a score helped to give the game a feeling of interactivity, and it was the first time it really felt like a game. It was not enough though. I would need to add more interactivity to the canvas directly, and that is what I aimed to work on next.