[Bug]: Lobby plays “leave lobby” sound when game starts

[itsalaidbacklife]

Bug Summary

The LobbyView currently played the wrong sound when the game starts

Detailed Description

When players join the Lobby, we play an “entering” sound like rushing water, in sync with the animation showing water filling up the player cards. When players leave the lobby, we play a “leaving” sound like a bubble popping.

The logic for when to play which sound is slightly incorrect. Currently, we play the “leave” animation when the LobbyView unmounts. This is incorrect because the page will unmount both when the player leaves the lobby (in which case we do want to play the “leave” sound as it currently does), but also when the game starts as we are navigating to the GameView. In the second case, we should actually play the “enter” sound because this is consistent with the water flowing animation that happens when the game begins.

In order to manage this, we should revise the logic so that nothing plays onUnmounted(), and the leave sound is played onBeforeRouteLeave() so that it can check the to argument to confirm that the user is heading to the HomeView before playing the “leave” sound.

Then we should update the function that fires when the game starts (triggering the water animation) to play the “enter” sound so that it plays in sync with the animation as the game is starting. (This can’t be done in the beforeRouteLeave() hook because the navigation to the GameView isn’t triggered until after the water animation completes.

Current Behavior

The “leave” sound of a bubble popping plays when the game starts, as well as when the user leaves the lobby.

Expected Behavior

The “leave” sound plays when the user leaves the lobby, and the “enter” sound plays when a game begins (during the water animation)

Steps to Reproduce

1. Join a lobby as two players
2. Have both players ready up so the game starts
3. Notice that the “leave” sound of a bubble popping plaus