6 Commits

Author SHA1 Message Date
35611bf51f chore(deps): update dependency postcss to v8.4.35 2024-03-06 01:16:26 +00:00
47b8116fd7 update readme
All checks were successful
Publish / deploy (push) Successful in 45s
2023-11-22 15:44:16 +00:00
394e65d0da add usage instead of saying missing values
All checks were successful
Publish / deploy (push) Successful in 44s
2023-11-22 15:42:29 +00:00
58149a8061 fix missing values messages
All checks were successful
Publish / deploy (push) Successful in 1m32s
2023-11-22 15:38:04 +00:00
2fc7257929 update readme 2023-11-22 15:37:50 +00:00
c64f38eec7 fix calc message & format day count 2023-11-22 15:30:09 +00:00
3 changed files with 69 additions and 59 deletions

View File

@ -1,36 +1,16 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). # Scoresaber PP to Rank Overlay
## Getting Started Nothing fancy, just made this for me and a friend but feel free to use it. </br>
The text is white, so it you won't be able to see it. It will show up on OBS though.
First, run the development server: ## Usage
```bash Usage: <https://ss-pp-to-rank-overlay.fascinated.cc/?id=YOUR_SCORESABER_ID&rank=1&started=START_TIME_IN_MILIS> </br>
npm run dev Example:
# or <https://ss-pp-to-rank-overlay.fascinated.cc/?id=76561198449412074&rank=1000&started=1700575968398>
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - ID: Your scoresaber ID
- Rank: The rank you want to get to
- Started: The time you started the song in miliseconds. You can get this at <https://www.unixtimestamp.com>
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. You can remove the &started= part if you don't want the day counter.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

44
pnpm-lock.yaml generated
View File

@ -27,7 +27,7 @@ devDependencies:
version: 18.2.16 version: 18.2.16
autoprefixer: autoprefixer:
specifier: ^10.0.1 specifier: ^10.0.1
version: 10.4.16(postcss@8.4.31) version: 10.4.16(postcss@8.4.35)
eslint: eslint:
specifier: ^8 specifier: ^8
version: 8.54.0 version: 8.54.0
@ -36,7 +36,7 @@ devDependencies:
version: 14.0.3(eslint@8.54.0)(typescript@5.3.2) version: 14.0.3(eslint@8.54.0)(typescript@5.3.2)
postcss: postcss:
specifier: ^8 specifier: ^8
version: 8.4.31 version: 8.4.35
tailwindcss: tailwindcss:
specifier: ^3.3.0 specifier: ^3.3.0
version: 3.3.5 version: 3.3.5
@ -519,7 +519,7 @@ packages:
has-symbols: 1.0.3 has-symbols: 1.0.3
dev: true dev: true
/autoprefixer@10.4.16(postcss@8.4.31): /autoprefixer@10.4.16(postcss@8.4.35):
resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==} resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
engines: {node: ^10 || ^12 || >=14} engines: {node: ^10 || ^12 || >=14}
hasBin: true hasBin: true
@ -531,7 +531,7 @@ packages:
fraction.js: 4.3.7 fraction.js: 4.3.7
normalize-range: 0.1.2 normalize-range: 0.1.2
picocolors: 1.0.0 picocolors: 1.0.0
postcss: 8.4.31 postcss: 8.4.35
postcss-value-parser: 4.2.0 postcss-value-parser: 4.2.0
dev: true dev: true
@ -1985,29 +1985,29 @@ packages:
engines: {node: '>= 6'} engines: {node: '>= 6'}
dev: true dev: true
/postcss-import@15.1.0(postcss@8.4.31): /postcss-import@15.1.0(postcss@8.4.35):
resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
peerDependencies: peerDependencies:
postcss: ^8.0.0 postcss: ^8.0.0
dependencies: dependencies:
postcss: 8.4.31 postcss: 8.4.35
postcss-value-parser: 4.2.0 postcss-value-parser: 4.2.0
read-cache: 1.0.0 read-cache: 1.0.0
resolve: 1.22.8 resolve: 1.22.8
dev: true dev: true
/postcss-js@4.0.1(postcss@8.4.31): /postcss-js@4.0.1(postcss@8.4.35):
resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
engines: {node: ^12 || ^14 || >= 16} engines: {node: ^12 || ^14 || >= 16}
peerDependencies: peerDependencies:
postcss: ^8.4.21 postcss: ^8.4.21
dependencies: dependencies:
camelcase-css: 2.0.1 camelcase-css: 2.0.1
postcss: 8.4.31 postcss: 8.4.35
dev: true dev: true
/postcss-load-config@4.0.2(postcss@8.4.31): /postcss-load-config@4.0.2(postcss@8.4.35):
resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
engines: {node: '>= 14'} engines: {node: '>= 14'}
peerDependencies: peerDependencies:
@ -2020,17 +2020,17 @@ packages:
optional: true optional: true
dependencies: dependencies:
lilconfig: 3.0.0 lilconfig: 3.0.0
postcss: 8.4.31 postcss: 8.4.35
yaml: 2.3.4 yaml: 2.3.4
dev: true dev: true
/postcss-nested@6.0.1(postcss@8.4.31): /postcss-nested@6.0.1(postcss@8.4.35):
resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
engines: {node: '>=12.0'} engines: {node: '>=12.0'}
peerDependencies: peerDependencies:
postcss: ^8.2.14 postcss: ^8.2.14
dependencies: dependencies:
postcss: 8.4.31 postcss: 8.4.35
postcss-selector-parser: 6.0.13 postcss-selector-parser: 6.0.13
dev: true dev: true
@ -2053,6 +2053,16 @@ packages:
nanoid: 3.3.7 nanoid: 3.3.7
picocolors: 1.0.0 picocolors: 1.0.0
source-map-js: 1.0.2 source-map-js: 1.0.2
dev: false
/postcss@8.4.35:
resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.7
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
/prelude-ls@1.2.1: /prelude-ls@1.2.1:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@ -2388,11 +2398,11 @@ packages:
normalize-path: 3.0.0 normalize-path: 3.0.0
object-hash: 3.0.0 object-hash: 3.0.0
picocolors: 1.0.0 picocolors: 1.0.0
postcss: 8.4.31 postcss: 8.4.35
postcss-import: 15.1.0(postcss@8.4.31) postcss-import: 15.1.0(postcss@8.4.35)
postcss-js: 4.0.1(postcss@8.4.31) postcss-js: 4.0.1(postcss@8.4.35)
postcss-load-config: 4.0.2(postcss@8.4.31) postcss-load-config: 4.0.2(postcss@8.4.35)
postcss-nested: 6.0.1(postcss@8.4.31) postcss-nested: 6.0.1(postcss@8.4.35)
postcss-selector-parser: 6.0.13 postcss-selector-parser: 6.0.13
resolve: 1.22.8 resolve: 1.22.8
sucrase: 3.34.0 sucrase: 3.34.0

View File

@ -53,21 +53,41 @@ export default function Home() {
setInterval(updateRank, 1000 * 60 * 1); // update every minute setInterval(updateRank, 1000 * 60 * 1); // update every minute
}, [mounted, updateRank]); }, [mounted, updateRank]);
if (!playerId || !rank) {
return (
<main className="text-xl p-2 text-black">
<p>
Usage:{" "}
<span className="text-blue-500">
<a href="https://git.fascinated.cc/Fascinated/scoresaber-pp-to-rank-overlay#usage">
https://git.fascinated.cc/Fascinated/scoresaber-pp-to-rank-overlay#usage
</a>
</span>
</p>
</main>
);
}
if (!ppDiff) {
return (
<main className="text-xl p-2 text-white">
<p>Calculating...</p>
</main>
);
}
return ( return (
<main className="text-xl text-white"> <main className="text-xl text-white">
{!playerId && <p>Invalid player ID</p>} <div className="flex gap-1 flex-col p-2">
{!rank && <p>Invalid rank</p>} <p>
{!ppDiff && <p>Calculating...</p>} {formatNumber(ppDiff, 2)}pp until rank {formatNumber(rank)}
{ppDiff && ( </p>
<div className="flex gap-1 flex-col p-2"> {startedAt && (
<p> <p>
{formatNumber(ppDiff, 2)}pp until rank {formatNumber(rank)} Day {formatNumber(getDaysSince(new Date(Number(startedAt))) + 1)}
</p> </p>
{startedAt && ( )}
<p>Day {getDaysSince(new Date(Number(startedAt))) + 1}</p> </div>
)}
</div>
)}
</main> </main>
); );
} }