regional teams

2026-02-09 23:36:04 -06:00
parent 5dd41d8022
commit 63853f22de
10 changed files with 181 additions and 85 deletions
--- a/src/components/team-avatar.tsx
+++ b/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;