Refactor page components to use NavigationWrapper and integrate Prisma for data fetching. Update EventsSection and LeaderboardSection to accept props for events and leaderboard data, enhancing performance and user experience. Implement user authentication in ProfilePage and AdminPage, ensuring secure access to user data.

components/PlayerStats.tsx

@@ -3,24 +3,48 @@
 import { useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
 
+interface UserData {
+  username: string;
+  avatar: string | null;
+  hp: number;
+  maxHp: number;
+  xp: number;
+  maxXp: number;
+  level: number;
+}
+
+interface PlayerStatsProps {
+  initialUserData?: UserData | null;
+}
+
 // Format number with consistent locale to avoid hydration mismatch
 const formatNumber = (num: number): string => {
   return num.toLocaleString("en-US");
 };
 
-export default function PlayerStats() {
+const defaultUserData: UserData = {
+  username: "Guest",
+  avatar: null,
+  hp: 1000,
+  maxHp: 1000,
+  xp: 0,
+  maxXp: 5000,
+  level: 1,
+};
+
+export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
   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,
-  });
+  const [userData, setUserData] = useState<UserData>(
+    initialUserData || defaultUserData
+  );
 
   useEffect(() => {
+    // Si on a déjà des données initiales, ne rien faire (déjà initialisé dans useState)
+    if (initialUserData) {
+      return;
+    }
+
+    // Sinon, fallback sur le fetch côté client (pour les pages Client Components)
     if (session?.user?.id) {
       fetch(`/api/users/${session.user.id}`)
         .then((res) => res.json())
@@ -50,38 +74,46 @@ export default function PlayerStats() {
           });
         });
     } else {
-      setUserData({
-        username: "Guest",
-        avatar: null,
-        hp: 1000,
-        maxHp: 1000,
-        xp: 0,
-        maxXp: 5000,
-        level: 1,
-      });
+      setUserData(defaultUserData);
     }
-  }, [session]);
+  }, [session, initialUserData]);
 
   const { username, avatar, hp, maxHp, xp, maxXp, level } = userData;
-  const [hpPercentage, setHpPercentage] = useState(0);
-  const [xpPercentage, setXpPercentage] = useState(0);
+  
+  // Calculer les pourcentages cibles
+  const targetHpPercentage = (hp / maxHp) * 100;
+  const targetXpPercentage = (xp / maxXp) * 100;
+  
+  // Initialiser les pourcentages à 0 si on a des données initiales (pour l'animation)
+  // Sinon utiliser directement les valeurs calculées
+  const [hpPercentage, setHpPercentage] = useState(
+    initialUserData ? 0 : targetHpPercentage
+  );
+  const [xpPercentage, setXpPercentage] = useState(
+    initialUserData ? 0 : targetXpPercentage
+  );
 
   useEffect(() => {
-    // Animate HP bar
-    const hpTimer = setTimeout(() => {
-      setHpPercentage((hp / maxHp) * 100);
-    }, 100);
+    // Si on a des données initiales, animer depuis 0 vers la valeur cible
+    if (initialUserData) {
+      const hpTimer = setTimeout(() => {
+        setHpPercentage(targetHpPercentage);
+      }, 100);
 
-    // Animate XP bar
-    const xpTimer = setTimeout(() => {
-      setXpPercentage((xp / maxXp) * 100);
-    }, 200);
+      const xpTimer = setTimeout(() => {
+        setXpPercentage(targetXpPercentage);
+      }, 200);
 
-    return () => {
-      clearTimeout(hpTimer);
-      clearTimeout(xpTimer);
-    };
-  }, [hp, maxHp, xp, maxXp]);
+      return () => {
+        clearTimeout(hpTimer);
+        clearTimeout(xpTimer);
+      };
+    } else {
+      // Sinon, mettre à jour directement (pour les pages Client Components)
+      setHpPercentage(targetHpPercentage);
+      setXpPercentage(targetXpPercentage);
+    }
+  }, [targetHpPercentage, targetXpPercentage, initialUserData]);
 
   const hpColor =
     hpPercentage > 60