diff --git a/app/components/tournament/TeamRoster.tsx b/app/components/tournament/TeamRoster.tsx new file mode 100644 index 000000000..77c61874d --- /dev/null +++ b/app/components/tournament/TeamRoster.tsx @@ -0,0 +1,36 @@ +import type { FindTournamentByNameForUrlI } from "~/services/tournament"; +import { Unpacked } from "~/utils"; + +export function TeamRoster({ + team, +}: { + team: Unpacked; +}) { + return ( +
+
{team.name}
+
+ {team.members.map(({ member, captain }, i) => ( +
+
+ {captain ? "C" : i + 1} +
+
+
+ {member.discordAvatar && ( + + )} +
+
{member.discordName}
+
+
+ ))} +
+
+ ); +} diff --git a/app/routes/to/$organization.$tournament/register.tsx b/app/routes/to/$organization.$tournament/register.tsx index 822a9ec22..942510508 100644 --- a/app/routes/to/$organization.$tournament/register.tsx +++ b/app/routes/to/$organization.$tournament/register.tsx @@ -13,6 +13,7 @@ import { } from "remix"; import invariant from "tiny-invariant"; import ErrorMessage from "~/components/ErrorMessage"; +import { TeamRoster } from "~/components/tournament/TeamRoster"; import { createTournamentTeam, FindTournamentByNameForUrlI, @@ -91,8 +92,6 @@ export default function RegisterPage() { const location = useLocation(); const user = useUser(); - console.log("tournamentData", tournamentData); - // TODO: redirect if tournament has concluded if (!user) { @@ -170,7 +169,8 @@ function AddPlayersPage() { if (!ownTeam) return null; return ( - <> +
+
@@ -196,6 +196,6 @@ function AddPlayersPage() {
- +
); } diff --git a/app/routes/to/$organization.$tournament/teams.tsx b/app/routes/to/$organization.$tournament/teams.tsx index 8d7ca5507..596715a72 100644 --- a/app/routes/to/$organization.$tournament/teams.tsx +++ b/app/routes/to/$organization.$tournament/teams.tsx @@ -1,11 +1,6 @@ import { useMatches, LinksFunction } from "remix"; import type { FindTournamentByNameForUrlI } from "~/services/tournament"; -import styles from "~/styles/tournament-teams.css"; -import { Fragment } from "react"; - -export const links: LinksFunction = () => { - return [{ rel: "stylesheet", href: styles }]; -}; +import { TeamRoster } from "~/components/tournament/TeamRoster"; export default function TeamsTab() { const [, parentRoute] = useMatches(); @@ -25,37 +20,9 @@ export default function TeamsTab() { return (
-
-
- {sortedTeams.map((team) => ( - -
{team.name}
-
- {team.members.map(({ member, captain }, i) => ( -
-
- {captain ? "C" : i + 1} -
-
-
- {member.discordAvatar && ( - - )} -
-
{member.discordName}
-
-
- ))} -
- - ))} -
-
+ {sortedTeams.map((team) => ( + + ))}
); } diff --git a/app/styles/tournament-register.css b/app/styles/tournament-register.css index 94ad695f6..da9d6c5c2 100644 --- a/app/styles/tournament-register.css +++ b/app/styles/tournament-register.css @@ -21,6 +21,13 @@ margin-block-start: var(--s-6); } +.tournament__invite-players { + display: flex; + flex-direction: column; + gap: var(--s-10); + margin-block-start: var(--s-4); +} + .tournament__invite-players__actions-container { display: grid; grid-template-columns: 1fr 1fr; diff --git a/app/styles/tournament-teams.css b/app/styles/tournament-teams.css deleted file mode 100644 index aa0d4691d..000000000 --- a/app/styles/tournament-teams.css +++ /dev/null @@ -1,77 +0,0 @@ -.teams-tab { - display: flex; - flex-direction: column; - gap: var(--s-10); -} - -.teams-tab__teams-container { - display: grid; - column-gap: var(--s-6); - grid-template-columns: 1fr; - row-gap: var(--s-10); -} - -.teams-tab__team-name { - display: flex; - align-self: center; - border-block-end: 2px solid var(--theme); - font-size: var(--fonts-lg); - font-weight: var(--extra-bold); - justify-self: center; -} - -.teams-tab__members-container { - display: flex; - flex-direction: column; - gap: var(--s-4); -} - -.teams-tab__member { - display: flex; - align-items: center; - gap: var(--s-3); -} - -.teams-tab__member__order-number { - color: var(--theme-secondary); - font-size: var(--fonts-sm); - font-weight: bold; -} - -.teams-tab__member__container { - display: flex; - align-items: center; - font-weight: var(--semi-bold); - gap: var(--s-3); -} - -.teams-tab__member__avatar { - block-size: 2.5rem; - border-radius: var(--rounded); - filter: none; - inline-size: 2.5rem; - text-indent: -10000px; -} - -.teams-tab__member__placeholder { - background-image: url("/svg/background-pattern.svg"); - block-size: 2.5rem; - border-radius: var(--rounded); - inline-size: 2.5rem; -} - -@media screen and (min-width: 640px) { - .teams-tab__teams-container { - grid-template-columns: 1fr 1fr; - } - - .teams-tab__team-name { - border-bottom: none; - justify-self: flex-end; - } - - .teams-tab__members-container { - border-inline-start: 2px solid var(--theme); - padding-inline-start: var(--s-6); - } -} diff --git a/app/styles/tournament.css b/app/styles/tournament.css index ddf76685b..060577dca 100644 --- a/app/styles/tournament.css +++ b/app/styles/tournament.css @@ -153,6 +153,68 @@ transform: translateY(1px); } +.teams-tab { + display: flex; + flex-direction: column; + gap: var(--s-10); +} + +.teams-tab__team-container { + display: grid; + column-gap: var(--s-6); + grid-template-columns: 1fr; + row-gap: var(--s-10); +} + +.teams-tab__team-name { + display: flex; + align-self: center; + border-block-end: 2px solid var(--theme); + font-size: var(--fonts-lg); + font-weight: var(--extra-bold); + justify-self: center; +} + +.teams-tab__members-container { + display: flex; + flex-direction: column; + gap: var(--s-4); +} + +.teams-tab__member { + display: flex; + align-items: center; + gap: var(--s-3); +} + +.teams-tab__member__order-number { + color: var(--theme-secondary); + font-size: var(--fonts-sm); + font-weight: bold; +} + +.teams-tab__member__container { + display: flex; + align-items: center; + font-weight: var(--semi-bold); + gap: var(--s-3); +} + +.teams-tab__member__avatar { + block-size: 2.5rem; + border-radius: var(--rounded); + filter: none; + inline-size: 2.5rem; + text-indent: -10000px; +} + +.teams-tab__member__placeholder { + background-image: url("/svg/background-pattern.svg"); + block-size: 2.5rem; + border-radius: var(--rounded); + inline-size: 2.5rem; +} + @media screen and (min-width: 480px) { .tournament__links-container { grid-template-columns: repeat(3, 100px); @@ -172,6 +234,20 @@ flex-direction: row; align-items: flex-end; } + + .teams-tab__team-container { + grid-template-columns: 1fr 1fr; + } + + .teams-tab__team-name { + border-bottom: none; + justify-self: flex-end; + } + + .teams-tab__members-container { + border-inline-start: 2px solid var(--theme); + padding-inline-start: var(--s-6); + } } @media screen and (min-width: 768px) { diff --git a/app/utils/index.ts b/app/utils/index.ts index 00de19c5a..917772365 100644 --- a/app/utils/index.ts +++ b/app/utils/index.ts @@ -36,5 +36,13 @@ export type Serialized = { [P in keyof T]: T[P] extends Date ? string : Serialized; }; +export type Unpacked = T extends (infer U)[] + ? U + : T extends (...args: any[]) => infer U + ? U + : T extends Promise + ? U + : T; + // TODO: // export type InferredSerializedAPI = Serialized>;