Quiz intro splash text animations now only play when following a shar…

…eable link
Nathan7934 · Mar 4, 2024 · 06babe5 · 06babe5
1 parent 1ca48f7
commit 06babe5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/frontend/app/(pages)/leaderboard/[...query]/page.tsx b/frontend/app/(pages)/leaderboard/[...query]/page.tsx
@@ -276,7 +276,7 @@ export default function Leaderboard({ params }: { params: { query: string[]}}) {
                 {renderLeaderboardEntries()}
                 {!loading && quiz &&
                 <div className="fixed bottom-0 sm:relative w-full flex bg-gradient-to-t from-black">
-                    <Link href={`/quiz/${quizId}${shareableToken ? `/${urlToken}` : ""}`} className="mx-auto mb-4">
+                    <Link href={`/quiz/${quizId}${shareableToken ? `/${urlToken}` : ""}/noa`} className="mx-auto mb-4">
                         <button className={`py-3 px-5 rounded-xl bg-black/90 border text-xl
                         text-blue-50 font-semibold backdrop-blur-sm ${isTimeAttackQuiz(quiz) ? " border-blue-400" : " border-purple-400"}`}>
                             Start New Attempt
@@ -285,7 +285,6 @@ export default function Leaderboard({ params }: { params: { query: string[]}}) {
                 </div>
             }
             </div>
-
         </main>
     </>);
 }
diff --git a/frontend/app/(pages)/quiz/[...query]/page.tsx b/frontend/app/(pages)/quiz/[...query]/page.tsx
@@ -49,9 +49,22 @@ const isTimeAttack = (quizInfo: TimeAttackQuizInfo | SurvivalQuizInfo): quizInfo
 
 export default function Quiz({ params }: { params: { query: string[] } }) {
 
-    // Extracting the NextJS route query parameters "/quiz/{quizId}/{?urlToken}"
+    // Extracting the NextJS route query parameters "/quiz/{quizId}/{?urlToken}/{?noa}"
     const quizId = Number(params.query[0]);
-    const urlToken: string | null = params.query.length > 1 ? params.query[1] : null;
+    let urlToken: string | null = null;
+    let doAnimateIntro: boolean = true;
+    if (params.query.length === 2) {
+        if (params.query[1] === "noa") {
+            doAnimateIntro = false;
+        } else {
+            urlToken = params.query[1];
+        }
+    } else if (params.query.length > 2) {
+        urlToken = params.query[1];
+        if (params.query[2] === "noa") {
+            doAnimateIntro = false;
+        }
+    }
 
     // ----------- Hooks ------------------
     const router = useRouter();
@@ -164,14 +177,22 @@ export default function Quiz({ params }: { params: { query: string[] } }) {
             setStaticDataLoading(false);
 
             // Begin the intro splash timing sequence
-            const introSplashSequence = [
-                { action: () => setIntroSplashTextEntering(["ENTERING", "WAITING"]), delay: 1800 },
-                { action: () => setIntroSplashTextEntering(["EXITING", "WAITING"]), delay: 2250 },
-                { action: () => setIntroSplashTextEntering(["WAITING", "ENTERING"]), delay: 500 },
-                { action: () => setIntroSplashTextEntering(["WAITING", "EXITING"]), delay: 2500},
-                { action: () => setLandingActionsHeight("auto"), delay: 500 },
-                { action: () => setLandingActionsVisible(true), delay: 500 }
-            ];
+            let introSplashSequence: Array<{ action: () => void, delay: number }>;
+            if (doAnimateIntro) {
+                introSplashSequence = [
+                    { action: () => setIntroSplashTextEntering(["ENTERING", "WAITING"]), delay: 1800 },
+                    { action: () => setIntroSplashTextEntering(["EXITING", "WAITING"]), delay: 2250 },
+                    { action: () => setIntroSplashTextEntering(["WAITING", "ENTERING"]), delay: 500 },
+                    { action: () => setIntroSplashTextEntering(["WAITING", "EXITING"]), delay: 2500},
+                    { action: () => setLandingActionsHeight("auto"), delay: 500 },
+                    { action: () => setLandingActionsVisible(true), delay: 500 }
+                ];
+            } else {
+                introSplashSequence = [
+                    { action: () => setLandingActionsHeight("auto"), delay: 1800 },
+                    { action: () => setLandingActionsVisible(true), delay: 500 }
+                ];
+            }
             executeEventSequence(introSplashSequence);
         }
         getPageData();

diff --git a/frontend/app/components/data-rows/QuizRow.tsx b/frontend/app/components/data-rows/QuizRow.tsx
@@ -232,7 +232,7 @@ export default function QuizRow({groupChatId, quiz, setReloadCounter, dropdownPo
                     }}>
                         Copy Shareable Link
                     </button>
-                    <Link href={`/quiz/${quiz.id}`}>
+                    <Link href={`/quiz/${quiz.id}/noa`}>
                         <div className={`flex w-full mt-2 rounded-xl bg-gradient-to-r
                         ${isTimeAttackQuiz(quiz) ? " from-blue-500 via-blue-400 to-blue-500 text-blue-50" : " from-purple-400/75 via-pink-300/75 to-purple-400/75 text-pink-50"}`}>
                             <button className="btn grow m-[1px] text-lg bg-black font-medium">Play Quiz</button>
@@ -273,7 +273,7 @@ export default function QuizRow({groupChatId, quiz, setReloadCounter, dropdownPo
                 {renderQuizTypeBadge(quiz.type)}
             </div>
             <div className="row-span-2 justify-self-end self-center flex items-center">
-                <Link href={`/quiz/${quiz.id}`}>
+                <Link href={`/quiz/${quiz.id}/noa`}>
                     <button className="btn btn-outline border-[1px] border-zinc-700 btn-sm mr-3 whitespace-nowrap hidden sm:block">
                         Play Quiz
                     </button>