regional teams

src/app/routes/_authed/admin/tournaments/run.$id.tsx

@@ -86,6 +86,7 @@ function RouteComponent() {
         <SeedTournament
           tournamentId={tournament.id}
           teams={tournament.teams || []}
+          isRegional={tournament.regional}
         />
       )}
     </Container>

src/components/team-avatar.tsx

@@ -0,0 +1,139 @@
+import { Box, AvatarGroup } from "@mantine/core";
+import { CrownIcon } from "@phosphor-icons/react";
+import { TeamInfo } from "@/features/teams/types";
+import Avatar from "./avatar";
+import PlayerAvatar from "./player-avatar";
+
+interface TeamAvatarProps {
+  team: TeamInfo;
+  size?: number;
+  radius?: string | number;
+  withBorder?: boolean;
+  disableFullscreen?: boolean;
+  contain?: boolean;
+  style?: React.CSSProperties;
+  winner?: boolean;
+  isRegional?: boolean;
+}
+
+const TeamAvatar = ({
+  team,
+  size = 35,
+  radius = "sm",
+  withBorder = true,
+  disableFullscreen = false,
+  contain = false,
+  style,
+  winner = false,
+  isRegional,
+}: TeamAvatarProps) => {
+  const hasNoLogo = !team.logo;
+  const hasTwoPlayers = team.players?.length === 2;
+
+  let shouldShowPlayerAvatars = false;
+
+  if (isRegional !== undefined) {
+    shouldShowPlayerAvatars = isRegional && hasTwoPlayers && hasNoLogo;
+  } else {
+    const tournaments = (team as any).tournaments;
+    const hasTournaments = tournaments && tournaments.length > 0;
+    const allTournamentsAreRegional = hasTournaments && tournaments.every((t: any) => t.regional === true);
+
+    shouldShowPlayerAvatars = hasTwoPlayers && hasNoLogo && (allTournamentsAreRegional || !hasTournaments);
+  }
+
+  if (shouldShowPlayerAvatars && team.players?.length === 2) {
+    const playerSize = size * 0.6;
+    const crownSize = Math.max(12, size * 0.35);
+
+    return (
+      <Box
+        style={{
+          position: "relative",
+          width: size,
+          height: size,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          ...style,
+        }}
+      >
+        <AvatarGroup spacing={size * -0.25}>
+          <Box style={{ position: "relative" }}>
+            <PlayerAvatar
+              name={`${team.players[0].first_name} ${team.players[0].last_name}`}
+              size={playerSize}
+              disableFullscreen={disableFullscreen}
+            />
+            {winner && (
+              <Box
+                style={{
+                  position: "absolute",
+                  top: -crownSize * 1.1,
+                  left: "45%",
+                  transform: "translateX(-50%)",
+                  color: "gold",
+                  rotate: "-5deg",
+                }}
+              >
+                <CrownIcon size={crownSize} weight="fill" />
+              </Box>
+            )}
+          </Box>
+          <Box style={{ position: "relative" }}>
+            <PlayerAvatar
+              name={`${team.players[1].first_name} ${team.players[1].last_name}`}
+              size={playerSize}
+              disableFullscreen={disableFullscreen}
+            />
+            {winner && (
+              <Box
+                style={{
+                  position: "absolute",
+                  top: -crownSize * 0.95,
+                  left: "65%",
+                  transform: "translateX(-50%)",
+                  color: "gold",
+                  rotate: "10deg",
+                }}
+              >
+                <CrownIcon size={crownSize} weight="fill" />
+              </Box>
+            )}
+          </Box>
+        </AvatarGroup>
+      </Box>
+    );
+  }
+
+  const crownSize = Math.max(14, size * 0.4); 
+
+  return (
+    <Box style={{ position: "relative", ...style }}>
+      <Avatar
+        name={team.name}
+        size={size}
+        radius={radius}
+        withBorder={withBorder}
+        disableFullscreen={disableFullscreen}
+        contain={contain}
+        src={team.logo ? `/api/files/teams/${team.id}/${team.logo}` : undefined}
+      />
+      {winner && (
+        <Box
+          style={{
+            position: "absolute",
+            top: -crownSize * 0.6,
+            left: -crownSize * 0.25,
+            transform: "rotate(-25deg)",
+            color: "gold",
+          }}
+        >
+          <CrownIcon size={crownSize} weight="fill" />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default TeamAvatar;

src/features/matches/components/match-card.tsx

@@ -1,8 +1,8 @@
 import { Text, Group, Stack, Paper, Indicator, Box, Tooltip, ActionIcon } from "@mantine/core";
-import { CrownIcon, FootballHelmetIcon } from "@phosphor-icons/react";
+import { FootballHelmetIcon } from "@phosphor-icons/react";
 import { useNavigate } from "@tanstack/react-router";
 import { Match } from "../types";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import EmojiBar from "@/features/reactions/components/emoji-bar";
 import { Suspense } from "react";
 import { useSheet } from "@/hooks/use-sheet";
@@ -113,32 +113,16 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
             <Group justify="space-between" align="center">
               <Group gap="sm" style={{ flex: 1 }}>
                 <Box
-                  style={{ position: "relative", cursor: "pointer" }}
+                  style={{ cursor: "pointer" }}
                   onClick={handleHomeTeamClick}
                 >
-                  <Avatar
+                  <TeamAvatar
+                    team={match.home!}
                     size={40}
-                    name={match.home?.name!}
                     radius="sm"
-                    src={
-                      match.home?.logo
-                        ? `/api/files/teams/${match.home?.id}/${match.home?.logo}`
-                        : undefined
-                    }
+                    winner={isHomeWin}
+                    isRegional={match.tournament.regional}
                   />
-                  {isHomeWin && (
-                    <Box
-                      style={{
-                        position: "absolute",
-                        top: -10,
-                        left: -4,
-                        transform: "rotate(-25deg)",
-                        color: "gold",
-                      }}
-                    >
-                      <CrownIcon size={16} weight="fill" />
-                    </Box>
-                  )}
                 </Box>
                   <Tooltip
                     label={match.home?.name!}
@@ -175,32 +159,16 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
             <Group justify="space-between" align="center">
               <Group gap="sm" style={{ flex: 1 }}>
                 <Box
-                  style={{ position: "relative", cursor: "pointer" }}
+                  style={{ cursor: "pointer" }}
                   onClick={handleAwayTeamClick}
                 >
-                  <Avatar
+                  <TeamAvatar
+                    team={match.away!}
                     size={40}
-                    name={match.away?.name!}
                     radius="sm"
-                    src={
-                      match.away?.logo
-                        ? `/api/files/teams/${match.away?.id}/${match.away?.logo}`
-                        : undefined
-                    }
+                    winner={isAwayWin}
+                    isRegional={match.tournament.regional}
                   />
-                  {isAwayWin && (
-                    <Box
-                      style={{
-                        position: "absolute",
-                        top: -10,
-                        left: -4,
-                        transform: "rotate(-25deg)",
-                        color: "gold",
-                      }}
-                    >
-                      <CrownIcon size={16} weight="fill" />
-                    </Box>
-                  )}
                 </Box>
                 <Tooltip
                   label={match.away?.name}

src/features/teams/components/team-card.tsx

@@ -8,7 +8,7 @@ import {
   Title
 } from "@mantine/core";
 import { useTeam } from "../queries";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import SongSummary from "./team-form/song-summary";
 
 interface TeamCardProps {
@@ -46,11 +46,10 @@ const TeamCard = ({ teamId }: TeamCardProps) => {
     >
       <Stack gap={2}>
         <Group gap="md" align="center" p="xs">
-          <Avatar
-            name={team.name}
+          <TeamAvatar
+            team={team}
             size={40}
             radius="md"
-            src={team.logo ? `/api/files/teams/${team.id}/${team.logo}` : undefined}
             style={{
               backgroundColor: team.primary_color || undefined,
               color: team.accent_color || undefined,

src/features/teams/components/team-list.tsx

@@ -7,7 +7,7 @@ import {
   Stack,
   Text,
 } from "@mantine/core";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import { TeamInfo } from "@/features/teams/types";
 import { useNavigate } from "@tanstack/react-router";
 import { useCallback, useMemo } from "react";
@@ -88,15 +88,10 @@ const TeamList = ({ teams, loading = false, onTeamClick }: TeamListProps) => {
             key={`team-list-${team.id}`}
             p="xs"
             icon={
-              <Avatar
+              <TeamAvatar
+                team={team}
                 radius="sm"
                 size={40}
-                name={`${team.name}`}
-                src={
-                  team.logo
-                    ? `/api/files/teams/${team.id}/${team.logo}`
-                    : undefined
-                }
               />
             }
             style={{ cursor: "pointer" }}

src/features/tournaments/components/edit-enrolled-teams.tsx

@@ -11,7 +11,7 @@ import { useState, useCallback, useMemo, memo } from "react";
 import { useTournament, useUnenrolledTeams } from "../queries";
 import useEnrollTeam from "../hooks/use-enroll-team";
 import useUnenrollTeam from "../hooks/use-unenroll-team";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import { Team, TeamInfo } from "@/features/teams/types";
 
 interface EditEnrolledTeamsProps {
@@ -22,9 +22,10 @@ interface TeamItemProps {
   team: TeamInfo;
   onUnenroll: (teamId: string) => void;
   disabled: boolean;
+  isRegional?: boolean;
 }
 
-const TeamItem = memo(({ team, onUnenroll, disabled }: TeamItemProps) => {
+const TeamItem = memo(({ team, onUnenroll, disabled, isRegional }: TeamItemProps) => {
   const playerNames = useMemo(
     () =>
       team.players?.map((p) => `${p.first_name} ${p.last_name}`).join(", ") ||
@@ -34,15 +35,11 @@ const TeamItem = memo(({ team, onUnenroll, disabled }: TeamItemProps) => {
 
   return (
     <Group py="xs" px="sm" w="100%" gap="sm" align="center">
-      <Avatar
+      <TeamAvatar
+        team={team}
         size={32}
         radius="sm"
-        name={team.name}
-        src={
-          team.logo
-            ? `/api/files/teams/${team.id}/${team.logo}`
-            : undefined
-        }
+        isRegional={isRegional}
       />
       <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
         <Text fw={500} truncate>
@@ -73,6 +70,8 @@ const EditEnrolledTeams = ({ tournamentId }: EditEnrolledTeamsProps) => {
   const { data: unenrolledTeams = [], isLoading: unenrolledLoading } =
     useUnenrolledTeams(tournamentId);
 
+  const isRegional = tournament?.regional;
+
   const { mutate: enrollTeam, isPending: isEnrolling } = useEnrollTeam();
   const { mutate: unenrollTeam, isPending: isUnenrolling } = useUnenrollTeam();
 
@@ -107,15 +106,11 @@ const EditEnrolledTeams = ({ tournamentId }: EditEnrolledTeamsProps) => {
     const team = option.data;
     return (
       <Group py="xs" px="sm" gap="sm" align="center">
-        <Avatar
+        <TeamAvatar
+          team={team as any}
           size={32}
           radius="sm"
-          name={team.name}
-          src={
-            team.logo
-              ? `/api/files/teams/${team.id}/${team.logo}`
-              : undefined
-          }
+          isRegional={isRegional}
         />
         <Text fw={500} truncate>
           {team.name}
@@ -174,6 +169,7 @@ const EditEnrolledTeams = ({ tournamentId }: EditEnrolledTeamsProps) => {
                 team={team}
                 onUnenroll={handleUnenrollTeam}
                 disabled={isUnenrolling}
+                isRegional={isRegional}
               />
             ))}
           </Stack>

src/features/tournaments/components/seed-tournament.tsx

@@ -13,7 +13,7 @@ import { DotsNineIcon } from "@phosphor-icons/react";
 import { useServerMutation } from "@/lib/tanstack-query/hooks/use-server-mutation";
 import { generateTournamentBracket } from "../../matches/server";
 import { TeamInfo } from "@/features/teams/types";
-import Avatar from "@/components/avatar";
+import TeamAvatar from "@/components/team-avatar";
 import { useBracketPreview } from "@/features/bracket/queries";
 import { BracketData } from "@/features/bracket/types";
 import BracketView from "@/features/bracket/components/bracket-view";
@@ -23,11 +23,13 @@ import { tournamentKeys } from "../queries";
 interface SeedTournamentProps {
   tournamentId: string;
   teams: TeamInfo[];
+  isRegional?: boolean;
 }
 
 const SeedTournament: React.FC<SeedTournamentProps> = ({
   tournamentId,
   teams,
+  isRegional,
 }) => {
   const [orderedTeams, setOrderedTeams] = useState<TeamInfo[]>(teams);
   const { data: bracketPreview } = useBracketPreview(teams.length);
@@ -171,15 +173,11 @@ const SeedTournament: React.FC<SeedTournamentProps> = ({
                               }}
                             />
 
-                            <Avatar
+                            <TeamAvatar
+                              team={team}
                               size={24}
                               radius="sm"
-                              name={team.name}
-                              src={
-                                team.logo
-                                  ? `/api/files/teams/${team.id}/${team.logo}`
-                                  : undefined
-                              }
+                              isRegional={isRegional}
                             />
 
                             <Text fw={500} size="sm" style={{ flex: 1 }}>

src/lib/pocketbase/services/matches.ts

@@ -7,7 +7,7 @@ export function createMatchesService(pb: PocketBase) {
   return {
     async getMatch(id: string): Promise<Match | null> {
       const result = await pb.collection("matches").getOne(id, {
-        expand: "tournament, home, away",
+        expand: "tournament, home, away, home.players, away.players",
       });
       return transformMatch(result);
     },
@@ -19,7 +19,7 @@ export function createMatchesService(pb: PocketBase) {
       
       const result = await pb.collection("matches").getFullList({
         filter: `tournament="${match.tournament.id}" && (home_from_lid = ${match.lid} || away_from_lid = ${match.lid}) && bye = false`,
-        expand: "tournament, home, away",
+        expand: "tournament, home, away, home.players, away.players",
       });
 
       const winnerMatch = result.find(m => (m.home_from_lid === match.lid && !m.home_from_loser) || (m.away_from_lid === match.lid && !m.away_from_loser));
@@ -50,7 +50,7 @@ export function createMatchesService(pb: PocketBase) {
     async updateMatch(id: string, data: Partial<MatchInput>): Promise<Match> {
       logger.info("PocketBase | Updating match", { id, data });
       const result = await pb.collection("matches").update<Match>(id, data, {
-        expand: 'home, away, tournament'
+        expand: 'home, away, tournament, home.players, away.players'
       });
       return transformMatch(result);
     },

src/lib/pocketbase/services/players.ts

@@ -126,7 +126,7 @@ export function createPlayersService(pb: PocketBase) {
       const result = await pb.collection("matches").getFullList({
         filter: `(${teamFilter}) && (status = "ended" || status = "started")`,
         sort: "-created",
-        expand: "tournament,home,away",
+        expand: "tournament,home,away,home.players,away.players",
       });
 
       return result.map((match) => transformMatch(match));

src/lib/pocketbase/services/teams.ts

@@ -105,7 +105,7 @@ export function createTeamsService(pb: PocketBase) {
       const result = await pb.collection("matches").getFullList({
         filter: `(${teamFilter}) && (status = "ended" || status = "started")`,
         sort: "-start_time",
-        expand: "tournament,home,away",
+        expand: "tournament,home,away,home.players,away.players",
       });
 
       return result.map((match) => transformMatch(match));