Fascinated/beatsaber-overlay
Fascinated/beatsaber-overlay
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Wiki Activity

Merge pull request #2 from RealFascinated/ui-rewrite

Browse Source 
UI rewrite
This commit is contained in:
Liam 2022-10-03 08:33:31 +01:00 committed by GitHub
commit 79aaa98bc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 2548 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/Avatar.js
View File

@ -1,8 +1,27 @@
import Image from "next/image"; import Image from "next/image";
/**
*
* placeholder?: PlaceholderValue;
blurDataURL?: string;
unoptimized?: boolean;
* @param {*} props
* @returns
*/
const Avatar = (props) => { const Avatar = (props) => {
return <> return <>
<Image className={'player-avatar'} src={props.url} width={180} height={180} alt={'Avatar image'} loading='lazy'/> <Image
className={'player-avatar'}
src={props.url}
width={180}
height={180}
alt={'Avatar image'}
loading='lazy'
placeholder="blur"
blurDataURL="https://cdn.fascinated.cc/MhCUeHZLsh.webp?raw=true"
unoptimized={true}
/>
</> </>
} }

2462
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -4,13 +4,15 @@
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start -p 3001", "start": "npm i && next build && next start -p 3001",
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@emotion/cache": "^11.7.1", "@emotion/cache": "^11.7.1",
"@emotion/server": "^11.4.0", "@emotion/server": "^11.4.0",
"@nextui-org/react": "^1.0.0-beta.10",
"next": "12.0.10", "next": "12.0.10",
"node-fetch": "^3.2.10",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "17.0.2", "react": "17.0.2",
"react-country-flag": "^3.0.2", "react-country-flag": "^3.0.2",

12
pages/_app.js
View File

@ -1,11 +1,16 @@
// 1. import `NextUIProvider` component
import { NextUIProvider } from '@nextui-org/react';
import Head from 'next/head' import Head from 'next/head'
import Config from '../config.json'; import Config from '../config.json';
import '../styles/globals.css' import '../styles/globals.css'
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
return <> return (
// 2. Use at the root of your app
<NextUIProvider>
<Head> <Head>
<title>{Config.name}</title> <title>{Config.name}</title>
<meta name="twitter:title" content= {Config.name} /> <meta name="twitter:title" content= {Config.name} />
@ -15,7 +20,8 @@ function MyApp({ Component, pageProps }) {
<meta name="theme-color" content= {Config.color} /> <meta name="theme-color" content= {Config.color} />
</Head> </Head>
<Component {...pageProps} /> <Component {...pageProps} />
</> </NextUIProvider>
);
} }
export default MyApp export default MyApp;

33
pages/_document.js Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: React.Children.toArray([initialProps.styles])
};
}
render() {
return (
<Html lang="en">
<Head>
{CssBaseline.flush()}
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;

3
pages/api/beatsaver/art/[hash].js
View File

@ -1,6 +1,7 @@
import fs from 'fs'; import fs from 'fs';
import path from 'path'; import path from 'path';
import sharp from 'sharp'; import sharp from 'sharp';
import fetch from 'node-fetch';
const cacheDir = process.cwd() + path.sep + "cache"; const cacheDir = process.cwd() + path.sep + "cache";
if (!fs.existsSync(cacheDir)) { if (!fs.existsSync(cacheDir)) {
@ -15,7 +16,7 @@ export default async function handler(req, res) {
const imagePath = cacheDir + path.sep + mapHash + "." + ext; const imagePath = cacheDir + path.sep + mapHash + "." + ext;
const exists = fs.existsSync(imagePath); const exists = fs.existsSync(imagePath);
if (!exists) { if (!exists) {
const data = await fetch(`https://eu.cdn.beatsaver.com/${mapHash}.${ext}` ); const data = await fetch(`https://eu.cdn.beatsaver.com/${mapHash}.${ext}`);
let buffer = await data.buffer(); let buffer = await data.buffer();
buffer = await sharp(buffer).resize(150, 150).toBuffer() buffer = await sharp(buffer).resize(150, 150).toBuffer()
fs.writeFileSync(imagePath, buffer); fs.writeFileSync(imagePath, buffer);

5
pages/index.js
View File

@ -295,6 +295,7 @@ export default class Home extends Component {
render() { render() {
const { loading, isValidScoresaber, data } = this.state; const { loading, isValidScoresaber, data } = this.state;
// When in the main menu, show this colour so it's actually readable
if (!isValidScoresaber && !loading) { if (!isValidScoresaber && !loading) {
const body = document.body; const body = document.body;
body.style.backgroundColor = "#181a1b"; body.style.backgroundColor = "#181a1b";
@ -323,10 +324,6 @@ export default class Home extends Component {
<br /> <br />
<p>To use a option just add &key=value (eg: &songinfo=true)</p> <p>To use a option just add &key=value (eg: &songinfo=true)</p>
</div> </div>
<div className={'info'}>
<p>If you use this overlay and like it, don&apos;t forget to star the project :3</p>
<p>Github link: <span><a href={GITHUB_URL}>{GITHUB_URL}</a></span></p>
</div>
</div> </div>
</div> : </div> :
<div className={'overlay'}> <div className={'overlay'}>

39
styles/globals.css
View File

@ -1,17 +1,15 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
* { * {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif !important;
color: white; color: white !important;
font-size: xx-large; font-size: xx-large;
line-height: 0.3em; line-height: 1.4em !important;
} }
/* Needed to see the UI in the browser, /* Needed to see the UI in the browser,
* when using OBS it overrides the background color anyway * when using OBS it overrides the background color anyway
*/ */
body { body, html {
background-color: black; background-color: transparent;
} }
.loading { .loading {
@ -39,7 +37,7 @@ body {
} }
.invalid-player p { .invalid-player p {
font-size: large; font-size: large !important;
color: white; color: white;
} }
@ -63,7 +61,7 @@ body {
} }
.player-country-icon { .player-country-icon {
margin-top: -11px; margin-top: 7px;
border-radius: 30%; border-radius: 30%;
} }
@ -74,7 +72,10 @@ body {
.player-stats { .player-stats {
display: block; display: block;
margin-left: 10px; margin-left: 10px;
margin-top: -12px; }
.player-stats p {
font-size: xx-large;
} }
.score-stats { .score-stats {
@ -85,6 +86,10 @@ body {
margin-right: 5px; margin-right: 5px;
} }
.score-stats p {
font-size: xx-large;
}
.score-stats-right { .score-stats-right {
margin-right: 10px; margin-right: 10px;
} }
@ -96,7 +101,6 @@ body {
.score-stats-hands { .score-stats-hands {
display: flex; display: flex;
margin-top: -30px;
} }
.score-stats-hands div { .score-stats-hands div {
@ -115,6 +119,7 @@ body {
left:0; left:0;
margin-left: 5px; margin-left: 5px;
margin-bottom: 5px; margin-bottom: 5px;
font-size: large !important;
} }
.song-info-container img { .song-info-container img {
@ -123,7 +128,10 @@ body {
.song-info { .song-info {
margin-left: 10px; margin-left: 10px;
margin-top: -10px; }
.song-info p {
font-size: x-large;
} }
.song-info-song-name { .song-info-song-name {
@ -139,12 +147,12 @@ body {
.song-info-song-other-container { .song-info-song-other-container {
display: flex; display: flex;
margin-top: 5px; margin-top: 6px;
} }
.song-info-diff { .song-info-diff {
font-size: large; font-size: large;
padding: 9px 5px; padding: 0px 4px;
width: fit-content; width: fit-content;
border-radius: 5%; border-radius: 5%;
font-weight: bold; font-weight: bold;
@ -153,7 +161,6 @@ body {
.song-info-bsr { .song-info-bsr {
font-size: large; font-size: large;
margin-left: 10px; margin-left: 10px;
margin-top: 28px;
} }
.song-time-container { .song-time-container {
@ -179,6 +186,6 @@ body {
} }
.song-time-text { .song-time-text {
margin-top: 8px; margin-top: 6px;
font-size: large; font-size: large;
} }