diff --git a/app/components/Image.tsx b/app/components/Image.tsx index f9e80e04a..ef80634d9 100644 --- a/app/components/Image.tsx +++ b/app/components/Image.tsx @@ -1,9 +1,10 @@ import { useTranslation } from "~/hooks/useTranslation"; -import type { MainWeaponId, ModeShort } from "~/modules/in-game-lists"; +import type { MainWeaponId, ModeShort, StageId } from "~/modules/in-game-lists"; import { mainWeaponImageUrl, modeImageUrl, outlinedMainWeaponImageUrl, + stageImageUrl, } from "~/utils/urls"; interface ImageProps { @@ -101,3 +102,21 @@ export function ModeImage({ mode, testId, ...rest }: ModeImageProps) { /> ); } + +type StageImageProps = { + stageId: StageId; +} & Omit; + +export function StageImage({ stageId, testId, ...rest }: StageImageProps) { + const { t } = useTranslation(["game-misc"]); + + return ( + {t(`game-misc:STAGE_${stageId}`)} + ); +} diff --git a/app/features/tournament/queries/findTeamsByTournamentId.server.ts b/app/features/tournament/queries/findTeamsByTournamentId.server.ts index 042031922..b19cddbdd 100644 --- a/app/features/tournament/queries/findTeamsByTournamentId.server.ts +++ b/app/features/tournament/queries/findTeamsByTournamentId.server.ts @@ -10,6 +10,7 @@ import type { import { parseDBJsonArray } from "~/utils/sql"; import { TOURNAMENT } from "../tournament-constants"; import type { Unpacked } from "~/utils/types"; +import { modesShort } from "~/modules/in-game-lists"; const stm = sql.prepare(/*sql*/ ` with "TeamWithMembers" as ( @@ -97,7 +98,15 @@ export function findTeamsByTournamentId(tournamentId: Tournament["id"]) { return { ...row, members: parseDBJsonArray(row.members), - mapPool: parseDBJsonArray(row.mapPool), + mapPool: ( + parseDBJsonArray( + row.mapPool + ) as FindTeamsByTournamentIdItem["mapPool"] + )?.sort((a, b) => { + if (a.mode === b.mode) return a.stageId - b.stageId; + + return modesShort.indexOf(a.mode) - modesShort.indexOf(b.mode); + }), }; }) as FindTeamsByTournamentId ).sort(teamSorter); diff --git a/app/features/tournament/routes/to.$id.teams.tsx b/app/features/tournament/routes/to.$id.teams.tsx index 5268f7007..7ff9461ff 100644 --- a/app/features/tournament/routes/to.$id.teams.tsx +++ b/app/features/tournament/routes/to.$id.teams.tsx @@ -1,5 +1,6 @@ import { Link, useOutletContext } from "@remix-run/react"; import { Avatar } from "~/components/Avatar"; +import { ModeImage, StageImage } from "~/components/Image"; import { userPage } from "~/utils/urls"; import type { FindTeamsByTournamentIdItem } from "../queries/findTeamsByTournamentId.server"; import type { TournamentLoaderData } from "./to.$id"; @@ -19,27 +20,53 @@ export default function TournamentTeamsPage() { function TeamWithRoster({ team, }: { - team: Pick; + team: Pick; }) { return ( -
-
{team.name}
-
    - {team.members.map((member) => ( -
  • - - +
    +
    {team.name}
    +
      + {team.members.map((member) => ( +
    • - {member.discordName} - -
    • - ))} -
    + + + {member.discordName} + +
  • + ))} +
+
+ {team.mapPool && team.mapPool.length > 0 ? ( + + ) : null} + + ); +} + +function TeamMapPool({ + mapPool, +}: { + mapPool: NonNullable; +}) { + return ( +
+ {mapPool.map(({ mode, stageId }, i) => { + return ( +
+ +
+ +
+
+ ); + })}
); } diff --git a/app/features/tournament/tournament.css b/app/features/tournament/tournament.css index 18d59aed1..f5fc5e621 100644 --- a/app/features/tournament/tournament.css +++ b/app/features/tournament/tournament.css @@ -119,6 +119,7 @@ gap: var(--s-2); list-style: none; padding-inline-start: var(--s-4); + padding-block: var(--s-3); } .tournament__team-with-roster__member { @@ -127,6 +128,27 @@ grid-template-columns: max-content max-content 1fr; } +.tournament__team-with-roster__map-pool { + display: grid; + grid-template-columns: max-content max-content max-content max-content; + border-radius: var(--rounded); + border: 2px solid var(--theme); + width: max-content; + margin: 0 auto; + overflow: hidden; +} + +.tournament__team-with-roster__map-pool__mode-info { + background-color: var(--bg-darker); + display: flex; + font-size: var(--fonts-xxs); + justify-content: center; + align-items: center; + gap: var(--s-1); + font-weight: var(--semi-bold); + padding-block: var(--s-0-5); +} + .tournament__team-member-name { overflow: hidden; color: var(--text);