some time fixes

HackAtUCI · Jan 22, 2025 · 043e563 · 043e563
1 parent cf8c8d7
commit 043e563
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 13 deletions.
diff --git a/apps/site/src/app/(main)/schedule/components/EventCard.tsx b/apps/site/src/app/(main)/schedule/components/EventCard.tsx
@@ -1,7 +1,14 @@
+import { SwordsIcon } from "lucide-react";
 import EventProps from "../EventProps";
 
+import { motion } from "framer-motion";
+
 import getTimeAndDates from "@/lib/utils/getTimeAndDates";
 
+interface EventCardProps extends EventProps {
+	isHappening: boolean;
+}
+
 export default function EventCard({
 	title,
 	location,
@@ -11,14 +18,38 @@ export default function EventCard({
 	organization,
 	hosts,
 	description,
-}: EventProps) {
+	isHappening,
+}: EventCardProps) {
 	return (
-		<div className="w-[90%] min-w-[200px] h-full bg-black border-4 border-white relative p-16 font-display max-lg:w-full">
+		<div
+			className={`w-[90%] min-w-[200px] h-full bg-black border-4 border-white relative p-16 font-display max-lg:w-full ${
+				isHappening
+					? "max-lg:bg-blue-100 max-lg:border-blue-900 max-lg:text-blue-950 max-lg:top-[-8px] max-lg:left-[-8px]"
+					: ""
+			}`}
+		>
 			{title ? (
 				<>
 					<div>
 						<div className="flex justify-between gap-5 max-lg:flex-col">
-							<h1 className="text-4xl max-w-[80%] max-sm:text-3xl">{title}</h1>
+							<div className="h-fit w-full flex justify-between items-center">
+								<h1 className="text-4xl max-w-[80%] max-sm:text-3xl">
+									{title}
+								</h1>
+								{isHappening && (
+									<motion.div
+										className="min-w-[50px] max-[400px]:hidden"
+										animate={{ y: ["0%", "-10%", "0%"] }}
+										transition={{
+											repeat: Infinity,
+											duration: 2,
+											ease: "easeInOut",
+										}}
+									>
+										<SwordsIcon width={50} height={50} color="rgb(23 37 84)" />
+									</motion.div>
+								)}
+							</div>
 							<p className="text-2xl">{getTimeAndDates(startTime).day}</p>
 						</div>
 						<div className="pt-5">
@@ -36,7 +67,11 @@ export default function EventCard({
 							}`}</p>
 						</div>
 					</div>
-					<div className="w-full h-[2px] bg-white mt-4 mb-4" />
+					<div
+						className={`w-full h-[2px] ${
+							isHappening ? "bg-blue-900" : "bg-white"
+						} mt-4 mb-4`}
+					/>
 					<div>
 						{hosts && (
 							<div className="text-2xl">{`Hosted By: ${hosts?.join(

diff --git a/apps/site/src/app/(main)/schedule/components/EventSidebar.tsx b/apps/site/src/app/(main)/schedule/components/EventSidebar.tsx
@@ -86,7 +86,10 @@ export default function EventSidebar({
 					<div className="h-[100px] w-full relative flex justify-center items-center" />
 					{events.map((event) => {
 						return (
-							<div key={event.title} className="max-lg:hidden">
+							<div
+								key={`${event.title}${event.startTime.toISOString()}`}
+								className="max-lg:hidden"
+							>
 								<EventPlaque
 									onClick={eventPlaqueClick}
 									ref={(node: HTMLDivElement) => {
@@ -98,16 +101,28 @@ export default function EventSidebar({
 									title={event.title}
 									startTime={event.startTime}
 									endTime={event.endTime}
-									isHappening={currentTitle === event.title}
+									isHappening={
+										currentTitle ===
+										`${event.title}${event.startTime.toISOString()}`
+									}
 								/>
 							</div>
 						);
 					})}
 
 					{events.map((event) => {
 						return (
-							<div key={event.title} className="lg:hidden">
-								<EventCard key={event.title} {...event} />
+							<div
+								key={`${event.title}${event.startTime.toISOString()}`}
+								className="lg:hidden"
+							>
+								<EventCard
+									{...event}
+									isHappening={
+										currentTitle ===
+										`${event.title}${event.startTime.toISOString()}`
+									}
+								/>
 							</div>
 						);
 					})}

diff --git a/apps/site/src/app/(main)/schedule/sections/SchedulePage.tsx b/apps/site/src/app/(main)/schedule/sections/SchedulePage.tsx
@@ -37,7 +37,7 @@ export default function SchedulePage({ schedule }: ScheduleProps) {
 	);
 
 	const [selectedEventDay, setSelectedEventDay] = useState<Date | undefined>(
-		getEventDate(new Date()),
+		getEventDate(new Date(Date.now())),
 	);
 
 	function getEventDate(date: Date) {
@@ -51,7 +51,7 @@ export default function SchedulePage({ schedule }: ScheduleProps) {
 	// 	);
 	// }
 
-	const firstDay = new Date(2025, 1, 24); // hackathon start day
+	const firstDay = new Date(2025, 0, 24); // hackathon start day
 
 	const allDays = schedule
 		.map((event) => (event ? event[0].startTime : new Date(0)))
@@ -101,14 +101,15 @@ export default function SchedulePage({ schedule }: ScheduleProps) {
 								? selectedScheduleEvents
 								: currentScheduleEvents
 						}
-						currentTitle={currentEvent?.title}
+						currentTitle={`${currentEvent?.title}${currentEvent?.startTime.toISOString()}`}
 						setSelectedEvent={setSelectedEvent}
 					/>
 					{selectedEvent ? (
 						<div className="w-[50%] relative flex max-lg:hidden lg:min-h-[700px]">
 							<EventCard
 								key={selectedEvent.title}
 								now={now}
+								isHappening={false}
 								{...selectedEvent}
 							/>
 						</div>

diff --git a/apps/site/src/app/(main)/schedule/sections/ScheduleScroll.tsx b/apps/site/src/app/(main)/schedule/sections/ScheduleScroll.tsx
@@ -2,7 +2,7 @@
 
 import clsx from "clsx";
 import styles from "./ScheduleScroll.module.scss";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import getTimeAndDates from "@/lib/utils/getTimeAndDates";
 
@@ -28,7 +28,7 @@ export default function ScheduleScroll({
 		});
 	}
 
-	function scrollDir(action: string) {
+	function getCurrentDateIndex() {
 		let ind = 0;
 		for (let i = 0; i < weekdays.length; i++) {
 			if (
@@ -38,6 +38,28 @@ export default function ScheduleScroll({
 				ind = i;
 		}
 
+		return ind;
+	}
+
+	useEffect(() => {
+		const date = new Date(Date.now());
+		const curDay = new Date(
+			date.getFullYear(),
+			date.getMonth(),
+			date.getDate(),
+		);
+		let ind = 0;
+		for (let i = 0; i < weekdays.length; i++) {
+			if (curDay && weekdays[i].getTime() === curDay.getTime()) ind = i;
+		}
+		if (ind > 0) {
+			scrollTo(ind);
+		}
+	}, [weekdays]);
+
+	function scrollDir(action: string) {
+		const ind = getCurrentDateIndex();
+
 		if (action === "left") {
 			const nextIndex = (ind + (weekdays.length - 1)) % weekdays.length;
 			scrollTo(nextIndex);