Merge pull request #180 from osu-tournament-rating/staging

Staging
osu-tournament-rating · May 5, 2024 · 3b9e21c · 3b9e21c
2 parents 6714335 + e02a0ae
commit 3b9e21c
Show file tree

Hide file tree

Showing 19 changed files with 191 additions and 69 deletions.
diff --git a/app/actions.ts b/app/actions.ts
@@ -317,7 +317,7 @@ export async function fetchLeaderboard(params: {}) {
 
   /* PLAYERID */
 
-  const { type, page, rank, rating, matches, winrate, tiers } = params;
+  const { type, page, rank, rating, matches, winRate, tiers } = params;
 
   const tierFilters = {
     bronze: 'bronze',
@@ -361,12 +361,12 @@ export async function fetchLeaderboard(params: {}) {
           .sort(compareNumbers))
     : undefined;
 
-  winrate
-    ? Array.isArray(winrate)
-      ? (paramsToProcess.winrate = winrate
+  winRate
+    ? Array.isArray(winRate)
+      ? (paramsToProcess.winRate = winRate
           .map((value) => Number(value) / 100)
           .sort(compareNumbers))
-      : (paramsToProcess.winrate = Array(winrate)
+      : (paramsToProcess.winRate = Array(winRate)
           .map((value) => Number(value) / 100)
           .sort(compareNumbers))
     : undefined;
@@ -438,13 +438,13 @@ export async function fetchLeaderboard(params: {}) {
       : null;
   }
 
-  /* Check winrate filter */
-  if (queryCheck.data.winrate) {
-    queryCheck.data.winrate[0] != null
-      ? (backendObject['MinWinrate'] = queryCheck.data.winrate[0])
+  /* Check winRate filter */
+  if (queryCheck.data.winRate) {
+    queryCheck.data.winRate[0] != null
+      ? (backendObject['MinWinrate'] = queryCheck.data.winRate[0])
       : null;
-    queryCheck.data.winrate[1] != null
-      ? (backendObject['MaxWinrate'] = queryCheck.data.winrate[1])
+    queryCheck.data.winRate[1] != null
+      ? (backendObject['MaxWinrate'] = queryCheck.data.winRate[1])
       : null;
   }
 
@@ -517,9 +517,12 @@ export async function fetchUserPageTitle(player: string | number) {
 export async function fetchUserPage(player: string | number) {
   const session = await getSession(true);
 
+  const osuMode =
+    (await cookies().get('OTR-user-selected-osu-mode')?.value) ?? '0';
+
   let res = await fetch(
-    `${process.env.REACT_APP_API_URL}/stats/${player}${
-      session?.playerId ? `?comparerId=${session?.playerId}` : ''
+    `${process.env.REACT_APP_API_URL}/stats/${player}?mode=${osuMode}${
+      session?.playerId ? `&comparerId=${session?.playerId}` : ''
     }`,
     {
       headers: {

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -135,7 +135,7 @@ export default async function page({
           </div>
         </GridCard>
         <GridCard title={'Winrate by mod'}>
-          <RadarChart winrateModData={data?.modStats} />
+          <RadarChart winRateModData={data?.modStats} />
         </GridCard>
         <GridCard title={'Average score per mod'}>
           <RadarChart averageModScore={data?.modStats} />

diff --git a/app/leaderboards/page.tsx b/app/leaderboards/page.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 };
 
 const catchErrors = async (params: {}, leaderboard: any) => {
-  /* const { type, rank, rating, matches, winrate, inclTier, exclTier } = params; */
+  /* const { type, rank, rating, matches, winRate, inclTier, exclTier } = params; */
 
   if (leaderboard === undefined) {
     return redirect('/leaderboards');

diff --git a/app/users/[id]/error.module.css b/app/users/[id]/error.module.css
@@ -0,0 +1,47 @@
+.errorDiv {
+  position: relative;
+  min-height: 60dvh;
+  height: 70dvh;
+  max-height: 70dvh;
+  margin: var(--main-padding);
+  margin-top: 0;
+}
+
+.errorDiv .content {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--internal-gap);
+  gap: var(--internal-gap);
+  z-index: 2;
+}
+
+.errorDiv img {
+  z-index: 1;
+}
+
+.errorDiv h1 {
+  font-size: 4rem;
+}
+
+.errorDiv span {
+  font-size: 3.5rem;
+  letter-spacing: -2%;
+  text-align: center;
+  max-width: 40vw;
+}
+
+.errorDiv button {
+  margin-top: 1.3rem;
+  padding: 1rem 3rem;
+  width: fit-content;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0.4rem;
+  font-size: 1rem;
+  transition: background-color 0.2s ease-out;
+}
diff --git a/app/users/[id]/error.tsx b/app/users/[id]/error.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import backgroundError from '@/public/images/error-background.svg';
+import Image from 'next/image';
+import { useEffect } from 'react';
+import Balancer from 'react-wrap-balancer';
+import styles from './error.module.css';
+
+const errors = {
+  '4': {
+    title: 'No data',
+    message: "You don't have any data for the selected ruleset",
+    reloadBtn: true,
+  },
+  '404': {
+    title: '404',
+    message: "We don't have that page",
+    reloadBtn: false,
+  },
+};
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  let errorContent = !isNaN(error.message)
+    ? errors[error.message]
+    : errors['404'];
+
+  return (
+    <div className={styles.errorDiv}>
+      <Image src={backgroundError} alt="Error background" fill />
+      <div className={styles.content}>
+        <h1>{errorContent.title}</h1>
+        <span>{errorContent.message}</span>
+        {errorContent.reloadBtn && (
+          <button
+            onClick={
+              // Attempt to recover by trying to re-render the segment
+              () => reset()
+            }
+          >
+            Try again
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/users/[id]/page.tsx b/app/users/[id]/page.tsx
@@ -137,7 +137,7 @@ export default async function page({
           </div>
         </GridCard>
         <GridCard title={'Winrate by mod'}>
-          <RadarChart winrateModData={data?.modStats} />
+          <RadarChart winRateModData={data?.modStats} />
         </GridCard>
         <GridCard title={'Average score per mod'}>
           <RadarChart averageModScore={data?.modStats} />

diff --git a/components/Charts/AreaChart/AreaChart.module.css b/components/Charts/AreaChart/AreaChart.module.css
@@ -1,6 +1,7 @@
 .graphContainer {
   width: 100%;
   height: 100%;
+  position: relative;
   border-radius: var(--main-borderRadius);
 }
 

diff --git a/components/Charts/BarChart/BarChart.module.css b/components/Charts/BarChart/BarChart.module.css
@@ -0,0 +1,5 @@
+.barChart {
+  /*  position: relative; */
+  height: 100%;
+  width: 100%;
+}
diff --git a/components/Charts/DoughnutChart/DoughnutChart.module.css b/components/Charts/DoughnutChart/DoughnutChart.module.css
@@ -1,5 +1,7 @@
 .container {
   width: 100%;
+  height: 100%;
+  position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   max-height: 12rem;

diff --git a/components/Charts/PlayersBarChart/PlayersBarChart.module.css b/components/Charts/PlayersBarChart/PlayersBarChart.module.css
@@ -1,14 +1,11 @@
 .playersChart {
-  display: flex;
-  flex-flow: row;
-}
-
-.chart {
   width: 100%;
-  max-width: 100%;
-  height: 14rem;
-  max-height: 14rem;
   display: flex;
+  /* max-width: 100%;
+  height: 14rem;
+  max-height: 14rem; */
+  height: 100%;
+  position: relative;
 }
 
 .yAxe {

diff --git a/components/Charts/PlayersBarChart/PlayersBarChart.tsx b/components/Charts/PlayersBarChart/PlayersBarChart.tsx
@@ -146,28 +146,13 @@ export default function PlayersBarChart({ players }: { players: [] }) {
 
   return (
     <div className={styles.playersChart}>
-      {/* <div className={styles.yAxe}>
-        {labels.map((label, index) => {
-          return (
-            <div className={styles.label} key={index}>
-              {
-                <div className={styles.image}>
-                  <Image src={'http://s.ppy.sh/a/4001304'} alt="propic" fill />
-                </div>
-              }
-            </div>
-          );
-        })}
-      </div> */}
-      <div className={styles.chart}>
-        <Bar
-          options={options}
-          data={data}
-          plugins={[playerImage]}
-          onClick={chartOnClick}
-          ref={chartRef}
-        />
-      </div>
+      <Bar
+        options={options}
+        data={data}
+        plugins={[playerImage]}
+        onClick={chartOnClick}
+        ref={chartRef}
+      />
     </div>
   );
 }
diff --git a/components/Charts/RadarChart/RadarChart.module.css b/components/Charts/RadarChart/RadarChart.module.css
@@ -1,3 +1,5 @@
 .radarChart {
-  height: 20rem;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
diff --git a/components/Charts/RadarChart/RadarChart.tsx b/components/Charts/RadarChart/RadarChart.tsx
@@ -32,10 +32,10 @@ function kFormatter(num: number) {
 }
 
 export default function RadarChart({
-  winrateModData,
+  winRateModData,
   averageModScore,
 }: {
-  winrateModData?: any;
+  winRateModData?: any;
   averageModScore?: any;
 }) {
   const { theme } = useTheme();
@@ -69,10 +69,10 @@ export default function RadarChart({
     'HDDT',
   ];
 
-  if (winrateModData) {
-    Object.keys(winrateModData).forEach((mod: any) => {
+  if (winRateModData) {
+    Object.keys(winRateModData).forEach((mod: any) => {
       let label = mod.replace('played', '');
-      let value = (winrateModData[mod]?.winrate * 100) | 0;
+      let value = (winRateModData[mod]?.winRate * 100) | 0;
       mods.push({ label, value });
     });
     mods.sort(
@@ -121,7 +121,7 @@ export default function RadarChart({
     labels: mods.map((mod) => mod.label),
     datasets: [
       {
-        label: winrateModData
+        label: winRateModData
           ? 'Winrate %'
           : averageModScore
           ? 'AVG Score'
@@ -192,19 +192,19 @@ export default function RadarChart({
           color:
             theme === 'dark' ? 'rgba(250,250,250,0.028)' : 'rgba(0,0,0,0.08)',
         },
-        min: winrateModData ? -25 : averageModScore ? -200000 : -25,
-        max: winrateModData ? 100 : averageModScore ? 1000000 : 100,
+        min: winRateModData ? -25 : averageModScore ? -200000 : -25,
+        max: winRateModData ? 100 : averageModScore ? 1000000 : 100,
         ticks: {
           font: {
             size: 10,
             family: font,
             weight: 300,
           },
           color: theme === 'dark' ? 'rgba(250,250,250,0.7)' : '#707070',
-          stepSize: winrateModData ? 25 : averageModScore ? 200000 : 25,
+          stepSize: winRateModData ? 25 : averageModScore ? 200000 : 25,
           callback: (value: any, tick: any, values: any) => {
             return value !== 0
-              ? `${kFormatter(value)}${winrateModData ? '%' : ''}`
+              ? `${kFormatter(value)}${winRateModData ? '%' : ''}`
               : '';
           },
           showLabelBackdrop: (context: any) => {

diff --git a/components/Collapsible/FiltersCollapsible/FiltersCollapsible.tsx b/components/Collapsible/FiltersCollapsible/FiltersCollapsible.tsx
@@ -19,7 +19,7 @@ export default function FiltersCollapsible({
   isCollapsibleOpen: boolean;
   data: {};
 }) {
-  const { type, rank, rating, matches, winrate, tiers } = params;
+  const { type, rank, rating, matches, winRate, tiers } = params;
 
   const [paramsToPush, setParamsToPush] = useState({});
 
@@ -45,7 +45,7 @@ export default function FiltersCollapsible({
       rank: rank != null ? rank : [],
       rating: rating != null ? rating : [],
       matches: matches != null ? matches : [],
-      winrate: winrate != null ? winrate : [],
+      winRate: winRate != null ? winRate : [],
     });
   }, [params]);
 

diff --git a/components/Dashboard/GridCard/GridCard.module.css b/components/Dashboard/GridCard/GridCard.module.css
@@ -5,6 +5,11 @@
   padding: var(--main-padding);
   border-radius: var(--main-borderRadius);
   gap: 1.3rem;
+  height: 28em;
+}
+
+.card.firstRow {
+  height: 20em;
 }
 
 .card h1 {
@@ -15,5 +20,13 @@
 .content {
   display: flex;
   flex-flow: column;
+  align-items: center;
+  justify-content: center;
   gap: 1rem;
+  height: 100%;
+}
+
+.content.notGraph {
+  align-items: start;
+  justify-content: start;
 }