Staging

README.md

@@ -1,36 +1,5 @@
-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).
+![osu! Tournament Rating](https://akinariosu.s-ul.eu/X1Me0Jpd)
 
-## Getting Started
+# o!TR Web
 
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-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.
+[![CodeFactor](https://www.codefactor.io/repository/github/osu-tournament-rating/otr-web/badge)](https://www.codefactor.io/repository/github/osu-tournament-rating/otr-web)

app/actions.ts

@@ -23,7 +23,7 @@ export async function getUserData() {
     }, */
   });
 
-  if (res.status !== 200) {
+  if (!res?.ok) {
     const errorMessage = await res.text();
 
     return {
@@ -35,22 +35,9 @@ export async function getUserData() {
     };
   }
 
-  if (res.status === 200) {
-    res = await res.json();
-
-    return res;
-  }
+  res = await res.json();
 
-  /* .then((response) => {
-      return response.json();
-    })
-    .then((data) => {
-      console.log(data);
-      return data;
-    })
-    .catch((error) => {
-      console.error('Error fetching authenticated user:', error);
-    }); */
+  return res;
 }
 
 export async function checkUserLogin() {
@@ -67,11 +54,13 @@ export async function checkUserLogin() {
   });
 
   if (!res?.ok) {
-    const errorCode = res?.status;
+    const errorMessage = await res.text();
 
     return {
       error: {
-        errorCode,
+        status: res?.status,
+        text: res?.statusText,
+        message: errorMessage,
       },
     };
   }
@@ -204,6 +193,10 @@ export async function saveTournamentMatches(
   }
 }
 
+export async function getOsuModeCookie() {
+  return cookies().get('OTR-user-selected-osu-mode');
+}
+
 export async function changeOsuModeCookie(mode?: string) {
   await cookies().set('OTR-user-selected-osu-mode', mode ?? '0');
   return;

app/dashboard/page.module.css

@@ -65,10 +65,6 @@
   color: hsla(var(--red-400));
 }
 
-.change.negative::before {
-  content: '-';
-}
-
 .header .stats {
   display: flex;
   flex-flow: row;

app/dashboard/page.tsx

@@ -102,7 +102,7 @@ export default async function page({
             </div>
           </div>
           <div className={styles.chart}>
-            <AreaChart ratingStats={data.ratingStats} />
+            <AreaChart ratingStats={data.ratingChart.chartData} />
           </div>
         </div>
       </div>
@@ -162,32 +162,6 @@ export default async function page({
         <GridCard title={'Winrate by mod'}>
           <RadarChart winrateModData={data?.modStats} />
         </GridCard>
-        <GridCard title={'Teammates'}>
-          <div className={styles.cardStat}>
-            <span>Most played</span>
-            <span className={styles.value}>
-              {data?.matchStats.mostPlayedTeammateName}
-            </span>
-          </div>
-          <div className={styles.cardStat}>
-            <span>Best teammate</span>
-            <span className={styles.value}>
-              {data?.matchStats.bestTeammateName}
-            </span>
-          </div>
-        </GridCard>
-        <GridCard title={'Opponents'}>
-          <div className={styles.cardStat}>
-            <span>Most played</span>
-            <span className={styles.value}>
-              {data?.matchStats.mostPlayedOpponentName}
-            </span>
-          </div>
-          <div className={styles.cardStat}>
-            <span>Best opponent</span>
-            <span className={styles.value}>TO DO</span>
-          </div>
-        </GridCard>
         <GridCard title={'Average score per mod'}>
           <RadarChart averageModScore={data?.modStats} />
         </GridCard>

app/globals.css

@@ -117,6 +117,10 @@
   /* USER RATING TIER */
   --tier-bar-background: var(--gray-300);
   --tier-bar-accent: var(--accent-color);
+
+  /* TOAST */
+  --toast-error-bg: var(--yellow-200);
+  --toast-error-border: 50, 70%, 64%;
 }
 
 * {

app/layout.tsx

@@ -1,5 +1,6 @@
 import Footer from '@/components/Footer/Footer';
-import NavBar from '@/components/NavBar/NavBar';
+import { LayoutProvider } from '@/components/LayoutProvider/LayoutProvider';
+import ErrorProvider from '@/util/ErrorContext';
 import UserProvider from '@/util/UserLoggedContext';
 import type { Metadata } from 'next';
 import { Viewport } from 'next';
@@ -32,11 +33,14 @@ export default function RootLayout({
   return (
     <html lang="en" className={inter.variable}>
       <body>
-        <UserProvider>
-          <NavBar />
-          {children}
-          <Footer />
-        </UserProvider>
+        <ErrorProvider>
+          <UserProvider>
+            <LayoutProvider>
+              {children}
+              <Footer />
+            </LayoutProvider>
+          </UserProvider>
+        </ErrorProvider>
       </body>
     </html>
   );

app/unauthorized/page.tsx

@@ -2,21 +2,24 @@
 
 import LoginButton from '@/components/Button/LoginButton';
 import Card from '@/components/Card/Card';
-import { useUser } from '@/util/hooks';
+import { useSetError, useUser } from '@/util/hooks';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import styles from './page.module.css';
 
 export default function Unauthorized() {
   const router = useRouter();
   const user = useUser();
+  const setError = useSetError();
 
   if (user?.osuId) {
     return router.push('/');
   }
 
+  setError(user?.error);
+
   return (
-    <main className={styles.container}>
+    <main className={styles.container} style={{ paddingTop: '2vw' }}>
       <Card
         title="Unauthorized"
         description="Currently, the o!TR website is in a closed pre-alpha state. Only whitelisted users are allowed. We will open things up once we have more features implemented. Thanks for your patience!"

app/users/[id]/page.module.css

@@ -65,10 +65,6 @@
   color: hsla(var(--red-400));
 }
 
-.change.negative::before {
-  content: '-';
-}
-
 .header .stats {
   display: flex;
   flex-flow: row;

app/users/[id]/page.tsx

@@ -82,7 +82,7 @@ export default async function page({
             </div>
           </div>
           <div className={styles.chart}>
-            <AreaChart ratingStats={data.ratingStats} />
+            <AreaChart ratingStats={data.ratingChart.chartData} />
           </div>
         </div>
       </div>
@@ -142,32 +142,6 @@ export default async function page({
         <GridCard title={'Winrate by mod'}>
           <RadarChart winrateModData={data?.modStats} />
         </GridCard>
-        <GridCard title={'Teammates'}>
-          <div className={styles.cardStat}>
-            <span>Most played</span>
-            <span className={styles.value}>
-              {data?.matchStats.mostPlayedTeammateName}
-            </span>
-          </div>
-          <div className={styles.cardStat}>
-            <span>Best teammate</span>
-            <span className={styles.value}>
-              {data?.matchStats.bestTeammateName}
-            </span>
-          </div>
-        </GridCard>
-        <GridCard title={'Opponents'}>
-          <div className={styles.cardStat}>
-            <span>Most played</span>
-            <span className={styles.value}>
-              {data?.matchStats.mostPlayedOpponentName}
-            </span>
-          </div>
-          <div className={styles.cardStat}>
-            <span>Best opponent</span>
-            <span className={styles.value}>TO DO</span>
-          </div>
-        </GridCard>
         <GridCard title={'Average score per mod'}>
           <RadarChart averageModScore={data?.modStats} />
         </GridCard>

components/Charts/AreaChart/AreaChart.module.css

@@ -28,6 +28,18 @@
   color: hsla(var(--tooltip-color), 0.92);
   cursor: default;
   pointer-events: auto;
+  align-items: center;
+}
+
+.tooltip .headerDate {
+  color: #ddd;
+  font-weight: 600;
+  font-size: 0.95em;
+  margin-left: auto;
+  text-align: right;
+  padding-left: 1.5em;
+  display: flex;
+  flex-flow: row nowrap;
 }
 
 .tooltip ul {