julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-16 16:29:21 +01:00
parent ffbf3cd42f
commit f45cc1839e
3 changed files with 15 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/navigation/Navigation.tsx
View File

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

2
components/navigation/NavigationWrapper.tsx
View File

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

104
components/profile/PlayerStats.tsx
View File

@@ -13,6 +13,7 @@ interface UserData {
xp: number; xp: number;
maxXp: number; maxXp: number;
level: number; level: number;
score: number;
} }
interface PlayerStatsProps { interface PlayerStatsProps {
@@ -32,6 +33,7 @@ const defaultUserData: UserData = {
xp: 0, xp: 0,
maxXp: 5000, maxXp: 5000,
level: 1, level: 1,
score: 0,
}; };
export default function PlayerStats({ initialUserData }: PlayerStatsProps) { export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
@@ -62,6 +64,7 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
xp: data.xp || 0, xp: data.xp || 0,
maxXp: data.maxXp || 5000, maxXp: data.maxXp || 5000,
level: data.level || 1, level: data.level || 1,
score: data.score || 0,
}); });
}); });
} }
@@ -77,6 +80,7 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
xp: 0, xp: 0,
maxXp: 5000, maxXp: 5000,
level: 1, level: 1,
score: 0,
}); });
}); });
}); });
@@ -88,51 +92,7 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
} }
}, [session, initialUserData]); }, [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 ( return (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@@ -150,7 +110,7 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
</Link> </Link>
{/* Stats */} {/* 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 */} {/* Username & Level */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Link <Link
@@ -166,57 +126,17 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
</div> </div>
</div> </div>
{/* Bars side by side */} {/* Score Display */}
<div className="flex flex-col gap-1"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <div className="text-gray-400 font-pixel text-xs uppercase">
{/* HP Bar */} Score
<div className="relative h-2 flex-1 bg-gray-900 border border-gray-700 rounded overflow-hidden">
<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> </div>
{/* Labels */} <div className="text-pixel-gold font-gaming font-bold text-sm">
<div className="flex items-center gap-2 text-[8px] font-pixel text-gray-400"> {formatNumber(score)}
<div className="flex-1 text-left">
HP {hp} / {maxHp}
</div>
<div className="flex-1 text-right">
XP {formatNumber(xp)} / {formatNumber(maxXp)}
</div>
</div> </div>
</div> </div>
</div> </div>
<style jsx>{`
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.animate-shimmer {
animation: shimmer 2s infinite;
}
`}</style>
</div> </div>
); );
} }