diff --git a/apps/nextjs/components/EventLive/EventLive.module.scss b/apps/nextjs/components/EventLive/EventLive.module.scss index 1baa666..55e0157 100644 --- a/apps/nextjs/components/EventLive/EventLive.module.scss +++ b/apps/nextjs/components/EventLive/EventLive.module.scss @@ -4,11 +4,12 @@ .eventLive { color: $light-text; - background: $dh-main; - background-image: url("../../styles/img/events/asdh24/DreamHack24Background.png"); - background-size: 100% auto; + background: $asm24-main-bg; + background-image: url("../../styles/img/events/asm24/Bayer256Sky.png"); + background-size: auto 100%; + image-rendering: pixelated; background-position-x: center; - background-repeat: no-repeat; + background-repeat: repeat-x; padding: 2rem; @include breakpoint($sm-zero-only) { @@ -26,11 +27,34 @@ } } + .logo3D { + margin: auto; + width: 700px; + margin-bottom: 0.5rem; + @include breakpoint($sm-zero-only) { + padding: 1rem; + } + } + h2, h3 { text-align: center; } + .sponsors { + display: flex; + justify-content: center; + align-items: center; + h2 { + margin: 0; + } + .images { + justify-content: center; + display: flex; + // height: 400px; + } + } + .link { text-align: center; } @@ -165,12 +189,12 @@ .twitchVideo, .twitchChat { - border: 2px solid $dh-red; + border: 2px solid $primary; box-sizing: border-box; } .twitchChat { - border-color: $dh-red; + border-color: $primary; } .twitchVideo { @@ -191,11 +215,11 @@ } .dashboard { - display: flex; + display: grid; + grid-template-columns: 1fr 2fr; justify-content: center; gap: 16px; padding: 0 10%; - flex-wrap: wrap; margin-top: 32px; @include breakpoint($sm-zero-only) { @@ -207,6 +231,12 @@ a { margin: 0; } + + * { + text-wrap: balance; + text-align: center; + word-break: break-word; + } } .incentive, @@ -219,6 +249,9 @@ .liveContent { padding: 1rem; + border-radius: 5px; + backdrop-filter: blur(5px); + background-color: #030c38ae; } } @@ -231,8 +264,7 @@ display: flex; flex-direction: column; justify-content: space-around; - background-color: $dh-main; - border: 2px solid $dh-red; + border: 2px solid $primary; font-size: 1.2rem; width: fit-content; word-break: break-all; @@ -288,8 +320,7 @@ flex-direction: column; height: 100%; justify-content: space-around; - background-color: $dh-main; - border: 2px solid $dh-red; + border: 2px solid $primary; // width: 50%; @include breakpoint($sm-zero-only) { @@ -303,6 +334,7 @@ max-width: 600px; text-align: center; margin: auto; + font-style: italic; } } @@ -310,8 +342,8 @@ margin: auto; margin-top: 10px; width: 80%; - height: 10px; - background: $dh-orange-to-red; + height: 1px; + background: white; } } diff --git a/apps/nextjs/components/EventLive/EventLive.tsx b/apps/nextjs/components/EventLive/EventLive.tsx index 9f2f921..e1d48c0 100644 --- a/apps/nextjs/components/EventLive/EventLive.tsx +++ b/apps/nextjs/components/EventLive/EventLive.tsx @@ -8,16 +8,21 @@ import TwitchChatEmbed from "../TwitchChatEmbed/TwitchChatEmbed"; import TwitchVideoEmbed from "../TwitchVideoEmbed/TwitchVideoEmbed"; import EventLogo from "../../styles/img/events/asdh24/DreamHack24Logo.png"; -import { useState } from "react"; +import { Suspense, 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"; +import { Canvas } from "@react-three/fiber"; +import { ASM2024Logo } from "../Heroblock/ASM24Logo"; + +import msiLogo from "../../styles/img/sponsors/msi.png"; const aspectRatio = EventLogo.height / EventLogo.width; const gocAspectRatio = GameOnCancer.height / GameOnCancer.width; +const msiAspectRatio = msiLogo.height / msiLogo.width; const QUERY_EVENT = gql` query ($event: String!) { @@ -121,22 +126,19 @@ export const EventLive: React.FC = (props: EventProps) => { return (
-
+
- ASM2023 Logo +
+ + + + + +
-

April 26 – 28 | Melbourne

+

July 16 – 21 | Adelaide

@@ -156,6 +158,13 @@ export const EventLive: React.FC = (props: EventProps) => {
+
+

Sponsor

+
+ MSI Logo +
+
+

{currentRunIndex == 0 ? "First Game" : "Game"}

diff --git a/apps/nextjs/components/Heroblock/ASM24Logo.tsx b/apps/nextjs/components/Heroblock/ASM24Logo.tsx index 6f0c2d6..88e8214 100644 --- a/apps/nextjs/components/Heroblock/ASM24Logo.tsx +++ b/apps/nextjs/components/Heroblock/ASM24Logo.tsx @@ -7,9 +7,7 @@ import * as THREE from "three"; // import ASM2024Model from "./ASM2024Textured.glb"; const ASM2024Model = "/ASM2024Textured.glb"; -function addEulers(a: THREE.Euler, b: THREE.Euler) {} - -export function ASM2024Logo(props: { targetRotation: THREE.Euler } & ThreeElements["group"]) { +export function ASM2024Logo(props: { targetRotation?: THREE.Euler } & ThreeElements["group"]) { const meshRef = useRef(null); const { viewport } = useThree(); const { nodes, materials } = useGLTF(ASM2024Model); @@ -24,11 +22,13 @@ export function ASM2024Logo(props: { targetRotation: THREE.Euler } & ThreeElemen bobRotation.x = Math.sin(state.clock.elapsedTime * 0.5 + 2.5) * 0.1; - bobRotation.set( - bobRotation.x + props.targetRotation.x, - props.targetRotation.y, - bobRotation.z + props.targetRotation.z, - ); + if (props.targetRotation) { + bobRotation.set( + bobRotation.x + props.targetRotation.x, + props.targetRotation.y, + bobRotation.z + props.targetRotation.z, + ); + } rotation.premultiply((new THREE.Quaternion()).setFromEuler(bobRotation)) diff --git a/apps/nextjs/globals.ts b/apps/nextjs/globals.ts index eb0c3d2..1764d75 100644 --- a/apps/nextjs/globals.ts +++ b/apps/nextjs/globals.ts @@ -66,9 +66,8 @@ export const globals: Globals = { } } }, - donateLink: 'http://donate.ausspeedruns.com/', - scheduleLink: 'http://schedule.ausspeedruns.com/', - incentivesLink: 'http://incentives.ausspeedruns.com/', + donateLink: 'http://ausspeedruns.com/donate', + scheduleLink: 'http://ausspeedruns.com/schedule', socialLinks: { discord: 'http://discord.ausspeedruns.com/', twitter: '//twitter.com/ausspeedruns', diff --git a/apps/nextjs/next.config.js b/apps/nextjs/next.config.js index a452556..548a168 100644 --- a/apps/nextjs/next.config.js +++ b/apps/nextjs/next.config.js @@ -123,7 +123,7 @@ const nextConfig = { }, { source: "/donate", - destination: "https://donate.tiltify.com/c20c9685-cd1b-4d5f-8595-74378cb06859/details", + destination: "https://donate.tiltify.com/ae8a6495-1d37-4933-8031-2062b855dca4/details", permanent: false, }, ]; diff --git a/apps/nextjs/pages/ASM2024/incentives.tsx b/apps/nextjs/pages/ASM2024/incentives.tsx new file mode 100644 index 0000000..dbcac36 --- /dev/null +++ b/apps/nextjs/pages/ASM2024/incentives.tsx @@ -0,0 +1,137 @@ +import Head from "next/head"; +import { gql, useQuery } from "urql"; +import styles from "../../styles/Event.incentives.module.scss"; + +import DiscordEmbed from "../../components/DiscordEmbed"; +import { Goal } from "../../components/Incentives/IncentiveGoal"; +import { War } from "../../components/Incentives/IncentiveWar"; +import Button from 'apps/nextjs/components/Button/Button'; +import { faChevronRight } from '@fortawesome/free-solid-svg-icons'; + +const EVENT = "ASM2024"; + +const INCENTIVES_QUERY = gql` + query { + event(where: { shortname: "${EVENT}" }) { + donationIncentives { + id + title + notes + type + run { + id + game + category + scheduledTime + } + data + active + } + } + } +`; + +type QUERY_INCENTIVES_RESULTS = { + event: { + donationIncentives: { + id: string; + title: string; + notes: string; + type: string; + run: { + id: string; + game: string; + category: string; + scheduledTime: string; + }; + data: string; + active: string; + }[]; + }; +}; + +const Incentives = () => { + const [incentivesQuery] = useQuery({ + query: INCENTIVES_QUERY, + }); + + const sortedIncentives = incentivesQuery.data?.event.donationIncentives.map((a) => ({ ...a })) ?? []; + sortedIncentives.sort( + (a, b) => new Date(a.run?.scheduledTime ?? 0).getTime() - new Date(b.run?.scheduledTime ?? 0).getTime(), + ); + + let incentiveElements = { + active: [] as JSX.Element[], + inactive: [] as JSX.Element[], + }; + + sortedIncentives.forEach((incentive) => { + if (incentive.active) { + incentiveElements.active.push(getIncentiveElement(incentive)); + } else { + incentiveElements.inactive.push(getIncentiveElement(incentive)); + } + }); + + return ( +
+ + {`${EVENT} Donation Incentives - AusSpeedruns`} + + +
+

Donation Incentives

+
+ In your donation message, mention the challenge and how + much you want to put in for it! +
+
+
+ {incentiveElements.active.length > 0 && ( + <> +

Closing Soon!

+
+
{incentiveElements.active[0]}
+

All Incentives

+
+ {incentiveElements.active} + + )} + + {incentiveElements.inactive.length > 0 && ( + <> +

Closed Incentives

+
+ {/* All closed incentives */} + {incentiveElements.inactive} + + )} +
+
+ ); +}; + +function getIncentiveElement(incentive: any): JSX.Element { + const runMetadata = { + title: incentive.title, + run: incentive.run, + active: incentive.active, + notes: incentive.notes, + }; + switch (incentive.type) { + case "goal": + return <>
; + case "war": + return <>
; + default: + return <>; + } +} + +export default Incentives; diff --git a/apps/nextjs/pages/ASM2024/prizes.tsx b/apps/nextjs/pages/ASM2024/prizes.tsx new file mode 100644 index 0000000..4c9902b --- /dev/null +++ b/apps/nextjs/pages/ASM2024/prizes.tsx @@ -0,0 +1,75 @@ +import Head from "next/head"; +import styles from "../../styles/Event.incentives.module.scss"; + +import DiscordEmbed from "../../components/DiscordEmbed"; +import Button from "apps/nextjs/components/Button/Button"; +import { faChevronRight } from "@fortawesome/free-solid-svg-icons"; + +const Incentives = () => { + return ( +
+ + ASDH2024 Prizes - AusSpeedruns + + +
+

Prizes

+
+
+

+ Prizes are Australia Only +
+ + Prizes Terms and Conditions + +

+
+ + + + + +
+
+
+ ); +}; + +interface PrizeProps { + name: string; + requirement: string; + description?: string; +} + +const Prize = (props: PrizeProps) => { + return ( +
+

{props.name}

+

{props.requirement}

+

{props.description}

+
+ ); +}; + +export default Incentives; diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx index 93738c1..5c5517d 100644 --- a/apps/nextjs/pages/_app.tsx +++ b/apps/nextjs/pages/_app.tsx @@ -31,7 +31,7 @@ function AusSpeedrunsWebsite({ Component, pageProps }: AppProps) { return ( - +