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 { constructor(props) { super(props); this.state = { loading: true, steamId: undefined, isPreviewVisible: false, previewUrl: undefined, overlayUrl: undefined, values: { socketAddr: undefined, useBeatLeader: false, showPlayerStats: true, showScoreInfo: false, showSongInfo: false, }, } } 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 return; } 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 }); } this.setState({ loading: false }); } loadPreview() { this.setState({ isPreviewVisible: true, previewUrl: this.generateUrl(true) }); } 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 ? "&textColor=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() { return this.state.loading ?

Loading...

:
{/* Preview */} { this.state.isPreviewVisible ? this.setState({ isPreviewVisible: false })} > Overlay Preview : <> } Welcome to the Setup panel this.updateValue("socketAddr", event.target.value)} checked={true} /> { this.setState({ steamId: event.target.value }); this.updateStorage(); }} /> Do you want to use BeatLeader rather than ScoreSaber? this.updateValue("useBeatLeader", event.target.checked)} checked={this.state.values.useBeatLeader} size="md" /> Do you want to show Player Stats (Current PP, global pos, etc) this.updateValue("showPlayerStats", event.target.checked)} checked={this.state.values.showPlayerStats} size="md" /> Do you want to show Score Info (Current swing values, total score, etc) this.updateValue("showScoreInfo", event.target.checked)} checked={this.state.values.showScoreInfo} size="md" /> Do you want to show Song Info (Song name, bsr, song art, etc) this.updateValue("showSongInfo", event.target.checked)} checked={this.state.values.showSongInfo} size="md" /> { this.state.overlayUrl !== undefined ? <> Url {this.state.overlayUrl} : <> }
} }