Changed minor things

This commit is contained in:
Liam 2022-10-10 18:38:06 +01:00
parent 0a0bf8b07b
commit 3b4932ed79
6 changed files with 80 additions and 11 deletions

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

@ -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 { Component } from 'react';
import NavBar from '../src/components/Navbar'; import NavBar from '../src/components/Navbar';
@ -8,6 +8,12 @@ export default class Home extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
socketAddr: undefined,
steamId: undefined,
socketAddr: undefined,
}
} }
async componentDidMount() { async componentDidMount() {
@ -16,7 +22,21 @@ export default class Home extends Component {
if (params.id) { if (params.id) {
document.location.href = "/overlay/"+ window.location.search 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() { render() {
@ -24,13 +44,51 @@ export default class Home extends Component {
<NavBar></NavBar> <NavBar></NavBar>
<Container css={{ <Container css={{
marginTop: '$15' marginTop: '$8'
}}> }}>
<Grid.Container> <Grid.Container gap={2}>
<Grid xs={12}> <Grid xs={12}>
<Card> <Card>
<Card.Body> <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.Body>
</Card> </Card>
</Grid> </Grid>

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

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

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