init

src/features/bracket/bracket.ts

@@ -0,0 +1,412 @@
+// Type definitions
+interface TMatchSlot {}
+
+interface Seed extends TMatchSlot {
+  seed: number;
+}
+
+interface TBD extends TMatchSlot {
+  parent: TMatchBase;
+  loser: boolean;
+  ifNecessary?: boolean;
+}
+
+interface TMatchBase {
+  lid: number; // local id
+  round: number;
+  order?: number | null;
+}
+
+interface TMatch extends TMatchBase {
+  home: Seed | TBD;
+  away: Seed | TBD;
+  reset?: boolean;
+}
+
+interface TBye extends TMatchBase {
+  home: Seed | TBD;
+}
+
+type MatchType = TMatch | TBye;
+
+// Utility functions
+function innerOuter<T>(ls: T[]): T[] {
+  if (ls.length === 2) return ls;
+  
+  const size = Math.floor(ls.length / 4);
+  
+  const innerPart = [ls.slice(size, 2 * size), ls.slice(2 * size, 3 * size)];
+  const outerPart = [ls.slice(0, size), ls.slice(3 * size)];
+  
+  const inner = (part: T[][]): T[] => [part[0].pop()!, part[1].shift()!];
+  const outer = (part: T[][]): T[] => [part[0].shift()!, part[1].pop()!];
+  
+  const quads: T[][] = Array(Math.floor(size / 2)).fill(null).map(() => []);
+  
+  const push = (part: T[][], method: (p: T[][]) => T[], arr: T[]) => {
+    if (part[0].length && part[1].length) {
+      arr.push(...method(part));
+    }
+  };
+  
+  for (let i = 0; i < Math.floor(size / 2); i++) {
+    push(outerPart, outer, quads[i]);
+    push(innerPart, inner, quads[i]);
+    push(outerPart, inner, quads[i]);
+    push(innerPart, outer, quads[i]);
+  }
+  
+  const result: T[] = [];
+  for (let i = 0; i < quads.length; i++) {
+    const curr = i % 2 === 0 ? quads.shift()! : quads.pop()!;
+    result.push(...curr);
+  }
+  
+  return result;
+}
+
+function reverseHalfShift<T>(ls: T[]): T[] {
+  const halfLength = Math.floor(ls.length / 2);
+  return [...ls.slice(-halfLength), ...ls.slice(0, -halfLength)];
+}
+
+export class BracketGenerator {
+  private _bracket: MatchType[][] = [];
+  private _losersBracket: MatchType[][] = [];
+  private _order: number = 0;
+  private _floatingLosers: TBD[] = [];
+  private _lid: number = 0;
+  private _matches: Map<number, MatchType> = new Map();
+  
+  public n: number;
+  public doubleElim: boolean;
+  private _nearestPowerOf2: number;
+  private _m: number;
+  private _byes: number;
+  
+  constructor(n: number, doubleElim: boolean = false) {
+    if (n < 8 || n > 64) {
+      throw new Error("The number of teams must be greater than or equal to 8 and less than or equal to 64");
+    }
+    
+    this.n = n;
+    this.doubleElim = doubleElim;
+    this._nearestPowerOf2 = Math.pow(2, Math.ceil(Math.log2(n)));
+    this._m = this._nearestPowerOf2;
+    this._byes = this._m - n;
+    
+    this._generateSingleElim();
+  }
+  
+  private _makeMatch(round: number, home: Seed | TBD, away: Seed | TBD, order: number): TMatch {
+    const match: TMatch = {
+      lid: this._lid,
+      round: round,
+      home: home,
+      away: away,
+      order: order
+    };
+    this._matches.set(this._lid, match);
+    this._lid += 1;
+    return match;
+  }
+  
+  private _makeBye(round: number, home: Seed | TBD): TBye {
+    const bye: TBye = {
+      lid: this._lid,
+      round: round,
+      home: home
+    };
+    this._matches.set(this._lid, bye);
+    this._lid += 1;
+    return bye;
+  }
+  
+  private _makeTBD(parent: TMatchBase, loser: boolean = false): TBD {
+    return {
+      parent: parent,
+      loser: loser
+    };
+  }
+  
+  private _makeSeed(seed: number): Seed {
+    return { seed: seed };
+  }
+  
+  private _parseQuad(quad: MatchType[]): MatchType[] {
+    // Used to generate losers bracket by iterating over the first round of the bracket, 4 matches/byes at a time
+    
+    const pop = (): TBye => this._makeBye(0, this._floatingLosers.pop()!);
+    const popAt = (i: number) => (): TBye => this._makeBye(0, this._floatingLosers.splice(i, 1)[0]);
+    const shift = (): TBye => this._makeBye(0, this._floatingLosers.shift()!);
+    const popShift = (): TMatch => this._makeMatch(0, this._floatingLosers.pop()!, this._floatingLosers.shift()!, this._orderIncrement());
+    const pairShift = (): TMatch => this._makeMatch(0, this._floatingLosers.shift()!, this._floatingLosers.shift()!, this._orderIncrement());
+    
+    // Actions to perform based on number of byes in the winners bracket quad
+    const actions: { [key: number]: (() => MatchType)[] } = {
+      0: [pop, pairShift, pop, pairShift],
+      1: [pop, shift, pop, pairShift],
+      2: [pop, shift, pop, shift],
+      3: [popAt(-2), popShift],
+      4: [pop, pop]
+    };
+    
+    // Count the number of byes in the quad
+    const b = quad.filter(m => 'home' in m && !('away' in m)).length;
+    
+    const result = actions[b].map(action => action());
+    return result;
+  }
+  
+  private _flattenRound(round: MatchType[], roundNumber: number = 0): MatchType[] {
+    // Check if all matches are byes
+    if (round.every(m => 'home' in m && !('away' in m))) {
+      const result: MatchType[] = [];
+      for (let i = 0; i < round.length; i += 2) {
+        result.push(this._makeMatch(
+          roundNumber,
+          (round[i] as TBye).home,
+          (round[i + 1] as TBye).home,
+          this._orderIncrement()
+        ));
+      }
+      return result;
+    }
+    
+    return round;
+  }
+  
+  private _startsWithBringInRound(): boolean {
+    // Start at 8, first block of size 4 returns 0
+    let start = 8;
+    const blockSizes = [4, 5, 7, 9, 15, 17]; // Sizes of blocks
+    let result = 0; // First block returns 0
+    
+    // Loop through predefined block sizes
+    for (const blockSize of blockSizes) {
+      const end = start + blockSize - 1;
+      if (start <= this.n && this.n <= end) {
+        return result === 0;
+      }
+      start = end + 1;
+      result = 1 - result; // Alternate between 0 and 1
+    }
+    
+    return false;
+  }
+  
+  private _generateStartingRounds(): void {
+    this._floatingLosers = [];
+    
+    // Generate Pairings based on seeding
+    const seeds: (Seed | null)[] = [];
+    for (let i = 1; i <= this.n; i++) {
+      seeds.push(this._makeSeed(i));
+    }
+    for (let i = 0; i < this._byes; i++) {
+      seeds.push(null);
+    }
+    
+    const pairings: [Seed | null, Seed | null][] = [];
+    const innerOuterResult = innerOuter(seeds);
+    for (let i = 0; i < innerOuterResult.length; i += 2) {
+      pairings.push([innerOuterResult[i], innerOuterResult[i + 1]]);
+    }
+    
+    // First Round
+    let round: MatchType[] = [];
+    for (const [home, away] of pairings) {
+      if (away === null) {
+        round.push(this._makeBye(0, home!));
+      } else {
+        const match = this._makeMatch(0, home!, away, this._orderIncrement());
+        round.push(match);
+        this._floatingLosers.push(this._makeTBD(match, true));
+      }
+    }
+    
+    this._bracket = [round];
+    
+    // Second Round
+    const prev = round;
+    round = [];
+    
+    const getSlot = (m: MatchType): Seed | TBD => {
+      return 'away' in m ? this._makeTBD(m) : (m as TBye).home;
+    };
+    
+    const startOrder = this._orderIncrement();
+    const orderDelta = Math.abs(this._byes - (this._m / 4));
+    const orderSplit = [startOrder + orderDelta, startOrder];
+    
+    for (let i = 0; i < prev.length; i += 2) {
+      const home = getSlot(prev[i]);
+      const away = getSlot(prev[i + 1]);
+      
+      let order: number;
+      if ('parent' in away) {
+        order = orderSplit[0];
+        orderSplit[0] += 1;
+      } else {
+        order = orderSplit[1];
+        orderSplit[1] += 1;
+      }
+      
+      const match = this._makeMatch(1, home, away, order);
+      round.push(match);
+      this._floatingLosers.push(this._makeTBD(match, true));
+    }
+    
+    this._bracket.push(round);
+    this._order = orderSplit[0] - 1;
+    
+    // Generate losers bracket if double elim
+    if (this.doubleElim) {
+      // Round one
+      this._floatingLosers = innerOuter(this._floatingLosers);
+      this._losersBracket = [];
+      let roundOne: MatchType[] = [];
+      for (let i = 0; i < prev.length; i += 4) {
+        roundOne.push(...this._parseQuad(prev.slice(i, i + 4)));
+      }
+      this._losersBracket.push(this._flattenRound(roundOne));
+      
+      // Round two
+      const roundTwo: MatchType[] = [];
+      for (let i = 0; i < roundOne.length; i += 2) {
+        roundTwo.push(this._makeMatch(
+          1,
+          getSlot(roundOne[i]),
+          getSlot(roundOne[i + 1]),
+          this._orderIncrement()
+        ));
+      }
+      
+      this._losersBracket.push(roundTwo);
+    }
+  }
+  
+  private _orderIncrement(): number {
+    this._order += 1;
+    return this._order;
+  }
+  
+  private _generateBringInRound(roundNumber: number): void {
+    console.log('generating bring in round', roundNumber);
+    const bringIns = reverseHalfShift(this._floatingLosers);
+    this._floatingLosers = [];
+    const round: MatchType[] = [];
+    
+    const prev = this._losersBracket[this._losersBracket.length - 1];
+    for (const match of prev) {
+      const bringIn = bringIns.pop()!;
+      const newMatch = this._makeMatch(
+        roundNumber,
+        bringIn,
+        this._makeTBD(match),
+        this._orderIncrement()
+      );
+      round.push(newMatch);
+    }
+    
+    this._losersBracket.push(round);
+  }
+  
+  private _generateLosersRound(roundNumber: number): void {
+    console.log('generating losers round', roundNumber);
+    const round: MatchType[] = [];
+    const prev = this._losersBracket[this._losersBracket.length - 1];
+    
+    if (prev.length < 2) return;
+    
+    for (let i = 0; i < prev.length; i += 2) {
+      const newMatch = this._makeMatch(
+        roundNumber,
+        this._makeTBD(prev[i]),
+        this._makeTBD(prev[i + 1]),
+        this._orderIncrement()
+      );
+      round.push(newMatch);
+    }
+    
+    this._losersBracket.push(round);
+  }
+  
+  private _generateSingleElim(): void {
+    this._generateStartingRounds();
+    let prev = this._bracket[this._bracket.length - 1];
+    
+    const add = (
+      round: MatchType[],
+      prevSlot: TBD | null,
+      match: MatchType
+    ): [MatchType[], TBD | null] => {
+      if (prevSlot === null) return [round, this._makeTBD(match)];
+      const newMatch = this._makeMatch(
+        this._bracket.length,
+        prevSlot,
+        this._makeTBD(match),
+        this._orderIncrement()
+      );
+      this._floatingLosers.push(this._makeTBD(newMatch, true));
+      return [[...round, newMatch], null];
+    };
+    
+    while (prev.length > 1) {
+      let round: MatchType[] = [];
+      let prevSlot: TBD | null = null;
+      for (const match of prev) {
+        [round, prevSlot] = add(round, prevSlot, match);
+      }
+      this._bracket.push(round);
+      prev = round;
+      
+      if (this.doubleElim) {
+        const r = this._losersBracket.length;
+        if (this._startsWithBringInRound()) {
+          this._generateBringInRound(r);
+          this._generateLosersRound(r + 1);
+        } else {
+          this._generateLosersRound(r);
+          this._generateBringInRound(r + 1);
+        }
+      }
+    }
+    
+    // Grand Finals and bracket reset
+    if (this.doubleElim) {
+      const winnersFinal = this._bracket[this._bracket.length - 1][this._bracket[this._bracket.length - 1].length - 1];
+      const losersFinal = this._losersBracket[this._losersBracket.length - 1][this._losersBracket[this._losersBracket.length - 1].length - 1];
+      
+      const grandFinal = this._makeMatch(
+        this._bracket.length,
+        this._makeTBD(winnersFinal),
+        this._makeTBD(losersFinal),
+        this._orderIncrement()
+      );
+      
+      const resetMatch = this._makeMatch(
+        this._bracket.length + 1,
+        this._makeTBD(grandFinal),
+        this._makeTBD(grandFinal, true),
+        this._orderIncrement()
+      );
+      resetMatch.reset = true;
+      
+      this._bracket.push([grandFinal], [resetMatch]);
+    }
+  }
+  
+  // Public getters for accessing the brackets
+  get bracket(): MatchType[][] {
+    return this._bracket;
+  }
+  
+  get losersBracket(): MatchType[][] {
+    return this._losersBracket;
+  }
+  
+  get matches(): Map<number, MatchType> {
+    return this._matches;
+  }
+}

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);
+    }
+}

src/features/bracket/queries.ts

@@ -0,0 +1,13 @@
+import { queryOptions } from "@tanstack/react-query";
+import { previewBracket } from "./server";
+
+const bracketKeys = {
+  preview: (teams: number) => ['bracket-preview', teams] as const,
+};
+
+export const bracketQueries = {
+  preview: (teams: number) => queryOptions({
+    queryKey: bracketKeys.preview(teams),
+    queryFn: () => previewBracket({ data: teams }),
+  }),
+};

src/features/bracket/server.ts

@@ -0,0 +1,30 @@
+import { superTokensFunctionMiddleware } from "@/utils/supertokens";
+import { createServerFn } from "@tanstack/react-start";
+import { z } from "zod";
+import { Logger } from "@/lib/logger";
+import brackets from './utils';
+
+const logger = new Logger("Bracket Generation")
+
+// Transform the imported JSON to match the expected format
+function transformBracketData(bracketData: any) {
+  return {
+    n: bracketData.config.teams,
+    doubleElim: bracketData.config.doubleElimination,
+    matches: bracketData.matches,
+    winnersBracket: bracketData.structure.winners,
+    losersBracket: bracketData.structure.losers
+  };
+}
+
+export const previewBracket = createServerFn()
+  .validator(z.number())
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async ({ data: teams }) => {
+    logger.info('Generating bracket', teams);
+    if (!Object.keys(brackets).includes(teams.toString()))
+      throw Error("Bracket not available")
+    
+    // Transform the imported data to match expected format
+    return transformBracketData(brackets[teams]);
+  });

src/features/bracket/utils/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Imports saved json dumps of bracket generation from a python script that I didn't prioritize converting to TS
+ */
+import b12 from '../../../../scripts/brackets/12.json';
+import b13 from '../../../../scripts/brackets/13.json';
+import b14 from '../../../../scripts/brackets/14.json';
+import b15 from '../../../../scripts/brackets/15.json';
+import b16 from '../../../../scripts/brackets/16.json';
+import b17 from '../../../../scripts/brackets/17.json';
+import b18 from '../../../../scripts/brackets/18.json';
+import b19 from '../../../../scripts/brackets/19.json';
+import b20 from '../../../../scripts/brackets/20.json';
+
+export default {
+    12: b12,
+    13: b13,
+    14: b14,
+    15: b15,
+    16: b16,
+    17: b17,
+    18: b18,
+    19: b19,
+    20: b20,
+}