diff --git a/frontend/src/components/Tournament.js b/frontend/src/components/Tournament.js index b2fa076f..8db334d7 100644 --- a/frontend/src/components/Tournament.js +++ b/frontend/src/components/Tournament.js @@ -2,7 +2,14 @@ import { A, useParams } from "@solidjs/router"; import { createQuery } from "@tanstack/solid-query"; import { initFlowbite } from "flowbite"; import { Icon } from "solid-heroicons"; -import { arrowSmallDown, arrowSmallUp, trophy } from "solid-heroicons/solid"; +import { + arrowSmallDown, + arrowSmallUp, + arrowUpRight, + calendar, + mapPin, + trophy +} from "solid-heroicons/solid"; import { createEffect, createSignal, @@ -23,6 +30,7 @@ import { SpiritStandings as SpiritStandingsSkeleton, Standings as StandingsSkeleton } from "../skeletons/Standings"; +import { TournamentPageSkeleton } from "../skeletons/TournamentPage"; import Breadcrumbs from "./Breadcrumbs"; /** @@ -34,46 +42,79 @@ const TeamSeedingChange = props => { return ( -
- -
+
+ + {props.initialSeed - props.currentSeed} -
+
props.initialSeed}> -
- -
+
+ + {props.currentSeed - props.initialSeed} -
+
); }; +const LocationAndDate = props => { + const startDate = () => + new Date(Date.parse(props.startDate)).toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + timeZone: "UTC" + }); + + const endDate = () => + new Date(Date.parse(props.endDate)).toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + timeZone: "UTC" + }); + + return ( +
+ + } + > +
+ + {props.location} +
+ + + + } + > +
+ + + {startDate()} + + {" "} + to {endDate()} + + +
+ +
+ ); +}; + const Tournament = () => { const params = useParams(); const [teamsMap, setTeamsMap] = createSignal({}); const [teamsInitialSeeding, setTeamsInitialSeeding] = createSignal(undefined); - const [playingTeam, setPlayingTeam] = createSignal(null); const tournamentQuery = createQuery( () => ["tournament", params.slug], @@ -104,14 +145,14 @@ const Tournament = () => { } }); - createEffect(() => { - if (userAccessQuery.status == "success") { - const playingTeamID = userAccessQuery.data?.playing_team_id; - if (playingTeamID !== 0) { - setPlayingTeam(teamsMap()[playingTeamID]); - } + // using a derived signal instead, so we can use Suspense + const derivedPlayingTeam = () => { + const playingTeamID = userAccessQuery.data?.playing_team_id; + if (playingTeamID !== 0) { + return teamsMap()[playingTeamID]; } - }); + return null; + }; createEffect(() => { if (tournamentQuery.status === "success" && !tournamentQuery.data.message) { @@ -144,147 +185,153 @@ const Tournament = () => { icon={trophy} pageList={[{ url: "/tournaments", name: "All Tournaments" }]} /> + }> + {/* Tournament title and status badge */} +
+
+
+ + + + Completed + + + + + Live + + + +
+

+ + {tournamentQuery.data?.event?.title} + +

+
-

- - {tournamentQuery.data?.event?.title} - -

+ {/* Tournament image or date+location */} + + } + > +
+ + Tournament logo +
+ +
- -

- {tournamentQuery.data?.event?.location} -

-

- {new Date( - Date.parse(tournamentQuery.data?.event.start_date) - ).toLocaleDateString("en-US", { - year: "numeric", - month: "short", - day: "numeric", - timeZone: "UTC" - })} - + +

+ - {" "} - to{" "} - {new Date( - Date.parse(tournamentQuery.data?.event.end_date) - ).toLocaleDateString("en-US", { - year: "numeric", - month: "short", - day: "numeric", - timeZone: "UTC" - })} - -

+
+
+ + {"Your team - "} + + {derivedPlayingTeam().name} + + + + + +
+
+ the matches and roster of your team +
+
+ +
+ +
+ +
+
+ + Schedule + + + + +
+
+ the detailed schedule of matches +
+
+
- } - > -
- - Tournament logo -
- - -
- - - - Completed - - - - - Live - - - -
- - -
-
- Your team - - - {playingTeam().name} - -
-

- View the matches and roster of your team -

+
+ +
+
+ + Standings + + + + +
+
+ the pools, brackets and the detailed standings +
+
+
- - - -
- Schedule -
-

- View the detailed schedule of matches -

- - -
- Standings -
-

- View the pools, brackets and the detailed standings -

- - - -
- Rules & Format -
-

- View the detailed rules and format of the tournament -

- - + +
+ +
+
+ + Rules + + + + +
+
+ the rules and format of the tournament +
+
+ +
+ +
-

Overall Standings

+

Overall Standings

+ -
+
-