From e4f0376af3e48875936d65e17f970479d98a6eca Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Fri, 11 Oct 2024 03:31:52 +0100
Subject: [PATCH] add weekly rank change and change the design a bit

---
 .../src/components/ranking/player-ranking.tsx | 20 +++++++++++++++----
 .../src/components/ranking/ranking-data.tsx   | 13 ++++++------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/projects/website/src/components/ranking/player-ranking.tsx b/projects/website/src/components/ranking/player-ranking.tsx
index 150adb4..50b032e 100644
--- a/projects/website/src/components/ranking/player-ranking.tsx
+++ b/projects/website/src/components/ranking/player-ranking.tsx
@@ -7,6 +7,7 @@ import Link from "next/link";
 import useDatabase from "@/hooks/use-database";
 import { useLiveQuery } from "dexie-react-hooks";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { clsx } from "clsx";
 
 type PlayerRankingProps = {
   player: ScoreSaberPlayerToken;
@@ -17,6 +18,9 @@ export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
   const database = useDatabase();
   const settings = useLiveQuery(() => database.getSettings());
 
+  const history = player.histories.split(",").map(Number);
+  const weeklyRankChange = history[history?.length - 6] - player.rank;
+
   return (
     <>
       <td className="px-4 py-2">
@@ -41,10 +45,18 @@ export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
           </p>
         </Link>
       </td>
-      <td className="px-4 py-2 text-pp-blue">{formatPp(player.pp)}pp</td>
-      <td className="px-4 py-2">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td>
-      <td className="px-4 py-2">{formatNumberWithCommas(player.scoreStats.rankedPlayCount)}</td>
-      <td className="px-4 py-2">{player.scoreStats.averageRankedAccuracy.toFixed(2) + "%"}</td>
+      <td className="px-4 py-2 text-pp-blue text-center">{formatPp(player.pp)}pp</td>
+      <td className="px-4 py-2 text-center">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td>
+      <td className="px-4 py-2 text-center">{formatNumberWithCommas(player.scoreStats.rankedPlayCount)}</td>
+      <td className="px-4 py-2 text-center">{player.scoreStats.averageRankedAccuracy.toFixed(2) + "%"}</td>
+      <td
+        className={clsx(
+          "px-4 py-2 text-center",
+          weeklyRankChange >= 0 ? weeklyRankChange != 0 && "text-green-500" : "text-red-500"
+        )}
+      >
+        {weeklyRankChange}
+      </td>
     </>
   );
 }
diff --git a/projects/website/src/components/ranking/ranking-data.tsx b/projects/website/src/components/ranking/ranking-data.tsx
index fb5deff..0718bef 100644
--- a/projects/website/src/components/ranking/ranking-data.tsx
+++ b/projects/website/src/components/ranking/ranking-data.tsx
@@ -84,14 +84,15 @@ export default function RankingData({ initialPage, country, initialPageData }: R
         <thead>
           <tr>
             <th className="px-4 py-2">Rank</th>
-            <th className="px-4 py-2">Profile</th>
-            <th className="px-4 py-2">Performance Points</th>
-            <th className="px-4 py-2">Total Plays</th>
-            <th className="px-4 py-2">Total Ranked Plays</th>
-            <th className="px-4 py-2">Avg Ranked Accuracy</th>
+            <th className="px-4 py-2">Player</th>
+            <th className="px-4 py-2 text-center">Performance Points</th>
+            <th className="px-4 py-2 text-center">Total Plays</th>
+            <th className="px-4 py-2 text-center">Total Ranked Plays</th>
+            <th className="px-4 py-2 text-center">Avg Ranked Accuracy</th>
+            <th className="px-4 py-2 text-center">Weekly Change</th>
           </tr>
         </thead>
-        <tbody className="border-none">
+        <tbody className="border-none overflow-x-scroll w-full">
           {players.map(player => (
             <tr key={player.rank} className="border-b border-border">
               <PlayerRanking isCountry={country != undefined} player={player} />