cleanup

projects/website/src/components/footer.tsx

@@ -54,7 +54,7 @@ export default function Footer() {
           return (
             <Link
               key={index}
-              className="px-2 text-pp hover:brightness-75 transition-all transform-gpu"
+              className="px-2 text-pp hover:brightness-50 transition-all transform-gpu"
               href={item.link}
               target={item.openInNewTab ? "_blank" : undefined}
             >

projects/website/src/components/leaderboard/leaderboard-score.tsx

@@ -1,8 +1,11 @@
 import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
 import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils";
-import { timeAgo } from "@ssr/common/utils/time-utils";
 import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
 import { PlayerInfo } from "@/components/player/player-info";
+import { clsx } from "clsx";
+import { Modifier } from "@ssr/common/score/modifier";
+import Tooltip from "@/components/tooltip";
+import { ScoreTimeSet } from "@/components/score/score-time-set";
 
 type Props = {
   /**
@@ -30,7 +33,9 @@ export default function LeaderboardScore({ score, claimedPlayer }: Props) {
       </td>
 
       {/* Time Set */}
-      <td className="px-4 py-2 text-center whitespace-nowrap">{timeAgo(score.timestamp)}</td>
+      <td className="px-4 py-2 text-center whitespace-nowrap">
+        <ScoreTimeSet score={score} />
+      </td>
 
       {/* Score */}
       <td className="px-4 py-2 text-center whitespace-nowrap">{formatNumberWithCommas(score.score)}</td>
@@ -39,10 +44,37 @@ export default function LeaderboardScore({ score, claimedPlayer }: Props) {
       <td className="px-4 py-2 text-center whitespace-nowrap">{score.accuracy.toFixed(2)}%</td>
 
       {/* Score Misses */}
-      <td className="px-4 py-2 text-center whitespace-nowrap">{score.misses > 0 ? `${score.misses}x` : "FC"}</td>
+      <td
+        className={clsx(
+          "px-4 py-2 text-center whitespace-nowrap",
+          score.misses > 0 ? "text-red-500" : "text-green-500"
+        )}
+      >
+        {score.misses > 0 ? `${score.misses}x` : "FC"}
+      </td>
 
       {/* Score PP */}
       <td className="px-4 py-2 text-center text-pp whitespace-nowrap">{formatPp(score.pp)}pp</td>
+
+      {/* Score Modifiers */}
+      <td className="px-4 py-2 text-center whitespace-nowrap">
+        <Tooltip
+          display={
+            <div>
+              <p className="font-semibold">Modifiers</p>
+              <p>{score.modifiers.join(", ")}</p>
+            </div>
+          }
+        >
+          <p className="cursor-pointer">
+            {Object.entries(Modifier)
+              .filter(mod => score.modifiers.includes(mod[1] as Modifier))
+              .map(mod => mod[0])
+              .splice(0, Object.entries(Modifier).length - 1)
+              .join("")}
+          </p>
+        </Tooltip>
+      </td>
     </>
   );
 }

projects/website/src/components/leaderboard/leaderboard-scores.tsx

@@ -163,16 +163,17 @@ export default function LeaderboardScores({
       </div>
 
       <div className="overflow-x-auto">
-        <table className="table w-full table-auto border-spacing-2 border-none text-left">
+        <table className="table w-full table-auto border-spacing-2 border-none text-left text-sm">
           <thead>
             <tr>
-              <th className="px-4 py-2">Rank</th>
-              <th className="px-4 py-2">Player</th>
-              <th className="px-4 py-2 text-center">Time Set</th>
-              <th className="px-4 py-2 text-center">Score</th>
-              <th className="px-4 py-2 text-center">Accuracy</th>
-              <th className="px-4 py-2 text-center">Misses</th>
-              <th className="px-4 py-2 text-center">PP</th>
+              <th className="px-2 py-1">Rank</th>
+              <th className="px-2 py-1">Player</th>
+              <th className="px-2 py-1 text-center">Time Set</th>
+              <th className="px-2 py-1 text-center">Score</th>
+              <th className="px-2 py-1 text-center">Accuracy</th>
+              <th className="px-2 py-1 text-center">Misses</th>
+              <th className="px-2 py-1 text-center">PP</th>
+              <th className="px-2 py-1 text-center">Modifiers</th>
             </tr>
           </thead>
           <motion.tbody initial="hidden" animate={controls} className="border-none" variants={scoreAnimation}>

projects/website/src/components/loaders/fullscreen-loader.tsx

@@ -7,7 +7,7 @@ type Props = {
 
 export default function FullscreenLoader({ reason }: Props) {
   return (
-    <div className="absolute w-screen h-screen bg-background brightness-75 flex flex-col gap-6 items-center justify-center">
+    <div className="absolute w-screen h-screen bg-background brightness-50 flex flex-col gap-6 items-center justify-center">
       <div className="flex flex-col items-center justify-center">
         <p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
         <p className="text-gray-300 text-md text-center">{reason}</p>

projects/website/src/components/player/chart/player-charts.tsx

@@ -78,7 +78,7 @@ export default function PlayerCharts({ player }: PlayerChartsProps) {
               >
                 <button
                   onClick={() => setSelectedChart(chart)}
-                  className={`border ${isSelected ? "border-1" : "border-input"} flex items-center justify-center p-[2px] w-[26px] h-[26px] rounded-full hover:brightness-75 transform-gpu transition-all`}
+                  className={`border ${isSelected ? "border-1" : "border-input"} flex items-center justify-center p-[2px] w-[26px] h-[26px] rounded-full hover:brightness-50 transform-gpu transition-all`}
                 >
                   {chart.icon}
                 </button>

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

@@ -110,7 +110,7 @@ const playerData = [
             player,
             "rank",
             <Link href={`/ranking/${player.rankPages.global}`}>
-              <p className="hover:brightness-75 transition-all transform-gpu">#{formatNumberWithCommas(player.rank)}</p>
+              <p className="hover:brightness-50 transition-all transform-gpu">#{formatNumberWithCommas(player.rank)}</p>
             </Link>
           )}
           {rankChange != 0 && renderDailyChange(rankChange, <p>The change in rank compared to yesterday</p>)}
@@ -133,7 +133,7 @@ const playerData = [
             player,
             "countryRank",
             <Link href={`/ranking/${player.country}/${player.rankPages.country}`}>
-              <p className="hover:brightness-75 transition-all transform-gpu">
+              <p className="hover:brightness-50 transition-all transform-gpu">
                 #{formatNumberWithCommas(player.countryRank)}
               </p>
             </Link>
@@ -154,7 +154,7 @@ const playerData = [
           {renderChange(
             player,
             "pp",
-            <p className="hover:brightness-75 transition-all transform-gpu text-pp">{formatPp(player.pp)}pp</p>
+            <p className="hover:brightness-50 transition-all transform-gpu text-pp">{formatPp(player.pp)}pp</p>
           )}
           {ppChange != 0 && renderDailyChange(ppChange, <p>The change in pp compared to yesterday</p>)}
         </div>

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

@@ -25,7 +25,7 @@ type TablePlayerProps = {
 
 export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: TablePlayerProps) {
   return (
-    <>
+    <div className="flex gap-2 items-center">
       <Avatar className="w-[24px] h-[24px] pointer-events-none">
         <AvatarImage
           alt="Profile Picture"
@@ -33,7 +33,7 @@ export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: Table
         />
       </Avatar>
       {!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
-      <Link className="transform-gpu transition-all hover:text-blue-500" href={`/player/${player.id}`}>
+      <Link className="transform-gpu transition-all hover:brightness-50" href={`/player/${player.id}`}>
         <p
           className={player.id == highlightedPlayer?.id ? "font-bold" : ""}
           style={{
@@ -43,6 +43,6 @@ export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: Table
           {player.name}
         </p>
       </Link>
-    </>
+    </div>
   );
 }

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

@@ -199,7 +199,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
           {searchTerm && ( // Show clear button only if there's a query
             <button
               onClick={clearSearch}
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-75 transform-gpu transition-all cursor-default"
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-50 transform-gpu transition-all cursor-default"
               aria-label="Clear search"
             >
               <XMarkIcon className="w-5 h-5" />

projects/website/src/components/ranking/mini.tsx

@@ -97,7 +97,7 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
             <Link
               key={index}
               href={`/player/${playerRanking.id}`}
-              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b"
+              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-50 first:rounded-t last:rounded-b"
             >
               <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
               <div className="flex gap-2 items-center">

projects/website/src/components/ranking/ranking-data.tsx

@@ -67,13 +67,13 @@ export default function RankingData({ initialPage, country, initialPageData }: R
         <table className="table w-full table-auto border-spacing-2 border-none text-left">
           <thead>
             <tr>
-              <th className="px-4 py-2">Rank</th>
-              <th className="px-4 py-2">Player</th>
-              <th className="px-4 py-2 text-center">Performance Points</th>
-              <th className="px-4 py-2 text-center">Total Plays</th>
-              <th className="px-4 py-2 text-center">Total Ranked Plays</th>
-              <th className="px-4 py-2 text-center">Avg Ranked Accuracy</th>
-              <th className="px-4 py-2 text-center">Weekly Change</th>
+              <th className="px-2 py-1">Rank</th>
+              <th className="px-2 py-1">Player</th>
+              <th className="px-2 py-1 text-center">Performance Points</th>
+              <th className="px-2 py-1 text-center">Total Plays</th>
+              <th className="px-2 py-1 text-center">Total Ranked Plays</th>
+              <th className="px-2 py-1 text-center">Avg Ranked Accuracy</th>
+              <th className="px-2 py-1 text-center">Weekly Change</th>
             </tr>
           </thead>
           <tbody className="border-none">

projects/website/src/components/score/score-feed/score-feed.tsx

@@ -47,7 +47,7 @@ export default function ScoreFeed() {
             <p className="text-sm">
               Set by{" "}
               <Link href={`/player/${player.id}`}>
-                <span className="text-pp hover:brightness-75 transition-all transform-gpu">{player.name}</span>
+                <span className="text-pp hover:brightness-50 transition-all transform-gpu">{player.name}</span>
               </Link>
             </p>
             <Score

projects/website/src/components/score/score-info.tsx

@@ -59,7 +59,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
         <div className="overflow-y-clip">
           <Link
             href={`/leaderboard/${leaderboard.id}`}
-            className="cursor-pointer select-none hover:brightness-75 transform-gpu transition-all text-pp w-fit"
+            className="cursor-pointer select-none hover:brightness-50 transform-gpu transition-all text-pp w-fit"
           >
             {leaderboard.songName} {leaderboard.songSubName}
           </Link>
@@ -67,7 +67,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
             <p className="text-gray-400">{leaderboard.songAuthorName}</p>
             <FallbackLink
               href={mappersProfile}
-              className={mappersProfile && "hover:brightness-75 transform-gpu transition-all w-fit"}
+              className={mappersProfile && "hover:brightness-50 transform-gpu transition-all w-fit"}
             >
               {leaderboard.levelAuthorName}
             </FallbackLink>

projects/website/src/components/score/score-rank-info.tsx

@@ -1,12 +1,10 @@
 import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
-import { format } from "@formkit/tempo";
 import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
-import Tooltip from "../tooltip";
-import { timeAgo } from "@ssr/common/utils/time-utils";
 import Link from "next/link";
 import { getPageFromRank } from "@ssr/common/utils/utils";
 import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import { ScoreTimeSet } from "@/components/score/score-time-set";
 
 type Props = {
   score: ScoreSaberScore;
@@ -19,24 +17,12 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
       <div className="flex gap-1 items-center">
         <GlobeAmericasIcon className="w-5 h-5" />
         <Link href={`/leaderboard/${leaderboard.id}/${getPageFromRank(score.rank, 12)}`}>
-          <p className="text-pp cursor-default hover:brightness-75 transition-all transform-gpu cursor-pointer">
+          <p className="text-pp cursor-default hover:brightness-50 transition-all transform-gpu cursor-pointer">
             #{formatNumberWithCommas(score.rank)}
           </p>
         </Link>
       </div>
-      <Tooltip
-        side="bottom"
-        display={
-          <p>
-            {format({
-              date: new Date(score.timestamp),
-              format: "DD MMMM YYYY HH:mm a",
-            })}
-          </p>
-        }
-      >
-        <p className="text-sm cursor-default select-none">{timeAgo(new Date(score.timestamp))}</p>
-      </Tooltip>
+      <ScoreTimeSet score={score} />
     </div>
   );
 }

projects/website/src/components/score/score-time-set.tsx

@@ -0,0 +1,28 @@
+import { format } from "@formkit/tempo";
+import { timeAgo } from "@ssr/common/utils/time-utils";
+import Tooltip from "@/components/tooltip";
+import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
+
+type ScoreTimeSetProps = {
+  /**
+   * The score that was set.
+   */
+  score: ScoreSaberScore;
+};
+
+export function ScoreTimeSet({ score }: ScoreTimeSetProps) {
+  return (
+    <Tooltip
+      display={
+        <p>
+          {format({
+            date: new Date(score.timestamp),
+            format: "DD MMMM YYYY HH:mm a",
+          })}
+        </p>
+      }
+    >
+      <p className="text-sm cursor-default select-none">{timeAgo(new Date(score.timestamp))}</p>
+    </Tooltip>
+  );
+}