add DIVA to seed scaffold, allow toggle for showing PB only on chart pages

4 files changed, 25 insertions, 2 deletions

diff --git a/frontend/src/assets/games/dancearound.webp b/frontend/src/assets/games/dancearound.webp
new file mode 100644
index 0000000..4a15d12
--- /dev/null
+++ b/frontend/src/assets/games/dancearound.webp
diff --git a/frontend/src/assets/games/diva.webp b/frontend/src/assets/games/diva.webp
new file mode 100644
index 0000000..7e8f669
--- /dev/null
+++ b/frontend/src/assets/games/diva.webp
diff --git a/frontend/src/pages/Chart.tsx b/frontend/src/pages/Chart.tsx
index 757cbbb..5e81044 100644
--- a/frontend/src/pages/Chart.tsx
+++ b/frontend/src/pages/Chart.tsx
@@ -15,6 +15,7 @@ import DancearoundScoreDisplay from "../components/displays/DancearoundScoreDisp
 const Chart = () => {
   const { user, isLoading, logout } = useAuth();
   const navigate = useNavigate();
+  const [pbOnly, setPbOnly] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [scores, setScores] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
@@ -82,7 +83,7 @@ const Chart = () => {
         url.searchParams.append("pageNum", pageNum.toString());
         url.searchParams.append("sortKey", requestOrder);
         url.searchParams.append("direction", "asc");
-        url.searchParams.append("pbOnly", "true");
+        url.searchParams.append("pbOnly", pbOnly.toString());
         url.searchParams.append("game", gameName);
 
         const response = await fetch(url.toString(), {credentials: 'include'});
@@ -99,7 +100,7 @@ const Chart = () => {
         setLoading(false);
       }
     },
-    [user, requestOrder, chartIdHash, gameName],
+    [user, requestOrder, chartIdHash, gameName, pbOnly],
   );
 
   useEffect(() => {
@@ -115,6 +116,10 @@ const Chart = () => {
     }
   };
 
+  const handleTogglePB = () => {
+    setPbOnly(!pbOnly);
+  };
+
   if (!user) {
     return <SessionExpiredPopup />;
   }
@@ -161,6 +166,16 @@ const Chart = () => {
               >
                 Table
               </button>
+              <button
+                onClick={() => handleTogglePB()}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                  pbOnly
+                    ? "bg-violet-600 text-white shadow-lg shadow-violet-500/25"
+                    : "text-slate-300 hover:text-white hover:bg-slate-800/50"
+                }`}
+              >
+                {pbOnly ? "Showing only PBs" : "Showing all scores"}
+              </button>
             </div>
           </div>
 
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 4eb1c59..389c0b6 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -6,6 +6,8 @@ import SessionExpiredPopup from "../components/SessionExpiredPopup";
 import { useState, useEffect } from "react";
 
 import dancerushImage from "../assets/games/dancerush.webp";
+import dancearoundImage from "../assets/games/dancearound.webp";
+import divaImage from "../assets/games/diva.webp";
 
 const Home = () => {
   const { user, isLoading, logout } = useAuth();
@@ -28,6 +30,12 @@ const Home = () => {
       case "dancerush": {
         return dancerushImage;
       }
+      case "dancearound": {
+        return dancearoundImage;
+      }
+      case "diva": {
+        return divaImage;
+      }
       default: {
         return null;
       }