asdh2024 live

ausspeedruns · Apr 23, 2024 · 8a92140 · 8a92140
1 parent 07fb805
commit 8a92140
Show file tree

Hide file tree

Showing 15 changed files with 366 additions and 152 deletions.
diff --git a/apps/keystone/admin/pages/incentives-dashboard.tsx b/apps/keystone/admin/pages/incentives-dashboard.tsx
@@ -1,7 +1,14 @@
 import { Heading } from "@keystone-ui/core";
 import { useEffect, useState } from "react";
 import { Link } from "@keystone-6/core/admin-ui/router";
-import { useMutation, useQuery, gql, MutationTuple, OperationVariables } from "@keystone-6/core/admin-ui/apollo";
+import {
+	useMutation,
+	useQuery,
+	gql,
+	MutationTuple,
+	OperationVariables,
+	useLazyQuery,
+} from "@keystone-6/core/admin-ui/apollo";
 import { Button } from "@keystone-ui/button";
 import { Select, FieldContainer, FieldLabel } from "@keystone-ui/fields";
 import {
@@ -96,10 +103,7 @@ interface QUERY_INCENTIVES_RESULTS {
 
 const MUTATION_UPDATE_INCENTIVE = gql`
 	mutation ($incentive: ID, $active: Boolean, $data: JSON) {
-		updateIncentive(
-			where: { id: $incentive }
-			data: { data: $data, active: $active }
-		) {
+		updateIncentive(where: { id: $incentive }, data: { data: $data, active: $active }) {
 			id
 			title
 		}
@@ -121,11 +125,8 @@ const incentiveTypes = [
 function renderIncentive(
 	// @ts-ignore
 	incentive: QUERY_INCENTIVES_RESULTS["event"]["donationIncentives"][0],
-	updateIncentiveMutation: MutationTuple<
-		MUTATION_UPDATE_INCENTIVE_RESULTS,
-		OperationVariables
-	>[0],
-	refetchData: () => void
+	updateIncentiveMutation: MutationTuple<MUTATION_UPDATE_INCENTIVE_RESULTS, OperationVariables>[0],
+	refetchData: () => void,
 ) {
 	switch (incentive?.type) {
 		case "war":
@@ -154,39 +155,70 @@ function renderIncentive(
 	}
 }
 
+type SelectOption = {
+	label: string;
+	value: string;
+} | null;
+
 export default function RunsManager() {
-	const [selectedEvent, setSelectedEvent] = useState({
-		label: "ASM2023",
-		value: "ASM2023",
-	});
+	const [selectedEvent, setSelectedEvent] = useState<SelectOption>(getEventInURLQuery());
 	const [selectedIncentiveIndex, setSelectedIncentiveIndex] = useState(0);
 
 	const { addToast } = useToasts();
 
 	const eventsList = useQuery<QUERY_EVENTS_RESULTS>(QUERY_EVENTS);
-	const eventData = useQuery<QUERY_INCENTIVES_RESULTS>(QUERY_INCENTIVES, {
-		variables: { event: selectedEvent.value },
-	});
+	const [refetchEventData, { data: eventData }] = useLazyQuery<QUERY_INCENTIVES_RESULTS>(QUERY_INCENTIVES);
 
 	const [updateIncentiveMutation, updateIncentiveMutationData] =
-		useMutation<MUTATION_UPDATE_INCENTIVE_RESULTS>(
-			MUTATION_UPDATE_INCENTIVE,
-		);
+		useMutation<MUTATION_UPDATE_INCENTIVE_RESULTS>(MUTATION_UPDATE_INCENTIVE);
 
 	const eventsOptions = eventsList.data?.events.map((event) => ({
 		value: event.shortname,
 		label: event.shortname,
 	}));
 
-	const sortedIncentives =
-		eventData.data?.event?.donationIncentives.map((a) => ({ ...a })) ?? [];
+	const sortedIncentives = eventData?.event?.donationIncentives.map((a) => ({ ...a })) ?? [];
 	sortedIncentives.sort(
-		(a, b) =>
-			new Date(a.run?.scheduledTime ?? 0).getTime() -
-			new Date(b.run?.scheduledTime ?? 0).getTime(),
+		(a, b) => new Date(a.run?.scheduledTime ?? 0).getTime() - new Date(b.run?.scheduledTime ?? 0).getTime(),
 	);
 	const incentiveData = sortedIncentives[selectedIncentiveIndex];
 
+	function handleEventSelection(option: { label: string; value: string } | null) {
+		const urlParams = new URLSearchParams(window.location.search);
+
+		if (option) {
+			urlParams.set("event", option.value);
+		} else {
+			urlParams.delete("event");
+		}
+
+		if (urlParams.size > 0) {
+			const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+			window.history.pushState({ path: newUrl }, "", newUrl);
+		} else {
+			window.history.pushState({}, "", window.location.pathname);
+		}
+
+		setSelectedEvent(option);
+	}
+
+	function getEventInURLQuery(): SelectOption {
+		const eventName = new URLSearchParams(window.location.search).get("event");
+
+		if (!eventName) {
+			return null;
+		}
+
+		return {
+			label: eventName,
+			value: eventName,
+		};
+	}
+
+	useEffect(() => {
+		if (selectedEvent?.value) refetchEventData({ variables: { event: selectedEvent.value } });
+	}, [selectedEvent]);
+
 	// Update Incentive Feedback
 	useEffect(() => {
 		// console.log(updateRunMutationData);
@@ -221,30 +253,18 @@ export default function RunsManager() {
 			<div style={{ marginTop: 24 }} />
 			<FieldContainer>
 				<FieldLabel>Event</FieldLabel>
-				<Select
-					onChange={(e) => {
-						if (e) setSelectedEvent(e);
-					}}
-					value={selectedEvent}
-					options={eventsOptions}
-				/>
+				<Select onChange={(e) => handleEventSelection(e)} value={selectedEvent} options={eventsOptions} />
 			</FieldContainer>
 			<Accordion>
-				<AccordionSummary
-					expandIcon={<ExpandMoreIcon />}
-					aria-controls="panel1a-content"
-					id="panel1a-header">
+				<AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
 					<b>Add incentive</b>
 				</AccordionSummary>
 				<AccordionDetails>
-					<NewIncentiveInput
-						eventId={selectedEvent.value}
-						newSubmissionAdded={eventData.refetch}
-					/>
+					<NewIncentiveInput eventId={selectedEvent?.value} newSubmissionAdded={refetchEventData} />
 				</AccordionDetails>
 			</Accordion>
 
-			{eventData?.data?.event && (
+			{eventData?.event && (
 				<>
 					<div
 						style={{
@@ -271,19 +291,11 @@ export default function RunsManager() {
 											setSelectedIncentiveIndex(i);
 										}}>
 										<ListItemIcon>
-											{incentive.type === "goal" ? (
-												<Flag />
-											) : (
-												<PieChart />
-											)}
+											{incentive.type === "goal" ? <Flag /> : <PieChart />}
 										</ListItemIcon>
 										<ListItemText
 											primary={`${incentive.run.game} – ${incentive.title}`}
-											secondary={
-												incentive.active
-													? "Active"
-													: "Inactive"
-											}
+											secondary={incentive.active ? "Active" : "Inactive"}
 										/>
 									</ListItemButton>
 								</ListItem>
@@ -309,14 +321,11 @@ export default function RunsManager() {
 							<p>
 								Game <b>{incentiveData?.run.game}</b>
 								<br />
-								Type{" "}
-								<b style={{ textTransform: "capitalize" }}>
-									{incentiveData?.type}
-								</b>
+								Type <b style={{ textTransform: "capitalize" }}>{incentiveData?.type}</b>
 								<br />
 								Notes <b>{incentiveData?.notes}</b>
 							</p>
-							{renderIncentive(incentiveData, updateIncentiveMutation, eventData.refetch)}
+							{renderIncentive(incentiveData, updateIncentiveMutation, refetchEventData)}
 						</div>
 					</div>
 				</>

diff --git a/apps/nextjs/components/EventLive/EventLive.module.scss b/apps/nextjs/components/EventLive/EventLive.module.scss
@@ -4,10 +4,11 @@
 
 .eventLive {
 	color: $light-text;
-	background: $tgx-main;
-	background-image: url("../../styles/img/events/asgx24/asgx24-hero.png");
-	// background-size: cover;
+	background: $dh-main;
+	background-image: url("../../styles/img/events/asdh24/DreamHack24Background.png");
+	background-size: 100% auto;
 	background-position-x: center;
+	background-repeat: no-repeat;
 	padding: 2rem;
 
 	@include breakpoint($sm-zero-only) {
@@ -164,12 +165,12 @@
 
 		.twitchVideo,
 		.twitchChat {
-			border: 8px solid $tgx-yellow;
+			border: 2px solid $dh-red;
 			box-sizing: border-box;
 		}
 
 		.twitchChat {
-			border-color: $tgx-red;
+			border-color: $dh-red;
 		}
 
 		.twitchVideo {
@@ -230,8 +231,8 @@
 			display: flex;
 			flex-direction: column;
 			justify-content: space-around;
-			background-color: $tgx-main;
-			border: 2px solid $tgx-blue;
+			background-color: $dh-main;
+			border: 2px solid $dh-red;
 			font-size: 1.2rem;
 			width: fit-content;
 			word-break: break-all;
@@ -287,8 +288,8 @@
 			flex-direction: column;
 			height: 100%;
 			justify-content: space-around;
-			background-color: $tgx-main;
-			border: 2px solid $tgx-green;
+			background-color: $dh-main;
+			border: 2px solid $dh-red;
 			// width: 50%;
 
 			@include breakpoint($sm-zero-only) {
@@ -310,7 +311,7 @@
 			margin-top: 10px;
 			width: 80%;
 			height: 10px;
-			background: $tgx-rainbow-rotated;
+			background: $dh-orange-to-red;
 		}
 	}
 

diff --git a/apps/nextjs/components/EventLive/EventLive.tsx b/apps/nextjs/components/EventLive/EventLive.tsx
@@ -7,7 +7,7 @@ import { format } from "date-fns";
 import TwitchChatEmbed from "../TwitchChatEmbed/TwitchChatEmbed";
 import TwitchVideoEmbed from "../TwitchVideoEmbed/TwitchVideoEmbed";
 
-import EventLogo from "../../styles/img/ASGX2023 Logo.png";
+import EventLogo from "../../styles/img/events/asdh24/DreamHack24Logo.png";
 import { useState } from "react";
 import { Incentive } from "../Incentives/Incentive";
 import Button from "../Button/Button";
@@ -114,6 +114,11 @@ export const EventLive: React.FC<EventProps> = (props: EventProps) => {
 
 	let currentRunIndex = nextRunIndex - 1;
 
+	const numberOfRunners = eventQuery.data?.event.runs?.[currentRunIndex]?.runners.length ?? 1;
+	const runnersString =
+		eventQuery.data?.event.runs?.[currentRunIndex]?.runners.map((runner) => runner.username).join(", ") ??
+		"Loading";
+
 	return (
 		<div className={styles.eventLive}>
 			<div className={styles.logo}>
@@ -131,7 +136,7 @@ export const EventLive: React.FC<EventProps> = (props: EventProps) => {
 				</Link>
 			</div>
 			<div className={styles.eventInfo}>
-				<h2>March 23 – 24 | Melbourne</h2>
+				<h2>April 26 – 28 | Melbourne</h2>
 				<div className={styles.link}>
 					<Button actionText="Donate!" link="/donate" colorScheme="primary" />
 				</div>
@@ -161,12 +166,12 @@ export const EventLive: React.FC<EventProps> = (props: EventProps) => {
 					<h3>{eventQuery.data?.event.runs?.[currentRunIndex]?.category ?? "Loading"}</h3>
 				</div>
 				<div className={styles.columnRight}>
-					<h4>{currentRunIndex == 0 ? "First Runners" : "Runners"}</h4>
-					<h3>
-						{eventQuery.data?.event.runs?.[currentRunIndex]?.runners
-							.map((runner) => runner.username)
-							.join(", ") ?? "Loading"}
-					</h3>
+					<h4>
+						{currentRunIndex == 0
+							? `First Runner${numberOfRunners == 1 ? "" : "s"}`
+							: `Runner${numberOfRunners == 1 ? "" : "s"}`}
+					</h4>
+					<h3>{runnersString}</h3>
 				</div>
 			</div>
 			<div className={styles.twitch}>
@@ -188,8 +193,12 @@ export const EventLive: React.FC<EventProps> = (props: EventProps) => {
 						<div className={styles.liveContent}>
 							<h2>Upcoming Run</h2>
 							<div className={styles.info}>
-								<span className={styles.game}>{eventQuery.data?.event.runs?.[nextRunIndex]?.game ?? "Loading"}</span>
-								<span className={styles.category}>{eventQuery.data?.event.runs?.[nextRunIndex]?.category ?? "Loading"}</span>
+								<span className={styles.game}>
+									{eventQuery.data?.event.runs?.[nextRunIndex]?.game ?? "Loading"}
+								</span>
+								<span className={styles.category}>
+									{eventQuery.data?.event.runs?.[nextRunIndex]?.category ?? "Loading"}
+								</span>
 								<span className={styles.subtitle}>Time</span>
 								<span>
 									{eventQuery.data?.event.runs?.[nextRunIndex]?.scheduledTime

diff --git a/apps/nextjs/components/Navbar/Navbar.module.scss b/apps/nextjs/components/Navbar/Navbar.module.scss
@@ -96,6 +96,12 @@
 			font-size: 1rem;
 		}
 
+		@include breakpoint($sm-zero-only) {
+			ul {
+				align-items: flex-end;
+			}
+		}
+
 		.icon {
 			color: $light-text;
 		}
@@ -110,7 +116,7 @@
 
 	.join {
 		color: $light-text;
-    white-space: nowrap;
+		white-space: nowrap;
 
 		a {
 			font-weight: 500;

diff --git a/apps/nextjs/components/Navbar/Navbar.tsx b/apps/nextjs/components/Navbar/Navbar.tsx
@@ -17,7 +17,7 @@ type NavbarProps = {
 		published: boolean;
 		scheduleReleased: boolean;
 	}[];
-	live?: boolean;
+	live?: string;
 };
 
 // Define general type for useWindowSize hook, which includes width and height
@@ -26,7 +26,7 @@ interface Size {
 	height: number | undefined;
 }
 
-const Navbar = ({ events = [], live = false }: NavbarProps) => {
+const Navbar = ({ events = [], live }: NavbarProps) => {
 	const auth = useAuth();
 	const [isOpen, setIsOpen] = useState<Boolean>(false);
 	const mobileWidth = useMediaQuery("(max-width: 992px)");
@@ -82,14 +82,22 @@ const Navbar = ({ events = [], live = false }: NavbarProps) => {
 							<>
 								<li>
 									<Link
-										href={`/ASGX2024/incentives`}
+										href={`/${live}/incentives`}
 										passHref
 										className={styles.text}>
 										Incentives
 									</Link>
 								</li>
 								<li>
-									<Button actionText="Donate" link="/donate" colorScheme={"orange"} />
+									<Link
+										href={`/${live}/prizes`}
+										passHref
+										className={styles.text}>
+										Prizes
+									</Link>
+								</li>
+								<li>
+									<Button actionText="Donate" link="/donate" colorScheme="orange" />
 								</li>
 							</>
 						)}