Skip to content

Commit

Permalink
asap23
Browse files Browse the repository at this point in the history
  • Loading branch information
@EwanLyon
EwanLyon committed Oct 3, 2023
1 parent 7e25e05 commit 7d43ce1
Show file tree
Hide file tree
Showing 12 changed files with 335 additions and 142 deletions.
72 changes: 43 additions & 29 deletions apps/nextjs/components/EventLive/EventLive.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
@import "./responsive.scss";

.eventLive {
color: $light-text;
background: $asm23-main;
background-image: url("../../styles/img/events/asm23/asm23-background.png");
color: $pax23-sec;
background: $pax23-main;
background-image: url("../../styles/img/events/asap23/asap23-background.png");
background-size: cover;
background-position-x: center;
padding: 2rem;
Expand Down Expand Up @@ -34,6 +34,12 @@
text-align: center;
}

.schedule {
text-align: center;
margin: 16px 0;
font-size: 1.5rem;
}

.eventInfo {
display: flex;
align-items: center;
Expand Down Expand Up @@ -75,7 +81,6 @@
flex-direction: column;

h4 {
color: #ffffff;
font-weight: bold;
font-size: 1.5rem;
margin-bottom: -0.8rem;
Expand All @@ -88,6 +93,7 @@

h3 {
font-size: 2rem;
font-weight: bold;

@include breakpoint($sm-zero-only) {
font-size: 1.5rem;
Expand Down Expand Up @@ -158,12 +164,12 @@

.twitchVideo,
.twitchChat {
border: 8px solid $secondary;
border: 8px solid $pax23-red;
box-sizing: border-box;
}

.twitchChat {
border-color: $secondary;
border-color: $pax23-yellow;
}

.twitchVideo {
Expand All @@ -183,10 +189,17 @@
}
}

.dashboard {
display: flex;
justify-content: center;
gap: 16px;
padding: 0 10%;
flex-wrap: wrap;
}

.incentive,
.upcoming {
position: relative;
margin: auto;
margin-top: 1rem;
box-sizing: border-box;
display: flex;
Expand All @@ -197,34 +210,14 @@
}
}

.incentive {
.liveContent {
background-color: $primary;
border: 2px solid $secondary;
// width: 50%;

@include breakpoint($sm-zero-only) {
width: 100%;
}
}

.divider {
margin: auto;
margin-top: 10px;
width: 80%;
height: 10px;
background: $primary;
}
}

.upcoming {
@include breakpoint($sm-zero-only) {
margin-top: 0;
}

.liveContent {
background-color: $asm23-main;
border: 2px solid $secondary;
background-color: $pax23-main;
border: 2px solid $pax23-blue;
font-size: 1.2rem;
width: fit-content;
word-break: break-all;
Expand Down Expand Up @@ -263,6 +256,27 @@
}
}

.incentive {
.liveContent {
background-color: $pax23-main;
border: 2px solid $pax23-purple;
// width: 50%;

@include breakpoint($sm-zero-only) {
width: 100%;
}
}

.divider {
margin: auto;
margin-top: 10px;
width: 80%;
height: 10px;
background: $pax23-rainbow-bar;
}
}


.crowdcontrol {
display: flex;
justify-content: center;
Expand Down
154 changes: 81 additions & 73 deletions apps/nextjs/components/EventLive/EventLive.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import { format } from "date-fns";
import TwitchChatEmbed from "../TwitchChatEmbed/TwitchChatEmbed";
import TwitchVideoEmbed from "../TwitchVideoEmbed/TwitchVideoEmbed";

import EventLogo from "../../styles/img/ASM2023-Logo.png";
import EventLogo from "../../styles/img/asap2023-logo.svg";
import { useState } from "react";
import { Incentive } from "../Incentives/Incentive";
import Button from "../Button/Button";

import GameOnCancer from "../../styles/img/sponsors/GameOnCancer/GoCCCWhite.svg";
import GameOnCancer from "../../styles/img/sponsors/GameOnCancer/GoCCCPAX23.svg";
import Link from "next/link";

const aspectRatio = EventLogo.height / EventLogo.width;
Expand Down Expand Up @@ -74,7 +74,7 @@ interface EventProps {
event: string;
}

export const EventLive = (props: EventProps) => {
export const EventLive: React.FC<EventProps> = (props: EventProps) => {
const [currentTime, setCurrentTime] = useState(new Date());
const [eventQuery] = useQuery<QUERY_EVENT_RESULTS>({
query: QUERY_EVENT,
Expand All @@ -85,6 +85,8 @@ export const EventLive = (props: EventProps) => {
setCurrentTime(new Date());
}, 10 * 1000);

console.log(eventQuery);

const incentiveData = {
title: eventQuery.data?.event.donationIncentives?.[0]?.title ?? "",
run: eventQuery.data?.event.donationIncentives?.[0]?.run ?? "",
Expand All @@ -109,9 +111,8 @@ export const EventLive = (props: EventProps) => {
nextRunIndex = 1;
}


let currentRunIndex = nextRunIndex - 1;

return (
<div className={styles.eventLive}>
<div className={styles.logo}>
Expand All @@ -129,7 +130,7 @@ export const EventLive = (props: EventProps) => {
</Link>
</div>
<div className={styles.eventInfo}>
<h2>July 12 – 16 | Adelaide</h2>
<h2>October 6 – 8 | Melbourne</h2>
<div className={styles.link}>
<Button actionText="Donate!" link="/donate" colorScheme="primary" />
</div>
Expand All @@ -145,18 +146,18 @@ export const EventLive = (props: EventProps) => {
/>
</div>

<div className={styles.schedule}>
<Button actionText="Schedule" link="/schedule" colorScheme="secondary lightHover" />
</div>

<div className={styles.onDeck}>
<div className={styles.columnLeft}>
<h4>{currentRunIndex == 0 ? "First Game" : "Game"}</h4>
<h3>
{eventQuery.data?.event.runs?.[currentRunIndex]?.game ?? "Loading"}
</h3>
<h3>{eventQuery.data?.event.runs?.[currentRunIndex]?.game ?? "Loading"}</h3>
</div>
<div className={styles.columnMiddle}>
<h4>{currentRunIndex == 0 ? "First Category" : "Category"}</h4>
<h3>
{eventQuery.data?.event.runs?.[currentRunIndex]?.category ?? "Loading"}
</h3>
<h3>{eventQuery.data?.event.runs?.[currentRunIndex]?.category ?? "Loading"}</h3>
</div>
<div className={styles.columnRight}>
<h4>{currentRunIndex == 0 ? "First Runners" : "Runners"}</h4>
Expand All @@ -180,76 +181,83 @@ export const EventLive = (props: EventProps) => {
</div>
</div>

{(eventQuery.data?.event.runs?.length ?? 0) > nextRunIndex && (
<section className={styles.upcoming}>
<div className={styles.liveContent}>
<h2>Upcoming Run</h2>
<div className={styles.info}>
<span className={styles.subtitle}>Time</span>
<span>
{eventQuery.data?.event.runs?.[nextRunIndex]?.scheduledTime
? format(
new Date(eventQuery.data?.event.runs[nextRunIndex]?.scheduledTime),
"H:mm a",
)
: "Loading"}
</span>
<span className={styles.subtitle}>Game</span>
<span>{eventQuery.data?.event.runs?.[nextRunIndex]?.game ?? "Loading"}</span>
<span className={styles.subtitle}>Category</span>
<span>{eventQuery.data?.event.runs?.[nextRunIndex]?.category ?? "Loading"}</span>
<span className={styles.subtitle}>
{eventQuery.data?.event.runs?.[nextRunIndex]?.runners.length! > nextRunIndex
? "Runners"
: "Runner"}
</span>
<span>
{eventQuery.data?.event.runs?.[nextRunIndex]?.runners
.map((runner) => runner.username)
.join(", ") ?? "Loading"}
</span>
</div>
<div className={styles.link}>
<Button
actionText="Check out the schedule!"
link={`/${props.event}/schedule`}
colorScheme="secondary inverted"
openInNewTab
/>
<div className={styles.dashboard}>
{(eventQuery.data?.event.runs?.length ?? 0) > nextRunIndex && (
<section className={styles.upcoming}>
<div className={styles.liveContent}>
<h2>Upcoming Run</h2>
<div className={styles.info}>
<span className={styles.subtitle}>Time</span>
<span>
{eventQuery.data?.event.runs?.[nextRunIndex]?.scheduledTime
? format(
new Date(eventQuery.data?.event.runs[nextRunIndex]?.scheduledTime),
"H:mm a",
)
: "Loading"}
</span>
<span className={styles.subtitle}>Game</span>
<span>{eventQuery.data?.event.runs?.[nextRunIndex]?.game ?? "Loading"}</span>
<span className={styles.subtitle}>Category</span>
<span>{eventQuery.data?.event.runs?.[nextRunIndex]?.category ?? "Loading"}</span>
<span className={styles.subtitle}>
{eventQuery.data?.event.runs?.[nextRunIndex]?.runners.length! > nextRunIndex
? "Runners"
: "Runner"}
</span>
<span>
{eventQuery.data?.event.runs?.[nextRunIndex]?.runners
.map((runner) => runner.username)
.join(", ") ?? "Loading"}
</span>
</div>
<div className={styles.link}>
<Button
actionText="Check out the schedule!"
link={`/${props.event}/schedule`}
colorScheme="secondary inverted"
openInNewTab
/>
</div>
</div>
</div>
</section>
)}

{eventQuery.data?.event.donationIncentives.length! > 0 && (
<section className={styles.incentive}>
<div className={styles.liveContent}>
<h2>Donation Incentives</h2>
<h3>
Make a donation and write that you want to put the money towards this or another incentive
</h3>
<div className={styles.divider} />
{incentiveData.title !== "" ? <Incentive incentive={incentiveData as any} /> : <h4>Loading</h4>}
<div className={styles.link}>
<Button
actionText="Check out more incentives!"
link={`/${props.event}/incentives`}
colorScheme="secondary inverted"
openInNewTab
/>
</section>
)}

{eventQuery.data?.event.donationIncentives.length! > 0 && (
<section className={styles.incentive}>
<div className={styles.liveContent}>
<h2>Donation Incentives</h2>
<h3>
Make a donation and write that you want to put the money towards this or another
incentive
</h3>
<div className={styles.divider} />
{incentiveData.title !== "" ? (
<Incentive incentive={incentiveData as any} />
) : (
<h4>Loading</h4>
)}
<div className={styles.link}>
<Button
actionText="Check out more incentives!"
link={`/${props.event}/incentives`}
colorScheme="secondary inverted"
openInNewTab
/>
</div>
</div>
</div>
</section>
)}
</section>
)}
</div>

<div className={styles.crowdcontrol}>
{/* <div className={styles.crowdcontrol}>
<Button
actionText="Learn about our Crowd Control runs"
link={`/crowd-control`}
colorScheme="orange"
openInNewTab
/>
</div>
</div> */}
</div>
);
};
Loading

0 comments on commit 7d43ce1

Please sign in to comment.