Liam
GitHub
commit
79aaa98bc7
@ -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
2462
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
||||
@ -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} />
|
||||
@ -14,8 +19,9 @@ function MyApp({ Component, pageProps }) {
|
||||
<meta property="og:description" content= {Config.description} key="description" />
|
||||
<meta name="theme-color" content= {Config.color} />
|
||||
</Head>
|
||||
<Component {...pageProps} />
|
||||
</>
|
||||
<Component {...pageProps} />
|
||||
</NextUIProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
export default MyApp;
|
||||
|
||||
33
pages/_document.js
Normal file
33
pages/_document.js
Normal 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,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)) {
|
||||
@ -15,7 +16,7 @@ export default async function handler(req, res) {
|
||||
const imagePath = cacheDir + path.sep + mapHash + "." + ext;
|
||||
const exists = fs.existsSync(imagePath);
|
||||
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();
|
||||
buffer = await sharp(buffer).resize(150, 150).toBuffer()
|
||||
fs.writeFileSync(imagePath, buffer);
|
||||
|
||||
@ -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'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'}>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user