chore(deps): update react monorepo to v18.2.69

Reviewed-on: #1

README.md

@@ -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.

pnpm-lock.yaml

@@ -21,10 +21,10 @@ devDependencies:
     version: 20.9.3
   '@types/react':
     specifier: ^18
-    version: 18.2.38
+    version: 18.2.69
   '@types/react-dom':
     specifier: ^18
-    version: 18.2.16
+    version: 18.2.22
   autoprefixer:
     specifier: ^10.0.1
     version: 10.4.16(postcss@8.4.31)
@@ -282,26 +282,26 @@ packages:
       undici-types: 5.26.5
     dev: true
 
-  /@types/prop-types@15.7.11:
+  /@types/prop-types@15.7.12:
-    resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
+    resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
     dev: true
 
-  /@types/react-dom@18.2.16:
+  /@types/react-dom@18.2.22:
-    resolution: {integrity: sha512-766c37araZ9vxtYs25gvY2wNdFWsT2ZiUvOd0zMhTaoGj6B911N8CKQWgXXJoPMLF3J82thpRqQA7Rf3rBwyJw==}
+    resolution: {integrity: sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==}
     dependencies:
-      '@types/react': 18.2.38
+      '@types/react': 18.2.69
     dev: true
 
-  /@types/react@18.2.38:
+  /@types/react@18.2.69:
-    resolution: {integrity: sha512-cBBXHzuPtQK6wNthuVMV6IjHAFkdl/FOPFIlkd81/Cd1+IqkHu/A+w4g43kaQQoYHik/ruaQBDL72HyCy1vuMw==}
+    resolution: {integrity: sha512-W1HOMUWY/1Yyw0ba5TkCV+oqynRjG7BnteBB+B7JmAK7iw3l2SW+VGOxL+akPweix6jk2NNJtyJKpn4TkpfK3Q==}
     dependencies:
-      '@types/prop-types': 15.7.11
+      '@types/prop-types': 15.7.12
-      '@types/scheduler': 0.16.7
+      '@types/scheduler': 0.16.8
-      csstype: 3.1.2
+      csstype: 3.1.3
     dev: true
 
-  /@types/scheduler@0.16.7:
+  /@types/scheduler@0.16.8:
-    resolution: {integrity: sha512-8g25Nl3AuB1KulTlSUsUhUo/oBgBU6XIXQ+XURpeioEbEJvkO7qI4vDfREv3vJYHHzqXjcAHvoJy4pTtSQNZtA==}
+    resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
     dev: true
 
   /@typescript-eslint/parser@6.12.0(eslint@8.54.0)(typescript@5.3.2):
@@ -675,8 +675,8 @@ packages:
     hasBin: true
     dev: true
 
-  /csstype@3.1.2:
+  /csstype@3.1.3:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
     dev: true
 
   /damerau-levenshtein@1.0.8:

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "local>Fascinated/renovate-config"
+  ]
+}

src/app/page.tsx

@@ -53,21 +53,41 @@ export default function Home() {
     setInterval(updateRank, 1000 * 60 * 1); // update every minute
   }, [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 (
     <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>
-            {formatNumber(ppDiff, 2)}pp until rank {formatNumber(rank)}
+            Day {formatNumber(getDaysSince(new Date(Number(startedAt))) + 1)}
           </p>
-          {startedAt && (
+        )}
-            <p>Day {getDaysSince(new Date(Number(startedAt))) + 1}</p>
+      </div>
-          )}
-        </div>
-      )}
     </main>
   );
 }