diff --git a/pages/api/beatsaver/art/[hash].js b/pages/api/beatsaver/art/[hash].js index 8a2599e..14236f7 100644 --- a/pages/api/beatsaver/art/[hash].js +++ b/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); diff --git a/pages/index.js b/pages/index.js index 703babc..a7a6dc3 100644 --- a/pages/index.js +++ b/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 { - + - hello! + Welcome to the Setup panel + + + + + + + + Do you want to show Score Info (Current swing values, total score, etc) + + Do you want to show Player Stats (Current PP, global pos, etc) + + Do you want to show Song Info (Song name, bsr, song art, etc) + + + +
+ +
+
+
+
+ + + + + Preview + + diff --git a/pages/overlay.js b/pages/overlay.js index e2f278f..b0de50c 100644 --- a/pages/overlay.js +++ b/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
{ loading ?
diff --git a/src/components/Navbar.js b/src/components/Navbar.js index f8419ee..e3ec78d 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -4,7 +4,7 @@ const NavBar = () => { return - Beat Saber Overlay + BeatSaber Overlay diff --git a/styles/overlay.module.css b/styles/overlay.module.css index 2a04428..681483b 100644 --- a/styles/overlay.module.css +++ b/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; } diff --git a/styles/playerStats.module.css b/styles/playerStats.module.css index 2dd470e..b51ee50 100644 --- a/styles/playerStats.module.css +++ b/styles/playerStats.module.css @@ -1,7 +1,7 @@ .playerStatsContainer { display: flex; - margin-left: -5px; - margin-top: -5px; + margin-left: 5px; + margin-top: 5px; } .playerStatsContainer p {