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

Add character selection modal to Leaderboard: Implement a modal for displaying detailed user profiles when a leaderboard entry is clicked. This includes user avatar, rank, character class, score, level, and bio, enhancing user interaction and profile visibility.

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-09 22:11:47 +01:00
parent b245be3bf4
commit 0ac6dbd423
4 changed files with 311 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/api/leaderboard/route.ts
View File

@@ -11,6 +11,7 @@ export async function GET() {
select: { select: {
id: true, id: true,
username: true, username: true,
email: true,
score: true, score: true,
level: true, level: true,
avatar: true, avatar: true,
@@ -24,6 +25,7 @@ export async function GET() {
user: { user: {
id: string; id: string;
username: string; username: string;
email: string;
score: number; score: number;
level: number; level: number;
avatar: string | null; avatar: string | null;
@@ -34,6 +36,7 @@ export async function GET() {
) => ({ ) => ({
rank: index + 1, rank: index + 1,
username: user.username, username: user.username,
email: user.email,
score: user.score, score: user.score,
level: user.level, level: user.level,
avatar: user.avatar, avatar: user.avatar,

3
app/leaderboard/page.tsx
View File

@@ -6,6 +6,7 @@ import { getBackgroundImage } from "@/lib/preferences";
interface LeaderboardEntry { interface LeaderboardEntry {
rank: number; rank: number;
username: string; username: string;
email: string;
score: number; score: number;
level: number; level: number;
avatar: string | null; avatar: string | null;
@@ -22,6 +23,7 @@ export default async function LeaderboardPage() {
select: { select: {
id: true, id: true,
username: true, username: true,
email: true,
score: true, score: true,
level: true, level: true,
avatar: true, avatar: true,
@@ -33,6 +35,7 @@ export default async function LeaderboardPage() {
const leaderboard: LeaderboardEntry[] = users.map((user, index) => ({ const leaderboard: LeaderboardEntry[] = users.map((user, index) => ({
rank: index + 1, rank: index + 1,
username: user.username, username: user.username,
email: user.email,
score: user.score, score: user.score,
level: user.level, level: user.level,
avatar: user.avatar, avatar: user.avatar,

188
components/Leaderboard.tsx
View File

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
interface LeaderboardEntry { interface LeaderboardEntry {
rank: number; rank: number;
username: string; username: string;
email: string;
score: number; score: number;
level: number; level: number;
avatar?: string | null; avatar?: string | null;
@@ -20,6 +21,9 @@ const formatScore = (score: number): string => {
export default function Leaderboard() { export default function Leaderboard() {
const [leaderboard, setLeaderboard] = useState<LeaderboardEntry[]>([]); const [leaderboard, setLeaderboard] = useState<LeaderboardEntry[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [selectedEntry, setSelectedEntry] = useState<LeaderboardEntry | null>(
null
);
useEffect(() => { useEffect(() => {
fetch("/api/leaderboard") fetch("/api/leaderboard")
@@ -83,8 +87,12 @@ export default function Leaderboard() {
{entry.rank} {entry.rank}
</span> </span>
</div> </div>
<div className="col-span-5 flex items-center gap-2 relative group"> <div className="col-span-5 flex items-center gap-2">
<span className="font-bold text-pixel-gold cursor-pointer relative z-10"> <div
className="flex items-center gap-2 cursor-pointer hover:text-pixel-gold transition"
onClick={() => setSelectedEntry(entry)}
>
<span className="font-bold text-pixel-gold">
{entry.username} {entry.username}
</span> </span>
{entry.characterClass && ( {entry.characterClass && (
@@ -103,62 +111,7 @@ export default function Leaderboard() {
] ]
</span> </span>
)} )}
{(entry.bio || entry.characterClass) && (
<div className="absolute left-0 top-full mt-1 z-[100] w-72 p-4 bg-black border-2 border-pixel-gold/70 rounded-lg shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none">
{entry.characterClass && (
<div className="mb-3">
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-1 font-bold">
Classe
</div> </div>
<div className="text-sm text-gray-200 flex items-center gap-2">
<span>
{entry.characterClass === "WARRIOR" && "⚔️"}
{entry.characterClass === "MAGE" && "🔮"}
{entry.characterClass === "ROGUE" && "🗡️"}
{entry.characterClass === "RANGER" && "🏹"}
{entry.characterClass === "PALADIN" && "🛡️"}
{entry.characterClass === "ENGINEER" && "⚙️"}
{entry.characterClass === "MERCHANT" && "💰"}
{entry.characterClass === "SCHOLAR" && "📚"}
{entry.characterClass === "BERSERKER" && "🔥"}
{entry.characterClass === "NECROMANCER" && "💀"}
</span>
<span className="uppercase tracking-wider">
{entry.characterClass === "WARRIOR" && "Guerrier"}
{entry.characterClass === "MAGE" && "Mage"}
{entry.characterClass === "ROGUE" && "Voleur"}
{entry.characterClass === "RANGER" && "Rôdeur"}
{entry.characterClass === "PALADIN" && "Paladin"}
{entry.characterClass === "ENGINEER" &&
"Ingénieur"}
{entry.characterClass === "MERCHANT" &&
"Marchand"}
{entry.characterClass === "SCHOLAR" && "Érudit"}
{entry.characterClass === "BERSERKER" &&
"Berserker"}
{entry.characterClass === "NECROMANCER" &&
"Nécromancien"}
</span>
</div>
</div>
)}
{entry.bio && (
<>
{entry.characterClass && (
<div className="border-b border-pixel-gold/30 mb-3 pb-3"></div>
)}
<div>
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-2 border-b border-pixel-gold/30 pb-1 font-bold">
Bio
</div>
<p className="text-sm text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
{entry.bio}
</p>
</div>
</>
)}
</div>
)}
</div> </div>
<div className="col-span-3 text-right flex items-center justify-end"> <div className="col-span-3 text-right flex items-center justify-end">
<span className="font-mono text-gray-300"> <span className="font-mono text-gray-300">
@@ -180,6 +133,127 @@ export default function Leaderboard() {
<p>Compete with players worldwide and climb the ranks!</p> <p>Compete with players worldwide and climb the ranks!</p>
</div> </div>
</div> </div>
{/* Character Modal */}
{selectedEntry && (
<div
className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
onClick={() => setSelectedEntry(null)}
>
<div
className="bg-black border-2 border-pixel-gold/70 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<div className="p-8">
{/* Header */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-3xl font-bold text-pixel-gold uppercase tracking-wider">
{selectedEntry.username}
</h2>
<button
onClick={() => setSelectedEntry(null)}
className="text-gray-400 hover:text-pixel-gold text-2xl font-bold transition"
>
×
</button>
</div>
{/* Avatar and Class */}
<div className="flex items-center gap-6 mb-6">
{selectedEntry.avatar ? (
<div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 overflow-hidden">
<img
src={selectedEntry.avatar}
alt={selectedEntry.username}
className="w-full h-full object-cover"
/>
</div>
) : (
<div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 bg-gray-900 flex items-center justify-center">
<span className="text-pixel-gold text-4xl font-bold">
{selectedEntry.username.charAt(0).toUpperCase()}
</span>
</div>
)}
<div>
<div className="text-xs text-gray-400 uppercase tracking-widest mb-2">
Rank #{selectedEntry.rank}
</div>
<div className="text-sm text-gray-300 mb-2">
{selectedEntry.email}
</div>
{selectedEntry.characterClass && (
<div className="flex items-center gap-2">
<span className="text-2xl">
{selectedEntry.characterClass === "WARRIOR" && "⚔️"}
{selectedEntry.characterClass === "MAGE" && "🔮"}
{selectedEntry.characterClass === "ROGUE" && "🗡️"}
{selectedEntry.characterClass === "RANGER" && "🏹"}
{selectedEntry.characterClass === "PALADIN" && "🛡️"}
{selectedEntry.characterClass === "ENGINEER" && "⚙️"}
{selectedEntry.characterClass === "MERCHANT" && "💰"}
{selectedEntry.characterClass === "SCHOLAR" && "📚"}
{selectedEntry.characterClass === "BERSERKER" && "🔥"}
{selectedEntry.characterClass === "NECROMANCER" && "💀"}
</span>
<span className="text-lg font-bold text-pixel-gold uppercase tracking-wider">
{selectedEntry.characterClass === "WARRIOR" &&
"Guerrier"}
{selectedEntry.characterClass === "MAGE" && "Mage"}
{selectedEntry.characterClass === "ROGUE" && "Voleur"}
{selectedEntry.characterClass === "RANGER" && "Rôdeur"}
{selectedEntry.characterClass === "PALADIN" &&
"Paladin"}
{selectedEntry.characterClass === "ENGINEER" &&
"Ingénieur"}
{selectedEntry.characterClass === "MERCHANT" &&
"Marchand"}
{selectedEntry.characterClass === "SCHOLAR" && "Érudit"}
{selectedEntry.characterClass === "BERSERKER" &&
"Berserker"}
{selectedEntry.characterClass === "NECROMANCER" &&
"Nécromancien"}
</span>
</div>
)}
</div>
</div>
{/* Stats */}
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="bg-black/60 border border-pixel-gold/30 rounded p-4">
<div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
Score
</div>
<div className="text-2xl font-bold text-pixel-gold">
{formatScore(selectedEntry.score)}
</div>
</div>
<div className="bg-black/60 border border-pixel-gold/30 rounded p-4">
<div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
Niveau
</div>
<div className="text-2xl font-bold text-pixel-gold">
Lv.{selectedEntry.level}
</div>
</div>
</div>
{/* Bio */}
{selectedEntry.bio && (
<div className="border-t border-pixel-gold/30 pt-6">
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-3 font-bold">
Bio
</div>
<p className="text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
{selectedEntry.bio}
</p>
</div>
)}
</div>
</div>
</div>
)}
</section> </section>
); );
} }

191
components/LeaderboardSection.tsx
View File

@@ -1,8 +1,11 @@
"use client"; "use client";
import { useState } from "react";
interface LeaderboardEntry { interface LeaderboardEntry {
rank: number; rank: number;
username: string; username: string;
email: string;
score: number; score: number;
level: number; level: number;
avatar?: string | null; avatar?: string | null;
@@ -24,6 +27,10 @@ export default function LeaderboardSection({
leaderboard, leaderboard,
backgroundImage, backgroundImage,
}: LeaderboardSectionProps) { }: LeaderboardSectionProps) {
const [selectedEntry, setSelectedEntry] = useState<LeaderboardEntry | null>(
null
);
return ( return (
<section className="relative w-full min-h-screen flex flex-col items-center justify-center pt-24 pb-16"> <section className="relative w-full min-h-screen flex flex-col items-center justify-center pt-24 pb-16">
{/* Background Image */} {/* Background Image */}
@@ -97,7 +104,7 @@ export default function LeaderboardSection({
</div> </div>
{/* Player */} {/* Player */}
<div className="col-span-6 flex items-center gap-3 relative group"> <div className="col-span-6 flex items-center gap-3">
{entry.avatar ? ( {entry.avatar ? (
<div className="w-10 h-10 rounded-full border border-pixel-gold/30 overflow-hidden"> <div className="w-10 h-10 rounded-full border border-pixel-gold/30 overflow-hidden">
<img <img
@@ -113,8 +120,12 @@ export default function LeaderboardSection({
</span> </span>
</div> </div>
)} )}
<div
className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition"
onClick={() => setSelectedEntry(entry)}
>
<span <span
className={`font-bold cursor-pointer relative z-10 ${ className={`font-bold ${
entry.rank <= 3 ? "text-pixel-gold" : "text-white" entry.rank <= 3 ? "text-pixel-gold" : "text-white"
}`} }`}
> >
@@ -137,62 +148,7 @@ export default function LeaderboardSection({
{entry.rank <= 3 && ( {entry.rank <= 3 && (
<span className="text-pixel-gold text-xs">✦</span> <span className="text-pixel-gold text-xs">✦</span>
)} )}
{(entry.bio || entry.characterClass) && (
<div className="absolute left-0 top-full mt-1 z-[100] w-72 p-4 bg-black border-2 border-pixel-gold/70 rounded-lg shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none">
{entry.characterClass && (
<div className="mb-3">
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-1 font-bold">
Classe
</div> </div>
<div className="text-sm text-gray-200 flex items-center gap-2">
<span>
{entry.characterClass === "WARRIOR" && "⚔️"}
{entry.characterClass === "MAGE" && "🔮"}
{entry.characterClass === "ROGUE" && "🗡️"}
{entry.characterClass === "RANGER" && "🏹"}
{entry.characterClass === "PALADIN" && "🛡️"}
{entry.characterClass === "ENGINEER" && "⚙️"}
{entry.characterClass === "MERCHANT" && "💰"}
{entry.characterClass === "SCHOLAR" && "📚"}
{entry.characterClass === "BERSERKER" && "🔥"}
{entry.characterClass === "NECROMANCER" && "💀"}
</span>
<span className="uppercase tracking-wider">
{entry.characterClass === "WARRIOR" && "Guerrier"}
{entry.characterClass === "MAGE" && "Mage"}
{entry.characterClass === "ROGUE" && "Voleur"}
{entry.characterClass === "RANGER" && "Rôdeur"}
{entry.characterClass === "PALADIN" && "Paladin"}
{entry.characterClass === "ENGINEER" &&
"Ingénieur"}
{entry.characterClass === "MERCHANT" &&
"Marchand"}
{entry.characterClass === "SCHOLAR" && "Érudit"}
{entry.characterClass === "BERSERKER" &&
"Berserker"}
{entry.characterClass === "NECROMANCER" &&
"Nécromancien"}
</span>
</div>
</div>
)}
{entry.bio && (
<>
{entry.characterClass && (
<div className="border-b border-pixel-gold/30 mb-3 pb-3"></div>
)}
<div>
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-2 border-b border-pixel-gold/30 pb-1 font-bold">
Bio
</div>
<p className="text-sm text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
{entry.bio}
</p>
</div>
</>
)}
</div>
)}
</div> </div>
{/* Score */} {/* Score */}
@@ -223,6 +179,127 @@ export default function LeaderboardSection({
</p> </p>
</div> </div>
</div> </div>
{/* Character Modal */}
{selectedEntry && (
<div
className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
onClick={() => setSelectedEntry(null)}
>
<div
className="bg-black border-2 border-pixel-gold/70 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<div className="p-8">
{/* Header */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-3xl font-bold text-pixel-gold uppercase tracking-wider">
{selectedEntry.username}
</h2>
<button
onClick={() => setSelectedEntry(null)}
className="text-gray-400 hover:text-pixel-gold text-2xl font-bold transition"
>
×
</button>
</div>
{/* Avatar and Class */}
<div className="flex items-center gap-6 mb-6">
{selectedEntry.avatar ? (
<div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 overflow-hidden">
<img
src={selectedEntry.avatar}
alt={selectedEntry.username}
className="w-full h-full object-cover"
/>
</div>
) : (
<div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 bg-gray-900 flex items-center justify-center">
<span className="text-pixel-gold text-4xl font-bold">
{selectedEntry.username.charAt(0).toUpperCase()}
</span>
</div>
)}
<div>
<div className="text-xs text-gray-400 uppercase tracking-widest mb-2">
Rank #{selectedEntry.rank}
</div>
<div className="text-sm text-gray-300 mb-2">
{selectedEntry.email}
</div>
{selectedEntry.characterClass && (
<div className="flex items-center gap-2">
<span className="text-2xl">
{selectedEntry.characterClass === "WARRIOR" && "⚔️"}
{selectedEntry.characterClass === "MAGE" && "🔮"}
{selectedEntry.characterClass === "ROGUE" && "🗡️"}
{selectedEntry.characterClass === "RANGER" && "🏹"}
{selectedEntry.characterClass === "PALADIN" && "🛡️"}
{selectedEntry.characterClass === "ENGINEER" && "⚙️"}
{selectedEntry.characterClass === "MERCHANT" && "💰"}
{selectedEntry.characterClass === "SCHOLAR" && "📚"}
{selectedEntry.characterClass === "BERSERKER" && "🔥"}
{selectedEntry.characterClass === "NECROMANCER" && "💀"}
</span>
<span className="text-lg font-bold text-pixel-gold uppercase tracking-wider">
{selectedEntry.characterClass === "WARRIOR" &&
"Guerrier"}
{selectedEntry.characterClass === "MAGE" && "Mage"}
{selectedEntry.characterClass === "ROGUE" && "Voleur"}
{selectedEntry.characterClass === "RANGER" && "Rôdeur"}
{selectedEntry.characterClass === "PALADIN" &&
"Paladin"}
{selectedEntry.characterClass === "ENGINEER" &&
"Ingénieur"}
{selectedEntry.characterClass === "MERCHANT" &&
"Marchand"}
{selectedEntry.characterClass === "SCHOLAR" && "Érudit"}
{selectedEntry.characterClass === "BERSERKER" &&
"Berserker"}
{selectedEntry.characterClass === "NECROMANCER" &&
"Nécromancien"}
</span>
</div>
)}
</div>
</div>
{/* Stats */}
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="bg-black/60 border border-pixel-gold/30 rounded p-4">
<div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
Score
</div>
<div className="text-2xl font-bold text-pixel-gold">
{formatScore(selectedEntry.score)}
</div>
</div>
<div className="bg-black/60 border border-pixel-gold/30 rounded p-4">
<div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
Niveau
</div>
<div className="text-2xl font-bold text-pixel-gold">
Lv.{selectedEntry.level}
</div>
</div>
</div>
{/* Bio */}
{selectedEntry.bio && (
<div className="border-t border-pixel-gold/30 pt-6">
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-3 font-bold">
Bio
</div>
<p className="text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
{selectedEntry.bio}
</p>
</div>
)}
</div>
</div>
</div>
)}
</section> </section>
); );
} }