init

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

@@ -0,0 +1,146 @@
+import { Text, Container, Flex, ScrollArea } from "@mantine/core";
+import { SeedList } from "./seed-list";
+import BracketView from "./bracket-view";
+import { MutableRefObject, RefObject, useEffect, useRef, useState } from "react";
+import { bracketQueries } from "../queries";
+import { useQuery } from "@tanstack/react-query";
+import { useDraggable } from "react-use-draggable-scroll";
+import { ref } from "process";
+import './styles.module.css';
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import useAppShellHeight from "@/hooks/use-appshell-height";
+
+interface Team {
+  id: string;
+  name: string;
+}
+
+interface BracketData {
+  n: number;
+  doubleElim: boolean;
+  matches: { [key: string]: any };
+  winnersBracket: number[][];
+  losersBracket: number[][];
+}
+
+export const PreviewBracketPage: React.FC = () => {
+  const isMobile = useIsMobile();
+  const height = useAppShellHeight();
+  const refDraggable = useRef<HTMLDivElement>(null);
+  const { events } = useDraggable(refDraggable as RefObject<HTMLDivElement>, { isMounted: !!refDraggable.current });
+
+  const teamCount = 20;
+  const { data, isLoading, error } = useQuery<BracketData>(bracketQueries.preview(teamCount));
+
+  // Create teams with proper structure
+  const [teams, setTeams] = useState<Team[]>(
+    Array.from({ length: teamCount }, (_, i) => ({
+      id: `team-${i + 1}`,
+      name: `Team ${i + 1}`
+    }))
+  );
+
+  const [seededWinnersBracket, setSeededWinnersBracket] = useState<any[][]>([]);
+  const [seededLosersBracket, setSeededLosersBracket] = useState<any[][]>([]);
+
+  useEffect(() => {
+    if (!data) return;
+
+    // Map match IDs to actual match objects with team names
+    const mapBracket = (bracketIds: number[][]) => {
+      return bracketIds.map(roundIds => 
+        roundIds.map(lid => {
+          const match = data.matches[lid];
+          if (!match) return null;
+
+          const mappedMatch = { ...match };
+
+          // Map home slot - handle both uppercase and lowercase type names
+          if (match.home?.type?.toLowerCase() === 'seed') {
+            mappedMatch.home = {
+              ...match.home,
+              team: teams[match.home.seed - 1]
+            };
+          }
+
+          // Map away slot if it exists - handle both uppercase and lowercase type names
+          if (match.away?.type?.toLowerCase() === 'seed') {
+            mappedMatch.away = {
+              ...match.away,
+              team: teams[match.away.seed - 1]
+            };
+          }
+
+          return mappedMatch;
+        }).filter(m => m !== null)
+      );
+    };
+
+    setSeededWinnersBracket(mapBracket(data.winnersBracket));
+    setSeededLosersBracket(mapBracket(data.losersBracket));
+  }, [teams, data]);
+
+  const handleSeedChange = (teamIndex: number, newSeedIndex: number) => {
+    const newTeams = [...teams];
+    const movingTeam = newTeams[teamIndex];
+    
+    // Remove the team from its current position
+    newTeams.splice(teamIndex, 1);
+    
+    // Insert it at the new position
+    newTeams.splice(newSeedIndex, 0, movingTeam);
+    
+    setTeams(newTeams);
+  };
+
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error loading bracket</p>;
+  if (!data) return <p>No data available</p>;
+
+  return (
+    <Container p={0} w="100%" style={{ userSelect: "none" }}>
+      <Flex w="100%" justify="space-between" h='3rem'>
+        <Text fw={600} size="lg" mb={16}>
+          Preview Bracket ({data.n} teams, {data.doubleElim ? 'Double' : 'Single'} Elimination)
+        </Text>
+      </Flex>
+      <Flex w="100%" gap={24}>
+        <div style={{ minWidth: 250, display: 'none' }}>
+          <Text fw={600} pb={16}>
+            Seed Teams
+          </Text>
+          <SeedList teams={teams} onSeedChange={handleSeedChange} />
+        </div>
+        <ScrollArea
+          px='xs'
+          viewportRef={refDraggable}
+          viewportProps={events}
+          h={`calc(${height} - 4rem)`}
+          className="bracket-container"
+          styles={{
+            root: { overflow: "auto", flex: 1, gap: 24, display: 'flex', flexDirection: 'column' }
+          }}
+        >
+          <div>
+            <Text fw={600} size="md" mb={16}>
+              Winners Bracket
+            </Text>
+            <BracketView 
+              bracket={seededWinnersBracket} 
+              matches={data.matches}
+            />
+          </div>
+          <div>
+            <Text fw={600} size="md" mb={16}>
+              Losers Bracket
+            </Text>
+            <BracketView 
+              bracket={seededLosersBracket} 
+              matches={data.matches}
+            />
+          </div>
+        </ScrollArea>
+      </Flex>
+    </Container>
+  );
+};

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;

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

@@ -0,0 +1,49 @@
+import { Flex, Text, Select, Card } from '@mantine/core';
+import React from 'react';
+
+interface Team {
+  id: string;
+  name: string;
+}
+
+interface SeedListProps {
+  teams: Team[];
+  onSeedChange: (currentIndex: number, newIndex: number) => void;
+}
+
+export function SeedList({ teams, onSeedChange }: SeedListProps) {
+  const seedOptions = teams.map((_, index) => ({
+    value: index.toString(),
+    label: `Seed ${index + 1}`
+  }));
+
+  return (
+    <Flex direction='column' gap={8}>
+      {teams.map((team, index) => (
+        <Card key={team.id} withBorder p="xs">
+          <Flex align="center" gap="xs" justify="space-between">
+            <Flex align="center" gap="xs">
+              <Select
+                value={index.toString()}
+                data={seedOptions}
+                onChange={(value) => {
+                  if (value !== null) {
+                    const newIndex = parseInt(value);
+                    if (newIndex !== index) {
+                      onSeedChange(index, newIndex);
+                    }
+                  }
+                }}
+                size="xs"
+                w={100}
+              />
+              <Text size="sm" fw={500}>
+                {team.name}
+              </Text>
+            </Flex>
+          </Flex>
+        </Card>
+      ))}
+    </Flex>
+  );
+}

src/features/bracket/components/styles.module.css

@@ -0,0 +1,35 @@
+/* Hide scrollbars but keep functionality */
+.bracket-container::-webkit-scrollbar {
+    display: none;
+}
+
+.bracket-container {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+/* Cursor states for draggable area */
+.bracket-container:active {
+    cursor: grabbing;
+}
+
+/* Smooth scrolling on mobile */
+.bracket-container {
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+}
+
+/* Prevent text selection while dragging */
+.bracket-container * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/* Optional: Add subtle shadows for depth on desktop */
+@media (min-width: 768px) {
+    .bracket-container {
+        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
+    }
+}