mgtourney / bocchi

Revolutionizing Beat Saber tournaments one slice at a time with our feature-packed overlay!

The Bocchi Stack

A professional Beat Saber Tournament overlay written in SvelteKit.
It is currently in development and is used for Magnesium Tournament.

For the love of God

Please do not look at the code. It's a mess. I'm sorry.

bocchi's Issues

Pre 2v2 Scene

Starting Soon Scene

Todo:

• Live update time from modview
• Redirect to selected match once timeris done
• Styling

2v2 - Scores Cluster

Tournament Bracket Scene

Picks and Bans Scene

The Picks and Bans scene will serve multiple purposes: it will showcase the selected pool of maps, allow both teams to make picks and bans, and provide the casters with a view of the pool and the teams' decisions.

To accomplish this, the scene will start with a list of all the maps in the pool. The maps will be grayed out by default. When a team decides to either pick or ban a map, that map will be highlighted in either red (for bans) or green (for picks). The selected map will then be moved to the side of the team that made the decision, so that it's clear which team picked or banned which map.

The casters will have their own view of the pool and the teams' decisions. They will be anchored to the bottom middle of the screen in a padded box or a similar layout. This will allow them to see both the overall pool of maps and which maps have been picked or banned by each team.

Finally, the teams themselves will be anchored to the top left and top right of the screen. When a team makes a decision, the selected map will be animated to their side of the screen and highlighted in the appropriate color.

Overall, this design should make it easy for everyone to understand which maps have been picked or banned by each team, while also providing the casters with a clear view of the pool and the teams' decisions.

2v2 - Teams

Post 2v2

After all players have submitted there scores, after 5 seconds + the longest stream delay.
It would then automatically transition to this scene for approximately 20 seconds.

This scene would have a match score summary, e.g. who takes the point + some player score information.
Later on we'd implement some logic to handle when matches are "won" e.g. other team gets enough points.

There is no Figma design document for this scene, though we can take inspiration from Post 1v1.

Spotify Integration

During intermission, we should play some form of background music and Spotify looks like a good option, we should absolutely have a component to show currently playing song during these periods of time.

This could also allow us to play the songs through the overlay as well, but I'm not sure how good of an idea that is.
https://developer.spotify.com/documentation/web-playback-sdk/howtos/web-app-player