diff --git a/app/hooks/useTournamentRounds/index.ts b/app/hooks/useTournamentRounds/index.ts index 230f20b1e..c617aec54 100644 --- a/app/hooks/useTournamentRounds/index.ts +++ b/app/hooks/useTournamentRounds/index.ts @@ -10,6 +10,8 @@ export function useTournamentRounds(args: UseTournamentRoundsArgs) { return React.useReducer( (oldState: UseTournamentRoundsState, action: UseTournamentRoundsAction) => { switch (action.type) { + case "REGENERATE_MAP_LIST": + return regenMapList(oldState); case "SET_ROUND_BEST_OF": const newState = { ...oldState }; newState[action.data.side][action.data.index].bestOf = diff --git a/app/hooks/useTournamentRounds/types.ts b/app/hooks/useTournamentRounds/types.ts index 6122a3571..eaf1920de 100644 --- a/app/hooks/useTournamentRounds/types.ts +++ b/app/hooks/useTournamentRounds/types.ts @@ -19,10 +19,12 @@ export interface UseTournamentRoundsArgs { mapPool: Stage[]; } -export type UseTournamentRoundsAction = MyReducerAction< - "SET_ROUND_BEST_OF", - { newBestOf: BestOf; side: EliminationBracketSide; index: number } ->; +export type UseTournamentRoundsAction = + | MyReducerAction<"REGENERATE_MAP_LIST"> + | MyReducerAction< + "SET_ROUND_BEST_OF", + { newBestOf: BestOf; side: EliminationBracketSide; index: number } + >; // export type Action = // | { diff --git a/app/routes/to/$organization.$tournament/start.tsx b/app/routes/to/$organization.$tournament/start.tsx index ab71d82c5..dfed948ac 100644 --- a/app/routes/to/$organization.$tournament/start.tsx +++ b/app/routes/to/$organization.$tournament/start.tsx @@ -2,6 +2,7 @@ import classNames from "classnames"; import type { LinksFunction, LoaderFunction } from "remix"; import { json, useLoaderData } from "remix"; import invariant from "tiny-invariant"; +import { Button } from "~/components/Button"; import { eliminationBracket } from "~/core/tournament/algorithms"; import { EliminationBracketSide, @@ -16,9 +17,7 @@ import type { import { findTournamentByNameForUrl } from "~/services/tournament"; import startBracketTabStylesUrl from "~/styles/tournament-start.css"; -// 3) can regen maps via button // 4) can change any invidual map via dropdown (no regen) -// 5) Blackbelly TC repeats Losers Round 3 and 4 -> add test & fix? (use real maps as test data) export const links: LinksFunction = () => { return [{ rel: "stylesheet", href: startBracketTabStylesUrl }]; @@ -46,8 +45,8 @@ export const loader: LoaderFunction = async ({ params }) => { 0 ); - // TODO: and also below don't show losers if SE - const bracket = eliminationBracket(teamCount, "DE"); + // TODO: handle many brackets + const bracket = eliminationBracket(teamCount, tournament.brackets[0].type); const initialState = participantCountToRoundsInfo({ bracket, mapPool: tournament.mapPool, @@ -63,16 +62,40 @@ export default function StartBracketTab() { return (
- - + +
+ + {args.initialState.losers.length > 0 && ( + + )} +
+ +
+ ); +} + +function ActionButtons({ + dispatch, +}: { + dispatch: React.Dispatch; +}) { + return ( +
+ +
); } @@ -87,7 +110,7 @@ function RoundsCollection({ dispatch: React.Dispatch; }) { return ( - <> +

{side}

{rounds.map((round, roundIndex) => { @@ -136,6 +159,6 @@ function RoundsCollection({ ); })}
- +
); } diff --git a/app/styles/tournament-start.css b/app/styles/tournament-start.css index b03b581b2..cd94f0bb3 100644 --- a/app/styles/tournament-start.css +++ b/app/styles/tournament-start.css @@ -1,9 +1,26 @@ .tournament__start__title { + padding-block-end: var(--s-2); + padding-inline-start: var(--s-1-5); text-transform: capitalize; } .tournament__start__container { + display: flex; width: 100%; + flex-direction: column; + gap: var(--s-6); +} + +.tournament__start__buttons-container { + display: flex; + justify-content: space-between; + gap: var(--s-1-5); +} + +.tournament__start__round-collections-container { + display: flex; + flex-direction: column; + gap: var(--s-4); } .tournament__start__rounds-container { diff --git a/app/utils/index.ts b/app/utils/index.ts index ff75bcbec..e11815466 100644 --- a/app/utils/index.ts +++ b/app/utils/index.ts @@ -66,10 +66,15 @@ export type Unpacked = T extends (infer U)[] ? U : T; -export type MyReducerAction = { - type: K; - data: T; -}; +export type MyReducerAction< + K extends string, + T extends {} | undefined = undefined +> = T extends {} + ? { + type: K; + data: T; + } + : { type: K }; // TODO: // export type InferredSerializedAPI = Serialized>;