Changed minor things

pages/api/beatsaver/art/[hash].js

@@ -22,7 +22,7 @@ export default async function handler(req, res) {
         fs.writeFileSync(imagePath, buffer);
         res.setHeader('Content-Type', 'image/' + ext);
         res.send(buffer);
-        console.log("Song Cache - Added song \"" + mapHash + "\"");
+        console.log("Song Art Cache - Added song \"" + mapHash + "\"");
         return;
     }
     const buffer = fs.readFileSync(imagePath);

pages/index.js

@@ -1,4 +1,4 @@
-import { Card, Container, Grid } from '@nextui-org/react';
+import { Button, Card, Container, Grid, Input, Spacer, Switch, Text } from '@nextui-org/react';
 import { Component } from 'react';
 import NavBar from '../src/components/Navbar';
 
@@ -8,6 +8,12 @@ export default class Home extends Component {
 
 	constructor(props) {
 		super(props);
+
+		this.state = {
+			socketAddr: undefined,
+			steamId: undefined,
+			socketAddr: undefined,
+		}
 	}
 
 	async componentDidMount() {
@@ -16,7 +22,21 @@ export default class Home extends Component {
 
 		if (params.id) {
 			document.location.href = "/overlay/"+ window.location.search
+			return;
 		}
+
+		this.loadPreview();
+	}
+
+	loadPreview() {
+		const previewiframe = document.getElementById('previewiframe');
+
+		const id = this.state.steamId || "test";
+		previewiframe.src = window.location.origin + "/overlay/?id=" + id + "&bg=000";
+	}
+
+	generateUrl() {
+		
 	}
 
 	render() {
@@ -24,13 +44,51 @@ export default class Home extends Component {
 			<NavBar></NavBar>
 
 			<Container css={{
-				marginTop: '$15'
+				marginTop: '$8'
 			}}>
-				<Grid.Container>
+				<Grid.Container gap={2}>
 					<Grid xs={12}>
 						<Card>
 							<Card.Body>
-								hello!
+								<Text>Welcome to the Setup panel</Text>
+								
+								<Spacer y={2} />	
+								
+								<Input
+									clearable
+									underlined
+									labelPlaceholder="Ip Address (Only set if you stream on multiple devices)"
+									initialValue="localhost"
+								/>
+								<Spacer y={2} />
+								<Input
+									clearable
+									underlined
+									labelPlaceholder="Steam Id"
+									initialValue=""
+								/>
+								<Spacer y={2} />
+								<Text>Do you want to show Score Info (Current swing values, total score, etc)</Text>
+								<Switch checked={true} size="md" />
+								<Text>Do you want to show Player Stats (Current PP, global pos, etc)</Text>
+								<Switch checked={true} size="md" />
+								<Text>Do you want to show Song Info (Song name, bsr, song art, etc)</Text>
+								<Switch checked={true} size="md" />
+								<Spacer y={2} />
+
+								<div>
+									<Button auto>Generate</Button>
+								</div>
+							</Card.Body>
+						</Card>
+					</Grid>
+
+					<Grid xs={12}>
+						<Card>
+							<Card.Body>
+								<Text>Preview</Text>
+
+								<iframe id='previewiframe' width={"100%"} height={450} frameBorder="0" border="0" cellSpacing="0"></iframe>
 							</Card.Body>
 						</Card>
 					</Grid>

pages/overlay.js

@@ -23,6 +23,7 @@ export default class Overlay extends Component {
 			showPlayerStats: true,
 			showScore: false,
 			showSongInfo: false,
+            backgroundColor: undefined,
 
 			socket: undefined,
 			isVisible: false,
@@ -88,7 +89,7 @@ export default class Overlay extends Component {
 		const urlSearchParams = new URLSearchParams(window.location.search);
 		const params = Object.fromEntries(urlSearchParams.entries());
 
-		// Check if the player wants to disable their stats (pp, global pos, etc)
+		// Check what website the player wants to use
 		if (params.beatleader === 'true') {
 			this.setState({ websiteType: "BeatLeader" });
 		}
@@ -122,6 +123,11 @@ export default class Overlay extends Component {
 			shouldConnectSocket = true;
 		}
 
+        // Mainly used for the preview
+		if (params.bg) {
+			this.setState({ backgroundColor: params.bg });
+		}
+
 		if (shouldConnectSocket) {
 			this.connectSocket(params.socketaddress);
 		}
@@ -138,7 +144,7 @@ export default class Overlay extends Component {
 			mode: 'cors'
 		});
 		const json = await data.json();
-		if (json.errorMessage) { // Invalid steam account
+		if (json.errorMessage) { // Invalid account
 			this.setState({ loading: false, isValidSteamId: false });
 			return;
 		}
@@ -310,6 +316,11 @@ export default class Overlay extends Component {
 			body.style.backgroundColor = "#181a1b";
 		}
 
+        if (this.state.backgroundColor !== undefined) {
+            const body = document.body;
+			body.style.backgroundColor = "#" + this.state.backgroundColor;
+        }
+
 		return <div className={styles.main}>
 			{ loading ? 
 			<div className={styles.loading}>

styles/overlay.module.css

@@ -1,6 +1,6 @@
 .main {
     font-family: 'Roboto', sans-serif !important;
-	color: white !important;
+	color: white;
 	font-size: xx-large;
 	line-height: 1.4em !important;
 }

styles/playerStats.module.css

@@ -1,7 +1,7 @@
 .playerStatsContainer {
 	display: flex;
-	margin-left: -5px;
+	margin-left: 5px;
-	margin-top: -5px;
+	margin-top: 5px;
 }
 
 .playerStatsContainer p {