How the Player works

Approaching notes mode

The player page has a feature that mimics OSU, circles get closer and closer to the note, once they are 1/3rd of the way, it should be clicked.

This feature works in two main points

• The list of notes
• 2D array of the notes that are currently visible to the user In the list of notes there are all notes that are waiting to be played, each note has the current data:

interface ApproachingNoteProps{
	time: number //Time when the note should be played since the start
	index: number //The actual note index
	clicked: boolean //If the note was ever clicked
	id: number //the ID of the note, only used as a key for react
}

The feature works by using a ticker function that gets called at a fixed interval. At every tick,it decreases the time of each note by the tick time, it then checks if there are any notes that should be visible by calculating if the note time is lower than the approach rate, if it is, it adds the note to the 2d array of the notes which simply has an array for each note.

Everytime a user presses the note, the handleApproachClick sets the first element of the array regarding that note to clicked, the tick function will then check if there are any notes that have the clicked status, if there are, it checks if the current time of that note is lower than 1/3rd of the approach rate. If it's lower, it means that the user clicked the note correctly, if it's higher, then it was pressed too early.

Practice mode

The practice tool helps the user in learning a song by dividing the song in chunks which the user should press. Other than batching notes it also gives an estimate waiting period from one chunk to the next so that the user can somehow keep the tempo of the song even without knowing how it sounds like. This all works by first converting the song to a recorded song, that's because the only information needed is the the index of the note and the time when it should play. Then the note is split in chunks, chunks being notes which are "guessed" to be played together, so if the difference in time between them is less than a threshold (set to 50ms for now). a chunk can be seen as:

interface Chunk{
    notes: RecordedNote[]
    delay: number
}

Once the song is split into chunks and laoded, the first chunk is handled, looking at every note in that chunk and setting the relative note on the keyboard to be toClick, then the next chunk is also loaded and set the toClickNext, if a note was already to be clicked, then it's set as toClickAndNext.

Everytime a note is clicked, the status is cleared, if there are no notes left in the chunk, then it's removed and the next chunk is loaded.