add score json upload functionality

1 files changed, 69 insertions, 24 deletions

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index e42a2b8..0ee6862 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,8 +1,14 @@
 import { Link, useNavigate } from 'react-router';
 import { useAuth } from '../contexts/AuthContext';
+import type { SupportedGame } from '../types/game';
+import { useState, useEffect } from 'react';
+
+import dancerushImage from '../assets/games/dancerush.webp';
 
 const Home = () => {
   const { user, isLoading, logout } = useAuth();
+  const [supportedGames, setSupportedGames] = useState<SupportedGame[]>([]);
+  const [gamesLoading, setGamesLoading] = useState(true);
   const navigate = useNavigate();
 
   const handleLogout = async () => {
@@ -15,7 +21,37 @@ const Home = () => {
     }
   };
 
-  if (isLoading) {
+  const getGameImage = (internalName: string) => {
+    switch(internalName){
+      case "dancerush": {
+        return dancerushImage;
+      }
+       default: {
+         return null
+      }
+    }
+  }
+
+  useEffect(() => {
+    const fetchSupportedGames = async () => {
+      try {
+        const response = await fetch(import.meta.env.VITE_API_URL+'/supportedGames');
+        if (!response.ok) {
+          throw new Error('Failed to fetch supported games');
+        }
+        const data = await response.json();
+        setSupportedGames(data);
+      } catch (error) {
+        console.error('Failed to fetch supported games:', error);
+        alert('Failed to load supported games. Please refresh the page.');
+      } finally {
+        setGamesLoading(false);
+      }
+    };
+    fetchSupportedGames();
+  }, []);
+
+  if (isLoading || gamesLoading) {
     return (
       <div className="min-h-screen bg-slate-950 flex items-center justify-center">
         <div className="text-center">
@@ -92,31 +128,40 @@ const Home = () => {
           <p className="text-slate-400">Track your rhythm game progress and performance</p>
         </div>
 
-        {/* Coming Soon Card */}
-        <div className="bg-slate-900 rounded-lg border border-slate-700 p-12 text-center">
-          <div className="w-16 h-16 bg-violet-600/20 rounded-full flex items-center justify-center mx-auto mb-6">
-            <svg className="w-8 h-8 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-          </div>
-          <h2 className="text-2xl font-bold text-white mb-4">Dashboard Coming Soon</h2>
-          <p className="text-slate-300 mb-8 max-w-2xl mx-auto">
-            We're working hard to bring you an amazing dashboard experience. Track your scores,
-            analyze your performance, and compete with friends - all coming soon!
-          </p>
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <div className="bg-slate-800 px-6 py-3 rounded-lg border border-slate-600">
-              <p className="text-sm text-slate-300">
-                <span className="font-semibold text-violet-300">User ID:</span> {user.id}
-              </p>
-            </div>
-            <div className="bg-slate-800 px-6 py-3 rounded-lg border border-slate-600">
-              <p className="text-sm text-slate-300">
-                <span className="font-semibold text-violet-300">Email:</span> {user.email}
-              </p>
-            </div>
+        {/* Supported Games */}
+        <div className="mb-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {supportedGames.map((game) => (
+              <div
+                key={game.internalName}
+                className="bg-slate-900 rounded-xl border border-slate-700 overflow-hidden hover:border-violet-500 hover:shadow-lg hover:shadow-violet-500/10 transition-all duration-300 group"
+              >
+                <div className="aspect-video bg-slate-800 relative overflow-hidden">
+                  {getGameImage(game.internalName) !== null ? (
+                    <img
+                    src={getGameImage(game.internalName) || undefined}
+                      alt={game.formattedName}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                    />
+                  ) : (
+                    <div className="w-full h-full flex items-center justify-center">
+                      <div className="text-slate-600">
+                        <svg className="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                      </div>
+                    </div>
+                  )}
+                </div>
+                <div className="p-6">
+                  <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-violet-400 transition-colors">{game.formattedName}</h3>
+                  <p className="text-slate-400 text-sm leading-relaxed">{game.description}</p>
+                </div>
+              </div>
+            ))}
           </div>
         </div>
+
       </div>
     </div>
   );