From 52203bbb775c42a042bf0466b7b998784b066dd2 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Fri, 27 Sep 2024 21:23:44 +0100
Subject: [PATCH] re-enable player rank chart and fix country flags

---
 src/components/country-flag.tsx             |  2 +-
 src/components/player/player-data.tsx       |  7 ++++++-
 src/components/player/player-rank-chart.tsx | 23 +++------------------
 3 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/components/country-flag.tsx b/src/components/country-flag.tsx
index 0cfbd96..f27ab21 100644
--- a/src/components/country-flag.tsx
+++ b/src/components/country-flag.tsx
@@ -8,7 +8,7 @@ export default function CountryFlag({ code, size = 24 }: Props) {
     // eslint-disable-next-line @next/next/no-img-element
     <img
       alt="Player Country"
-      src={`/assets/flags/${code}.png`}
+      src={`/assets/flags/${code.toLowerCase()}.png`}
       width={size * 2}
       height={size}
       className={`w-[${size * 2}px] h-[${size}px] object-contain`}
diff --git a/src/components/player/player-data.tsx b/src/components/player/player-data.tsx
index ef4054d..05b2cd9 100644
--- a/src/components/player/player-data.tsx
+++ b/src/components/player/player-data.tsx
@@ -7,6 +7,7 @@ import { ScoreSort } from "@/common/service/score-sort";
 import { useQuery } from "@tanstack/react-query";
 import Mini from "../ranking/mini";
 import PlayerHeader from "./player-header";
+import PlayerRankChart from "./player-rank-chart";
 import PlayerScores from "./player-scores";
 
 const REFRESH_INTERVAL = 5 * 60 * 1000; // 5 minutes
@@ -34,7 +35,11 @@ export default function PlayerData({ initialPlayerData: initalPlayerData, initia
     <div className="flex gap-2">
       <article className="flex flex-col gap-2">
         <PlayerHeader player={player} />
-        {!player.inactive && <>{/* <PlayerRankChart player={player} /> */}</>}
+        {!player.inactive && (
+          <>
+            <PlayerRankChart player={player} />
+          </>
+        )}
         <PlayerScores initialScoreData={initialScoreData} player={player} sort={sort} page={page} />
       </article>
       <aside className="w-[500px] hidden xl:flex flex-col gap-2">
diff --git a/src/components/player/player-rank-chart.tsx b/src/components/player/player-rank-chart.tsx
index dac2f9e..21e7b2c 100644
--- a/src/components/player/player-rank-chart.tsx
+++ b/src/components/player/player-rank-chart.tsx
@@ -3,28 +3,11 @@
 
 import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-player-token";
 import { formatNumberWithCommas } from "@/common/number-utils";
-import {
-  CategoryScale,
-  Chart,
-  Legend,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title,
-  Tooltip,
-} from "chart.js";
+import { CategoryScale, Chart, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
 import { Line } from "react-chartjs-2";
 import Card from "../card";
 
-Chart.register(
-  LinearScale,
-  CategoryScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-);
+Chart.register(LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend);
 
 export const options: any = {
   maintainAspectRatio: false,
@@ -122,7 +105,7 @@ export default function PlayerRankChart({ player }: Props) {
   };
 
   return (
-    <Card className="h-96">
+    <Card className="h-96 w-full">
       <Line className="w-fit" options={options} data={data} />
     </Card>
   );