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";
/**
*
* placeholder?: PlaceholderValue;
blurDataURL?: string;
unoptimized?: boolean;
* @param {*} props
* @returns
*/
const Avatar = (props) => {
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": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 3001",
"start": "npm i && next build && next start -p 3001",
"lint": "next lint"
},
"dependencies": {
"@emotion/cache": "^11.7.1",
"@emotion/server": "^11.4.0",
"@nextui-org/react": "^1.0.0-beta.10",
"next": "12.0.10",
"node-fetch": "^3.2.10",
"prop-types": "^15.8.1",
"react": "17.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 Config from '../config.json';
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <>
return (
// 2. Use at the root of your app
<NextUIProvider>
<Head>
<title>{Config.name}</title>
<meta name="twitter:title" content= {Config.name} />
@ -15,7 +20,8 @@ function MyApp({ Component, pageProps }) {
<meta name="theme-color" content= {Config.color} />
</Head>
<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;

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

@ -1,6 +1,7 @@
import fs from 'fs';
import path from 'path';
import sharp from 'sharp';
import fetch from 'node-fetch';
const cacheDir = process.cwd() + path.sep + "cache";
if (!fs.existsSync(cacheDir)) {

5
pages/index.js
View File

@ -295,6 +295,7 @@ export default class Home extends Component {
render() {
const { loading, isValidScoresaber, data } = this.state;
// When in the main menu, show this colour so it's actually readable
if (!isValidScoresaber && !loading) {
const body = document.body;
body.style.backgroundColor = "#181a1b";
@ -323,10 +324,6 @@ export default class Home extends Component {
<br />
<p>To use a option just add &key=value (eg: &songinfo=true)</p>
</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 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;
color: white;
font-family: 'Roboto', sans-serif !important;
color: white !important;
font-size: xx-large;
line-height: 0.3em;
line-height: 1.4em !important;
}
/* Needed to see the UI in the browser,
* when using OBS it overrides the background color anyway
*/
body {
background-color: black;
body, html {
background-color: transparent;
}
.loading {
@ -39,7 +37,7 @@ body {
}
.invalid-player p {
font-size: large;
font-size: large !important;
color: white;
}
@ -63,7 +61,7 @@ body {
}
.player-country-icon {
margin-top: -11px;
margin-top: 7px;
border-radius: 30%;
}
@ -74,7 +72,10 @@ body {
.player-stats {
display: block;
margin-left: 10px;
margin-top: -12px;
}
.player-stats p {
font-size: xx-large;
}
.score-stats {
@ -85,6 +86,10 @@ body {
margin-right: 5px;
}
.score-stats p {
font-size: xx-large;
}
.score-stats-right {
margin-right: 10px;
}
@ -96,7 +101,6 @@ body {
.score-stats-hands {
display: flex;
margin-top: -30px;
}
.score-stats-hands div {
@ -115,6 +119,7 @@ body {
left:0;
margin-left: 5px;
margin-bottom: 5px;
font-size: large !important;
}
.song-info-container img {
@ -123,7 +128,10 @@ body {
.song-info {
margin-left: 10px;
margin-top: -10px;
}
.song-info p {
font-size: x-large;
}
.song-info-song-name {
@ -139,12 +147,12 @@ body {
.song-info-song-other-container {
display: flex;
margin-top: 5px;
margin-top: 6px;
}
.song-info-diff {
font-size: large;
padding: 9px 5px;
padding: 0px 4px;
width: fit-content;
border-radius: 5%;
font-weight: bold;
@ -153,7 +161,6 @@ body {
.song-info-bsr {
font-size: large;
margin-left: 10px;
margin-top: 28px;
}
.song-time-container {
@ -179,6 +186,6 @@ body {
}
.song-time-text {
margin-top: 8px;
margin-top: 6px;
font-size: large;
}