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

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

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-09 08:24:14 +01:00
parent f57a30eb4d
commit 4486f305f2
41 changed files with 9094 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
components/LeaderboardSection.tsx
View File

@@ -1,11 +1,13 @@
"use client";
import { useEffect, useState } from "react";
interface LeaderboardEntry {
rank: number;
username: string;
score: number;
level: number;
avatar?: string;
avatar?: string | null;
}
// Format number with consistent locale to avoid hydration mismatch
@@ -13,25 +15,30 @@ const formatScore = (score: number): string => {
return score.toLocaleString("en-US");
};
const mockLeaderboard: LeaderboardEntry[] = [
{ rank: 1, username: "TechMaster2024", score: 125000, level: 85 },
{ rank: 2, username: "CodeWarrior", score: 118500, level: 82 },
{ rank: 3, username: "AIGenius", score: 112000, level: 80 },
{ rank: 4, username: "DevLegend", score: 105500, level: 78 },
{ rank: 5, username: "InnovationPro", score: 99000, level: 75 },
{ rank: 6, username: "TechNinja", score: 92500, level: 73 },
{ rank: 7, username: "DigitalHero", score: 87000, level: 71 },
{ rank: 8, username: "CodeCrusher", score: 81500, level: 69 },
{ rank: 9, username: "TechWizard", score: 76000, level: 67 },
{ rank: 10, username: "InnovationKing", score: 70500, level: 65 },
{ rank: 11, username: "DevMaster", score: 68000, level: 64 },
{ rank: 12, username: "TechElite", score: 65500, level: 63 },
{ rank: 13, username: "CodeChampion", score: 63000, level: 62 },
{ rank: 14, username: "AIVisionary", score: 60500, level: 61 },
{ rank: 15, username: "TechPioneer", score: 58000, level: 60 },
];
export default function LeaderboardSection() {
const [leaderboard, setLeaderboard] = useState<LeaderboardEntry[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch("/api/leaderboard")
.then((res) => res.json())
.then((data) => {
setLeaderboard(data);
setLoading(false);
})
.catch((err) => {
console.error("Error fetching leaderboard:", err);
setLoading(false);
});
}, []);
if (loading) {
return (
<section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
<div className="text-pixel-gold text-xl">Chargement...</div>
</section>
);
}
return (
<section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
{/* Background Image */}
@@ -78,7 +85,7 @@ export default function LeaderboardSection() {
{/* Entries */}
<div className="divide-y divide-pixel-gold/10">
{mockLeaderboard.map((entry) => (
{leaderboard.map((entry) => (
<div
key={entry.rank}
className={`grid grid-cols-12 gap-4 p-4 hover:bg-gray-900/50 transition ${
@@ -106,11 +113,21 @@ export default function LeaderboardSection() {
{/* Player */}
<div className="col-span-6 flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-pixel-gold/30 flex items-center justify-center">
<span className="text-pixel-gold text-xs font-bold">
{entry.username.charAt(0).toUpperCase()}
</span>
</div>
{entry.avatar ? (
<div className="w-10 h-10 rounded-full border border-pixel-gold/30 overflow-hidden">
<img
src={entry.avatar}
alt={entry.username}
className="w-full h-full object-cover"
/>
</div>
) : (
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-pixel-gold/30 flex items-center justify-center">
<span className="text-pixel-gold text-xs font-bold">
{entry.username.charAt(0).toUpperCase()}
</span>
</div>
)}
<span
className={`font-bold ${
entry.rank <= 3 ? "text-pixel-gold" : "text-white"