add player role badge

projects/common/src/player/impl/scoresaber-player.ts

@@ -29,7 +29,7 @@ export default interface ScoreSaberPlayer extends Player {
   /**
    * The role the player has.
    */
-  role: ScoreSaberRole | undefined;
+  role: string | undefined;
 
   /**
    * The badges the player has.
@@ -87,7 +87,6 @@ export async function getScoreSaberPlayerFromToken(
     lines: token.bio?.split("\n") || [],
     linesStripped: token.bio?.replace(/<[^>]+>/g, "")?.split("\n") || [],
   };
-  const role = token.role == null ? undefined : (token.role as ScoreSaberRole);
   const badges: ScoreSaberBadge[] =
     token.badges?.map(badge => {
       return {
@@ -269,7 +268,7 @@ export async function getScoreSaberPlayerFromToken(
       monthly: getStatisticChanges(30),
       yearly: getStatisticChanges(365),
     },
-    role: role,
+    role: token.role == null ? undefined : token.role,
     badges: badges,
     statisticHistory: statisticHistory,
     statistics: token.scoreStats,
@@ -299,11 +298,6 @@ export type ScoreSaberBio = {
   linesStripped: string[];
 };
 
-/**
- * The ScoreSaber account roles.
- */
-export type ScoreSaberRole = "Admin";
-
 /**
  * A badge for a player.
  */

projects/common/src/utils/scoresaber.util.ts

@@ -2,7 +2,7 @@ import ScoreSaberPlayerToken from "../types/token/scoresaber/score-saber-player-
 import ScoreSaberLeaderboardPlayerInfoToken from "../types/token/scoresaber/score-saber-leaderboard-player-info-token";
 import ScoreSaberPlayer from "../player/impl/scoresaber-player";
 
-type ScoreSaberRole = {
+export type ScoreSaberRole = {
   /**
    * The name of the role.
    */

projects/website/src/components/player/player-stats.tsx

@@ -4,9 +4,9 @@ import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 import { formatDate } from "@ssr/common/utils/time-utils";
 import { ReactNode } from "react";
 import Tooltip from "@/components/tooltip";
-import { getPlayerHistoryToday } from "@ssr/common/utils/player-utils";
 import { DailyChange } from "@/components/statistic/daily-change";
 import { PlayerStat } from "@ssr/common/player/player-stat";
+import { getScoreSaberRole } from "@ssr/common/scoresaber.util";
 
 type Stat = {
   name: string;
@@ -92,6 +92,16 @@ const playerStats: Stat[] = [
       };
     },
   },
+  {
+    name: "Role",
+    create: (player: ScoreSaberPlayer) => {
+      const role = getScoreSaberRole(player);
+
+      return {
+        value: role?.name,
+      };
+    },
+  },
 ];
 
 type Props = {
@@ -103,7 +113,7 @@ export default function PlayerStats({ player }: Props) {
     <div className={`flex flex-wrap gap-2 w-full justify-center lg:justify-start`}>
       {playerStats.map((badge, index) => {
         const toRender = badge.create(player);
-        if (toRender === undefined) {
+        if (toRender === undefined || toRender.value === undefined) {
           return <div key={index} />;
         }
         const { tooltip, value } = toRender;