Fascinated/beatsaber-overlay
Fascinated/beatsaber-overlay
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Wiki Activity

Merge pull request #3 from RealFascinated/beatleader-addition

Browse Source 
Beatleader addition
This commit is contained in:
Liam 2022-10-08 15:45:54 +01:00 committed by GitHub
commit 2a20a2ba76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/PlayerStats.js
View File

@ -2,7 +2,9 @@ import ReactCountryFlag from "react-country-flag";
const PlayerStats = (props) => { const PlayerStats = (props) => {
return <div className={'player-stats'}> return <div className={'player-stats'}>
<p>{props.pp}pp</p> <p>{props.pp}pp <span style={{
fontSize: '20px',
}}>({props.websiteType})</span></p>
<p>#{props.globalPos}</p> <p>#{props.globalPos}</p>
<div className="player-country"> <div className="player-country">
<p>#{props.countryRank}</p> <p>#{props.countryRank}</p>

3
config.json
View File

@ -1,6 +1,7 @@
{ {
"name": "BeatSaber Overlay", "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", "color": "#0EBFE9",
"url": "https://bs-overlay.fascinated.cc", "url": "https://bs-overlay.fascinated.cc",
"proxy_url": "https://bangor375.herokuapp.com" "proxy_url": "https://bangor375.herokuapp.com"

2
pages/_app.js
View File

@ -12,7 +12,7 @@ function MyApp({ Component, pageProps }) {
// 2. Use at the root of your app // 2. Use at the root of your app
<NextUIProvider> <NextUIProvider>
<Head> <Head>
<title>{Config.name}</title> <title>{Config.title}</title>
<meta name="twitter:title" content= {Config.name} /> <meta name="twitter:title" content= {Config.name} />
<meta property="og:site_name" content= {Config.name} key="title" /> <meta property="og:site_name" content= {Config.name} key="title" />
<meta property="og:url" content= {Config.url} key="title" /> <meta property="og:url" content= {Config.url} key="title" />

58
pages/index.js
View File

@ -8,7 +8,7 @@ import SongInfo from "../components/SongInfo";
// Why do u have to proxy requests... it's so dumb LOL // 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 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 { export default class Home extends Component {
@ -20,7 +20,8 @@ export default class Home extends Component {
this.state = { this.state = {
loading: true, loading: true,
id: undefined, id: undefined,
isValidScoresaber: true, isValidSteamId: true,
websiteType: "ScoreSaber",
data: undefined, data: undefined,
showPlayerStats: true, showPlayerStats: true,
showScore: false, showScore: false,
@ -90,9 +91,14 @@ export default class Home extends Component {
const urlSearchParams = new URLSearchParams(window.location.search); const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries()); 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; const id = params.id;
if (!id) { // Check if the id param is valid if (!id) { // Check if the id param is valid
this.setState({ loading: false, isValidScoresaber: false }); this.setState({ loading: false, isValidSteamId: false });
return; return;
} }
@ -101,6 +107,16 @@ export default class Home extends Component {
this.setState({ showPlayerStats: false }); 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; let shouldConnectSocket = false;
// Check if the player wants to show their current score information // Check if the player wants to show their current score information
@ -118,33 +134,21 @@ export default class Home extends Component {
if (shouldConnectSocket) { if (shouldConnectSocket) {
this.connectSocket(); 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 * @returns
*/ */
async updateData(id) { 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' mode: 'cors'
}); });
if (data.status === 422) { // Invalid scoresaber account (I think??)
this.setState({ loading: false, isValidScoresaber: false });
return;
}
const json = await data.json(); const json = await data.json();
if (json.errorMessage) { // Invalid scoresaber account if (json.errorMessage) { // Invalid steam account
this.setState({ loading: false, isValidScoresaber: false }); this.setState({ loading: false, isValidSteamId: false });
return; return;
} }
this.setState({ loading: false, id: id, data: json }); this.setState({ loading: false, id: id, data: json });
@ -300,10 +304,10 @@ export default class Home extends Component {
} }
render() { 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 // When in the main menu, show this colour so it's actually readable
if (!isValidScoresaber && !loading) { if (!isValidSteamId && !loading) {
const body = document.body; const body = document.body;
body.style.backgroundColor = "#181a1b"; body.style.backgroundColor = "#181a1b";
} }
@ -313,19 +317,20 @@ export default class Home extends Component {
<div className={'loading'}> <div className={'loading'}>
<h2>Loading...</h2> <h2>Loading...</h2>
</div> </div>
: !isValidScoresaber ? : !isValidSteamId ?
<div className={'invalid-player'}> <div className={'invalid-player'}>
<h1>BeatSaber Overlay</h1> <h1>BeatSaber Overlay</h1>
<div style={{ fontWeight: 'bold', marginBottom: '50px' }}> <div style={{ fontWeight: 'bold', marginBottom: '50px' }}>
<p>This is currently just a simple overlay for OBS displaying ScoreSaber stats.</p> <p>This is currently just a simple overlay for OBS displaying ScoreSaber or BeatLeader stats.</p>
<p>If you have any suggestions you can message me on discord @ Fascinated#4719</p> <p>If you have any suggestions you can message me on discord @ Fascinated#4719</p>
</div> </div>
<p>Provide a valid scoresaber id</p> <p>Provide a valid steam id for scoresaber or beatleader</p>
<p>Example: {document.location.origin}?id=76561198449412074</p> <p>Example: {document.location.origin}?id=76561198449412074</p>
<p>Example with Score Info: {document.location.origin}?id=76561198449412074&scoreinfo=true</p> <p>Example with Score Info: {document.location.origin}?id=76561198449412074&scoreinfo=true</p>
<div className={'info'}> <div className={'info'}>
<div> <div>
<h3>Options</h3> <h3>Options</h3>
<p>beatleader - Can be &quot;true&quot; if you wish to get player data from BeatLeader rather than scoresaber</p>
<p>scoreinfo - Can be &quot;true&quot; if you want to show your current score (needs HTTP Status)</p> <p>scoreinfo - Can be &quot;true&quot; if you want to show your current score (needs HTTP Status)</p>
<p>playerstats - Can be &quot;false&quot; if you disable showing your stats (pp, global pos, etc)</p> <p>playerstats - Can be &quot;false&quot; if you disable showing your stats (pp, global pos, etc)</p>
<p>songinfo - Can be &quot;true&quot; if want to see information about the song (song name, bsr, song art, etc)</p> <p>songinfo - Can be &quot;true&quot; if want to see information about the song (song name, bsr, song art, etc)</p>
@ -337,12 +342,13 @@ export default class Home extends Component {
<div className={'overlay'}> <div className={'overlay'}>
{ this.state.showPlayerStats ? { this.state.showPlayerStats ?
<div className={'player-stats-container'}> <div className={'player-stats-container'}>
<Avatar url={data.profilePicture} /> <Avatar url={data.profilePicture || data.avatar} />
<PlayerStats <PlayerStats
pp={data.pp.toLocaleString()} pp={data.pp.toLocaleString()}
globalPos={data.rank.toLocaleString()} globalPos={data.rank.toLocaleString()}
country={data.country} country={data.country}
countryRank={data.countryRank.toLocaleString()} countryRank={data.countryRank.toLocaleString()}
websiteType={websiteType}
/> />
</div> : </div> :
"" ""