update mini ranking

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),
     };
   }
 }

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":

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">
+                <TablePlayer player={playerRanking} claimedPlayer={claimedPlayer} hideCountryFlag />
-                  <AvatarImage alt="Profile Picture" src={playerRanking.profilePicture} />
-                </Avatar>
-                <p className={playerRanking.id === player.id ? "text-pp font-semibold" : ""}>{playerName}</p>
               </div>
               <div className="inline-flex min-w-[11.5em] gap-2 items-center">
                 <p className="text-pp text-right">{formatPp(playerRanking.pp)}pp</p>

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" : ""}