Changed to module based css

pages/_app.js

@@ -4,8 +4,6 @@ import Head from 'next/head'
 
 import Config from '../config.json';
 
-import '../styles/globals.css'
-
 function MyApp({ Component, pageProps }) {
   return (
     // 2. Use at the root of your app

pages/index.js

@@ -1,4 +1,7 @@
-import {Component} from 'react'
+import { Component } from 'react'
+
+import '../styles/main.module.css'
+
 export default class Home extends Component {
 
 	constructor(props) {
@@ -6,11 +9,17 @@ export default class Home extends Component {
 	}
 
 	async componentDidMount() {
+		const urlSearchParams = new URLSearchParams(window.location.search);
+		const params = Object.fromEntries(urlSearchParams.entries());
+
+		if (params.id) {
+			document.location.href = "/overlay/"+ window.location.search
+		}
 	}
 
 	render() {
-		return <>
+		return <div className={main}>
 			hi
-		</>
+		</div>
 	}
 }

pages/overlay.js

@@ -6,8 +6,10 @@ import ScoreStats from '../src/components/ScoreStats';
 import SongInfo from "../src/components/SongInfo";
 
 import Utils from '../src/utils/utils';
+import styles from '../styles/overlay.module.css';
+import playerStatsStyles from '../styles/playerStats.module.css';
 
-export default class Home extends Component {
+export default class Overlay extends Component {
 
 	#_beatSaverURL = "";
 
@@ -122,7 +124,6 @@ export default class Home extends Component {
 			shouldConnectSocket = true;
 		}
 
-		console.log(`shouldConnectSocket = ${shouldConnectSocket}`);
 		if (shouldConnectSocket) {
 			this.connectSocket(params.socketaddress);
 		}
@@ -150,12 +151,15 @@ export default class Home extends Component {
 	 * Setup the HTTP Status connection
 	 */
 	connectSocket(socketAddress) {
-		socketAddress = socketAddress === undefined ? 'ws://localhost' : `ws://${socketAddress}:6557/socket`;
+		socketAddress = (socketAddress === undefined ? 'ws://localhost' : `ws://${socketAddress}`) + ":6557/socket";
 		console.log(`Connecting to ${socketAddress}`);
 		const socket = new WebSocket(socketAddress);
+        socket.addEventListener('open', () => {
+            console.log(`Connected to ${socketAddress}`);
+        });
 		socket.addEventListener('close', () => {
-			console.log("Attempting to re-connect to the HTTP Status socket in 30 seconds.");
+			console.log("Attempting to re-connect to the HTTP Status socket in 10 seconds.");
-			setTimeout(() => this.connectSocket(), 30_000);
+			setTimeout(() => this.connectSocket(), 10_000);
 		});
 		socket.addEventListener('message', (message) => {
 			const json = JSON.parse(message.data);
@@ -295,7 +299,8 @@ export default class Home extends Component {
 		"noteMissed": () => {},
 		"noteSpawned": () => {},
 		"bombMissed": () => {},
-		"beatmapEvent": () => {}
+		"beatmapEvent": () => {},
+        "energyChanged": () => {},
 	}
 
 	render() {
@@ -307,31 +312,29 @@ export default class Home extends Component {
 			body.style.backgroundColor = "#181a1b";
 		}
 
-		return <>
+		return <div className={styles.main}>
 			{ loading ? 
-			<div className={'loading'}>
+			<div className={styles.loading}>
 				<h2>Loading...</h2>
 			</div>
 			: !isValidSteamId ? 
-			<div className={'invalid-player'}>
+			<div className={styles.invalidPlayer}>
 				<h1>Invalid player, please visit the main page.</h1>
                 <Link href="/">
                     <a>Go Home</a>
                 </Link>
 			</div> :
-			<div className={'overlay'}>
+			<div className={styles.overlay}>
-				{ this.state.showPlayerStats ?
+				{ 
-					<div className={'player-stats-container'}>
+                    this.state.showPlayerStats ? <PlayerStats
-						<Avatar url={data.profilePicture || data.avatar} />
+                        pp={data.pp.toLocaleString()}
-						<PlayerStats
+                        globalPos={data.rank.toLocaleString()}
-							pp={data.pp.toLocaleString()}
+                        country={data.country}
-							globalPos={data.rank.toLocaleString()}
+                        countryRank={data.countryRank.toLocaleString()}
-							country={data.country}
+                        websiteType={websiteType}
-							countryRank={data.countryRank.toLocaleString()}
+                        avatar={data.profilePicture || data.avatar}
-							websiteType={websiteType}
+                        /> 
-						/>
+                    : ""
-					</div> :
-					""
 				}
 				{
 					this.state.showScore && this.state.isVisible ? <ScoreStats data={this.state} /> : ""
@@ -341,6 +344,6 @@ export default class Home extends Component {
 				}
 			</div>
 			}
-		</>
+		</div>
 	}
 }

src/components/Avatar.js

@@ -1,9 +1,11 @@
 import Image from "next/image";
 
+import styles from '../../styles/avatar.module.css';
+
 const Avatar = (props) => {
     return <>
         <Image 
-            className={'player-avatar'}
+            className={styles.playerAvatar}
             src={props.url}
             width={180}
             height={180}

src/components/PlayerStats.js

@@ -1,16 +1,24 @@
 import ReactCountryFlag from "react-country-flag";
 
+import styles from '../../styles/playerStats.module.css';
+import Avatar from "./Avatar";
+
 const PlayerStats = (props) => {
-    return <div className={'player-stats'}>
+    return <div className={styles.playerStatsContainer}>
-        <p>{props.pp}pp <span style={{
+        <div>
-            fontSize: '20px',
+            <Avatar url={props.avatar} />
-        }}>({props.websiteType})</span></p>
-        <p>#{props.globalPos}</p>
-        <div className="player-country">
-            <p>#{props.countryRank}</p>
-            <ReactCountryFlag className={'player-country-icon'} svg countryCode={props.country} />
         </div>
-    </div>
+        <div className={styles.playerStats}>
+            <p>{props.pp}pp <span style={{
+                fontSize: '20px',
+            }}>({props.websiteType})</span></p>
+            <p>#{props.globalPos}</p>
+            <div className={styles.playerCountry}>
+                <p>#{props.countryRank}</p>
+                <ReactCountryFlag className={styles.playerCountryIcon} svg countryCode={props.country} />
+            </div>
+        </div>
+    </div> 
 }
 
 export default PlayerStats;

src/components/ScoreStats.js

@@ -1,5 +1,7 @@
 import {Component} from "react";
 
+import styles from '../../styles/scoreStats.module.css';
+
 export default class ScoreStats extends Component {
 
     constructor(params) {
@@ -19,19 +21,19 @@ export default class ScoreStats extends Component {
     render() {
         const data = this.props.data;
         
-        return <div className={'score-stats'}>
+        return <div className={styles.scoreStats}>
-            <div className={'score-stats-info'}>
+            <div className={styles.scoreStatsInfo}>
                 <p>{data.percentage}</p>
                 <p>{data.currentScore.toLocaleString()}</p>
             </div>
-            <p className={'score-stats-average-cut'}>Average Cut</p>
+            <p className={styles.scoreStatsAverageCut}>Average Cut</p>
-            <div className={'score-stats-hands'}>
+            <div className={styles.scoreStatsHands}>
-                <div className={'score-stats-left'}>
+                <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={'score-stats-right'}>
+                <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>

src/components/SongInfo.js

@@ -1,5 +1,7 @@
 import {Component} from "react";
 
+import styles from '../../styles/songInfo.module.css';
+
 export default class SongInfo extends Component {
     
     constructor(params) {
@@ -62,19 +64,19 @@ export default class SongInfo extends Component {
         // what in the fuck is this?? LMFAO
         const songTimerPercentage = ((this.props.data.currentSongTime / 1000) / (data.length / 1000)) * 100000;
 
-        return <div className={'song-info-container'}>
+        return <div className={styles.songInfoContainer}>
             <img src={songArt}/>
-            <div className={'song-info'}>
+            <div className={styles.songInfo}>
-                <p className={'song-info-song-name'}>{songName}</p>
+                <p className={styles.songInfoSongName}>{songName}</p>
-                <p className={'song-info-song-author'}>{songAuthorName}</p>
+                <p className={styles.songInfoSongAuthor}>{songAuthorName}</p>
-                <div className={'song-info-song-other-container'}>
+                <div className={styles.songInfoSongOtherContainer}>
-                    <p className={'song-info-diff'} style={{ backgroundColor: this.state.diffColor }}>{difficulty}</p>
+                    <p className={styles.songInfoDiff} style={{ backgroundColor: this.state.diffColor }}>{difficulty}</p>
-                    <p className={'song-info-bsr'}>!bsr {bsr}</p>
+                    <p className={styles.songInfoBsr}>!bsr {bsr}</p>
                 </div>
-                <p className={'song-time-text'}>{this.msToMinSeconds(this.props.data.currentSongTime * 1000)}/{this.msToMinSeconds(data.length)}</p>
+                <p className={styles.songTimeText}>{this.msToMinSeconds(this.props.data.currentSongTime * 1000)}/{this.msToMinSeconds(data.length)}</p>
-                <div className={'song-time-container'}>
+                <div className={styles.songTimeContainer}>
-                    <div className={'song-time-background'}/>
+                    <div className={styles.songTimeBackground}/>
-                    <div className={'song-time'} style={{ width: songTimerPercentage + '%' }}/>
+                    <div className={styles.songTime} style={{ width: songTimerPercentage + '%' }}/>
                 </div>
             </div>
         </div>

styles/avatar.module.css

@@ -0,0 +1,3 @@
+.playerAvatar {
+	border-radius: 5%;
+}

styles/globals.css

@@ -1,196 +0,0 @@
-* {
-    font-family: 'Roboto', sans-serif !important;
-	color: white !important;
-	font-size: xx-large;
-	line-height: 1.4em !important;
-}
-
-/* Needed to see the UI in the browser,
- * when using OBS it overrides the background color anyway
- */
-body, html {
-	background-color: transparent;
-}
-
-.loading {
-	color: black;
-}
-
-.info {
-	margin-top: 35px;
-	color: white;
-}
-
-.info a {
-	font-size: large;
-	text-decoration: none;
-	color: #7299d4;
-	transition: 0.2s;
-}
-
-.info a:hover {
-    color: #4b72d3 !important;
-}
-
-.overlay {
-	padding: 10px;
-}
-
-.invalid-player p {
-	font-size: large !important;
-	color: white;
-}
-
-.invalid-player b {
-	font-size: large !important;
-	color: white;
-}
-
-.player-stats-container {
-	display: flex;
-	margin-left: -5px;
-	margin-top: -5px;
-}
-
-.player-country {
-	display: flex;
-	line-height: normal;
-}
-
-.player-country span {
-	margin-top: 3px;
-}
-
-.player-country p {
-	margin: 0 6px 0 0;
-}
-
-.player-country-icon {
-	margin-top: 7px;
-	border-radius: 30%;
-}
-
-.player-avatar {
-	border-radius: 5%;
-}
-
-.player-stats {
-	display: block;
-	margin-left: 10px;
-}
-
-.player-stats p {
-	font-size: xx-large;
-}
-
-.score-stats {
-	text-align: center;
-	position:absolute;
-	top:0;
-	right:0;
-	margin-right: 5px;
-}
-
-.score-stats p {
-	font-size: xx-large;
-}
-
-.score-stats-right {
-	margin-right: 10px;
-}
-
-.score-stats-average-cut {
-	font-weight: bold;
-	font-size: x-large;
-}
-
-.score-stats-hands {
-	display: flex;
-}
-
-.score-stats-hands div {
-	padding-left: 10px;
-}
-
-.score-stats-info {
-	margin-right: 10px;
-	text-align: right;
-}
-
-.song-info-container {
-	display: flex;
-	position: fixed;
-	bottom:0;
-	left:0;
-	margin-left: 5px;
-	margin-bottom: 5px;
-	font-size: large !important;
-}
-
-.song-info-container img {
-	border-radius: 5%;
-}
-
-.song-info {
-	margin-left: 10px;
-}
-
-.song-info p {
-	font-size: x-large;
-}
-
-.song-info-song-name {
-	font-size: x-large;
-	font-weight: bold;
-}
-
-.song-info-song-author {
-	font-size: large;
-	margin-top: -5px;
-	margin-bottom: -5px;
-}
-
-.song-info-song-other-container {
-	display: flex;
-	margin-top: 6px;
-}
-
-.song-info-diff {
-	font-size: large;
-	padding: 0px 4px;
-	width: fit-content;
-	border-radius: 5%;
-	font-weight: bold;
-}
-
-.song-info-bsr {
-	font-size: large;
-	margin-left: 10px;
-}
-
-.song-time-container {
-	width: 200px;
-	display: grid;
-}
-
-.song-time-background {
-	grid-column: 1;
-	grid-row: 1;
-	z-index: 1;
-	padding: 3px;
-	width: 100%;
-	background-color: white !important;
-}
-
-.song-time {
-	grid-column: 1;
-	grid-row: 1;
-	z-index: 2;
-	padding: 3px;
-	background-color: red !important;
-}
-
-.song-time-text {
-	margin-top: 6px;
-	font-size: large;
-}

styles/main.module.css

@@ -0,0 +1,3 @@
+.main {
+    font-family: 'Roboto', sans-serif !important;
+}

styles/overlay.module.css

@@ -0,0 +1,189 @@
+.main {
+    font-family: 'Roboto', sans-serif !important;
+	color: white !important;
+	font-size: xx-large;
+	line-height: 1.4em !important;
+}
+
+.loading {
+	color: black;
+}
+
+.info {
+	margin-top: 35px;
+	color: white;
+}
+
+.info a {
+	font-size: large;
+	text-decoration: none;
+	color: #7299d4;
+	transition: 0.2s;
+}
+
+.info a:hover {
+    color: #4b72d3 !important;
+}
+
+.overlay {
+	padding: 10px;
+}
+
+.invalid-player p {
+	font-size: large !important;
+	color: white;
+}
+
+.invalid-player b {
+	font-size: large !important;
+	color: white;
+}
+
+.player-stats-container {
+	display: flex;
+	margin-left: -5px;
+	margin-top: -5px;
+}
+
+.player-country {
+	display: flex;
+	line-height: normal;
+}
+
+.player-country span {
+	margin-top: 3px;
+}
+
+.player-country p {
+	margin: 0 6px 0 0;
+}
+
+.player-country-icon {
+	margin-top: 7px;
+	border-radius: 30%;
+}
+
+.player-avatar {
+	border-radius: 5%;
+}
+
+.player-stats {
+	display: block;
+	margin-left: 10px;
+}
+
+.player-stats p {
+	font-size: xx-large;
+}
+
+.score-stats {
+	text-align: center;
+	position:absolute;
+	top:0;
+	right:0;
+	margin-right: 5px;
+}
+
+.score-stats p {
+	font-size: xx-large;
+}
+
+.score-stats-right {
+	margin-right: 10px;
+}
+
+.score-stats-average-cut {
+	font-weight: bold;
+	font-size: x-large;
+}
+
+.score-stats-hands {
+	display: flex;
+}
+
+.score-stats-hands div {
+	padding-left: 10px;
+}
+
+.score-stats-info {
+	margin-right: 10px;
+	text-align: right;
+}
+
+.song-info-container {
+	display: flex;
+	position: fixed;
+	bottom:0;
+	left:0;
+	margin-left: 5px;
+	margin-bottom: 5px;
+	font-size: large !important;
+}
+
+.song-info-container img {
+	border-radius: 5%;
+}
+
+.song-info {
+	margin-left: 10px;
+}
+
+.song-info p {
+	font-size: x-large;
+}
+
+.song-info-song-name {
+	font-size: x-large;
+	font-weight: bold;
+}
+
+.song-info-song-author {
+	font-size: large;
+	margin-top: -5px;
+	margin-bottom: -5px;
+}
+
+.song-info-song-other-container {
+	display: flex;
+	margin-top: 6px;
+}
+
+.song-info-diff {
+	font-size: large;
+	padding: 0px 4px;
+	width: fit-content;
+	border-radius: 5%;
+	font-weight: bold;
+}
+
+.song-info-bsr {
+	font-size: large;
+	margin-left: 10px;
+}
+
+.song-time-container {
+	width: 200px;
+	display: grid;
+}
+
+.song-time-background {
+	grid-column: 1;
+	grid-row: 1;
+	z-index: 1;
+	padding: 3px;
+	width: 100%;
+	background-color: white !important;
+}
+
+.song-time {
+	grid-column: 1;
+	grid-row: 1;
+	z-index: 2;
+	padding: 3px;
+	background-color: red !important;
+}
+
+.song-time-text {
+	margin-top: 6px;
+	font-size: large;
+}

styles/playerStats.module.css

@@ -0,0 +1,41 @@
+.playerStatsContainer {
+	display: flex;
+	margin-left: -5px;
+	margin-top: -5px;
+}
+
+.playerStatsContainer p {
+	font-size: xx-large;
+	line-height: 1.4em !important;
+}
+
+.playerCountry {
+	display: flex;
+	line-height: normal;
+}
+
+.playerCountry span {
+	margin-top: 3px;
+}
+
+.playerCountry p {
+	margin: 0 6px 0 0;
+}
+
+.playerCountryIcon {
+	margin-top: 7px;
+	border-radius: 30%;
+}
+
+.playerAvatar {
+	border-radius: 5%;
+}
+
+.playerStats {
+	display: block;
+	margin-left: 10px;
+}
+
+.playerStats p {
+	font-size: xx-large;
+}

styles/scoreStats.module.css

@@ -0,0 +1,33 @@
+.scoreStats {
+	text-align: center;
+	position:absolute;
+	top:0;
+	right:0;
+	margin-right: 5px;
+}
+
+.scoreStats p {
+	font-size: xx-large;
+}
+
+.scoreStatsRight {
+	margin-right: 10px;
+}
+
+.scoreStatsAverageCut {
+	font-weight: bold;
+	font-size: x-large;
+}
+
+.scoreStatsHands {
+	display: flex;
+}
+
+.scoreStatsHands div {
+	padding-left: 10px;
+}
+
+.scoreStatsInfo {
+	margin-right: 10px;
+	text-align: right;
+}

styles/songInfo.module.css

@@ -0,0 +1,77 @@
+.songInfoContainer {
+	display: flex;
+	position: fixed;
+	bottom:0;
+	left:0;
+	margin-left: 5px;
+	margin-bottom: 5px;
+	font-size: large !important;
+}
+
+.songInfoContainer img {
+	border-radius: 5%;
+}
+
+.songInfo {
+	margin-left: 10px;
+}
+
+.songInfo p {
+	font-size: x-large;
+}
+
+.songInfoSongName {
+	font-size: x-large;
+	font-weight: bold;
+}
+
+.songInfoSongAuthor {
+	font-size: large;
+	margin-top: -5px;
+	margin-bottom: -5px;
+}
+
+.songInfoSongOtherContainer {
+	display: flex;
+	margin-top: 6px;
+}
+
+.songInfoDiff {
+	font-size: large;
+	padding: 0px 4px;
+	width: fit-content;
+	border-radius: 5%;
+	font-weight: bold;
+}
+
+.songInfoBsr {
+	font-size: large;
+	margin-left: 10px;
+}
+
+.songTimeContainer {
+	width: 200px;
+	display: grid;
+}
+
+.songTimeBackground {
+	grid-column: 1;
+	grid-row: 1;
+	z-index: 1;
+	padding: 3px;
+	width: 100%;
+	background-color: white !important;
+}
+
+.songTime {
+	grid-column: 1;
+	grid-row: 1;
+	z-index: 2;
+	padding: 3px;
+	background-color: red !important;
+}
+
+.songTimeText {
+	margin-top: 6px;
+	font-size: large;
+}