Merge pull request #51 from Eric-Zhang-Developer/feat/tree-quest-display

Feat/tree quest display

Author: Eric-Zhang-Developer

public/dashboard.jpg

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { createClient as createServerClient } from "../../lib/supabase/server";
 import { Cinzel } from "next/font/google";
 import checkUserCompletedQuizzes from "@/lib/checkUserCompletedQuizzes";
+import { ArrowBigLeft, ArrowBigDown, ArrowBigRight } from "lucide-react";
 
 const cinzel = Cinzel({
   subsets: ["latin"],
@@ -45,29 +46,27 @@ export default async function DashboardPage() {
     "btn border-2 border-cyan-400 text-cyan-400 bg-transparent hover:bg-cyan-900/50 hover:border-cyan-200 hover:text-cyan-200 shadow-lg shadow-cyan-500/50 transition duration-300 ease-in-out";
 
   const greyButtonClass =
-    "btn border-2 border-gray-400 text-gray-400 bg-transparent hover:bg-gray-900/50 hover:border-gray-200 hover:text-gray-200 shadow-lg shadow-gray-500/50 transition duration-300 ease-in-out";
+    "btn border-2 border-gray-400 text-gray-400 bg-black/50 backdrop-blur-sm hover:bg-gray-900/50 hover:border-gray-200 hover:text-gray-200 shadow-lg shadow-gray-500/50 transition duration-300 ease-in-out";
 
   const greenButtonClass =
-    "btn border-2 border-emerald-400 text-emerald-400 bg-transparent hover:bg-emerald-900/50 hover:border-emerald-200 hover:text-emerald-200 shadow-lg shadow-emerald-500/50 transition duration-300 ease-in-out";
+    "btn border-2 border-emerald-400 text-emerald-400 bg-emerald-900/60 backdrop-blur-sm hover:bg-emerald-900/50 hover:border-emerald-200 hover:text-emerald-200 shadow-lg shadow-emerald-400/70 transition duration-300 ease-in-out";
 
-  // helper
-  const getButtonClass = (complete: boolean) =>
-    complete ? greenButtonClass : greyButtonClass;
+  // helpers
+  const getButtonClass = (complete: boolean) => (complete ? greenButtonClass : greyButtonClass);
+  const getArrowColor = (complete: boolean) => (complete ? "text-emerald-400" : "text-gray-400");
 
   return (
     <main
       className={`relative min-h-dvh p-8 text-white ${cinzel.className}`}
       style={{
-        backgroundImage: "url('/dashboard.png')",
+        backgroundImage: "url('/dashboard.jpg')",
         backgroundSize: "cover",
         backgroundPosition: "center",
       }}
     >
       <div className="flex justify-between items-start w-full">
         <div className="flex flex-col gap-4 p-0 w-fit">
-          <h1 className="text-white text-5xl font-bold tracking-wider mb-4">
-            Dashboard
-          </h1>
+          <h1 className="text-white text-5xl font-bold tracking-wider mb-4">Dashboard</h1>
           <div className="flex flex-col gap-4 w-32">
             <Link href="/" className={celestialButtonClasses}>
               <span>Home</span>
@@ -88,44 +87,65 @@ export default async function DashboardPage() {
       </div>
 
       {/* Tutorials */}
-      <div className="absolute bottom-16 left-1/2 -translate-x-1/2">
-        <div className="flex flex-col gap-6 w-64 text-center">
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-black/70 backdrop-blur-md rounded-2xl p-8 border border-white/10">
+        <div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center w-[500px]">
+          {/* Row 1: Hello World → Variables */}
           <Link href="tutorial-hello-world" className={getButtonClass(isHelloWorldComplete)}>
             Hello World
           </Link>
-
+          <ArrowBigRight className={getArrowColor(isVariablesComplete)} size={28} />
           <Link href="tutorial-variables" className={getButtonClass(isVariablesComplete)}>
             Variables
           </Link>
 
-          <Link href="tutorial-user-input" className={getButtonClass(isUserInputComplete)}>
-            User Input
-          </Link>
+          <div className="col-span-3 flex justify-end pr-12">
+            <ArrowBigDown className={getArrowColor(isUserInputComplete)} size={28} />
+          </div>
 
+          {/* Row 2: Conditionals ← User Input */}
           <Link href="tutorial-conditionals" className={getButtonClass(isConditionalsComplete)}>
             Conditionals
           </Link>
+          <ArrowBigLeft className={getArrowColor(isConditionalsComplete)} size={28} />
+          <Link href="tutorial-user-input" className={getButtonClass(isUserInputComplete)}>
+            User Input
+          </Link>
 
+          <div className="col-span-3 flex justify-start pl-12">
+            <ArrowBigDown className={getArrowColor(isLoopsComplete)} size={28} />
+          </div>
+
+          {/* Row 3: Loops → Math */}
           <Link href="tutorial-loops" className={getButtonClass(isLoopsComplete)}>
             Loops
           </Link>
-
+          <ArrowBigRight className={getArrowColor(isMathComplete)} size={28} />
           <Link href="tutorial-math" className={getButtonClass(isMathComplete)}>
             Math
           </Link>
 
-          <Link href="tutorial-functions" className={getButtonClass(isFunctionsComplete)}>
-            Functions
-          </Link>
+          <div className="col-span-3 flex justify-end pr-12">
+            <ArrowBigDown className={getArrowColor(isFunctionsComplete)} size={28} />
+          </div>
 
+          {/* Row 4: Lists & Arrays ← Functions */}
           <Link href="tutorial-lists-arrays" className={getButtonClass(isListsArraysComplete)}>
             Lists & Arrays
           </Link>
+          <ArrowBigLeft className={getArrowColor(isListsArraysComplete)} size={28} />
+          <Link href="tutorial-functions" className={getButtonClass(isFunctionsComplete)}>
+            Functions
+          </Link>
 
+          <div className="col-span-3 flex justify-start pl-12">
+            <ArrowBigDown className={getArrowColor(isDictionaryComplete)} size={28} />
+          </div>
+
+          {/* Row 5: Dictionary → Recursion */}
           <Link href="tutorial-dictionary" className={getButtonClass(isDictionaryComplete)}>
             Dictionary
           </Link>
-
+          <ArrowBigRight className={getArrowColor(isRecursionComplete)} size={28} />
           <Link href="tutorial-recursion" className={getButtonClass(isRecursionComplete)}>
             Recursion
           </Link>

src/app/dashboard/page.tsx

@@ -1,9 +1,8 @@
 import { QuizData } from "@/lib/types/types";
 
-
 export const variablesQuiz: QuizData = {
   title: "The Artisan's Toolkit - Mastering Variable Vaults",
-  id: "variables-quest",
+  id: "variables",
   questions: [
     {
       questionText: "What is the main purpose of a variable in programming?",