init

2025-08-20 22:35:40 -05:00
commit f51c278cd3
169 changed files with 8173 additions and 0 deletions
--- a/src/features/bracket/components/bracket-view.tsx
+++ b/src/features/bracket/components/bracket-view.tsx
@@ -0,0 +1,119 @@
+import { ActionIcon, Card, Container, Flex, Text } from '@mantine/core';
+import { PlayIcon } from '@phosphor-icons/react';
+import React from 'react';
+
+interface BracketViewProps {
+  bracket: any[][];
+  matches: { [key: string]: any };
+  onAnnounce?: (teamOne: any, teamTwo: any) => void;
+}
+
+const BracketView: React.FC<BracketViewProps> = ({ bracket, matches, onAnnounce }) => {
+  // Helper to check match type (handle both uppercase and lowercase)
+  const isMatchType = (type: string, expected: string) => {
+    return type?.toLowerCase() === expected.toLowerCase();
+  };
+
+  // Helper to check slot type (handle both uppercase and lowercase)
+  const isSlotType = (type: string, expected: string) => {
+    return type?.toLowerCase() === expected.toLowerCase();
+  };
+
+  // Helper to get parent match order number
+  const getParentMatchOrder = (parentId: number): number | string => {
+    const parentMatch = matches[parentId];
+    if (parentMatch && parentMatch.order !== null && parentMatch.order !== undefined) {
+      return parentMatch.order;
+    }
+    // If no order (like for byes), return the parentId with a different prefix
+    return `Match ${parentId}`;
+  };
+
+  return (
+    <Flex direction='row' gap={24} justify='left' pos='relative' p='xl'>
+      {bracket.map((round, roundIndex) => (
+        <Flex direction='column' key={roundIndex} gap={24} justify='space-around'>
+          {round.map((match, matchIndex) => {
+            if (!match) return null;
+
+            // Handle bye matches (no away slot) - check both 'TBye' and 'bye'
+            if (isMatchType(match.type, 'bye') || isMatchType(match.type, 'tbye')) {
+              return (
+                <Flex key={matchIndex}>
+                </Flex>
+              );
+            }
+
+            // Regular matches with both home and away
+            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={4}>
+                    {isSlotType(match.home?.type, 'seed') && (
+                      <>
+                        <Text c='dimmed' size='xs'>Seed {match.home.seed}</Text>
+                        {match.home.team && <Text size='xs'>{match.home.team.name}</Text>}
+                      </>
+                    )}
+                    {isSlotType(match.home?.type, 'tbd') && (
+                      <Text c='dimmed' size='xs'>
+                        {match.home.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.home.parentId || match.home.parent)}
+                      </Text>
+                    )}
+                    {!match.home && <Text c='dimmed' size='xs' fs='italic'>TBD</Text>}
+                  </Card.Section>
+                  <Card.Section p={4} mb={-16}>
+                    {isSlotType(match.away?.type, 'seed') && (
+                      <>
+                        <Text c='dimmed' size='xs'>Seed {match.away.seed}</Text>
+                        {match.away.team && <Text size='xs'>{match.away.team.name}</Text>}
+                      </>
+                    )}
+                    {isSlotType(match.away?.type, 'tbd') && (
+                      <Text c='dimmed' size='xs'>
+                        {match.away.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.away.parentId || match.away.parent)}
+                      </Text>
+                    )}
+                    {!match.away && <Text c='dimmed' size='xs' fs='italic'>TBD</Text>}
+                  </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>
+      ))}
+    </Flex>
+  );
+};
+
+export default BracketView;