From 0d182d3ff4c639ab8c8a4947a6cf03552368fcc2 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sat, 19 Oct 2024 15:28:32 +0100
Subject: [PATCH] update mini ranking

---
 projects/backend/src/controller/player.controller.ts |  2 +-
 projects/backend/src/service/player.service.ts       |  2 +-
 projects/website/src/components/ranking/mini.tsx     | 11 +++++++----
 projects/website/src/components/table-player.tsx     |  9 +++++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/projects/backend/src/controller/player.controller.ts b/projects/backend/src/controller/player.controller.ts
index 208d467..a3d958d 100644
--- a/projects/backend/src/controller/player.controller.ts
+++ b/projects/backend/src/controller/player.controller.ts
@@ -66,7 +66,7 @@ export default class PlayerController {
     params: { id: string; type: "global" | "country" };
   }): Promise<AroundPlayerResponse> {
     return {
-      players: await PlayerService.getAround(id, type),
+      players: await PlayerService.getPlayersAroundPlayer(id, type),
     };
   }
 }
diff --git a/projects/backend/src/service/player.service.ts b/projects/backend/src/service/player.service.ts
index dc14691..0c2bb56 100644
--- a/projects/backend/src/service/player.service.ts
+++ b/projects/backend/src/service/player.service.ts
@@ -203,7 +203,7 @@ export class PlayerService {
    * @param id the player to get around
    * @param type the type to get around
    */
-  public static async getAround(id: string, type: AroundPlayer): Promise<ScoreSaberPlayerToken[]> {
+  public static async getPlayersAroundPlayer(id: string, type: AroundPlayer): Promise<ScoreSaberPlayerToken[]> {
     const getRank = (player: ScoreSaberPlayerToken, type: AroundPlayer) => {
       switch (type) {
         case "global":
diff --git a/projects/website/src/components/ranking/mini.tsx b/projects/website/src/components/ranking/mini.tsx
index 90a7af2..150ea47 100644
--- a/projects/website/src/components/ranking/mini.tsx
+++ b/projects/website/src/components/ranking/mini.tsx
@@ -10,6 +10,9 @@ import { PlayerRankingSkeleton } from "@/components/ranking/player-ranking-skele
 import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 import { getPlayersAroundPlayer } from "@ssr/common/utils/player-utils";
 import { AroundPlayer } from "@ssr/common/types/around-player";
+import { TablePlayer } from "@/components/table-player";
+import useDatabase from "@/hooks/use-database";
+import { useLiveQuery } from "dexie-react-hooks";
 
 const PLAYER_NAME_MAX_LENGTH = 18;
 
@@ -48,6 +51,9 @@ const miniVariants: Variants = {
 };
 
 export default function Mini({ type, player, shouldUpdate }: MiniProps) {
+  const database = useDatabase();
+  const claimedPlayer = useLiveQuery(() => database.getClaimedPlayer());
+
   if (shouldUpdate == undefined) {
     shouldUpdate = true;
   }
@@ -96,10 +102,7 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
             >
               <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
               <div className="flex gap-2 items-center">
-                <Avatar className="w-6 h-6 pointer-events-none">
-                  <AvatarImage alt="Profile Picture" src={playerRanking.profilePicture} />
-                </Avatar>
-                <p className={playerRanking.id === player.id ? "text-pp font-semibold" : ""}>{playerName}</p>
+                <TablePlayer player={playerRanking} claimedPlayer={claimedPlayer} hideCountryFlag />
               </div>
               <div className="inline-flex min-w-[11.5em] gap-2 items-center">
                 <p className="text-pp text-right">{formatPp(playerRanking.pp)}pp</p>
diff --git a/projects/website/src/components/table-player.tsx b/projects/website/src/components/table-player.tsx
index 9f315b2..6f70c9b 100644
--- a/projects/website/src/components/table-player.tsx
+++ b/projects/website/src/components/table-player.tsx
@@ -15,9 +15,14 @@ type TablePlayerProps = {
    * The claimed player.
    */
   claimedPlayer?: ScoreSaberPlayerToken;
+
+  /**
+   * Hide the country flag
+   */
+  hideCountryFlag?: boolean;
 };
 
-export function TablePlayer({ player, claimedPlayer }: TablePlayerProps) {
+export function TablePlayer({ player, claimedPlayer, hideCountryFlag }: TablePlayerProps) {
   return (
     <>
       <Avatar className="w-[24px] h-[24px] pointer-events-none">
@@ -26,7 +31,7 @@ export function TablePlayer({ player, claimedPlayer }: TablePlayerProps) {
           src={`https://img.fascinated.cc/upload/w_128,h_128/${player.profilePicture}`}
         />
       </Avatar>
-      <CountryFlag code={player.country} size={12} />
+      {!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
       <Link className="transform-gpu transition-all hover:text-blue-500" href={`/player/${player.id}`}>
         <p
           className={player.id == claimedPlayer?.id ? "font-bold" : ""}