diff --git a/app/components/Placement.tsx b/app/components/Placement.tsx new file mode 100644 index 000000000..e7a509f44 --- /dev/null +++ b/app/components/Placement.tsx @@ -0,0 +1,48 @@ +import { getEnglishOrdinalSuffix } from "~/utils/strings" + +export type PlacementProps = { + placement: number, + iconClassName?: string, + textClassName?: string +} + +const getSpecialPlacementIconPath = (placement: number): string | null => { + switch (placement) { + case 3: + return'/svg/placements/third.svg'; + case 2: + return '/svg/placements/second.svg'; + case 1: + return '/svg/placements/first.svg'; + default: + return null; + } +} + +export function Placement({ placement, iconClassName, textClassName }: PlacementProps) { + /* + Placements are using english ordinal syntax only. + If wished for, we could look into properly adding translations here, but + english-style ordinals are commonly used internationally as well. + */ + const ordinalSuffix = getEnglishOrdinalSuffix(placement); + const iconPath = getSpecialPlacementIconPath(placement); + + if (!iconPath) { + return + {placement}{ordinalSuffix} + + } + + const placementString = `${placement}${ordinalSuffix}`; + + return {placementString} +} \ No newline at end of file diff --git a/app/routes/calendar/$id/index.tsx b/app/routes/calendar/$id/index.tsx index 5e17d4188..2ba78c7fb 100644 --- a/app/routes/calendar/$id/index.tsx +++ b/app/routes/calendar/$id/index.tsx @@ -15,6 +15,7 @@ import { Avatar } from "~/components/Avatar"; import { LinkButton } from "~/components/Button"; import { Image } from "~/components/Image"; import { Main } from "~/components/Main"; +import { Placement } from "~/components/Placement"; import { Section } from "~/components/Section"; import { db } from "~/db"; import { useIsMounted } from "~/hooks/useIsMounted"; @@ -28,7 +29,7 @@ import calendarStyles from "~/styles/calendar-event.css"; import mapsStyles from "~/styles/maps.css"; import { databaseTimestampToDate } from "~/utils/dates"; import { notFoundIfFalsy } from "~/utils/remix"; -import { discordFullName, makeTitle, placementString } from "~/utils/strings"; +import { discordFullName, makeTitle } from "~/utils/strings"; import { calendarEditPage, calendarReportWinnersPage, @@ -200,7 +201,9 @@ function Results() { {data.results.map((result, i) => ( - {placementString(result.placement)} + + + {result.teamName}