Skip to content

Commit

Permalink
set asgx24 live
Browse files Browse the repository at this point in the history
  • Loading branch information
@EwanLyon
EwanLyon committed Mar 20, 2024
1 parent c3d113d commit cb1e0f5
Show file tree
Hide file tree
Showing 13 changed files with 347 additions and 161 deletions.
67 changes: 52 additions & 15 deletions apps/nextjs/components/EventLive/EventLive.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
@import "./responsive.scss";

.eventLive {
color: $pax23-sec;
background: $pax23-main;
background-image: url("../../styles/img/events/asap23/asap23-background.png");
background-size: cover;
color: $light-text;
background: $tgx-main;
background-image: url("../../styles/img/events/asgx24/asgx24-hero.png");
// background-size: cover;
background-position-x: center;
padding: 2rem;

Expand Down Expand Up @@ -65,10 +65,10 @@
}

.onDeck {
display: flex;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 80%;
margin: auto;
justify-content: space-between;

@include breakpoint($sm-zero-only) {
flex-direction: column;
Expand Down Expand Up @@ -164,12 +164,12 @@

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

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

.twitchVideo {
Expand All @@ -195,6 +195,17 @@
gap: 16px;
padding: 0 10%;
flex-wrap: wrap;
margin-top: 32px;

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

a {
margin: 0;
}
}

.incentive,
Expand All @@ -216,11 +227,15 @@
}

.liveContent {
background-color: $pax23-main;
border: 2px solid $pax23-blue;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: $tgx-main;
border: 2px solid $tgx-blue;
font-size: 1.2rem;
width: fit-content;
word-break: break-all;
min-width: 400px;

@include breakpoint($sm-zero-only) {
width: 100%;
Expand All @@ -230,14 +245,24 @@
display: flex;
flex-direction: column;
align-items: center;

.game {
font-size: 150%;
font-weight: bolder;
margin-bottom: 0;
}

.category {
font-size: 120%;
}
}

span {
margin-bottom: 0.5rem;
}

.subtitle {
color: $primary;
color: $light-text;
font-weight: bold;
margin-bottom: 0;
}
Expand All @@ -258,25 +283,37 @@

.incentive {
.liveContent {
background-color: $pax23-main;
border: 2px solid $pax23-purple;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-around;
background-color: $tgx-main;
border: 2px solid $tgx-green;
// width: 50%;

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

.instructions {
display: inline-block;
font-size: 120%;
text-wrap: balance;
max-width: 600px;
text-align: center;
margin: auto;
}
}

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


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

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

import GameOnCancer from "../../styles/img/sponsors/GameOnCancer/GoCCCPAX23.svg";
import Link from "next/link";
import { faCalendar } from "@fortawesome/free-solid-svg-icons";

const aspectRatio = EventLogo.height / EventLogo.width;
const gocAspectRatio = GameOnCancer.height / GameOnCancer.width;
Expand Down Expand Up @@ -85,7 +86,7 @@ export const EventLive: React.FC<EventProps> = (props: EventProps) => {
setCurrentTime(new Date());
}, 10 * 1000);

console.log(eventQuery);
// console.log(eventQuery);

const incentiveData = {
title: eventQuery.data?.event.donationIncentives?.[0]?.title ?? "",
Expand Down Expand Up @@ -187,19 +188,17 @@ 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.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"
Expand All @@ -213,10 +212,11 @@ export const EventLive: React.FC<EventProps> = (props: EventProps) => {
</div>
<div className={styles.link}>
<Button
actionText="Check out the schedule!"
actionText="Schedule"
link={`/${props.event}/schedule`}
colorScheme="secondary inverted"
openInNewTab
iconRight={faCalendar}
/>
</div>
</div>
Expand All @@ -227,10 +227,11 @@ export const EventLive: React.FC<EventProps> = (props: EventProps) => {
<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>
<span className={styles.instructions}>
Make a{" "}
<span style={{ textDecoration: "underline" }}>donation and write in the message</span>{" "}
that you want to put the money towards this or another incentive
</span>
<div className={styles.divider} />
{incentiveData.title !== "" ? (
<Incentive incentive={incentiveData as any} />
Expand All @@ -239,7 +240,7 @@ export const EventLive: React.FC<EventProps> = (props: EventProps) => {
)}
<div className={styles.link}>
<Button
actionText="Check out more incentives!"
actionText="Incentives"
link={`/${props.event}/incentives`}
colorScheme="secondary inverted"
openInNewTab
Expand Down
67 changes: 37 additions & 30 deletions apps/nextjs/components/Incentives/IncentiveWar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,53 @@
import { format } from 'date-fns';
import styles from '../../styles/Event.incentives.module.scss';
import { BaseIncentiveData } from './IncentiveType';
import { format } from "date-fns";
import styles from "../../styles/Event.incentives.module.scss";
import { BaseIncentiveData } from "./IncentiveType";

export interface WarProps extends BaseIncentiveData {
type: 'war';
type: "war";
options: {
name: string;
total: number;
}[];
}

// function tgxColour(index = -1, redStart = false) {
// let modulo = index % 4;
// if (!redStart) modulo++;
function tgxColour(index = -1, redStart = false) {
let modulo = index % 4;
if (!redStart) modulo++;

// switch (modulo) {
// case 0:
// return '#f80023';
// case 1:
// return '#ffc300';
// case 2:
// return '#007eff';
// case 3:
// return '#00c091';
// case 4:
// return '#f80023';
// default:
// return undefined;
// }
// }
switch (modulo) {
case 0:
return "#f80023";
case 1:
return "#ffc300";
case 2:
return "#007eff";
case 3:
return "#00c091";
case 4:
return "#f80023";
default:
return undefined;
}
}

function isColor(strColor: string) {
const s = new Option().style;
s.color = strColor;
return s.color !== '';
return s.color !== "";
}

export const War: React.FC<WarProps> = (props) => {
const time = new Date(props.run.scheduledTime);
const sortedOptions = props.options.sort((a, b) => b.total - a.total);

return (
<div className={styles.war} style={{ color: props.active ? undefined : '#b7b7b7' }}>
<div className={styles.war} style={{ color: props.active ? undefined : "#b7b7b7" }}>
<div className={styles.gameinfo}>
<span className={styles.game}>{props.run.game}</span>
{' - '}
{" - "}
<span className={styles.category}>{props.run.category}</span>
{' - '}
<span className={styles.category}>{format(time, 'E d h:mm a')}</span>
{" - "}
<span className={styles.category}>{format(time, "E d h:mm a")}</span>
</div>
<span className={styles.title}>{props.title}</span>
<span className={styles.category}>{props.notes}</span>
Expand All @@ -59,10 +59,17 @@ export const War: React.FC<WarProps> = (props) => {
<div key={option.name} className={styles.option}>
<div className={styles.vertical}>
<span className={styles.name}>{option.name}</span>
<span className={styles.total}>${option?.total?.toLocaleString() ?? 'Error'}</span>
<span className={styles.total}>${option?.total?.toLocaleString() ?? "Error"}</span>
</div>
<div className={styles.progress}>
<div className={styles.bar} style={{ height: `${progress}%`, width: `${progress}%`, backgroundColor: isColor(option.name) ? option.name : '#cc7722' }} />
<div
className={styles.bar}
style={{
height: `${progress}%`,
width: `${progress}%`,
backgroundColor: isColor(option.name) ? option.name : tgxColour(i),
}}
/>
</div>
</div>
);
Expand All @@ -71,7 +78,7 @@ export const War: React.FC<WarProps> = (props) => {
) : (
<span className={styles.noOptions}>
{props.active
? 'None submitted. Donate and include one in your donation message!'
? "None submitted. Donate and include one in your donation message!"
: "None submitted. Runner's choice."}
</span>
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/nextjs/components/Navbar/Navbar.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

@include breakpoint($md) {
display: grid;
grid-template-columns: 1.5fr 1.5fr 1fr min-content;
grid-template-columns: 1fr 1fr 1fr;
}

@include breakpoint($lg) {
Expand Down
Loading

0 comments on commit cb1e0f5

Please sign in to comment.