more css woop!!

pages/overlay.js

@@ -16,6 +16,7 @@ export default class Overlay extends Component {
 
 		this.state = {
 			loading: true,
+			isConnectedToSocket: false,
 			id: undefined,
 			isValidSteamId: true,
 			websiteType: "ScoreSaber",
@@ -130,6 +131,7 @@ export default class Overlay extends Component {
 		}
 
 		if (shouldConnectSocket) {
+			if (this.state.isConnectedToSocket) return;
 			this.connectSocket(params.socketaddress);
 		}
 	}
@@ -157,13 +159,17 @@ export default class Overlay extends Component {
 	 */
 	connectSocket(socketAddress) {
 		socketAddress = (socketAddress === undefined ? 'ws://localhost' : `ws://${socketAddress}`) + ":6557/socket";
+		if (this.state.isConnectedToSocket) return;
+
 		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 10 seconds.");
+			this.setState({ isConnectedToSocket: false });
 			setTimeout(() => this.connectSocket(), 10_000);
 		});
 		socket.addEventListener('message', (message) => {
@@ -196,7 +202,6 @@ export default class Overlay extends Component {
 	 * @param {boolean} visible Whether to show info other than the player stats
 	 */
 	async resetData(visible) {
-		console.log("Exiting level, resetting data.")
 		setTimeout(async () => {
 			await this.updateData(this.state.id);
 		}, 250);

styles/scoreStats.module.css

@@ -8,12 +8,17 @@
 }
 
 .scoreStats p {
-	font-size: xx-large;
+	font-size: 38px;
 	line-height: 1.2em;
 }
 
+.scoreStatsLeft {
+	text-align: right;
+}
+
 .scoreStatsRight {
 	margin-right: 10px;
+	text-align: right;
 }
 
 .scoreStatsAverageCut {
@@ -27,7 +32,7 @@
 }
 
 .scoreStatsHands p {
-	min-width: 57px;
+	min-width: 68px;
 }
 
 .scoreStatsHands div {

styles/songInfo.module.css

@@ -5,7 +5,6 @@
 	left:0;
 	margin-left: 5px;
 	margin-bottom: 5px;
-	font-size: large !important;
 }
 
 .songInfoContainer img {
@@ -16,16 +15,17 @@
 	margin-left: 10px;
 }
 
-
 .songInfoSongName {
-	font-size: 26px;
+	font-size: 30px;
 	font-weight: bold;
 }
 
 .songInfoSongAuthor {
-	font-size: large;
+	font-size: 22px;
 	margin-top: -12px;
-	margin-bottom: -7px;
+	margin-bottom: -3px;
+
+	line-height: 1.2em;
 }
 
 .songInfoSongOtherContainer {
@@ -39,11 +39,16 @@
 	width: fit-content;
 	border-radius: 5%;
 	font-weight: bold;
+	margin-bottom: 12px;
+
+	line-height: 1.2em;
 }
 
 .songInfoBsr {
 	font-size: 22px;
 	margin-left: 10px;
+
+	line-height: 1.2em;
 }
 
 .songTimeContainer {
@@ -69,6 +74,6 @@
 }
 
 .songTimeText {
-	margin-top: 2px;
+	margin-top: -10px;
 	font-size: 20px;
 }