add steam profile button and fix score acc

projects/backend/src/service/player.service.ts

@@ -95,6 +95,11 @@ export class PlayerService {
     let daysAgo = 1; // Start from yesterday
     for (let i = playerRankHistory.length - daysAgo - 1; i >= 0; i--) {
       const rank = playerRankHistory[i];
+      // Skip inactive days
+      if (rank == 999_999) {
+        continue;
+      }
+
       const date = getMidnightAlignedDate(getDaysAgoDate(daysAgo));
       player.setStatisticHistory(date, {
         rank: rank,

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

@@ -58,7 +58,7 @@ export function getScoreSaberScoreFromToken(
   return {
     leaderboard: "scoresaber",
     score: token.baseScore,
-    accuracy: leaderboard ? token.baseScore / leaderboard.maxScore : Infinity,
+    accuracy: leaderboard ? (token.baseScore / leaderboard.maxScore) * 100 : Infinity,
     rank: token.rank,
     modifiers: modifiers,
     misses: token.missedNotes + token.badCuts,

projects/website/package.json

@@ -44,6 +44,7 @@
     "react-countup": "^6.5.3",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.53.0",
+    "react-icons": "^5.3.0",
     "react-use-websocket": "^4.9.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",

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

@@ -12,6 +12,7 @@ import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 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";
 
 /**
  * Renders the change for a stat.
@@ -176,7 +177,10 @@ export default function PlayerHeader({ player }: Props) {
           <div>
             <div className="flex gap-2 items-center justify-center lg:justify-start">
               <p className="font-bold text-2xl">{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} />
+              </div>
             </div>
             <div className="flex flex-col">
               <div>
@@ -203,7 +207,7 @@ export default function PlayerHeader({ player }: Props) {
 
           <PlayerStats player={player} />
 
-          <div className="absolute top-0 right-0 gap-2 flex">
+          <div className="absolute top-0 right-0 gap-2 flex flex-col lg:flex-row">
             <AddFriend player={player} />
             <ClaimProfile playerId={player.id} />
           </div>

projects/website/src/components/player/player-steam-profile.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { FaSteam } from "react-icons/fa";
+import Tooltip from "@/components/tooltip";
+import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
+import Link from "next/link";
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerSteamProfile({ player }: Props) {
+  return (
+    <div className="flex gap-2">
+      <Tooltip display={<p>Click to view the Steam Profile for {player.name}</p>} side="bottom">
+        <Link href={`https://steamcommunity.com/profiles/${player.id}`} target="_blank" className="cursor-pointer">
+          <FaSteam className="w-[20px] h-[20px]" />
+        </Link>
+      </Tooltip>
+    </div>
+  );
+}

projects/website/src/components/player/player-tracked-status.tsx

@@ -34,7 +34,7 @@ export default function PlayerTrackedStatus({ player }: Props) {
         }
         side="bottom"
       >
-        <InformationCircleIcon className="w-6 h-6 text-neutral-200" />
+        <InformationCircleIcon className="w-[22px] h-[22px] text-neutral-200" />
       </Tooltip>
     </div>
   );