From 88ab1f8fcce712b077165237deb3c0b512b0de4d Mon Sep 17 00:00:00 2001
From: Giovanni Martire <akinari@outlook.it>
Date: Sat, 27 Apr 2024 18:47:19 +0200
Subject: [PATCH 1/3] first fixes to graph scaling

---
 .../Charts/AreaChart/AreaChart.module.css     |  1 +
 .../Charts/BarChart/BarChart.module.css       |  5 ++++
 .../DoughnutChart/DoughnutChart.module.css    |  2 ++
 .../PlayersBarChart.module.css                | 13 ++++-----
 .../PlayersBarChart/PlayersBarChart.tsx       | 29 +++++--------------
 .../Charts/RadarChart/RadarChart.module.css   |  4 ++-
 .../Dashboard/GridCard/GridCard.module.css    | 13 +++++++++
 components/Dashboard/GridCard/GridCard.tsx    | 22 ++++++++++----
 8 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/components/Charts/AreaChart/AreaChart.module.css b/components/Charts/AreaChart/AreaChart.module.css
index c5aefcb..5a709ce 100644
--- 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
index e69de29..0a3e33c 100644
--- 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
index 378466a..9d78b97 100644
--- 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
index c2f6ae7..fc47c1c 100644
--- 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
index 29d6f56..a9a1f7e 100644
--- 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
index ec6dbcb..8517682 100644
--- 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/Dashboard/GridCard/GridCard.module.css b/components/Dashboard/GridCard/GridCard.module.css
index e75ff0b..b784922 100644
--- 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;
 }
diff --git a/components/Dashboard/GridCard/GridCard.tsx b/components/Dashboard/GridCard/GridCard.tsx
index 8e56e4f..09c75a9 100644
--- a/components/Dashboard/GridCard/GridCard.tsx
+++ b/components/Dashboard/GridCard/GridCard.tsx
@@ -1,7 +1,11 @@
 'use client';
 
+import clsx from 'clsx';
 import styles from './GridCard.module.css';
 
+const firstRow = ['Most played mods', 'General', 'Per match'];
+const textCards = ['General', 'Per match'];
+
 export default function GridCard({
   title,
   children,
@@ -11,14 +15,20 @@ export default function GridCard({
 }) {
   return (
     <div
-      className={styles.card}
-      style={{
-        paddingBottom: title === 'Winrate by mod' ? '0.2vw' : '2vw',
-        gap: title === 'Winrate by mod' ? '0.2rem' : '1.3rem',
-      }}
+      className={clsx(
+        styles.card,
+        firstRow.includes(title) ? styles.firstRow : ''
+      )}
     >
       <h1>{title}</h1>
-      <div className={styles.content}>{children}</div>
+      <div
+        className={clsx(
+          styles.content,
+          textCards.includes(title) ? styles.notGraph : ''
+        )}
+      >
+        {children}
+      </div>
     </div>
   );
 }

From 2bac31342465397c701d3ae99e11d9f53f59c04a Mon Sep 17 00:00:00 2001
From: hburn7 <hburnett777@gmail.com>
Date: Wed, 1 May 2024 09:04:55 -0400
Subject: [PATCH 2/3] Rename 'winrate' to 'winRate' everywhere

---
 app/actions.ts                                | 22 +++++++++----------
 app/dashboard/page.tsx                        |  2 +-
 app/leaderboards/page.tsx                     |  2 +-
 app/users/[id]/page.tsx                       |  2 +-
 components/Charts/RadarChart/RadarChart.tsx   | 20 ++++++++---------
 .../FiltersCollapsible/FiltersCollapsible.tsx |  4 ++--
 .../Leaderboard/UserStats/UserStats.tsx       |  2 +-
 components/Range/RangeSlider.module.css       |  4 ++--
 lib/types.ts                                  |  2 +-
 9 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/app/actions.ts b/app/actions.ts
index f8307fd..2e51178 100644
--- 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;
   }
 
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 7331e68..b92d1bc 100644
--- 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
index 1b355bd..9d87309 100644
--- 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]/page.tsx b/app/users/[id]/page.tsx
index 747caa8..5c9fc5d 100644
--- 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/RadarChart/RadarChart.tsx b/components/Charts/RadarChart/RadarChart.tsx
index 1d457e9..6b6089a 100644
--- 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,8 +192,8 @@ 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,
@@ -201,10 +201,10 @@ export default function RadarChart({
             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
index 1675cf6..8283d4c 100644
--- 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/Leaderboard/UserStats/UserStats.tsx b/components/Leaderboard/UserStats/UserStats.tsx
index b5786f0..a3190eb 100644
--- a/components/Leaderboard/UserStats/UserStats.tsx
+++ b/components/Leaderboard/UserStats/UserStats.tsx
@@ -30,7 +30,7 @@ export default function UserStats({ data }: { data: {} }) {
         <div className={styles.item}>
           <div className={styles.label}>Winrate</div>
           <div className={styles.value}>
-            {parseFloat((data.winrate * 100).toFixed(2))}%
+            {parseFloat((data.winRate * 100).toFixed(2))}%
           </div>
         </div>
         <div className={styles.item}>
diff --git a/components/Range/RangeSlider.module.css b/components/Range/RangeSlider.module.css
index 2379f57..43ef62c 100644
--- a/components/Range/RangeSlider.module.css
+++ b/components/Range/RangeSlider.module.css
@@ -44,12 +44,12 @@
   -moz-appearance: textfield;
 }
 
-.winrate {
+.winRate {
   position: relative;
   display: block;
 }
 
-.winrate::after {
+.winRate::after {
   content: '%';
   position: absolute;
 
diff --git a/lib/types.ts b/lib/types.ts
index 6dfb26d..b83a139 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -21,7 +21,7 @@ export const LeaderboardsQuerySchema = z.object({
   rank: z.array(z.number().positive()).max(2).nullish(),
   rating: z.array(z.number().positive().gte(100)).max(2).optional(),
   matches: z.array(z.number().positive()).max(2).optional(),
-  winrate: z.array(z.number().gte(0.01).lte(1)).max(2).optional(),
+  winRate: z.array(z.number().gte(0.01).lte(1)).max(2).optional(),
   tiers: z.array(z.enum(leaderboardsTierNames)).optional(),
   pageSize: z.number().default(25),
 });

From 6a74a3e8433d5ec68f05fa7ea7a2935bd1c84c38 Mon Sep 17 00:00:00 2001
From: Giovanni Martire <akinari@outlook.it>
Date: Wed, 1 May 2024 17:02:26 +0200
Subject: [PATCH 3/3] passing selected ruleset to player page

---
 app/actions.ts                  |  7 ++--
 app/users/[id]/error.module.css | 47 +++++++++++++++++++++++++++
 app/users/[id]/error.tsx        | 57 +++++++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 app/users/[id]/error.module.css
 create mode 100644 app/users/[id]/error.tsx

diff --git a/app/actions.ts b/app/actions.ts
index 2e51178..7e843f9 100644
--- a/app/actions.ts
+++ b/app/actions.ts
@@ -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/users/[id]/error.module.css b/app/users/[id]/error.module.css
new file mode 100644
index 0000000..77c2c46
--- /dev/null
+++ 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
new file mode 100644
index 0000000..93162b9
--- /dev/null
+++ 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>
+  );
+}