Add database and Prisma configurations, enhance event and leaderboard components with API integration, and update navigation for session management

components/PlayerStats.tsx

@@ -1,31 +1,68 @@
 "use client";
 
 import { useEffect, useState } from "react";
-
-interface PlayerStatsProps {
-  username?: string;
-  avatar?: string;
-  hp?: number;
-  maxHp?: number;
-  xp?: number;
-  maxXp?: number;
-  level?: number;
-}
+import { useSession } from "next-auth/react";
 
 // Format number with consistent locale to avoid hydration mismatch
 const formatNumber = (num: number): string => {
   return num.toLocaleString("en-US");
 };
 
-export default function PlayerStats({
-  username = "DragonSlayer99",
-  avatar = "/got-2.jpg",
-  hp = 750,
-  maxHp = 1000,
-  xp = 3250,
-  maxXp = 5000,
-  level = 42,
-}: PlayerStatsProps) {
+export default function PlayerStats() {
+  const { data: session } = useSession();
+  const [userData, setUserData] = useState({
+    username: "Guest",
+    avatar: null as string | null,
+    hp: 1000,
+    maxHp: 1000,
+    xp: 0,
+    maxXp: 5000,
+    level: 1,
+  });
+
+  useEffect(() => {
+    if (session?.user?.id) {
+      fetch(`/api/users/${session.user.id}`)
+        .then((res) => res.json())
+        .then((data) => {
+          if (data) {
+            setUserData({
+              username: data.username || "Guest",
+              avatar: data.avatar,
+              hp: data.hp || 1000,
+              maxHp: data.maxHp || 1000,
+              xp: data.xp || 0,
+              maxXp: data.maxXp || 5000,
+              level: data.level || 1,
+            });
+          }
+        })
+        .catch(() => {
+          // Utiliser les données de session si l'API échoue
+          setUserData({
+            username: session.user.username || "Guest",
+            avatar: null,
+            hp: 1000,
+            maxHp: 1000,
+            xp: 0,
+            maxXp: 5000,
+            level: 1,
+          });
+        });
+    } else {
+      setUserData({
+        username: "Guest",
+        avatar: null,
+        hp: 1000,
+        maxHp: 1000,
+        xp: 0,
+        maxXp: 5000,
+        level: 1,
+      });
+    }
+  }, [session]);
+
+  const { username, avatar, hp, maxHp, xp, maxXp, level } = userData;
   const [hpPercentage, setHpPercentage] = useState(0);
   const [xpPercentage, setXpPercentage] = useState(0);
 
@@ -56,12 +93,18 @@ export default function PlayerStats({
   return (
     <div className="flex items-center gap-3">
       {/* Avatar */}
-      <div className="w-10 h-10 rounded-full border border-pixel-gold/20 overflow-hidden bg-gray-900">
-        <img
-          src={avatar}
-          alt={username}
-          className="w-full h-full object-cover"
-        />
+      <div className="w-10 h-10 rounded-full border border-pixel-gold/20 overflow-hidden bg-gray-900 flex items-center justify-center">
+        {avatar ? (
+          <img
+            src={avatar}
+            alt={username}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <span className="text-pixel-gold text-xs font-bold">
+            {username.charAt(0).toUpperCase()}
+          </span>
+        )}
       </div>
 
       {/* Stats */}