Feat/series ranking

apps/web/components/player-profile/PlayerHeader.tsx

@@ -1,7 +1,7 @@
 import type { PlayerRankingDTO } from "@repo/contracts";
 import Image from "next/image";
 import Link from "next/link";
-import { getRankingPosByStat } from "@/lib/ranking";
+import { getRankingPosByStat, getRankingPositionColor } from "@/lib/ranking";
 import { RankingPosition } from "../ranking/RankingPosition";
 
 interface PlayerHeaderProps {
@@ -28,14 +28,13 @@ export const PlayerHeader = ({
 		playersRanking,
 		"rating2",
 	);
+	const rankColor = getRankingPositionColor(ratingRankPosition, playerAmount);
 	const isSeriesProfile = date && date !== "all";
 	return (
 		<div
 			className="w-full border-b shadow-lg rounded-lg mb-8 py-8 px-8 flex flex-row items-center md:justify-start justify-center relative overflow-hidden"
 			style={{
-				backgroundImage: isSeriesProfile
-					? "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(270deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.15) 28%, rgba(0, 0, 0, 0.7) 100%), url(/profile-header-background.jpg)"
-					: "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 28%, rgba(0, 0, 0, 0.7) 100%), url(/profile-header-background.jpg)",
+				backgroundImage: `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(270deg, ${rankColor}14 0%, ${rankColor}28 28%, rgba(0, 0, 0, 0.7) 100%), url(/profile-header-background.jpg)`,
 				backgroundSize: "cover",
 				backgroundPosition: "center",
 			}}
@@ -54,7 +53,7 @@ export const PlayerHeader = ({
 					playerAmount={playerAmount}
 				/>
 			</div>
-			{isSeriesProfile && (
+			{isSeriesProfile ? (
 				<>
 					<div className="flex-1" />
 					<Link
@@ -77,6 +76,24 @@ export const PlayerHeader = ({
 						)}
 					</Link>
 				</>
+			) : (
+				<>
+					<div className="flex-1" />
+					<Link
+						href="/"
+						className="z-10 flex flex-col items-end gap-2 hover:opacity-80 transition-opacity shrink-0"
+					>
+						<span className="text-2xl text-muted-foreground flex items-center gap-1">
+							Ver ranking →
+						</span>
+						<span className="text-4xl font-bold">Geral</span>
+						{totalMatches !== undefined && (
+							<span className="text-lg text-muted-foreground">
+								{totalMatches} {totalMatches === 1 ? "partida" : "partidas"}
+							</span>
+						)}
+					</Link>
+				</>
 			)}
 		</div>
 	);

apps/web/lib/ranking.ts

@@ -7,8 +7,18 @@ export function sortRankingByStat(
 	invert?: boolean,
 ) {
 	return [...playersStats].sort((a, b) => {
-		const statA = a.stats[statToSort] as number;
-		const statB = b.stats[statToSort] as number;
+		const rawA = a.stats[statToSort] as number;
+		const rawB = b.stats[statToSort] as number;
+		const statA = Number.isFinite(rawA)
+			? rawA
+			: invert
+				? Number.POSITIVE_INFINITY
+				: Number.NEGATIVE_INFINITY;
+		const statB = Number.isFinite(rawB)
+			? rawB
+			: invert
+				? Number.POSITIVE_INFINITY
+				: Number.NEGATIVE_INFINITY;
 
 		const diff = invert ? statA - statB : statB - statA;
 		if (diff !== 0) return diff;
@@ -32,7 +42,8 @@ export function getRankingPosByStat(
 	let i = 0;
 
 	for (const player of sorted) {
-		const value = player.stats[statToSort] as number;
+		const raw = player.stats[statToSort] as number;
+		const value = Number.isFinite(raw) ? raw : null;
 
 		if (prevValue !== null && value !== prevValue) {
 			rank = i + 1;