Added support for loading during song

pages/overlay.js

@@ -26,6 +26,7 @@ export default class Overlay extends Component {
 			showPlayerStats: true,
 			showScore: false,
 			showSongInfo: false,
+      loadedDuringSong: false,
 
 			socket: undefined,
 			isVisible: false,
@@ -267,7 +268,7 @@ export default class Overlay extends Component {
 	 *
 	 * @param {boolean} visible Whether to show info other than the player stats
 	 */
-	async resetData(visible) {
+	async resetData(visible, loadedDuringSong = false) {
 		if (this.state.showPlayerStats == true) {
 			setTimeout(async () => {
 				await this.updateData(this.state.id);
@@ -290,6 +291,7 @@ export default class Overlay extends Component {
 			currentScore: 0,
 			percentage: "100.00%",
 			isVisible: visible,
+      loadedDuringSong: loadedDuringSong
 		});
 	}
 
@@ -298,11 +300,15 @@ export default class Overlay extends Component {
 		hello: (data) => {
 			console.log("Hello from HTTP Status!");
 			if (data.status) {
-				this.setState({ songData: data });
+				if (this.state.songData === undefined) {
+					console.log("Going into level during song, resetting data.");
+					this.resetData(true, true);
+					this.setState({ songData: data, paused: false });
 					if (data.status.beatmap) {
 						this.setBeatSaver(data.status.beatmap);
 					}
 				}
+			}
 		},
 		scoreChanged: (data) => {
 			const { status } = data;
@@ -432,6 +438,7 @@ export default class Overlay extends Component {
 								countryRank={data.countryRank.toLocaleString()}
 								websiteType={websiteType}
 								avatar={`/api/steamavatar?steamid=${id}`}
+                loadedDuringSong={this.state.loadedDuringSong}
 							/>
 						) : (
 							<></>

src/components/PlayerStats.js

@@ -29,6 +29,16 @@ const PlayerStats = (props) => {
 						countryCode={props.country}
 					/>
 				</div>
+				{props.loadedDuringSong ? (
+					<>
+						<p className={styles.connectedDuringSong}>
+							Connected during song, some data
+						</p>
+						<p className={styles.connectedDuringSong}>
+							may be incorrect for this song.
+						</p>
+					</>
+				) : null}
 			</div>
 		</div>
 	);

src/components/ScoreStats.js

@@ -26,20 +26,28 @@ export default class ScoreStats extends Component {
 					<p>{data.percentage}</p>
 					<p>{data.currentScore.toLocaleString()}</p>
 				</div>
+				<div>
 					<p className={styles.scoreStatsAverageCut}>Average Cut</p>
 					<div className={styles.scoreStatsHands}>
 						<div className={styles.scoreStatsLeft}>
 							<p>{this.getAverage(data.leftHand.averagePreSwing).toFixed(2)}</p>
-						<p>{this.getAverage(data.leftHand.averagePostSwing).toFixed(2)}</p>
+							<p>
+								{this.getAverage(data.leftHand.averagePostSwing).toFixed(2)}
+							</p>
 							<p>{this.getAverage(data.leftHand.averageCut).toFixed(2)}</p>
 						</div>
 						<div className={styles.scoreStatsRight}>
-						<p>{this.getAverage(data.rightHand.averagePreSwing).toFixed(2)}</p>
-						<p>{this.getAverage(data.rightHand.averagePostSwing).toFixed(2)}</p>
+							<p>
+								{this.getAverage(data.rightHand.averagePreSwing).toFixed(2)}
+							</p>
+							<p>
+								{this.getAverage(data.rightHand.averagePostSwing).toFixed(2)}
+							</p>
 							<p>{this.getAverage(data.rightHand.averageCut).toFixed(2)}</p>
 						</div>
 					</div>
 				</div>
+			</div>
 		);
 	}
 }

styles/playerStats.module.css

@@ -39,3 +39,7 @@
 .playerStats p {
 	font-size: 37px;
 }
+
+.connectedDuringSong {
+	font-size: 25px !important;
+}

styles/scoreStats.module.css

@@ -5,6 +5,11 @@
 	right: 0;
 	margin-right: 5px;
 	min-width: 135px;
+
+	display: flex;
+	justify-content: right;
+	flex-direction: column;
+	align-items: right;
 }
 
 .scoreStats p {