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

5 files changed, 43 insertions, 3 deletions

diff --git a/backend/prisma/seed.ts b/backend/prisma/seed.ts
index 4222708..c2667d9 100644
--- a/backend/prisma/seed.ts
+++ b/backend/prisma/seed.ts
@@ -3,8 +3,25 @@ import { PrismaClient } from "@prisma/client";
 const prisma = new PrismaClient();
 
 async function main() {
+  // pnpm prisma db seed
   await prisma.game.createMany({
-    data: [{ internalName: "dancerush", formattedName: "DANCERUSH STARDOM", description: "A suffle dancing game from KONAMI"}],
+    data: [
+      {
+        internalName: "dancerush",
+        formattedName: "DANCERUSH STARDOM",
+        description: "A suffle dancing game from KONAMI",
+      },
+      {
+        internalName: "dancearound",
+        formattedName: "Dance aROUND",
+        description: "A dance simulation game from KONAMI",
+      },
+      {
+        internalName: "diva",
+        formattedName: "Hatsune Miku: Project DIVA Arcade Future Tone",
+        description: "A 4-button and touch slider game from SEGA",
+      },
+    ],
   });
   console.log("Initial seed data inserted");
 }
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;
       }