ASM2024 LIVE

ausspeedruns · Jul 12, 2024 · 925dc71 · 925dc71
1 parent f265bd8
commit 925dc71
Show file tree

Hide file tree

Showing 14 changed files with 331 additions and 61 deletions.
diff --git 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,15 +334,16 @@
 				max-width: 600px;
 				text-align: center;
 				margin: auto;
+				font-style: italic;
 			}
 		}
 
 		.divider {
 			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
@@ -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<EventProps> = (props: EventProps) => {
 
 	return (
 		<div className={styles.eventLive}>
-			<div className={styles.logo}>
+			<div className={styles.logo3D}>
 				<Link href="/ASM2023" passHref legacyBehavior>
-					<Image
-						src={EventLogo}
-						width={600}
-						height={aspectRatio * 600}
-						alt="ASM2023 Logo"
-						style={{
-							maxWidth: "100%",
-							height: "auto",
-						}}
-					/>
+					<div style={{ width: "100%", padding: "0", maxWidth: 2000 }}>
+						<Canvas flat style={{ imageRendering: "pixelated" }} camera={{ fov: 30 }}>
+							<Suspense fallback={null}>
+								<ASM2024Logo />
+							</Suspense>
+						</Canvas>
+					</div>
 				</Link>
 			</div>
 			<div className={styles.eventInfo}>
-				<h2>April 26 – 28 | Melbourne</h2>
+				<h2>July 16 – 21 | Adelaide</h2>
 				<div className={styles.link}>
 					<Button actionText="Donate!" link="/donate" colorScheme="primary" />
 				</div>
@@ -156,6 +158,13 @@ export const EventLive: React.FC<EventProps> = (props: EventProps) => {
 				<Button actionText="Schedule" link="/schedule" colorScheme="secondary lightHover" />
 			</div>
 
+			<div className={styles.sponsors}>
+				<h2>Sponsor</h2>
+				<div className={styles.images}>
+					<Image src={msiLogo} width={300} height={msiAspectRatio * 300} alt="MSI Logo" />
+				</div>
+			</div>
+
 			<div className={styles.onDeck}>
 				<div className={styles.columnLeft}>
 					<h4>{currentRunIndex == 0 ? "First Game" : "Game"}</h4>

diff --git 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<THREE.Mesh>(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
@@ -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
@@ -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,
 			},
 		];