Add score property to UserData interface across navigation and profile components: Update Navigation.tsx, NavigationWrapper.tsx, and PlayerStats.tsx to include score, ensuring consistent user data handling and display.

components/navigation/Navigation.tsx

@@ -16,6 +16,7 @@ interface UserData {
   xp: number;
   maxXp: number;
   level: number;
+  score: number;
 }
 
 interface NavigationProps {

components/navigation/NavigationWrapper.tsx

@@ -11,6 +11,7 @@ interface UserData {
   xp: number;
   maxXp: number;
   level: number;
+  score: number;
 }
 
 export default async function NavigationWrapper() {
@@ -31,6 +32,7 @@ export default async function NavigationWrapper() {
         xp: true,
         maxXp: true,
         level: true,
+        score: true,
       }),
       challengeService.getActiveChallengesCount(session.user.id),
     ]);

components/profile/PlayerStats.tsx

@@ -13,6 +13,7 @@ interface UserData {
   xp: number;
   maxXp: number;
   level: number;
+  score: number;
 }
 
 interface PlayerStatsProps {
@@ -32,6 +33,7 @@ const defaultUserData: UserData = {
   xp: 0,
   maxXp: 5000,
   level: 1,
+  score: 0,
 };
 
 export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
@@ -62,6 +64,7 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
                 xp: data.xp || 0,
                 maxXp: data.maxXp || 5000,
                 level: data.level || 1,
+                score: data.score || 0,
               });
             });
           }
@@ -77,6 +80,7 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
               xp: 0,
               maxXp: 5000,
               level: 1,
+              score: 0,
             });
           });
         });
@@ -88,51 +92,7 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
     }
   }, [session, initialUserData]);
 
-  const { username, avatar, hp, maxHp, xp, maxXp, level } = userData;
+  const { username, avatar, level, score } = userData;
-
-  // 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(() => {
-    // Si on a des données initiales, animer depuis 0 vers la valeur cible
-    if (initialUserData) {
-      const hpTimer = setTimeout(() => {
-        setHpPercentage(targetHpPercentage);
-      }, 100);
-
-      const xpTimer = setTimeout(() => {
-        setXpPercentage(targetXpPercentage);
-      }, 200);
-
-      return () => {
-        clearTimeout(hpTimer);
-        clearTimeout(xpTimer);
-      };
-    }
-    // Sinon, mettre à jour directement (pour les pages Client Components)
-    // Utiliser requestAnimationFrame pour éviter les cascades de rendu
-    requestAnimationFrame(() => {
-      setHpPercentage(targetHpPercentage);
-      setXpPercentage(targetXpPercentage);
-    });
-  }, [targetHpPercentage, targetXpPercentage, initialUserData]);
-
-  const hpColor =
-    hpPercentage > 60
-      ? "from-green-600 to-green-700"
-      : hpPercentage > 30
-        ? "from-yellow-600 to-orange-700"
-        : "from-red-700 to-red-900";
 
   return (
     <div className="flex items-center gap-3">
@@ -150,7 +110,7 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
       </Link>
 
       {/* Stats */}
-      <div className="flex flex-col gap-1.5 min-w-[180px] sm:min-w-[200px]">
+      <div className="flex flex-col gap-1.5 min-w-[140px] sm:min-w-[160px]">
         {/* Username & Level */}
         <div className="flex items-center gap-2">
           <Link
@@ -166,57 +126,17 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
           </div>
         </div>
 
-        {/* Bars side by side */}
+        {/* Score Display */}
-        <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
-            {/* HP Bar */}
+          <div className="text-gray-400 font-pixel text-xs uppercase">
-            <div className="relative h-2 flex-1 bg-gray-900 border border-gray-700 rounded overflow-hidden">
+            Score
-              <div
-                className={`absolute inset-0 bg-gradient-to-r ${hpColor} transition-all duration-1000 ease-out`}
-                style={{ width: `${hpPercentage}%` }}
-              >
-                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
-              </div>
-              {hpPercentage < 30 && (
-                <div className="absolute inset-0 border border-red-500 rounded animate-pulse"></div>
-              )}
-            </div>
-
-            {/* XP Bar */}
-            <div className="relative h-2 flex-1 bg-gray-900 border border-pixel-gold/30 rounded overflow-hidden">
-              <div
-                className="absolute inset-0 bg-gradient-to-r from-pixel-gold/80 via-pixel-gold/70 to-pixel-gold/80 transition-all duration-1000 ease-out"
-                style={{ width: `${xpPercentage}%` }}
-              >
-                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
-              </div>
-            </div>
-          </div>
-          {/* Labels */}
-          <div className="flex items-center gap-2 text-[8px] font-pixel text-gray-400">
-            <div className="flex-1 text-left">
-              HP {hp} / {maxHp}
-            </div>
-            <div className="flex-1 text-right">
-              XP {formatNumber(xp)} / {formatNumber(maxXp)}
           </div>
+          <div className="text-pixel-gold font-gaming font-bold text-sm">
+            {formatNumber(score)}
           </div>
         </div>
       </div>
 
-      <style jsx>{`
-        @keyframes shimmer {
-          0% {
-            transform: translateX(-100%);
-          }
-          100% {
-            transform: translateX(100%);
-          }
-        }
-        .animate-shimmer {
-          animation: shimmer 2s infinite;
-        }
-      `}</style>
     </div>
   );
 }