From 0877fe926435c52cea44a0b3e4e25031adaf9d67 Mon Sep 17 00:00:00 2001 From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com> Date: Sun, 19 Dec 2021 14:29:03 +0200 Subject: [PATCH] Tournament nav new style --- app/root.tsx | 11 +-- app/routes/to/$organization.$tournament.tsx | 69 ++++++++----------- .../manage-roster.tsx | 1 + .../to/$organization.$tournament/register.tsx | 2 +- .../to/$organization.$tournament/start.tsx | 2 + app/styles/global.css | 1 + app/styles/tournament-register.css | 4 -- app/styles/tournament.css | 62 +++++++++-------- 8 files changed, 67 insertions(+), 85 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index 2fa348d53..94099d601 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,13 +1,5 @@ import * as React from "react"; -import { - Links, - LiveReload, - Meta, - Outlet, - Scripts, - ScrollRestoration, - useCatch, -} from "remix"; +import { Links, LiveReload, Meta, Outlet, Scripts, useCatch } from "remix"; import type { LinksFunction, LoaderFunction } from "remix"; import resetStyles from "~/styles/reset.css"; @@ -61,7 +53,6 @@ function Document({ {children} - {process.env.NODE_ENV === "development" && } diff --git a/app/routes/to/$organization.$tournament.tsx b/app/routes/to/$organization.$tournament.tsx index 0d0901dc9..6d80dd14d 100644 --- a/app/routes/to/$organization.$tournament.tsx +++ b/app/routes/to/$organization.$tournament.tsx @@ -1,6 +1,5 @@ // TODO: 404 page that shows other tournaments by the organization -import classNames from "classnames"; import { LinksFunction, LoaderFunction, @@ -8,7 +7,6 @@ import { NavLink, Outlet, useLoaderData, - useLocation, } from "remix"; import invariant from "tiny-invariant"; import { ActionSection } from "~/components/tournament/ActionSection"; @@ -53,15 +51,10 @@ export const meta: MetaFunction = (props) => { export default function TournamentPage() { const data = useLoaderData(); - const location = useLocation(); const user = useUser(); - const displayNavLinks = ["register", "manage-roster", "join-team"].every( - (urlPart) => !location.pathname.endsWith(urlPart) - ); - const navLinks = (() => { - const result: { adminOnly?: boolean; code: string; text: string }[] = [ + const result: { code: string; text: string }[] = [ { code: "", text: "Overview" }, { code: "map-pool", text: "Map Pool" }, { code: "teams", text: `Teams (${data.teams.length})` }, @@ -76,10 +69,11 @@ export default function TournamentPage() { } } + // TODO: maybe some visual effect for admin only tabs? if (isTournamentAdmin({ userId: user?.id, organization: data.organizer })) { - result.push({ code: "seeds", text: "Seeds", adminOnly: true }); - result.push({ code: "edit", text: "Edit", adminOnly: true }); - result.push({ code: "start", text: "Start", adminOnly: true }); + result.push({ code: "seeds", text: "Seeds" }); + result.push({ code: "edit", text: "Edit" }); + result.push({ code: "start", text: "Start" }); } return result; @@ -93,44 +87,37 @@ export default function TournamentPage() { "--tournaments-background": data.bannerBackground, "--tournaments-text": data.CSSProperties.text, "--tournaments-text-transparent": data.CSSProperties.textTransparent, + // todo: could make a TS helper type for this that checks for leading -- } as Record } > -
- {/* TODO: add scrolling icon */}
-
- {navLinks.map(({ code, text, adminOnly }) => ( - - {isTournamentAdmin({ - userId: user?.id, - organization: data.organizer, - }) && ( -
- ADMIN -
- )} - {text} - - ))} +
+
+ {navLinks.map(({ code, text }) => ( + // TODO: on mobile keep the active link in center + + {text} + + ))} +
+
+ +
); diff --git a/app/routes/to/$organization.$tournament/manage-roster.tsx b/app/routes/to/$organization.$tournament/manage-roster.tsx index 784441799..05f4eeb98 100644 --- a/app/routes/to/$organization.$tournament/manage-roster.tsx +++ b/app/routes/to/$organization.$tournament/manage-roster.tsx @@ -214,4 +214,5 @@ function CopyToClipboardButton({ ); } +// TODO: handle 404 (logged in but not registered) export const CatchBoundary = Catcher; diff --git a/app/routes/to/$organization.$tournament/register.tsx b/app/routes/to/$organization.$tournament/register.tsx index cc51272c1..7adb4d9bb 100644 --- a/app/routes/to/$organization.$tournament/register.tsx +++ b/app/routes/to/$organization.$tournament/register.tsx @@ -118,7 +118,7 @@ export default function RegisterPage() { if (isAlreadyInTeam) return null; return ( -
+

Register now

diff --git a/app/routes/to/$organization.$tournament/start.tsx b/app/routes/to/$organization.$tournament/start.tsx index 42e76cd5e..ff30224ce 100644 --- a/app/routes/to/$organization.$tournament/start.tsx +++ b/app/routes/to/$organization.$tournament/start.tsx @@ -59,6 +59,7 @@ export const loader: LoaderFunction = async ({ params }) => { return typedJson({ initialState, mapPool: tournament.mapPool }); }; +// TODO: component that shows a table of map, counts in the map pool, which rounds // TODO: handle warning if check-in has not concluded export default function StartBracketTab() { const args = useLoaderData(); @@ -268,6 +269,7 @@ function RoundsCollection({ ) : ( + // TODO: should be at the bottom always