From f2e36347ad3d2f5a0460cb03a52aa3e6693d7719 Mon Sep 17 00:00:00 2001
From: Liam <67254223+RealFascinated@users.noreply.github.com>
Date: Thu, 20 Oct 2022 12:40:21 +0100
Subject: [PATCH] Added support for loading during song

---
 pages/overlay.js              | 15 +++++++++++----
 src/components/PlayerStats.js | 10 ++++++++++
 src/components/ScoreStats.js  | 30 +++++++++++++++++++-----------
 styles/playerStats.module.css |  4 ++++
 styles/scoreStats.module.css  |  7 ++++++-
 5 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/pages/overlay.js b/pages/overlay.js
index fe170ef..1a03128 100644
--- a/pages/overlay.js
+++ b/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,9 +300,13 @@ export default class Overlay extends Component {
 		hello: (data) => {
 			console.log("Hello from HTTP Status!");
 			if (data.status) {
-				this.setState({ songData: data });
-				if (data.status.beatmap) {
-					this.setBeatSaver(data.status.beatmap);
+				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);
+					}
 				}
 			}
 		},
@@ -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}
 							/>
 						) : (
 							<></>
diff --git a/src/components/PlayerStats.js b/src/components/PlayerStats.js
index 95910b7..76f0f1a 100644
--- a/src/components/PlayerStats.js
+++ b/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>
 	);
diff --git a/src/components/ScoreStats.js b/src/components/ScoreStats.js
index 4d37611..1898fb1 100644
--- a/src/components/ScoreStats.js
+++ b/src/components/ScoreStats.js
@@ -26,17 +26,25 @@ export default class ScoreStats extends Component {
 					<p>{data.percentage}</p>
 					<p>{data.currentScore.toLocaleString()}</p>
 				</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.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.averageCut).toFixed(2)}</p>
+				<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.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.averageCut).toFixed(2)}</p>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/styles/playerStats.module.css b/styles/playerStats.module.css
index 763f125..aea0ce4 100644
--- a/styles/playerStats.module.css
+++ b/styles/playerStats.module.css
@@ -39,3 +39,7 @@
 .playerStats p {
 	font-size: 37px;
 }
+
+.connectedDuringSong {
+	font-size: 25px !important;
+}
diff --git a/styles/scoreStats.module.css b/styles/scoreStats.module.css
index 50b86ef..6418e85 100644
--- a/styles/scoreStats.module.css
+++ b/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 {
@@ -42,4 +47,4 @@
 .scoreStatsInfo {
 	margin-right: 10px;
 	text-align: right;
-}
+}
\ No newline at end of file