add role colors

projects/common/src/scoresaber.util.ts

@@ -0,0 +1,101 @@
+import ScoreSaberPlayerToken from "./types/token/scoresaber/score-saber-player-token";
+import ScoreSaberLeaderboardPlayerInfoToken from "./types/token/scoresaber/score-saber-leaderboard-player-info-token";
+import ScoreSaberPlayer from "./player/impl/scoresaber-player";
+
+type ScoreSaberRole = {
+  /**
+   * The name of the role.
+   */
+  name: string;
+
+  /**
+   * The permissions for the role.
+   */
+  permissions?: number;
+
+  /**
+   * The role for this role.
+   */
+  role?: string;
+
+  /**
+   * The color of the role.
+   */
+  color: string;
+};
+
+const scoreSaberPermission = {
+  RT: 1,
+  QAT: 2,
+  QATHead: 4,
+  NAT: 8,
+  ADMIN: 16,
+  PANDA: 32,
+  SUPPORTER: 64,
+  PPFARMER: 128,
+};
+
+export const scoreSaberRoles: ScoreSaberRole[] = [
+  {
+    name: "Admin",
+    permissions:
+      scoreSaberPermission.RT |
+      scoreSaberPermission.QAT |
+      scoreSaberPermission.QATHead |
+      scoreSaberPermission.NAT |
+      scoreSaberPermission.ADMIN,
+    color: "#bfdcf9",
+  },
+  {
+    name: "Head of Quality Assurance",
+    role: "Head of Quality Assurance",
+    permissions: scoreSaberPermission.QAT | scoreSaberPermission.QATHead,
+    color: "#ff006f",
+  },
+  {
+    name: "Nomination Assessment Team",
+    role: "Nomination Assessment",
+    permissions: scoreSaberPermission.RT | scoreSaberPermission.NAT,
+    color: "#0b64f0",
+  },
+  {
+    name: "Quality Assurance Team",
+    role: "Quality Assurance",
+    permissions: scoreSaberPermission.RT | scoreSaberPermission.NAT,
+    color: "#f70000",
+  },
+  {
+    name: "Ranking Team",
+    role: "Ranking Team",
+    permissions: scoreSaberPermission.RT,
+    color: "#1abc9c",
+  },
+  {
+    name: "Ranking Team Recruit",
+    role: "Recruit",
+    permissions: scoreSaberPermission.RT,
+    color: "#11806a",
+  },
+  {
+    name: "Supporter",
+    role: "Supporter",
+    color: "#f96854",
+  },
+];
+
+/**
+ * Gets the role for a player.
+ *
+ * @param player the player
+ * @returns the role
+ */
+export function getScoreSaberRole(
+  player: ScoreSaberPlayerToken | ScoreSaberLeaderboardPlayerInfoToken | ScoreSaberPlayer
+): ScoreSaberRole | undefined {
+  const roles = player.role?.split(", ") || [player.role];
+  for (const role of scoreSaberRoles) {
+    if (roles.includes(role.name)) {
+      return role;
+    }
+  }
+}

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

@@ -13,6 +13,7 @@ import Link from "next/link";
 import { capitalizeFirstLetter } from "@/common/string-utils";
 import AddFriend from "@/components/friend/add-friend";
 import PlayerSteamProfile from "@/components/player/player-steam-profile";
+import { getScoreSaberRole } from "@ssr/common/scoresaber.util";
 
 /**
  * Renders the change for a stat.
@@ -176,7 +177,14 @@ export default function PlayerHeader({ player }: Props) {
         <div className="w-full flex gap-2 flex-col justify-center items-center lg:justify-start lg:items-start">
           <div>
             <div className="flex gap-2 items-center justify-center lg:justify-start">
-              <p className="font-bold text-2xl">{player.name}</p>
+              <p
+                className="font-bold text-2xl"
+                style={{
+                  color: getScoreSaberRole(player)?.color,
+                }}
+              >
+                {player.name}
+              </p>
               <div className="absolute lg:relative top-0 left-0 flex flex-col lg:flex-row gap-2">
                 <PlayerTrackedStatus player={player} />
                 <PlayerSteamProfile player={player} />

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

@@ -3,6 +3,7 @@ import CountryFlag from "@/components/country-flag";
 import Link from "next/link";
 import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
 import ScoreSaberLeaderboardPlayerInfoToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-player-info-token";
+import { getScoreSaberRole } from "@ssr/common/scoresaber.util";
 
 type TablePlayerProps = {
   /**
@@ -27,7 +28,12 @@ export function TablePlayer({ player, claimedPlayer }: TablePlayerProps) {
       </Avatar>
       <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 ? "transform-gpu text-pp transition-all hover:brightness-75" : ""}>
+        <p
+          className={player.id == claimedPlayer?.id ? "font-bold" : ""}
+          style={{
+            color: getScoreSaberRole(player)?.color,
+          }}
+        >
           {player.name}
         </p>
       </Link>