Added value saving

package.json

@@ -17,6 +17,7 @@
     "react": "17.0.2",
     "react-country-flag": "^3.0.2",
     "react-dom": "17.0.2",
+    "react-toastify": "^9.0.8",
     "sharp": "^0.30.1"
   },
   "devDependencies": {

pages/index.js

@@ -1,7 +1,10 @@
-import { Button, Card, Container, Grid, Input, Spacer, Switch, Text } from '@nextui-org/react';
+import { Button, Card, Container, Grid, Input, Link, Modal, Spacer, Switch, Text, textTransforms } from '@nextui-org/react';
 import { Component } from 'react';
 import NavBar from '../src/components/Navbar';
 
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 import styles from '../styles/main.module.css';
 
 export default class Home extends Component {
@@ -10,9 +13,18 @@ export default class Home extends Component {
 		super(props);
 
 		this.state = {
-			socketAddr: undefined,
 			steamId: undefined,
-			socketAddr: undefined,
+			isPreviewVisible: false,
+			previewUrl: undefined,
+			overlayUrl: undefined,
+
+			values: {
+				socketAddr: undefined,
+				useBeatLeader: false,
+				showPlayerStats: true,
+				showScoreInfo: false,
+				showSongInfo: false,
+			},
 		}
 	}
 
@@ -25,18 +37,51 @@ export default class Home extends Component {
 			return;
 		}
 
-		this.loadPreview();
+		if (localStorage.getItem('values') == undefined) {
+			localStorage.setItem('values', JSON.stringify({
+				steamId: this.state.steamId,
+				values: this.state.values
+			}));
+		} else {
+			const json = JSON.parse(localStorage.getItem('values'))
+			this.setState({ steamId: json.steamId, values: json.values });
+		}
 	}
 
 	loadPreview() {
-		const previewiframe = document.getElementById('previewiframe');
+		this.setState({ isPreviewVisible: true, previewUrl: this.generateUrl(true) });
-
-		const id = this.state.steamId || "test";
-		previewiframe.src = window.location.origin + "/overlay/?id=" + id + "&bg=000";
 	}
 
-	generateUrl() {
+	generateUrl(withTc = false) {
-		
+		let values = "";
+		Object.entries(this.state.values).forEach(value => {
+			if (value[1] === undefined) {
+				return;
+			}
+			if (value[0] == "useBeatLeader" && value[1] === true) {
+				values += `&beatLeader=${value[1]}`;
+				return;
+			}
+			values += `&${value[0]}=${value[1]}`;
+		});
+
+		return window.location.origin + "/overlay?id=" + this.state.steamId + values + (withTc ? "&tc=black" : "");
+	}
+
+	updateValue(key, value) {
+		let values = this.state.values;
+		values[key] = value;
+		this.setState({ values: values });
+		this.updateStorage();
+	}
+
+	updateStorage() {
+		setTimeout(() => {
+			localStorage.setItem('values', JSON.stringify({
+				steamId: this.state.steamId,
+				values: this.state.values
+			}));
+		}, 5);
 	}
 
 	render() {
@@ -46,6 +91,27 @@ export default class Home extends Component {
 			<Container css={{
 				marginTop: '$8'
 			}}>
+
+				{/* Preview */}
+				{
+					this.state.isPreviewVisible ? <Modal
+						closeButton
+						open={this.state.isPreviewVisible}
+						width={"100%"}
+						blur
+						onClose={() => this.setState({ isPreviewVisible: false })}
+					>
+						<Modal.Header>
+							<Text size={18}>
+								Overlay Preview
+							</Text>
+						</Modal.Header>
+						<Modal.Body>
+							<iframe height={600} src={this.state.previewUrl}></iframe>	
+						</Modal.Body>
+					</Modal> : <></>
+				}
+
 				<Grid.Container gap={2}>
 					<Grid xs={12}>
 						<Card>
@@ -55,45 +121,68 @@ export default class Home extends Component {
 								<Spacer y={2} />	
 								
 								<Input
-									clearable
 									underlined
 									labelPlaceholder="Ip Address (Only set if you stream on multiple devices)"
 									initialValue="localhost"
+									value={this.state.values.socketAddr}
+									onChange={event => this.updateValue("socketAddr", event.target.value)} checked={true}
 								/>
 								<Spacer y={2} />
 								<Input
-									clearable
 									underlined
 									labelPlaceholder="Steam Id"
 									initialValue=""
+									value={this.state.steamId}
+									onChange={event => {
+										this.setState({ steamId: event.target.value });
+										this.updateStorage();
+									}}
 								/>
-								<Spacer y={2} />
+								<Spacer y={1} />
-								<Text>Do you want to show Score Info (Current swing values, total score, etc)</Text>
+								<Text>Do you want to use BeatLeader rather than ScoreSaber?</Text>
-								<Switch checked={true} size="md" />
+								<Switch onChange={event => this.updateValue("useBeatLeader", event.target.checked)} checked={this.state.values.useBeatLeader} size="md" />
 								<Text>Do you want to show Player Stats (Current PP, global pos, etc)</Text>
-								<Switch checked={true} size="md" />
+								<Switch onChange={event => this.updateValue("showPlayerStats", event.target.checked)} checked={this.state.values.showPlayerStats} size="md" />
+								<Text>Do you want to show Score Info (Current swing values, total score, etc)</Text>
+								<Switch onChange={event => this.updateValue("showScoreInfo", event.target.checked)} checked={this.state.values.showScoreInfo} size="md" />
 								<Text>Do you want to show Song Info (Song name, bsr, song art, etc)</Text>
-								<Switch checked={true} size="md" />
+								<Switch onChange={event => this.updateValue("showSongInfo", event.target.checked)} checked={this.state.values.showSongInfo} size="md" />
 								<Spacer y={2} />
 
-								<div>
+								<Button.Group>
-									<Button auto>Generate</Button>
+									<Button flat auto onClick={() => {
-								</div>
+										if (!this.state.steamId) {
-							</Card.Body>
+											toast.error("Please provide a Steam ID");
-						</Card>
+											return;
-					</Grid>
+										}
+										window.open(this.generateUrl(), "_blank");
+									}}>Open Overlay</Button>
+									<Button flat auto onClick={() => {
+										if (!this.state.steamId) {
+											toast.error("Please provide a Steam ID");
+											return;
+										}
+										this.loadPreview();
+									}}>Preview</Button>
+								</Button.Group>
 
-					<Grid xs={12}>
+								{
-						<Card>
+									this.state.overlayUrl !== undefined ?
-							<Card.Body>
+										<>
-								<Text>Preview</Text>
+											<Text b>
-
+												Url
-								<iframe id='previewiframe' width={"100%"} height={450} frameBorder="0" border="0" cellSpacing="0"></iframe>
+											</Text>
+											<Link href={this.state.overlayUrl}>{this.state.overlayUrl}</Link>
+										</>
+									: <></>
+								}
 							</Card.Body>
 						</Card>
 					</Grid>
 				</Grid.Container>
 			</Container>
+
+			<ToastContainer />
 		</div>
 	}
 }

pages/overlay.js

@@ -124,8 +124,8 @@ export default class Overlay extends Component {
 		}
 
         // Mainly used for the preview
-		if (params.bg) {
+		if (params.withTc) {
-			this.setState({ backgroundColor: params.bg });
+			this.setState({ backgroundColor: params.withTc });
 		}
 
 		if (shouldConnectSocket) {
@@ -318,7 +318,7 @@ export default class Overlay extends Component {
 
         if (this.state.backgroundColor !== undefined) {
             const body = document.body;
-			body.style.backgroundColor = "#" + this.state.backgroundColor;
+			body.style.color = "#" + this.state.backgroundColor;
         }
 
 		return <div className={styles.main}>