more bracket refactor

src/features/bracket/components/bracket-round.tsx

@@ -0,0 +1,54 @@
+import { Flex, Text } from '@mantine/core';
+import React from 'react';
+import { MatchCard } from './match-card';
+import { Match } from '../types';
+
+interface BracketRoundProps {
+  matches: Match[];
+  roundIndex: number;
+  getParentMatchOrder: (parentLid: number) => number | string;
+  onAnnounce?: (teamOne: any, teamTwo: any) => void;
+}
+
+export const BracketRound: React.FC<BracketRoundProps> = ({
+  matches,
+  roundIndex,
+  getParentMatchOrder,
+  onAnnounce,
+}) => {
+  const isMatchType = (type: string, expected: string) => {
+    return type?.toLowerCase() === expected.toLowerCase();
+  };
+
+  return (
+    <Flex direction="column" key={roundIndex} gap={24} justify="space-around">
+      {matches.map((match, matchIndex) => {
+        if (!match) return null;
+
+        // Handle bye matches
+        if (isMatchType(match.type, 'bye') || isMatchType(match.type, 'tbye')) {
+          return <Flex key={matchIndex}></Flex>;
+        }
+
+        return (
+          <Flex
+            direction="row"
+            key={matchIndex}
+            align="center"
+            justify="end"
+            gap={8}
+          >
+            <Text c="dimmed" fw="bolder">
+              {match.order}
+            </Text>
+            <MatchCard
+              match={match}
+              getParentMatchOrder={getParentMatchOrder}
+              onAnnounce={onAnnounce}
+            />
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};

src/features/bracket/components/bracket-view.tsx

@@ -1,17 +1,8 @@
-import { ActionIcon, Card, Flex, Text } from "@mantine/core";
-import { PlayIcon } from "@phosphor-icons/react";
-import React from "react";
-import { BracketMaps } from "../utils/bracket-maps";
-
-interface Match {
-  lid: number;
-  round: number;
-  order: number | null;
-  type: string;
-  home: any;
-  away?: any;
-  reset?: boolean;
-}
+import { Flex } from '@mantine/core';
+import React from 'react';
+import { BracketMaps } from '../utils/bracket-maps';
+import { BracketRound } from './bracket-round';
+import { Match } from '../types';
 
 interface BracketViewProps {
   bracket: Match[][];
@@ -24,9 +15,6 @@ const BracketView: React.FC<BracketViewProps> = ({
   bracketMaps,
   onAnnounce,
 }) => {
-  const isMatchType = (type: string, expected: string) => {
-    return type?.toLowerCase() === expected.toLowerCase();
-  };
 
   const getParentMatchOrder = (parentLid: number): number | string => {
     const parentMatch = bracketMaps.matchByLid.get(parentLid);
@@ -43,170 +31,16 @@ const BracketView: React.FC<BracketViewProps> = ({
   return (
     <Flex direction="row" gap={24} justify="left" pos="relative" p="xl">
       {bracket.map((round, roundIndex) => (
-        <Flex
-          direction="column"
+        <BracketRound
           key={roundIndex}
-          gap={24}
-          justify="space-around"
-        >
-          {round.map((match, matchIndex) => {
-            if (!match) return null;
-
-            if (
-              isMatchType(match.type, "bye") ||
-              isMatchType(match.type, "tbye")
-            ) {
-              return <Flex key={matchIndex}></Flex>;
-            }
-
-            return (
-              <Flex
-                direction="row"
-                key={matchIndex}
-                align="center"
-                justify="end"
-                gap={8}
-              >
-                <Text c="dimmed" fw="bolder">
-                  {match.order}
-                </Text>
-                <Card
-                  withBorder
-                  pos="relative"
-                  w={200}
-                  style={{ overflow: "visible" }}
-                >
-                  <Card.Section withBorder p={0}>
-                    <Flex align="stretch">
-                      {match.home?.seed && (
-                        <Text
-                          size="xs"
-                          fw="bold"
-                          py="4"
-                          bg="var(--mantine-color-default-hover)"
-                          style={{
-                            width: "32px",
-                            textAlign: "center",
-                            color: "var(--mantine-color-text)",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            borderTopLeftRadius:
-                              "var(--mantine-radius-default)",
-                            borderBottomLeftRadius:
-                              "var(--mantine-radius-default)",
-                          }}
-                        >
-                          {match.home.seed}
-                        </Text>
-                      )}
-                      <div style={{ flex: 1, padding: "4px 8px" }}>
-                        {match.home?.seed ? (
-                          match.home.team ? (
-                            <Text size="xs">{match.home.team.name}</Text>
-                          ) : (
-                            <Text size="xs" c="dimmed">
-                              Team {match.home.seed}
-                            </Text>
-                          )
-                        ) : match.home?.parent_lid !== null &&
-                          match.home?.parent_lid !== undefined ? (
-                          <Text c="dimmed" size="xs">
-                            {match.home.loser ? "Loser" : "Winner"} of Match{" "}
-                            {getParentMatchOrder(match.home.parent_lid)}
-                          </Text>
-                        ) : (
-                          <Text c="dimmed" size="xs" fs="italic">
-                            TBD
-                          </Text>
-                        )}
-                      </div>
-                    </Flex>
-                  </Card.Section>
-                  <Card.Section p={0} mb={-16}>
-                    <Flex align="stretch">
-                      {match.away?.seed && (
-                        <Text
-                          size="xs"
-                          fw="bold"
-                          py="4"
-                          bg="var(--mantine-color-default-hover)"
-                          style={{
-                            width: "32px",
-                            textAlign: "center",
-                            color: "var(--mantine-color-text)",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            borderTopLeftRadius:
-                              "var(--mantine-radius-default)",
-                            borderBottomLeftRadius:
-                              "var(--mantine-radius-default)",
-                          }}
-                        >
-                          {match.away.seed}
-                        </Text>
-                      )}
-                      <div style={{ flex: 1, padding: "4px 8px" }}>
-                        {match.away?.seed ? (
-                          match.away.team ? (
-                            <Text size="xs">{match.away.team.name}</Text>
-                          ) : (
-                            <Text size="xs" c="dimmed">
-                              Team {match.away.seed}
-                            </Text>
-                          )
-                        ) : match.away?.parent_lid !== null &&
-                          match.away?.parent_lid !== undefined ? (
-                          <Text c="dimmed" size="xs">
-                            {match.away.loser ? "Loser" : "Winner"} of Match{" "}
-                            {getParentMatchOrder(match.away.parent_lid)}
-                          </Text>
-                        ) : match.away ? (
-                          <Text c="dimmed" size="xs" fs="italic">
-                            TBD
-                          </Text>
-                        ) : null}
-                      </div>
-                    </Flex>
-                  </Card.Section>
-                  {match.reset && (
-                    <Text
-                      pos="absolute"
-                      top={-8}
-                      left={8}
-                      size="xs"
-                      c="orange"
-                      fw="bold"
-                    >
-                      IF NECESSARY
-                    </Text>
-                  )}
-                  {onAnnounce && match.home?.team && match.away?.team && (
-                    <ActionIcon
-                      pos="absolute"
-                      variant="filled"
-                      color="green"
-                      top={-20}
-                      right={-12}
-                      onClick={() => {
-                        onAnnounce(match.home.team, match.away.team);
-                      }}
-                      bd="none"
-                      style={{ boxShadow: "none" }}
-                      size="xs"
-                    >
-                      <PlayIcon size={12} />
-                    </ActionIcon>
-                  )}
-                </Card>
-              </Flex>
-            );
-          })}
-        </Flex>
+          matches={round}
+          roundIndex={roundIndex}
+          getParentMatchOrder={getParentMatchOrder}
+          onAnnounce={onAnnounce}
+        />
       ))}
     </Flex>
   );
 };
 
-export default BracketView;
+export default BracketView;

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

@@ -0,0 +1,66 @@
+import { ActionIcon, Card, Text } from '@mantine/core';
+import { PlayIcon } from '@phosphor-icons/react';
+import React from 'react';
+import { MatchSlot } from './match-slot';
+import { Match } from '../types';
+
+interface MatchCardProps {
+  match: Match;
+  getParentMatchOrder: (parentLid: number) => number | string;
+  onAnnounce?: (teamOne: any, teamTwo: any) => void;
+}
+
+export const MatchCard: React.FC<MatchCardProps> = ({ 
+  match, 
+  getParentMatchOrder, 
+  onAnnounce 
+}) => {
+  return (
+    <Card
+      withBorder
+      pos="relative"
+      w={200}
+      style={{ overflow: 'visible' }}
+      data-match-lid={match.lid}
+    >
+      <Card.Section withBorder p={0}>
+        <MatchSlot slot={match.home} getParentMatchOrder={getParentMatchOrder} />
+      </Card.Section>
+      
+      <Card.Section p={0} mb={-16}>
+        <MatchSlot slot={match.away} getParentMatchOrder={getParentMatchOrder} />
+      </Card.Section>
+      
+      {match.reset && (
+        <Text
+          pos="absolute"
+          top={-8}
+          left={8}
+          size="xs"
+          c="orange"
+          fw="bold"
+        >
+          IF NECESSARY
+        </Text>
+      )}
+      
+      {onAnnounce && match.home?.team && match.away?.team && (
+        <ActionIcon
+          pos="absolute"
+          variant="filled"
+          color="green"
+          top={-20}
+          right={-12}
+          onClick={() => {
+            onAnnounce(match.home.team, match.away.team);
+          }}
+          bd="none"
+          style={{ boxShadow: 'none' }}
+          size="xs"
+        >
+          <PlayIcon size={12} />
+        </ActionIcon>
+      )}
+    </Card>
+  );
+};

src/features/bracket/components/match-slot.tsx

@@ -0,0 +1,43 @@
+import { Flex, Text } from '@mantine/core';
+import React from 'react';
+import { SeedBadge } from './seed-badge';
+
+interface MatchSlotProps {
+  slot: any;
+  getParentMatchOrder: (parentLid: number) => number | string;
+}
+
+export const MatchSlot: React.FC<MatchSlotProps> = ({ slot, getParentMatchOrder }) => {
+  const renderSlotContent = () => {
+    if (slot?.seed) {
+      return slot.team ? (
+        <Text size='xs'>{slot.team.name}</Text>
+      ) : (
+        <Text size='xs' c='dimmed'>Team {slot.seed}</Text>
+      );
+    }
+    
+    if (slot?.parent_lid !== null && slot?.parent_lid !== undefined) {
+      return (
+        <Text c='dimmed' size='xs'>
+          {slot.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(slot.parent_lid)}
+        </Text>
+      );
+    }
+    
+    if (slot) {
+      return <Text c='dimmed' size='xs' fs='italic'>TBD</Text>;
+    }
+    
+    return null;
+  };
+
+  return (
+    <Flex align="stretch">
+      {slot?.seed && <SeedBadge seed={slot.seed} />}
+      <div style={{ flex: 1, padding: '4px 8px' }}>
+        {renderSlotContent()}
+      </div>
+    </Flex>
+  );
+};

src/features/bracket/components/seed-badge.tsx

@@ -0,0 +1,29 @@
+import { Text } from '@mantine/core';
+import React from 'react';
+
+interface SeedBadgeProps {
+  seed: number;
+}
+
+export const SeedBadge: React.FC<SeedBadgeProps> = ({ seed }) => {
+  return (
+    <Text
+      size="xs"
+      fw="bold"
+      py="4"
+      bg="var(--mantine-color-default-hover)"
+      style={{
+        width: '32px',
+        textAlign: 'center',
+        color: 'var(--mantine-color-text)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderTopLeftRadius: 'var(--mantine-radius-default)',
+        borderBottomLeftRadius: 'var(--mantine-radius-default)',
+      }}
+    >
+      {seed}
+    </Text>
+  );
+};