- {props.pp}pp{" "}
+ {pp}pp{" "}
- ({props.websiteType})
+ ({leaderboardType})
-
#{props.globalPos}
+
#{globalPos}
-
#{props.countryRank}
+
#{countryRank}
- {props.loadedDuringSong ? (
+ {loadedDuringSong ? (
<>
Connected during song, some data
diff --git a/src/components/ScoreStats.js b/src/components/ScoreStats.js
index 59b2bd7..eb7b649 100644
--- a/src/components/ScoreStats.js
+++ b/src/components/ScoreStats.js
@@ -1,60 +1,47 @@
-import { Component } from "react";
-
+import { useSettingsStore } from "../store/overlaySettingsStore";
+import { useSongDataStore } from "../store/songDataStore";
import styles from "../styles/scoreStats.module.css";
-import Utils from "../utils/utils";
-export default class ScoreStats extends Component {
- constructor(params) {
- super(params);
- this.lastKnownPP = undefined;
+export default function ScoreStats() {
+ const [showScoreInfo] = useSettingsStore((store) => [store.showScoreInfo]);
+ const [percentage, currentScore, currentPP, saberA, saberB, isLoading] =
+ useSongDataStore((store) => [
+ store.percentage,
+ store.currentScore,
+ store.currentPP,
+ store.saberA,
+ store.saberB,
+ store.isLoading,
+ ]);
+
+ if (isLoading) {
+ return null;
}
- /**
- * Returns the average of the provided numbers list
- *
- * @param {List} hitValues
- * @returns The average value
- */
- getAverage(hitValues) {
- return hitValues.reduce((p, c) => p + c, 0) / hitValues.length;
+ if (!showScoreInfo) {
+ return null;
}
- render() {
- const data = this.props.data;
- let currentPP = Utils.calculatePP(
- data.mapStarCount,
- data.percentage.replace("%", ""),
- data.websiteType
- );
- if (this.lastKnownPP === undefined) {
- this.lastKnownPP = currentPP;
- }
- if (currentPP === undefined) {
- currentPP = this.lastKnownPP;
- }
- this.lastKnownPP = currentPP;
-
- return (
-
-
-
{data.percentage}
-
{data.currentScore.toLocaleString()}
- {currentPP !== undefined ?
{currentPP.toFixed(0)}pp
: null}
+ return (
+
+
+
{percentage}
+
{currentScore.toLocaleString()}
+ {currentPP !== undefined ?
{currentPP.toFixed(0)}pp
: null}
+
+
Average Cut
+
+
+
{saberA.averagePreSwing.toFixed(2)}
+
{saberA.averagePostSwing.toFixed(2)}
+
{saberA.cutDistanceScore.toFixed(2)}
-
Average Cut
-
-
-
{data.SaberA.averagePreSwing.toFixed(2)}
-
{data.SaberA.averagePostSwing.toFixed(2)}
-
{data.SaberA.cutDistanceScore.toFixed(2)}
-
-
-
{data.SaberB.averagePreSwing.toFixed(2)}
-
{data.SaberB.averagePostSwing.toFixed(2)}
-
{data.SaberB.cutDistanceScore.toFixed(2)}
-
+
+
{saberB.averagePreSwing.toFixed(2)}
+
{saberB.averagePostSwing.toFixed(2)}
+
{saberB.cutDistanceScore.toFixed(2)}
- );
- }
+
+ );
}
diff --git a/src/components/SongInfo.js b/src/components/SongInfo.js
index 171d05a..d001293 100644
--- a/src/components/SongInfo.js
+++ b/src/components/SongInfo.js
@@ -1,118 +1,125 @@
import Image from "next/future/image";
-import { Component } from "react";
+import { useSettingsStore } from "../store/overlaySettingsStore";
+import { useSongDataStore } from "../store/songDataStore";
import styles from "../styles/songInfo.module.css";
-export default class SongInfo extends Component {
- constructor(params) {
- super(params);
- this.state = {
- diffColor: undefined,
- };
+/**
+ * Format the given ms
+ *
+ * @param {Number} millis
+ * @returns The formatted time
+ */
+function msToMinSeconds(millis) {
+ const minutes = Math.floor(millis / 60000);
+ const seconds = Number(((millis % 60000) / 1000).toFixed(0));
+ return seconds === 60
+ ? minutes + 1 + ":00"
+ : minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
+}
+
+/**
+ * Update the difficulity color from the given difficulity
+ *
+ * @param {string} diff
+ */
+function formatDiff(diff) {
+ if (diff === "ExpertPlus") {
+ return "#8f48db";
}
-
- componentDidMount() {
- const data = this.props.data.songData.status.beatmap;
- this.formatDiff(data.difficulty);
+ if (diff === "Expert") {
+ return "#bf2a42";
}
-
- /**
- * Update the difficulity color from the given difficulity
- *
- * @param {string} diff
- */
- formatDiff(diff) {
- if (diff === "Expert+") {
- this.setState({ diffColor: "#8f48db" });
- }
- if (diff === "Expert") {
- this.setState({ diffColor: "#bf2a42" });
- }
- if (diff === "Hard") {
- this.setState({ diffColor: "tomato" });
- }
- if (diff === "Normal") {
- this.setState({ diffColor: "#59b0f4" });
- }
- if (diff === "Easy") {
- this.setState({ diffColor: "MediumSeaGreen" });
- }
+ if (diff === "Hard") {
+ return "tomato";
}
-
- /**
- * Format the given ms
- *
- * @param {Number} millis
- * @returns The formatted time
- */
- msToMinSeconds(millis) {
- const minutes = Math.floor(millis / 60000);
- const seconds = Number(((millis % 60000) / 1000).toFixed(0));
- return seconds === 60
- ? minutes + 1 + ":00"
- : minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
+ if (diff === "Normal") {
+ return "#59b0f4";
}
-
- render() {
- const data = this.props.data.songData.status.beatmap;
- const beatSaverData = this.props.data.beatSaverData.data;
- const mapArt = beatSaverData.mapArt;
- const bsr = beatSaverData.bsr;
- const { songName, songAuthorName, difficulty } = data;
- const songTimerPercentage =
- (this.props.data.currentSongTime / data.length) * 100000;
-
- const cssVars = document.querySelector("." + styles.songInfoContainer);
- if (cssVars) {
- if (!this.props.data.isPlayerInfoVisible) {
- cssVars.style.setProperty("margin-top", "5px");
- cssVars.style.setProperty("--pos", "none");
- } else {
- cssVars.style.setProperty("margin-top", "0px");
- cssVars.style.setProperty("--pos", 0);
- }
- }
-
- return (
-
-
-
-
- {songName.length > 35
- ? songName.substring(0, 35) + "..."
- : songName}
-
-
{songAuthorName}
-
-
- {difficulty}
-
-
!bsr {bsr}
-
-
- {this.msToMinSeconds(this.props.data.currentSongTime * 1000)}/
- {this.msToMinSeconds(data.length)}
-
-
-
-
- );
+ if (diff === "Easy") {
+ return "MediumSeaGreen";
}
}
+
+export default function SongInfo() {
+ const [showSongInfo, shouldReplacePlayerInfoWithScore] = useSettingsStore(
+ (store) => [store.showSongInfo, store.shouldReplacePlayerInfoWithScore]
+ );
+ const [
+ isLoading,
+ bsr,
+ mapArt,
+ songTitle,
+ songSubTitle,
+ songDifficulty,
+ currentSongTime,
+ songLength,
+ ] = useSongDataStore((store) => [
+ store.isLoading,
+ store.bsr,
+ store.mapArt,
+ store.songTitle,
+ store.songSubTitle,
+ store.songDifficulty,
+ store.currentSongTime,
+ store.songLength,
+ ]);
+
+ if (!showSongInfo) {
+ return null;
+ }
+
+ if (isLoading) {
+ return null;
+ }
+
+ const songTimerPercentage = (currentSongTime / songLength) * 100000;
+ const diffColor = formatDiff(songDifficulty);
+
+ return (
+
+
+
+
+ {songTitle.length > 35
+ ? songTitle.substring(0, 35) + "..."
+ : songTitle}
+
+
{songSubTitle}
+
+
+ {songDifficulty.replace("Plus", "+")}
+
+
!bsr {bsr}
+
+
+ {msToMinSeconds(currentSongTime * 1000)}/{msToMinSeconds(songLength)}
+
+
+
+
+ );
+}
diff --git a/src/consts/LeaderboardType.js b/src/consts/LeaderboardType.js
index a78148c..4cd8d03 100644
--- a/src/consts/LeaderboardType.js
+++ b/src/consts/LeaderboardType.js
@@ -1,7 +1,7 @@
import env from "@beam-australia/react-env";
import { VARS } from "./EnvVars";
-const WebsiteTypes = {
+const LeaderboardType = {
ScoreSaber: {
ApiUrl: {
PlayerData:
@@ -33,4 +33,4 @@ const WebsiteTypes = {
},
};
-export default WebsiteTypes;
+export default LeaderboardType;
diff --git a/src/helpers/map/mapHelpers.ts b/src/helpers/map/mapHelpers.ts
new file mode 100644
index 0000000..2951dd0
--- /dev/null
+++ b/src/helpers/map/mapHelpers.ts
@@ -0,0 +1,3 @@
+export function getMapHashFromLevelId(levelId: string): string {
+ return levelId.replace("custom_level_", "");
+}
diff --git a/src/helpers/web/getPlayerData.js b/src/helpers/web/getPlayerData.js
new file mode 100644
index 0000000..e657378
--- /dev/null
+++ b/src/helpers/web/getPlayerData.js
@@ -0,0 +1,14 @@
+import axios from "axios";
+import LeaderboardType from "../../consts/LeaderboardType";
+
+export async function getPlayerData(leaderboardType, playerId) {
+ const data = await axios.get(
+ LeaderboardType[leaderboardType].ApiUrl.PlayerData.replace("%s", playerId),
+ {
+ headers: {
+ "x-requested-with": "BeatSaber Overlay",
+ },
+ }
+ );
+ return data;
+}
diff --git a/src/helpers/websocketClient.ts b/src/helpers/websocketClient.ts
new file mode 100644
index 0000000..3962b50
--- /dev/null
+++ b/src/helpers/websocketClient.ts
@@ -0,0 +1,217 @@
+import { w3cwebsocket as W3CWebSocket } from "websocket";
+import { useSettingsStore } from "../store/overlaySettingsStore";
+import { usePlayerDataStore } from "../store/playerDataStore";
+import { useSongDataStore } from "../store/songDataStore";
+import Utils from "../utils/utils";
+import { getMapHashFromLevelId } from "./map/mapHelpers";
+
+const ip = useSettingsStore.getState().socketAddr;
+let hasConnected = false;
+
+let cutData: any = [];
+cutData.saberA = {
+ count: [0, 0, 0],
+ totalScore: [0, 0, 0],
+};
+cutData.saberB = {
+ count: [0, 0, 0],
+ totalScore: [0, 0, 0],
+};
+
+const updatePlayerData = usePlayerDataStore.getState().updatePlayerData;
+
+export function connectClient() {
+ const client = new W3CWebSocket(`ws://${ip}:6557/socket`);
+
+ if (hasConnected) {
+ return;
+ }
+
+ client.onopen = () => {
+ console.log("WebSocket Client Connected");
+ hasConnected = true;
+ };
+ client.onclose = () => {
+ if (hasConnected) {
+ console.log(
+ "Lost connection to HTTPSiraStatus, attempting to reconnect."
+ );
+ connectClient();
+ } else {
+ hasConnected = false;
+ console.log(
+ "Unable to connect to HTTPSiraStatus, retrying in 30 seconds."
+ );
+
+ setTimeout(() => {
+ connectClient();
+ }, 30_000);
+ }
+ };
+ client.onmessage = (message: any) => {
+ const data: string = message.data;
+ const json = JSON.parse(data);
+ if (!handlers[json.event]) {
+ console.log("Unhandled message from HTTP Status. (" + json.event + ")");
+ return;
+ }
+ handlers[json.event](json || []);
+ try {
+ const time = json.status.performance.currentSongTime;
+ if (time !== undefined && time != null) {
+ useSongDataStore.setState({ currentSongTime: time });
+ }
+ } catch (e) {}
+ };
+}
+
+const handlers: any = {
+ hello: (data: any) => {
+ console.log("Hello from HttpSiraStatus");
+
+ if (data.status && data.status.beatmap) {
+ console.log("Going into level during song, resetting data.");
+ const state = useSongDataStore.getState();
+ const {
+ levelId,
+ difficultyEnum,
+ characteristic,
+ songName,
+ songSubName,
+ levelAuthorName,
+ length,
+ } = data.status.beatmap;
+ state.reset();
+ state.setInSong(true);
+ state.updateMapData(
+ getMapHashFromLevelId(levelId),
+ difficultyEnum,
+ characteristic,
+ songName,
+ songSubName || levelAuthorName,
+ length
+ );
+
+ const { score, relativeScore } = data.status.performance;
+ let finalScore = score;
+ if (finalScore == 0) {
+ finalScore = state.currentScore;
+ }
+ const percent = relativeScore * 100;
+
+ state.setCurrentScore(finalScore);
+ state.setPercent(percent.toFixed(2) + "%");
+ }
+ },
+
+ songStart: (data: any) => {
+ console.log("Going into level during song, resetting data.");
+ const state = useSongDataStore.getState();
+ const {
+ levelId,
+ difficultyEnum,
+ characteristic,
+ songName,
+ songSubName,
+ length,
+ } = data.status.beatmap;
+
+ state.reset();
+ state.setInSong(true);
+ state.updateMapData(
+ getMapHashFromLevelId(levelId),
+ difficultyEnum,
+ characteristic,
+ songName,
+ songSubName,
+ length
+ );
+ },
+
+ scoreChanged: (data: any) => {
+ const state = useSongDataStore.getState();
+ const { status } = data;
+ const { score, relativeScore } = status.performance;
+ let finalScore = score;
+ if (finalScore == 0) {
+ finalScore = state.currentScore;
+ }
+ const percent = relativeScore * 100;
+
+ state.setCurrentScore(finalScore);
+ state.setPercent(percent.toFixed(2) + "%");
+
+ const leaderboardType = useSettingsStore.getState().leaderboardType;
+ let currentPP = Utils.calculatePP(
+ state.mapStarCount,
+ percent,
+ leaderboardType
+ );
+ if (currentPP === undefined) {
+ return;
+ }
+
+ state.setPp(currentPP);
+ },
+
+ noteFullyCut: (data: any) => {
+ const { noteCut } = data;
+ const state: any = useSongDataStore.getState();
+ const parts = noteCut.saberType.split("Saber");
+ const saberType = "saber" + parts[1];
+
+ let beforeCutScore = 0.0;
+ let afterCutScore = 0.0;
+ let cutDistanceScore = 0.0;
+
+ const cutDataSaber = cutData[saberType];
+ cutDataSaber.count[0]++;
+ cutDataSaber.count[1]++;
+ cutDataSaber.count[2]++;
+ cutDataSaber.totalScore[0] += noteCut.beforeCutScore;
+ cutDataSaber.totalScore[1] += noteCut.afterCutScore;
+ cutDataSaber.totalScore[2] += noteCut.cutDistanceScore;
+ beforeCutScore = cutDataSaber.totalScore[0] / cutDataSaber.count[0];
+ afterCutScore = cutDataSaber.totalScore[1] / cutDataSaber.count[1];
+ cutDistanceScore = cutDataSaber.totalScore[2] / cutDataSaber.count[2];
+
+ state.setSaberData(saberType, {
+ averagePreSwing: beforeCutScore,
+ averagePostSwing: afterCutScore,
+ cutDistanceScore: cutDistanceScore,
+ });
+ },
+
+ finished: () => {
+ const state = useSongDataStore.getState();
+ state.reset();
+ state.setInSong(false);
+ updatePlayerData();
+ },
+ menu: () => {
+ const state = useSongDataStore.getState();
+ state.reset();
+ state.setInSong(false);
+ updatePlayerData();
+ },
+ softFail: () => {
+ const state = useSongDataStore.getState();
+ state.setFailed(true);
+ },
+ pause: () => {
+ const state = useSongDataStore.getState();
+ state.setPaused(true);
+ },
+ resume: () => {
+ const state = useSongDataStore.getState();
+ state.setPaused(false);
+ },
+ noteCut: () => {},
+ noteMissed: () => {},
+ noteSpawned: () => {},
+ bombMissed: () => {},
+ beatmapEvent: () => {},
+ energyChanged: () => {},
+ obstacleEnter: () => {},
+ obstacleExit: () => {},
+};
diff --git a/src/pages/index.js b/src/pages/index.js
index 2dde296..f532853 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -37,7 +37,7 @@ export default class Home extends Component {
values: {
socketAddr: undefined,
- leaderboard: "ScoreSaber",
+ leaderboardType: "ScoreSaber",
showPlayerStats: true,
showScoreInfo: false,
showSongInfo: false,
@@ -72,7 +72,10 @@ export default class Home extends Component {
const json = JSON.parse(localStorage.getItem("values"));
let values = {};
Object.entries(json.values).forEach((value) => {
- if (value[0] !== undefined) {
+ if (
+ value[0] !== undefined &&
+ this.state.values[value[0]] !== undefined
+ ) {
values[value[0]] = value[1];
}
});
@@ -96,10 +99,6 @@ export default class Home extends Component {
if (value[1] === undefined) {
return;
}
- if (value[0] == "leaderboard" && value[1] === "BeatLeader") {
- values += `&beatLeader=true`;
- return;
- }
values += `&${value[0]}=${value[1]}`;
});
@@ -234,9 +233,11 @@ export default class Home extends Component {
Ranked leaderboard
{
- this.updateValue("leaderboard", value);
+ this.updateValue("leaderboardType", value);
}}
>
[state.setOverlaySettings, state.mounted, state.setMounted]
+ );
+ const updatePlayerData = usePlayerDataStore(
+ (state) => state.updatePlayerData
+ );
- constructor(props) {
- super(props);
+ useEffect(() => {
+ if (!mounted && props.isValidSteamId) {
+ setMounted(true);
- this.cutData = [];
- this.cutData.SaberA = {
- count: [0, 0, 0],
- totalScore: [0, 0, 0],
- };
- this.cutData.SaberB = {
- count: [0, 0, 0],
- totalScore: [0, 0, 0],
- };
-
- this._mounted = false;
- this.state = {
- hasError: false,
-
- // Steam ID
- id: undefined,
-
- // Values from the query parameters
- loadingPlayerData: true,
- isConnectedToSocket: false,
- isValidSteamId: false,
- websiteType: "ScoreSaber",
- showPlayerStats: true,
- showScore: false,
- showSongInfo: false,
- shouldReplacePlayerInfoWithScore: false,
-
- // Internal
- loadedDuringSong: false,
- socket: undefined,
- data: undefined,
- beatSaverData: undefined,
- songInfo: undefined,
- mapStarCount: undefined,
-
- // UI elements
- isPlayerInfoVisible: false,
- isVisible: false,
-
- // Score data
- paused: true,
- failed: false,
- currentSongTime: 0,
- currentScore: 0,
- percentage: "100.00%",
- SaberA: {
- cutDistanceScore: 0.0,
- averagePreSwing: 0.0,
- averagePostSwing: 0.0,
- },
- SaberB: {
- cutDistanceScore: 0.0,
- averagePreSwing: 0.0,
- averagePostSwing: 0.0,
- },
- };
- this.setupTimer();
- }
-
- async componentDidMount() {
- if (this._mounted === true) {
- return;
- }
- this._mounted = true;
-
- if (this.state.hasError) {
- // Reload the page if there has been an error
- console.log("There has been an error and the page was reloaded.");
- return Router.reload(window.location.pathname);
- }
-
- console.log("Initializing...");
- this.#_beatSaverURL =
- document.location.origin + "/api/beatsaver/map?hash=%s";
- const urlSearchParams = new URLSearchParams(window.location.search);
- const params = Object.fromEntries(urlSearchParams.entries());
-
- // Check what website the player wants to use
- if (params.beatleader === "true" || params.beatLeader === "true") {
- this.setState({ websiteType: "BeatLeader" });
- }
-
- const id = params.id;
- if (!id) {
- // Check if the id param is valid
- this.setState({ isValidSteamId: false, loadingPlayerData: false });
- return;
- }
-
- // Checks if the steam id is valid
- const isValid = await this.validateSteamId(id);
- if (!isValid) {
- this.setState({ isValidSteamId: false, loadingPlayerData: false });
- return;
- }
- this.setState({ id: id, isValidSteamId: true });
-
- // Check if the player wants to disable their stats (pp, global pos, etc)
- if (params.showPlayerStats === "false" || params.playerstats === "false") {
- this.setState({ showPlayerStats: false });
- }
-
- if (this.state.showPlayerStats == true || params.playerstats == "true") {
- setTimeout(async () => {
- await this.updateData(id);
- }, 10); // 10ms
- this.setState({ isPlayerInfoVisible: true });
- }
-
- let shouldConnectSocket = false;
-
- // Check if the player wants to show their current score information
- if (params.showScoreInfo === "true" || params.scoreinfo === "true") {
- this.setState({ showScore: true });
- shouldConnectSocket = true;
- }
-
- if (params.shouldReplacePlayerInfoWithScore === "true") {
- this.setState({ shouldReplacePlayerInfoWithScore: true });
- }
-
- // Check if the player wants to show the current song
- if (params.showSongInfo === "true" || params.songinfo === "true") {
- this.setState({ showSongInfo: true });
- shouldConnectSocket = true;
- }
-
- if (shouldConnectSocket) {
- if (this.state.isConnectedToSocket) return;
- this.connectSocket(params.socketaddress);
- }
- }
-
- // Handle Errors
- static getDerivedStateFromError(error) {
- return this.setState({ hasError: true });
- }
- componentDidCatch(error, errorInfo) {
- console.log({ error, errorInfo });
- }
- // ---
-
- // I'd love if HTTP Status just gave this data lmao
- // HttpSiraStatus(https://github.com/denpadokei/HttpSiraStatus) does give this data.
- isCurrentSongTimeProvided = false;
- // we don't need to reset this to false because it is highly unlikely for a player to swap mods within a browser session
-
- /**
- * Setup the timer for the song time
- */
- setupTimer() {
- setInterval(() => {
- if (this.isCurrentSongTimeProvided) {
- return;
- }
- if (!this.state.paused && this.state.beatSaverData !== undefined) {
- this.setState({ currentSongTime: this.state.currentSongTime + 1 });
- }
- }, 1000);
- }
-
- /**
- * Update the current song time
- *
- * @param {[]} data The song data
- */
- handleCurrentSongTime(data) {
- try {
- const time = data.status.performance.currentSongTime;
- if (time !== undefined && time != null) {
- this.isCurrentSongTimeProvided = true;
- this.setState({ currentSongTime: time });
- }
- } catch (e) {
- // do nothing
- }
- }
-
- /**
- * Fetch and update the data from the respective platform
- *
- * @param {string} id The steam id of the player
- * @returns
- */
- async updateData(id) {
- const data = await fetch(
- Utils.getWebsiteApi(this.state.websiteType).ApiUrl.PlayerData.replace(
- "%s",
- id
- ),
- {
- headers: {
- "X-Requested-With": "BeatSaber Overlay",
- },
- }
- );
- try {
- const json = await data.json();
- this.setState({
- loadingPlayerData: false,
- id: id,
- data: json,
- });
- } catch (e) {
- // Catch error and use last known data
- console.error(e);
- }
- }
-
- /**
- * Checks if the given steam id is valid or not
- *
- * @param {id} The Steam ID of the player to validate
- */
- async validateSteamId(id) {
- if (id.length !== 17) {
- return false;
- }
- const data = await fetch(`/api/validateid?steamid=${id}`);
- const json = await data.json();
- return json.message === "Valid";
- }
-
- /**
- * Setup the HTTP Status connection
- */
- connectSocket(socketAddress) {
- socketAddress =
- (socketAddress === undefined
- ? "ws://localhost"
- : `ws://${socketAddress}`) + ":6557/socket";
- if (this.state.isConnectedToSocket) return;
-
- if (this.state.isVisible) {
- this.resetData(false);
- }
-
- console.log(`Connecting to ${socketAddress}`);
- const socket = new WebSocket(socketAddress);
- socket.addEventListener("open", () => {
- console.log(`Connected to ${socketAddress}`);
- this.setState({ isConnectedToSocket: true });
- });
- socket.addEventListener("close", () => {
- console.log(
- "Attempting to re-connect to the HTTP Status socket in 60 seconds."
- );
- this.resetData(false);
- this.setState({ isConnectedToSocket: false });
- setTimeout(() => this.connectSocket(), 60_000);
- });
- socket.addEventListener("message", (message) => {
- const json = JSON.parse(message.data);
- this.handleCurrentSongTime(json);
- if (!this.handlers[json.event]) {
- console.log("Unhandled message from HTTP Status. (" + json.event + ")");
- return;
- }
- this.handlers[json.event](json || []);
- });
- this.setState({ socket: socket });
- }
-
- /**
- * Set the current songs beat saver url in {@link #_beatSaverURL}
- *
- * @param {[]} songData
- */
- async setBeatSaver(songData) {
- console.log("Updating BeatSaver info");
- const data = await fetch(
- this.#_beatSaverURL.replace("%s", songData.levelId)
- );
- const json = await data.json();
- this.setState({ beatSaverData: json });
-
- const { characteristic, levelId, difficulty } = songData;
- let mapHash = levelId.replace("custom_level_", "");
- let mapStars = undefined;
- if (this.state.websiteType === "BeatLeader") {
- mapStars = await LeaderboardType.BeatLeader.getMapStarCount(
- mapHash,
- difficulty.replace("+", "Plus"),
- characteristic
- );
- }
- if (this.state.websiteType === "ScoreSaber") {
- mapStars = await LeaderboardType.ScoreSaber.getMapStarCount(
- mapHash,
- difficulty.replace("+", "Plus"),
- characteristic
- );
- }
- this.setState({ mapStarCount: mapStars });
- }
-
- /**
- * Cleanup the data and get ready for the next song
- *
- * @param {boolean} visible Whether to show info other than the player stats
- */
- async resetData(visible, loadedDuringSong = false) {
- if (this.state.showPlayerStats == true) {
- setTimeout(async () => {
- await this.updateData(this.state.id);
- }, 1000); // 1 second
- }
-
- if (visible && this.state.shouldReplacePlayerInfoWithScore) {
- this.setState({ isPlayerInfoVisible: false });
- } else {
- this.setState({ isPlayerInfoVisible: true });
- }
-
- this.cutData = [];
- this.cutData.SaberA = {
- count: [0, 0, 0],
- totalScore: [0, 0, 0],
- };
- this.cutData.SaberB = {
- count: [0, 0, 0],
- totalScore: [0, 0, 0],
- };
- this.setState({
- SaberA: {
- cutDistanceScore: 0.0,
- averagePreSwing: 0.0,
- averagePostSwing: 0.0,
- },
- SaberB: {
- cutDistanceScore: 0.0,
- averagePreSwing: 0.0,
- averagePostSwing: 0.0,
- },
- songInfo: undefined,
- beatSaverData: undefined,
- currentSongTime: 0,
- currentScore: 0,
- percentage: "100.00%",
- isVisible: visible,
- loadedDuringSong: loadedDuringSong,
- mapStarCount: undefined,
- });
- }
-
- // The HTTP Status handlers
- handlers = {
- hello: (data) => {
- console.log("Hello from HTTP Status!");
- if (
- data.status &&
- data.status.beatmap &&
- this.state.songData === undefined
- ) {
- console.log("Going into level during song, resetting data.");
- this.resetData(true, true);
- this.setState({ songData: data, paused: false });
- if (this.state.showScore || this.state.showSongInfo) {
- this.setBeatSaver(data.status.beatmap);
+ async function setup() {
+ await setOverlaySettings(query);
+ const showSongInfo = useSettingsStore.getState().showSongInfo;
+ const showScoreInfo = useSettingsStore.getState().showScoreInfo;
+ if (showSongInfo || (showScoreInfo && typeof window !== "undefined")) {
+ await connectClient();
+ }
+ const showPlayerStats = useSettingsStore.getState().showPlayerStats;
+ if (showPlayerStats) {
+ await updatePlayerData();
}
}
- },
- scoreChanged: (data) => {
- const { status } = data;
- const { score, relativeScore } = status.performance;
- let finalScore = score;
- if (finalScore == 0) {
- finalScore = this.state.currentScore;
- }
- const percent = relativeScore * 100;
- this.setState({
- currentScore: finalScore,
- percentage: percent.toFixed(2) + "%",
- });
- },
- noteFullyCut: (data) => {
- const { noteCut } = data;
-
- let beforeCutScore = 0.0;
- let afterCutScore = 0.0;
- let cutDistanceScore = 0.0;
-
- const cutDataSaber = this.cutData[noteCut.saberType];
- cutDataSaber.count[0]++;
- cutDataSaber.count[1]++;
- cutDataSaber.count[2]++;
- cutDataSaber.totalScore[0] += noteCut.beforeCutScore;
- cutDataSaber.totalScore[1] += noteCut.afterCutScore;
- cutDataSaber.totalScore[2] += noteCut.cutDistanceScore;
- beforeCutScore = cutDataSaber.totalScore[0] / cutDataSaber.count[0];
- afterCutScore = cutDataSaber.totalScore[1] / cutDataSaber.count[1];
- cutDistanceScore = cutDataSaber.totalScore[2] / cutDataSaber.count[2];
-
- const cutData = this.state[noteCut.saberType];
- cutData.averagePreSwing = beforeCutScore;
- cutData.averagePostSwing = afterCutScore;
- cutData.cutDistanceScore = cutDistanceScore;
- this.setState({ [noteCut.saberType]: cutData });
- },
- songStart: (data) => {
- console.log("Going into level, resetting data.");
- this.resetData(true);
- this.setState({ songData: data, paused: false });
- if (this.state.showScore || this.state.showSongInfo) {
- this.setBeatSaver(data.status.beatmap);
- }
- },
- finished: () => {
- this.resetData(false);
- },
- softFail: () => {
- this.setState({ failed: true });
- },
- pause: () => {
- this.setState({ paused: true });
- },
- resume: () => {
- this.setState({ paused: false });
- },
- menu: () => {
- this.resetData(false);
- },
- noteCut: () => {},
- noteMissed: () => {},
- noteSpawned: () => {},
- bombMissed: () => {},
- beatmapEvent: () => {},
- energyChanged: () => {},
- obstacleEnter: () => {},
- obstacleExit: () => {},
- };
-
- render() {
- const {
- isValidSteamId,
- data,
- websiteType,
- showPlayerStats,
- loadingPlayerData,
- isPlayerInfoVisible,
- shouldReplacePlayerInfoWithScore,
- id,
- } = this.state;
-
- if (loadingPlayerData) {
- return ;
+ setup();
}
+ }, [
+ query,
+ props.isValidSteamId,
+ setOverlaySettings,
+ mounted,
+ setMounted,
+ updatePlayerData,
+ ]);
+ if (!props.isValidSteamId) {
return (
- <>
-
-
- {!isValidSteamId ? (
-
-
Invalid player, please visit the main page.
-
-
Go Home
-
-
- ) : (
-
- {showPlayerStats &&
- !loadingPlayerData &&
- isPlayerInfoVisible &&
- !shouldReplacePlayerInfoWithScore ? (
-
- ) : (
- <>
- )}
- {this.state.showScore && this.state.isVisible ? (
-
- ) : (
- <>
- )}
- {this.state.showSongInfo &&
- this.state.beatSaverData !== undefined &&
- this.state.isVisible ? (
-
- ) : (
- <>
- )}
-
- )}
-
+
Invalid Steam ID
+ Please check the id field in the url
+
);
}
+
+ return (
+
+ );
+}
+
+export async function getServerSideProps(context) {
+ const steamId = context.query.id;
+ const steamIdResponse = await axios.get(
+ `${process.env.REACT_APP_SITE_URL}/api/validateid?steamid=${steamId}`
+ );
+
+ return {
+ props: {
+ isValidSteamId: steamIdResponse.data.message === "Valid",
+ query: JSON.stringify(context.query),
+ },
+ };
}
diff --git a/src/pages/overlayold.js b/src/pages/overlayold.js
new file mode 100644
index 0000000..ece5337
--- /dev/null
+++ b/src/pages/overlayold.js
@@ -0,0 +1,517 @@
+import { Link, Spinner } from "@nextui-org/react";
+import { NextSeo } from "next-seo";
+import { Component } from "react";
+import PlayerStats from "../components/PlayerStats";
+import ScoreStats from "../components/ScoreStats";
+import SongInfo from "../components/SongInfo";
+import LeaderboardType from "../consts/LeaderboardType";
+import Utils from "../utils/utils";
+
+import styles from "../styles/overlay.module.css";
+
+export default class Overlay extends Component {
+ #_beatSaverURL = "";
+
+ constructor(props) {
+ super(props);
+
+ this.cutData = [];
+ this.cutData.SaberA = {
+ count: [0, 0, 0],
+ totalScore: [0, 0, 0],
+ };
+ this.cutData.SaberB = {
+ count: [0, 0, 0],
+ totalScore: [0, 0, 0],
+ };
+
+ this._mounted = false;
+ this.state = {
+ hasError: false,
+
+ // Steam ID
+ id: undefined,
+
+ // Values from the query parameters
+ loadingPlayerData: true,
+ isConnectedToSocket: false,
+ isValidSteamId: false,
+ websiteType: "ScoreSaber",
+ showPlayerStats: true,
+ showScore: false,
+ showSongInfo: false,
+ shouldReplacePlayerInfoWithScore: false,
+
+ // Internal
+ loadedDuringSong: false,
+ socket: undefined,
+ data: undefined,
+ beatSaverData: undefined,
+ songInfo: undefined,
+ mapStarCount: undefined,
+
+ // UI elements
+ isPlayerInfoVisible: false,
+ isVisible: false,
+
+ // Score data
+ paused: true,
+ failed: false,
+ currentSongTime: 0,
+ currentScore: 0,
+ percentage: "100.00%",
+ SaberA: {
+ cutDistanceScore: 0.0,
+ averagePreSwing: 0.0,
+ averagePostSwing: 0.0,
+ },
+ SaberB: {
+ cutDistanceScore: 0.0,
+ averagePreSwing: 0.0,
+ averagePostSwing: 0.0,
+ },
+ };
+ this.setupTimer();
+ }
+
+ async componentDidMount() {
+ if (this._mounted === true) {
+ return;
+ }
+ this._mounted = true;
+
+ if (this.state.hasError) {
+ // Reload the page if there has been an error
+ console.log("There has been an error and the page was reloaded.");
+ return Router.reload(window.location.pathname);
+ }
+
+ console.log("Initializing...");
+ this.#_beatSaverURL =
+ document.location.origin + "/api/beatsaver/map?hash=%s";
+ const urlSearchParams = new URLSearchParams(window.location.search);
+ const params = Object.fromEntries(urlSearchParams.entries());
+
+ // Check what website the player wants to use
+ if (params.beatleader === "true" || params.beatLeader === "true") {
+ this.setState({ websiteType: "BeatLeader" });
+ }
+
+ const id = params.id;
+ if (!id) {
+ // Check if the id param is valid
+ this.setState({ isValidSteamId: false, loadingPlayerData: false });
+ return;
+ }
+
+ // Checks if the steam id is valid
+ const isValid = await this.validateSteamId(id);
+ if (!isValid) {
+ this.setState({ isValidSteamId: false, loadingPlayerData: false });
+ return;
+ }
+ this.setState({ id: id, isValidSteamId: true });
+
+ // Check if the player wants to disable their stats (pp, global pos, etc)
+ if (params.showPlayerStats === "false" || params.playerstats === "false") {
+ this.setState({ showPlayerStats: false });
+ }
+
+ if (this.state.showPlayerStats == true || params.playerstats == "true") {
+ setTimeout(async () => {
+ await this.updateData(id);
+ }, 10); // 10ms
+ this.setState({ isPlayerInfoVisible: true });
+ }
+
+ let shouldConnectSocket = false;
+
+ // Check if the player wants to show their current score information
+ if (params.showScoreInfo === "true" || params.scoreinfo === "true") {
+ this.setState({ showScore: true });
+ shouldConnectSocket = true;
+ }
+
+ if (params.shouldReplacePlayerInfoWithScore === "true") {
+ this.setState({ shouldReplacePlayerInfoWithScore: true });
+ }
+
+ // Check if the player wants to show the current song
+ if (params.showSongInfo === "true" || params.songinfo === "true") {
+ this.setState({ showSongInfo: true });
+ shouldConnectSocket = true;
+ }
+
+ if (shouldConnectSocket) {
+ if (this.state.isConnectedToSocket) return;
+ this.connectSocket(params.socketaddress);
+ }
+ }
+
+ // Handle Errors
+ static getDerivedStateFromError(error) {
+ return this.setState({ hasError: true });
+ }
+ componentDidCatch(error, errorInfo) {
+ console.log({ error, errorInfo });
+ }
+ // ---
+
+ // I'd love if HTTP Status just gave this data lmao
+ // HttpSiraStatus(https://github.com/denpadokei/HttpSiraStatus) does give this data.
+ isCurrentSongTimeProvided = false;
+ // we don't need to reset this to false because it is highly unlikely for a player to swap mods within a browser session
+
+ /**
+ * Setup the timer for the song time
+ */
+ setupTimer() {
+ setInterval(() => {
+ if (this.isCurrentSongTimeProvided) {
+ return;
+ }
+ if (!this.state.paused && this.state.beatSaverData !== undefined) {
+ this.setState({ currentSongTime: this.state.currentSongTime + 1 });
+ }
+ }, 1000);
+ }
+
+ /**
+ * Update the current song time
+ *
+ * @param {[]} data The song data
+ */
+ handleCurrentSongTime(data) {
+ try {
+ const time = data.status.performance.currentSongTime;
+ if (time !== undefined && time != null) {
+ this.isCurrentSongTimeProvided = true;
+ this.setState({ currentSongTime: time });
+ }
+ } catch (e) {
+ // do nothing
+ }
+ }
+
+ /**
+ * Fetch and update the data from the respective platform
+ *
+ * @param {string} id The steam id of the player
+ * @returns
+ */
+ async updateData(id) {
+ const data = await fetch(
+ Utils.getWebsiteApi(this.state.websiteType).ApiUrl.PlayerData.replace(
+ "%s",
+ id
+ ),
+ {
+ headers: {
+ "X-Requested-With": "BeatSaber Overlay",
+ },
+ }
+ );
+ try {
+ const json = await data.json();
+ this.setState({
+ loadingPlayerData: false,
+ id: id,
+ data: json,
+ });
+ } catch (e) {
+ // Catch error and use last known data
+ console.error(e);
+ }
+ }
+
+ /**
+ * Checks if the given steam id is valid or not
+ *
+ * @param {id} The Steam ID of the player to validate
+ */
+ async validateSteamId(id) {
+ if (id.length !== 17) {
+ return false;
+ }
+ const data = await fetch(`/api/validateid?steamid=${id}`);
+ const json = await data.json();
+ return json.message === "Valid";
+ }
+
+ /**
+ * Setup the HTTP Status connection
+ */
+ connectSocket(socketAddress) {
+ socketAddress =
+ (socketAddress === undefined
+ ? "ws://localhost"
+ : `ws://${socketAddress}`) + ":6557/socket";
+ if (this.state.isConnectedToSocket) return;
+
+ if (this.state.isVisible) {
+ this.resetData(false);
+ }
+
+ console.log(`Connecting to ${socketAddress}`);
+ const socket = new WebSocket(socketAddress);
+ socket.addEventListener("open", () => {
+ console.log(`Connected to ${socketAddress}`);
+ this.setState({ isConnectedToSocket: true });
+ });
+ socket.addEventListener("close", () => {
+ console.log(
+ "Attempting to re-connect to the HTTP Status socket in 60 seconds."
+ );
+ this.resetData(false);
+ this.setState({ isConnectedToSocket: false });
+ setTimeout(() => this.connectSocket(), 60_000);
+ });
+ socket.addEventListener("message", (message) => {
+ const json = JSON.parse(message.data);
+ this.handleCurrentSongTime(json);
+ if (!this.handlers[json.event]) {
+ console.log("Unhandled message from HTTP Status. (" + json.event + ")");
+ return;
+ }
+ this.handlers[json.event](json || []);
+ });
+ this.setState({ socket: socket });
+ }
+
+ /**
+ * Set the current songs beat saver url in {@link #_beatSaverURL}
+ *
+ * @param {[]} songData
+ */
+ async setBeatSaver(songData) {
+ console.log("Updating BeatSaver info");
+ const data = await fetch(
+ this.#_beatSaverURL.replace("%s", songData.levelId)
+ );
+ const json = await data.json();
+ this.setState({ beatSaverData: json });
+
+ const { characteristic, levelId, difficulty } = songData;
+ let mapHash = levelId.replace("custom_level_", "");
+ let mapStars = undefined;
+ if (this.state.websiteType === "BeatLeader") {
+ mapStars = await LeaderboardType.BeatLeader.getMapStarCount(
+ mapHash,
+ difficulty.replace("+", "Plus"),
+ characteristic
+ );
+ }
+ if (this.state.websiteType === "ScoreSaber") {
+ mapStars = await LeaderboardType.ScoreSaber.getMapStarCount(
+ mapHash,
+ difficulty.replace("+", "Plus"),
+ characteristic
+ );
+ }
+ this.setState({ mapStarCount: mapStars });
+ }
+
+ /**
+ * Cleanup the data and get ready for the next song
+ *
+ * @param {boolean} visible Whether to show info other than the player stats
+ */
+ async resetData(visible, loadedDuringSong = false) {
+ if (this.state.showPlayerStats == true) {
+ setTimeout(async () => {
+ await this.updateData(this.state.id);
+ }, 1000); // 1 second
+ }
+
+ if (visible && this.state.shouldReplacePlayerInfoWithScore) {
+ this.setState({ isPlayerInfoVisible: false });
+ } else {
+ this.setState({ isPlayerInfoVisible: true });
+ }
+
+ this.cutData = [];
+ this.cutData.SaberA = {
+ count: [0, 0, 0],
+ totalScore: [0, 0, 0],
+ };
+ this.cutData.SaberB = {
+ count: [0, 0, 0],
+ totalScore: [0, 0, 0],
+ };
+ this.setState({
+ SaberA: {
+ cutDistanceScore: 0.0,
+ averagePreSwing: 0.0,
+ averagePostSwing: 0.0,
+ },
+ SaberB: {
+ cutDistanceScore: 0.0,
+ averagePreSwing: 0.0,
+ averagePostSwing: 0.0,
+ },
+ songInfo: undefined,
+ beatSaverData: undefined,
+ currentSongTime: 0,
+ currentScore: 0,
+ percentage: "100.00%",
+ isVisible: visible,
+ loadedDuringSong: loadedDuringSong,
+ mapStarCount: undefined,
+ });
+ }
+
+ // The HTTP Status handlers
+ handlers = {
+ hello: (data) => {
+ console.log("Hello from HTTP Status!");
+ if (
+ data.status &&
+ data.status.beatmap &&
+ this.state.songData === undefined
+ ) {
+ console.log("Going into level during song, resetting data.");
+ this.resetData(true, true);
+ this.setState({ songData: data, paused: false });
+ if (this.state.showScore || this.state.showSongInfo) {
+ this.setBeatSaver(data.status.beatmap);
+ }
+ }
+ },
+ scoreChanged: (data) => {
+ const { status } = data;
+ const { score, relativeScore } = status.performance;
+ let finalScore = score;
+ if (finalScore == 0) {
+ finalScore = this.state.currentScore;
+ }
+ const percent = relativeScore * 100;
+ this.setState({
+ currentScore: finalScore,
+ percentage: percent.toFixed(2) + "%",
+ });
+ },
+ noteFullyCut: (data) => {
+ const { noteCut } = data;
+
+ let beforeCutScore = 0.0;
+ let afterCutScore = 0.0;
+ let cutDistanceScore = 0.0;
+
+ const cutDataSaber = this.cutData[noteCut.saberType];
+ cutDataSaber.count[0]++;
+ cutDataSaber.count[1]++;
+ cutDataSaber.count[2]++;
+ cutDataSaber.totalScore[0] += noteCut.beforeCutScore;
+ cutDataSaber.totalScore[1] += noteCut.afterCutScore;
+ cutDataSaber.totalScore[2] += noteCut.cutDistanceScore;
+ beforeCutScore = cutDataSaber.totalScore[0] / cutDataSaber.count[0];
+ afterCutScore = cutDataSaber.totalScore[1] / cutDataSaber.count[1];
+ cutDistanceScore = cutDataSaber.totalScore[2] / cutDataSaber.count[2];
+
+ const cutData = this.state[noteCut.saberType];
+ cutData.averagePreSwing = beforeCutScore;
+ cutData.averagePostSwing = afterCutScore;
+ cutData.cutDistanceScore = cutDistanceScore;
+ this.setState({ [noteCut.saberType]: cutData });
+ },
+ songStart: (data) => {
+ console.log("Going into level, resetting data.");
+ this.resetData(true);
+ this.setState({ songData: data, paused: false });
+ if (this.state.showScore || this.state.showSongInfo) {
+ this.setBeatSaver(data.status.beatmap);
+ }
+ },
+ finished: () => {
+ this.resetData(false);
+ },
+ softFail: () => {
+ this.setState({ failed: true });
+ },
+ pause: () => {
+ this.setState({ paused: true });
+ },
+ resume: () => {
+ this.setState({ paused: false });
+ },
+ menu: () => {
+ this.resetData(false);
+ },
+ noteCut: () => {},
+ noteMissed: () => {},
+ noteSpawned: () => {},
+ bombMissed: () => {},
+ beatmapEvent: () => {},
+ energyChanged: () => {},
+ obstacleEnter: () => {},
+ obstacleExit: () => {},
+ };
+
+ render() {
+ const {
+ isValidSteamId,
+ data,
+ websiteType,
+ showPlayerStats,
+ loadingPlayerData,
+ isPlayerInfoVisible,
+ shouldReplacePlayerInfoWithScore,
+ id,
+ } = this.state;
+
+ if (loadingPlayerData) {
+ return ;
+ }
+
+ return (
+ <>
+
+
+ {!isValidSteamId ? (
+
+
Invalid player, please visit the main page.
+
+
Go Home
+
+
+ ) : (
+
+ {showPlayerStats && !loadingPlayerData && isPlayerInfoVisible ? (
+ shouldReplacePlayerInfoWithScore ? (
+ <>
+ ) : (
+
+ )
+ ) : (
+ <>
+ )}
+ {this.state.showScore && this.state.isVisible ? (
+
+ ) : (
+ <>
+ )}
+ {this.state.showSongInfo &&
+ this.state.beatSaverData !== undefined &&
+ this.state.isVisible ? (
+
+ ) : (
+ <>
+ )}
+
+ )}
+