Merge pull request #181 from UWB-ACM/pgobin/tracks-section

made mystery box animation play only once per session

Author: UWB-ACM-OFFICIAL

src/app/HomePage.tsx

@@ -21,9 +21,11 @@ import { LeaderboardRecord, Prize } from "@/src/util/dataTypes";
 export default function HomePage({
     hackeroonPrizes,
     leaderboardData,
+    noTrackAnimation,
 }: {
     hackeroonPrizes: Promise<Prize[]>;
     leaderboardData: Promise<LeaderboardRecord[]>;
+    noTrackAnimation: boolean;
 }) {
     const mainRef = useRef<HTMLDivElement>(null);
     const aboutRef = useRef<HTMLDivElement>(null);
@@ -181,7 +183,9 @@ export default function HomePage({
 
                         {/* TODO - release all of these the day of the event */}
                         <div id="tracks" ref={tracksRef} className="w-full">
-                            <TracksSection />
+                            <TracksSection
+                                noTrackAnimation={noTrackAnimation}
+                            />
                         </div>
 
                         <div

src/app/page.tsx

@@ -1,6 +1,7 @@
 import HomePage from "@/src/app/HomePage";
 import { getPrizes } from "@/src/util/db/prize";
 import { getLeaderboard } from "../util/db/leaderboard";
+import { cookies } from "next/headers";
 
 export default async function Page() {
     // The catch is to let this work in builds without databases.
@@ -14,10 +15,14 @@ export default async function Page() {
         return [];
     });
 
+    const reqCookies = await cookies();
+    const noTrackAnimation = reqCookies.has("hackathonTracksShown");
+
     return (
         <HomePage
             hackeroonPrizes={hackeroonPrizes}
             leaderboardData={leaderboardData}
+            noTrackAnimation={noTrackAnimation}
         />
     );
 }

src/components/landing-page/(TracksSectionComponents)/MysteryBox.tsx

@@ -75,13 +75,15 @@ export default function MysteryBox({
                         duration: 0.3,
                         ease: "power1.out",
                         scale: 1,
-                        onComplete: () => setShowTracks(true),
+                        onComplete: () => {
+                            setShowTracks(true);
+                        },
                     },
                     "<",
                 );
             });
         }
-    }, [startAnimation]);
+    }, [startAnimation, setShowTracks]);
 
     return (
         <div ref={mysteryBoxRef} className="relative">

src/components/landing-page/(TracksSectionComponents)/TracksTabNavigation/SelectedTrackInformation.tsx

@@ -11,7 +11,7 @@ export default function SelectedTrackInformation({
     selectedTrack,
 }: SelectedTrackInformationProps) {
     return (
-        <div ref={selectedTrackRef} className="space-y-4">
+        <div ref={selectedTrackRef} className="space-y-4 p-4 md:p-12">
             <div>
                 <p className="font-h2 font-bold tracking-wider text-center text-xl md:text-2xl">
                     {selectedTrack.question}
@@ -20,7 +20,7 @@ export default function SelectedTrackInformation({
                     {selectedTrack.description}
                 </p>
             </div>
-            <div className="flex flex-col md:flex-row justify-between gap-y-1 md:gap-x-6 lg:gap-x-4">
+            <div className="flex flex-col md:flex-row justify-between gap-y-1 md:gap-x-6 lg:gap-x-4 max-w-[800px] mx-auto">
                 <div className="md:w-1/2 text-center md:text-left">
                     <p className="font-bold font-h2 text-lg md:text-xl text-[#49B2F8]">
                         {selectedTrack.name + ": "} No Code Example

src/components/landing-page/(TracksSectionComponents)/TracksTabNavigation/TracksNav.tsx

@@ -17,7 +17,7 @@ export default function TracksNavHeader({
     return (
         <div
             ref={tracksNavRef}
-            className="w-full flex flex-wrap items-center bg-black px-1 gap-1 md:px-2 md:gap-2 border-black border-y-4 md:border-y-8"
+            className="z-[100] w-full flex flex-wrap items-center bg-black px-1 gap-1 md:px-2 md:gap-2 border-black border-y-4 md:border-y-8"
         >
             {tracks.map((track, idx) => (
                 <button

src/components/landing-page/TrackSection.tsx

@@ -22,8 +22,9 @@ import Tracks from "./(TracksSectionComponents)/TracksTabNavigation/Tracks";
 import { Track } from "@/src/util/dataTypes";
 
 import LivePoll from "./(AboutSectionComponents)/LivePoll";
+import { actionSetTracksAnimation } from "@/src/util/actions/animation";
 
-const TracksSection = () => {
+const TracksSection = ({ noTrackAnimation }: { noTrackAnimation: boolean }) => {
     const panelMargin = "mt-12 md:mt-16";
 
     // tracks contains all relevant information about each of the 6 tracks
@@ -37,6 +38,10 @@ const TracksSection = () => {
     const [startAnimation, setStartAnimation] = useState(false);
 
     useEffect(() => {
+        if (noTrackAnimation) {
+            return;
+        }
+
         // set initial animation state for tracks comp
         gsap.set(tracksNavRef.current, {
             height: 0,
@@ -121,9 +126,13 @@ const TracksSection = () => {
             }).to(livePollRef.current, {
                 duration: 0.3,
                 opacity: 1,
+                onComplete: () => {
+                    // set cookies storage to prevent animation from playing again
+                    actionSetTracksAnimation();
+                },
             });
         }
-    }, [showTracks]);
+    }, [showTracks, noTrackAnimation]);
 
     return (
         <Panel id="tracksPanel" className={panelMargin} panelColor="white">
@@ -137,22 +146,26 @@ const TracksSection = () => {
             </PanelHeader>
 
             <div ref={panelContentRef}>
-                <PanelContent
-                    parentPanelId="tracksPanel"
-                    className="relative flex flex-col items-center"
-                >
-                    <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] top-[10%] left-[8%] rotate-[19deg]" />
-                    <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] top-[20%] right-[14%] -rotate-[15deg]" />
-                    <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] bottom-[10%] left-[16%] rotate-[28deg]" />
-                    <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] bottom-[3%] right-[20%] -rotate-[40deg]" />
-
-                    {/* Pass name of each track as contents of mystery box */}
-                    <MysteryBox
-                        contents={tracks.map((track) => track["name"])}
-                        startAnimation={startAnimation}
-                        setShowTracks={setShowTracks}
-                    />
-                </PanelContent>
+                {!noTrackAnimation && (
+                    <PanelContent
+                        parentPanelId="tracksPanel"
+                        className="relative flex flex-col items-center"
+                    >
+                        <>
+                            <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] top-[10%] left-[8%] rotate-[19deg]" />
+                            <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] top-[20%] right-[14%] -rotate-[15deg]" />
+                            <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] bottom-[10%] left-[16%] rotate-[28deg]" />
+                            <QuestionMark className="w-[65px] md:w-[80px] lg:w-[100px] xl:w-[125px] bottom-[3%] right-[20%] -rotate-[40deg]" />
+                        </>
+
+                        {/* Pass name of each track as contents of mystery box */}
+                        <MysteryBox
+                            contents={tracks.map((track) => track["name"])}
+                            startAnimation={startAnimation}
+                            setShowTracks={setShowTracks}
+                        />
+                    </PanelContent>
+                )}
             </div>
 
             <Tracks

src/util/actions/animation.ts

@@ -0,0 +1,9 @@
+"use server";
+
+import { cookies } from "next/headers";
+
+export async function actionSetTracksAnimation() {
+    "use server";
+
+    (await cookies()).set("hackathonTracksShown", "true");
+}