95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
import { createFileRoute, redirect } from "@tanstack/react-router";
|
|
import {
|
|
tournamentQueries,
|
|
useTournament,
|
|
} from "@/features/tournaments/queries";
|
|
import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
|
|
import SeedTournament from "@/features/tournaments/components/seed-tournament";
|
|
import { Container } from "@mantine/core";
|
|
import { useMemo } from "react";
|
|
import { BracketData } from "@/features/bracket/types";
|
|
import { Match } from "@/features/matches/types";
|
|
import BracketView from "@/features/bracket/components/bracket-view";
|
|
import { SpotifyControlsBar } from "@/features/spotify/components";
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
|
|
export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
|
|
beforeLoad: async ({ context, params }) => {
|
|
const { queryClient } = context;
|
|
const tournament = await ensureServerQueryData(
|
|
queryClient,
|
|
tournamentQueries.details(params.id)
|
|
);
|
|
if (!tournament) throw redirect({ to: "/admin/tournaments" });
|
|
return {
|
|
tournament,
|
|
};
|
|
},
|
|
loader: ({ context }) => ({
|
|
fullWidth: true,
|
|
withPadding: false,
|
|
showSpotifyPanel: true,
|
|
header: {
|
|
withBackButton: true,
|
|
title: `Run ${context.tournament.name}`,
|
|
},
|
|
}),
|
|
component: RouteComponent,
|
|
});
|
|
|
|
function RouteComponent() {
|
|
const { id } = Route.useParams();
|
|
const { data: tournament } = useTournament(id);
|
|
const { roles } = useAuth();
|
|
const isAdmin = roles?.includes('Admin') || false;
|
|
|
|
const bracket: BracketData = useMemo(() => {
|
|
if (!tournament.matches || tournament.matches.length === 0) {
|
|
return { winners: [], losers: [] };
|
|
}
|
|
|
|
const winnersMap = new Map<number, Match[]>();
|
|
const losersMap = new Map<number, Match[]>();
|
|
|
|
tournament.matches
|
|
.sort((a, b) => a.lid - b.lid)
|
|
.forEach((match) => {
|
|
if (!match.is_losers_bracket) {
|
|
if (!winnersMap.has(match.round)) {
|
|
winnersMap.set(match.round, []);
|
|
}
|
|
winnersMap.get(match.round)!.push(match);
|
|
} else {
|
|
if (!losersMap.has(match.round)) {
|
|
losersMap.set(match.round, []);
|
|
}
|
|
losersMap.get(match.round)!.push(match);
|
|
}
|
|
});
|
|
|
|
const winners = Array.from(winnersMap.entries())
|
|
.sort(([a], [b]) => a - b)
|
|
.map(([, matches]) => matches);
|
|
|
|
const losers = Array.from(losersMap.entries())
|
|
.sort(([a], [b]) => a - b)
|
|
.map(([, matches]) => matches);
|
|
return { winners, losers };
|
|
}, [tournament.matches]);
|
|
|
|
return (
|
|
<Container size="md" px={0}>
|
|
{ isAdmin && <SpotifyControlsBar />}
|
|
{tournament.matches?.length ? (
|
|
<BracketView bracket={bracket} showControls />
|
|
) : (
|
|
<SeedTournament
|
|
tournamentId={tournament.id}
|
|
teams={tournament.teams || []}
|
|
isRegional={tournament.regional}
|
|
/>
|
|
)}
|
|
</Container>
|
|
);
|
|
}
|