Add Gauntlet Race placement badges for pantheon and PGCR

src/app/leaderboards/team/custom/pantheon-community-race/page.tsx

@@ -22,16 +22,16 @@ export async function generateMetadata(): Promise<Metadata> {
         notFound()
     }
 
-    const title = `${activity.name}: ${version.name} Community Race Leaderboard`
-    const description = `View community race placements for ${version.name} in ${activity.name}`
+    const title = `${activity.name}: ${version.name} Gauntlet Race Leaderboard`
+    const description = `View gauntlet race placements for ${version.name} in ${activity.name}`
 
     return {
         title,
         description,
         keywords: [
             activity.name,
             version.name,
-            "community race",
+            "gauntlet race",
             "pantheon",
             ...baseMetadata.keywords
         ],
@@ -59,7 +59,7 @@ export default async function Page({ searchParams }: { searchParams: Record<stri
                 <Splash
                     tertiaryTitle={activity.name}
                     title={version.name}
-                    subtitle="Community Race Leaderboard">
+                    subtitle="Gauntlet Race Leaderboard">
                     <CloudflareActivitySplash
                         activityId={version.associatedActivityId}
                         versionId={version.id}

src/app/pgcr/[instanceId]/opengraph-image.tsx

@@ -2,6 +2,7 @@
 import { notFound } from "next/navigation"
 import { ImageResponse } from "next/og"
 import { FallbackSplash } from "~/components/CloudflareImage"
+import { formatLeaderboardRaceLabel } from "~/lib/pgcr/leaderboard-tag"
 import { getMetaData, prefetchActivity } from "~/lib/pgcr/server"
 import { type PGCRPageProps } from "~/lib/pgcr/types"
 import { saferFetch } from "~/lib/server/saferFetch"
@@ -30,6 +31,18 @@ export default async function Image({ params: { instanceId } }: PGCRPageProps) {
     }
 
     const { ogTitle, dateString } = getMetaData(activity)
+    const raceLabel = formatLeaderboardRaceLabel(
+        {
+            isGauntletRace: activity.isGauntletRace,
+            isDayOne: activity.isDayOne,
+            isContest: activity.isContest,
+            isPantheon: activity.isPantheon,
+            versionId: activity.versionId,
+            leaderboardRank: activity.leaderboardRank,
+            versionName: activity.metadata.versionName
+        },
+        versionId => manifest.versionDefinitions[versionId]?.isChallengeMode ?? false
+    )
     const imageVariants = manifest.splashUrls[activity.activityId]
     const backgroundImageUrl =
         imageVariants?.find(v => v.size === "medium")?.url ??
@@ -225,15 +238,15 @@ export default async function Image({ params: { instanceId } }: PGCRPageProps) {
                         justifyContent: "center",
                         alignItems: "center"
                     }}>
-                    {activity.leaderboardRank && (
+                    {raceLabel && (
                         <div
                             style={{
                                 backgroundColor: "rgb(201, 125, 2)",
                                 color: "white",
                                 padding: 4,
                                 borderRadius: 4
                             }}>
-                            {activity.metadata.versionName + " #" + activity.leaderboardRank}
+                            {raceLabel}
                         </div>
                     )}
                 </div>

src/app/pgcr/[instanceId]/server.ts

@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation"
 import { getPgcrShortActivityName } from "~/lib/pgcr/formatting"
+import { formatLeaderboardRaceLabel } from "~/lib/pgcr/leaderboard-tag"
 import { Tag } from "~/models/tag"
 import { RaidHubError } from "~/services/raidhub/RaidHubError"
 import { getRaidHubApi } from "~/services/raidhub/common"
@@ -48,7 +49,21 @@ export const getMetaData = (activity: RaidHubInstanceExtended) => {
             : "completed on"
         : "attempted on"
 
-    const placementSuffix = activity.leaderboardRank ? `#${activity.leaderboardRank}` : null
+    const raceLabel = formatLeaderboardRaceLabel(
+        {
+            isGauntletRace: activity.isGauntletRace,
+            isDayOne: activity.isDayOne,
+            isContest: activity.isContest,
+            isPantheon: activity.isPantheon,
+            versionId: activity.versionId,
+            leaderboardRank: activity.leaderboardRank,
+            versionName: activity.metadata.versionName
+        },
+        () => false
+    )
+
+    const placementSuffix =
+        raceLabel ?? (activity.leaderboardRank ? `#${activity.leaderboardRank}` : null)
 
     const dateCompleted = new Date(activity.dateCompleted)
 

src/components/__deprecated__/profile/raids/RaceTagLabel.tsx

@@ -7,6 +7,8 @@ import styles from "./raids.module.css"
 /** @deprecated */
 const RaceTagLabel = ({
     rank,
+    isGauntletRace,
+    versionLabel,
     isChallenge,
     isDayOne,
     isContest,
@@ -16,6 +18,8 @@ const RaceTagLabel = ({
 }: {
     rank: number | null
     instanceId: string
+    isGauntletRace?: boolean
+    versionLabel?: string | null
     isChallenge: boolean
     isDayOne: boolean
     isContest: boolean
@@ -24,6 +28,8 @@ const RaceTagLabel = ({
 }) => {
     const label = useRaceLabel({
         rank,
+        isGauntletRace,
+        versionLabel,
         isChallenge,
         isDayOne,
         isContest,
@@ -49,24 +55,37 @@ const RaceTagLabel = ({
 
 const useRaceLabel = (props: {
     rank: number | null
+    isGauntletRace?: boolean
+    versionLabel?: string | null
     isChallenge: boolean
     isDayOne: boolean
     isContest: boolean
     isWeekOne: boolean
 }): string | null => {
     const tag = useMemo(() => {
-        if (props.isChallenge) {
+        if (props.isGauntletRace) {
+            return Tag.GAUNTLET_RACE
+        } else if (props.isChallenge) {
             return Tag.CHALLENGE
         } else if (props.isDayOne) {
             return Tag.DAY_ONE
         } else if (props.isContest) {
             return Tag.CONTEST
         } else if (props.isWeekOne) {
             return Tag.WEEK_ONE
+        } else if (props.versionLabel) {
+            return props.versionLabel
         } else {
             return null
         }
-    }, [props.isChallenge, props.isDayOne, props.isContest, props.isWeekOne])
+    }, [
+        props.isGauntletRace,
+        props.versionLabel,
+        props.isChallenge,
+        props.isDayOne,
+        props.isContest,
+        props.isWeekOne
+    ])
 
     if (tag) {
         return `${tag}${props.rank ? ` #${props.rank}` : ""}`

src/components/__deprecated__/profile/raids/RaidCard.tsx

@@ -27,7 +27,12 @@ export default function RaidCard({
     leaderboardEntry,
     isExpanded
 }: {
-    leaderboardEntry: RaidHubWorldFirstEntry | null
+    leaderboardEntry:
+        | (Omit<RaidHubWorldFirstEntry, "rank"> & {
+              rank: number | null
+              versionLabel?: string | null
+          })
+        | null
     isExpanded?: boolean
 }) {
     const { activities, isLoadingActivities, raidId, versionId } = useRaidCardContext()
@@ -90,6 +95,7 @@ export default function RaidCard({
 
         return {
             instanceId: instance.instanceId,
+            isGauntletRace: false,
             isDayOne: instance.isDayOne,
             isWeekOne: instance.isWeekOne,
             isContest: instance.isContest,
@@ -173,6 +179,12 @@ export default function RaidCard({
                         <RaceTagLabel
                             rank={firstContestClear.rank}
                             instanceId={firstContestClear.instanceId}
+                            isGauntletRace={firstContestClear.isGauntletRace}
+                            versionLabel={
+                                "versionLabel" in firstContestClear
+                                    ? firstContestClear.versionLabel
+                                    : null
+                            }
                             isChallenge={firstContestClear.isChallengeMode}
                             isDayOne={firstContestClear.isDayOne}
                             isContest={firstContestClear.isContest}

src/components/home/HomeBuckets.tsx

@@ -210,7 +210,7 @@ function RaidCard({ raid }: { raid: RaidHubActivityDefinition }) {
 
 const PANTHEON_COMMUNITY_RACE_LINK: LinkItem = {
     href: "/leaderboards/team/custom/pantheon-community-race",
-    label: "Community Race",
+    label: "Gauntlet Race",
     accent: "gold"
 }
 

src/components/pgcr/pgcr-tags.tsx

@@ -9,13 +9,13 @@ export const PGCRTags = () => {
     return (
         !!tags.length && (
             <div className="flex gap-1 md:gap-2">
-                {tags.map(({ tag, placement }) => (
+                {tags.map(({ tag, placement, key }) => (
                     <Badge
-                        key={tag}
+                        key={key}
                         variant="secondary"
                         className="bg-raidhub/90 text-sm text-gray-200">
                         {tag}
-                        {placement && (
+                        {placement != null && (
                             <span className="text text-foreground text-sm font-medium">{` #${placement}`}</span>
                         )}
                     </Badge>

src/components/profile/raids/PantheonLayout.tsx

@@ -3,21 +3,98 @@ import { useCallback, useMemo } from "react"
 import { Grid } from "~/components/__deprecated__/layout/Grid"
 import RaidCard from "~/components/__deprecated__/profile/raids/RaidCard"
 import { useRaidHubManifest } from "~/components/providers/RaidHubManifestManager"
-import { type RaidHubInstanceForPlayer } from "~/services/raidhub/types"
+import { suppressesDayOnePlacement } from "~/lib/pgcr/leaderboard-tag"
+import {
+    type RaidHubGauntletRaceEntry,
+    type RaidHubInstanceForPlayer,
+    type RaidHubPantheonVersionFirstEntry,
+    type RaidHubWorldFirstEntry
+} from "~/services/raidhub/types"
 import { RaidCardContext } from "./RaidCardContext"
 
+const toGauntletRaceLeaderboardEntry = (
+    entry: RaidHubGauntletRaceEntry,
+    activityId: number
+): RaidHubWorldFirstEntry => ({
+    activityId,
+    instanceId: entry.instanceId,
+    timeAfterLaunch: 0,
+    rank: entry.rank,
+    isDayOne: false,
+    isContest: false,
+    isWeekOne: false,
+    isChallengeMode: false,
+    isGauntletRace: true
+})
+
+const toPantheonVersionFirstLeaderboardEntry = (
+    entry: RaidHubPantheonVersionFirstEntry,
+    activityId: number,
+    versionLabel: string
+): Omit<RaidHubWorldFirstEntry, "rank"> & {
+    rank: number | null
+    versionLabel?: string | null
+} => ({
+    activityId,
+    instanceId: entry.instanceId,
+    timeAfterLaunch: 0,
+    rank: entry.isDayOne && suppressesDayOnePlacement(entry.versionId) ? null : entry.rank,
+    isDayOne: entry.isDayOne,
+    isContest: false,
+    isWeekOne: false,
+    isChallengeMode: false,
+    isGauntletRace: false,
+    versionLabel: entry.isDayOne ? null : versionLabel
+})
+
+const resolvePantheonLeaderboardEntry = (
+    mode: number,
+    activityId: number,
+    gauntletRaceEntry: RaidHubGauntletRaceEntry | null,
+    pantheonVersionFirstEntries: Collection<number, RaidHubPantheonVersionFirstEntry>,
+    getVersionString: (versionId: number) => string
+):
+    | (Omit<RaidHubWorldFirstEntry, "rank"> & {
+          rank: number | null
+          versionLabel?: string | null
+      })
+    | null => {
+    const versionFirst = pantheonVersionFirstEntries.get(mode) ?? null
+    const gauntlet = gauntletRaceEntry?.versionId === mode ? gauntletRaceEntry : null
+
+    if (gauntlet) {
+        return toGauntletRaceLeaderboardEntry(gauntlet, activityId)
+    }
+
+    if (versionFirst) {
+        return toPantheonVersionFirstLeaderboardEntry(
+            versionFirst,
+            activityId,
+            getVersionString(mode)
+        )
+    }
+
+    return null
+}
+
 const PantheonModeGrid = ({
     modes,
     instancesByMode,
     isLoading,
     isExpanded,
-    getActivityIdForVersion
+    getActivityIdForVersion,
+    gauntletRaceEntry,
+    pantheonVersionFirstEntries,
+    getVersionString
 }: {
     modes: readonly number[]
     instancesByMode: Collection<number, Collection<string, RaidHubInstanceForPlayer>> | null
     isLoading: boolean
     isExpanded: boolean
     getActivityIdForVersion: (versionId: number) => number
+    gauntletRaceEntry: RaidHubGauntletRaceEntry | null
+    pantheonVersionFirstEntries: Collection<number, RaidHubPantheonVersionFirstEntry>
+    getVersionString: (versionId: number) => string
 }) => (
     <Grid as="section" $minCardWidth={325} $minCardWidthMobile={300} $fullWidth $relative>
         {modes
@@ -29,7 +106,16 @@ const PantheonModeGrid = ({
                     isLoadingActivities={isLoading}
                     raidId={getActivityIdForVersion(mode)}
                     versionId={mode}>
-                    <RaidCard leaderboardEntry={null} isExpanded={isExpanded} />
+                    <RaidCard
+                        leaderboardEntry={resolvePantheonLeaderboardEntry(
+                            mode,
+                            getActivityIdForVersion(mode),
+                            gauntletRaceEntry,
+                            pantheonVersionFirstEntries,
+                            getVersionString
+                        )}
+                        isExpanded={isExpanded}
+                    />
                 </RaidCardContext>
             ))}
     </Grid>
@@ -38,17 +124,22 @@ const PantheonModeGrid = ({
 export const PantheonLayout = ({
     instances,
     isLoading,
-    isExpanded
+    isExpanded,
+    gauntletRaceEntry,
+    pantheonVersionFirstEntries
 }: {
     instances: Collection<string, RaidHubInstanceForPlayer>[]
     isExpanded: boolean
     isLoading: boolean
+    gauntletRaceEntry: RaidHubGauntletRaceEntry | null
+    pantheonVersionFirstEntries: Collection<number, RaidHubPantheonVersionFirstEntry>
 }) => {
     const {
         activePantheonVersions,
         pantheonSunsetVersions,
         versionDefinitions,
-        activePantheonIds
+        activePantheonIds,
+        getVersionString
     } = useRaidHubManifest()
 
     const getActivityIdForVersion = useCallback(
@@ -78,6 +169,9 @@ export const PantheonLayout = ({
                 isLoading={isLoading}
                 isExpanded={isExpanded}
                 getActivityIdForVersion={getActivityIdForVersion}
+                gauntletRaceEntry={gauntletRaceEntry}
+                pantheonVersionFirstEntries={pantheonVersionFirstEntries}
+                getVersionString={getVersionString}
             />
             {pantheonSunsetVersions.length > 0 && (
                 <div>
@@ -90,6 +184,9 @@ export const PantheonLayout = ({
                         isLoading={isLoading}
                         isExpanded={isExpanded}
                         getActivityIdForVersion={getActivityIdForVersion}
+                        gauntletRaceEntry={gauntletRaceEntry}
+                        pantheonVersionFirstEntries={pantheonVersionFirstEntries}
+                        getVersionString={getVersionString}
                     />
                 </div>
             )}