diff --git a/components/PlayerStats.js b/components/PlayerStats.js index 28dfe05..11d2e61 100644 --- a/components/PlayerStats.js +++ b/components/PlayerStats.js @@ -2,7 +2,9 @@ import ReactCountryFlag from "react-country-flag"; const PlayerStats = (props) => { return
-

{props.pp}pp

+

{props.pp}pp ({props.websiteType})

#{props.globalPos}

#{props.countryRank}

diff --git a/config.json b/config.json index 7947c5f..a62c541 100644 --- a/config.json +++ b/config.json @@ -1,6 +1,7 @@ { "name": "BeatSaber Overlay", - "description": "A simple scoresaber overlay for OBS", + "title": "BeatSaber Overlay - Simple and easy to use BeatSaber overlay", + "description": "Free, simple, and easy to use beat saber overlay for OBS", "color": "#0EBFE9", "url": "https://bs-overlay.fascinated.cc", "proxy_url": "https://bangor375.herokuapp.com" diff --git a/pages/_app.js b/pages/_app.js index d560a3b..0750f97 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -12,7 +12,7 @@ function MyApp({ Component, pageProps }) { // 2. Use at the root of your app - {Config.name} + {Config.title} diff --git a/pages/index.js b/pages/index.js index dbb199d..551e026 100644 --- a/pages/index.js +++ b/pages/index.js @@ -8,7 +8,7 @@ import SongInfo from "../components/SongInfo"; // Why do u have to proxy requests... it's so dumb LOL const SCORESABER_API_URL = Config.proxy_url + "/https://scoresaber.com/api/player/%s/full"; -const GITHUB_URL = "https://github.com/RealFascinated/beatsaber-overlay"; +const BEATLEADER_API_URL = Config.proxy_url + "/https://api.beatleader.xyz/player/%s"; export default class Home extends Component { @@ -20,7 +20,8 @@ export default class Home extends Component { this.state = { loading: true, id: undefined, - isValidScoresaber: true, + isValidSteamId: true, + websiteType: "ScoreSaber", data: undefined, showPlayerStats: true, showScore: false, @@ -90,9 +91,14 @@ export default class Home extends Component { const urlSearchParams = new URLSearchParams(window.location.search); const params = Object.fromEntries(urlSearchParams.entries()); + // Check if the player wants to disable their stats (pp, global pos, etc) + if (params.beatleader === 'true') { + this.setState({ websiteType: "BeatLeader" }); + } + const id = params.id; if (!id) { // Check if the id param is valid - this.setState({ loading: false, isValidScoresaber: false }); + this.setState({ loading: false, isValidSteamId: false }); return; } @@ -101,6 +107,16 @@ export default class Home extends Component { this.setState({ showPlayerStats: false }); } + setTimeout(async () => { + await this.updateData(id); + }, 10); + setTimeout(async () => { + if (!this.state.isValidSteamId) { + return; + } + await this.updateData(id); + }, 30_000); // Update the player data every 30 seconds. + let shouldConnectSocket = false; // Check if the player wants to show their current score information @@ -118,33 +134,21 @@ export default class Home extends Component { if (shouldConnectSocket) { this.connectSocket(); } - - await this.updateData(id); - setTimeout(async () => { - if (!this.state.isValidScoresaber) { - return; - } - await this.updateData(id); - }, 30_000); // Update the scoresaber data every 30 seconds. } /** - * Fetch and update the data from ScoreSaber + * Fetch and update the data from the respective platform * - * @param {string} id The scoresaber id of the player + * @param {string} id The steam id of the player * @returns */ async updateData(id) { - const data = await fetch(SCORESABER_API_URL.replace("%s", id), { + const data = await fetch(this.state.websiteType == "ScoreSaber" ? SCORESABER_API_URL.replace("%s", id) : BEATLEADER_API_URL.replace("%s", id), { mode: 'cors' }); - if (data.status === 422) { // Invalid scoresaber account (I think??) - this.setState({ loading: false, isValidScoresaber: false }); - return; - } const json = await data.json(); - if (json.errorMessage) { // Invalid scoresaber account - this.setState({ loading: false, isValidScoresaber: false }); + if (json.errorMessage) { // Invalid steam account + this.setState({ loading: false, isValidSteamId: false }); return; } this.setState({ loading: false, id: id, data: json }); @@ -300,10 +304,10 @@ export default class Home extends Component { } render() { - const { loading, isValidScoresaber, data } = this.state; + const { loading, isValidSteamId, data, websiteType } = this.state; // When in the main menu, show this colour so it's actually readable - if (!isValidScoresaber && !loading) { + if (!isValidSteamId && !loading) { const body = document.body; body.style.backgroundColor = "#181a1b"; } @@ -313,19 +317,20 @@ export default class Home extends Component {

Loading...

- : !isValidScoresaber ? + : !isValidSteamId ?

BeatSaber Overlay

-

This is currently just a simple overlay for OBS displaying ScoreSaber stats.

+

This is currently just a simple overlay for OBS displaying ScoreSaber or BeatLeader stats.

If you have any suggestions you can message me on discord @ Fascinated#4719

-

Provide a valid scoresaber id

+

Provide a valid steam id for scoresaber or beatleader

Example: {document.location.origin}?id=76561198449412074

Example with Score Info: {document.location.origin}?id=76561198449412074&scoreinfo=true

Options

+

beatleader - Can be "true" if you wish to get player data from BeatLeader rather than scoresaber

scoreinfo - Can be "true" if you want to show your current score (needs HTTP Status)

playerstats - Can be "false" if you disable showing your stats (pp, global pos, etc)

songinfo - Can be "true" if want to see information about the song (song name, bsr, song art, etc)

@@ -337,12 +342,13 @@ export default class Home extends Component {
{ this.state.showPlayerStats ?
- +
: ""