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.
This commit is contained in:
Julien Froidefond
@@ -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,
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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,82 +87,31 @@ 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
|
||||||
{entry.username}
|
className="flex items-center gap-2 cursor-pointer hover:text-pixel-gold transition"
|
||||||
</span>
|
onClick={() => setSelectedEntry(entry)}
|
||||||
{entry.characterClass && (
|
>
|
||||||
<span className="text-xs text-gray-400 uppercase tracking-wider">
|
<span className="font-bold text-pixel-gold">
|
||||||
[{entry.characterClass === "WARRIOR" && "⚔️ Guerrier"}
|
{entry.username}
|
||||||
{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>
|
</span>
|
||||||
)}
|
{entry.characterClass && (
|
||||||
{(entry.bio || entry.characterClass) && (
|
<span className="text-xs text-gray-400 uppercase tracking-wider">
|
||||||
<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 === "WARRIOR" && "⚔️ Guerrier"}
|
||||||
{entry.characterClass && (
|
{entry.characterClass === "MAGE" && "🔮 Mage"}
|
||||||
<div className="mb-3">
|
{entry.characterClass === "ROGUE" && "🗡️ Voleur"}
|
||||||
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-1 font-bold">
|
{entry.characterClass === "RANGER" && "🏹 Rôdeur"}
|
||||||
Classe
|
{entry.characterClass === "PALADIN" && "🛡️ Paladin"}
|
||||||
</div>
|
{entry.characterClass === "ENGINEER" && "⚙️ Ingénieur"}
|
||||||
<div className="text-sm text-gray-200 flex items-center gap-2">
|
{entry.characterClass === "MERCHANT" && "💰 Marchand"}
|
||||||
<span>
|
{entry.characterClass === "SCHOLAR" && "📚 Érudit"}
|
||||||
{entry.characterClass === "WARRIOR" && "⚔️"}
|
{entry.characterClass === "BERSERKER" && "🔥 Berserker"}
|
||||||
{entry.characterClass === "MAGE" && "🔮"}
|
{entry.characterClass === "NECROMANCER" &&
|
||||||
{entry.characterClass === "ROGUE" && "🗡️"}
|
"💀 Nécromancien"}
|
||||||
{entry.characterClass === "RANGER" && "🏹"}
|
]
|
||||||
{entry.characterClass === "PALADIN" && "🛡️"}
|
</span>
|
||||||
{entry.characterClass === "ENGINEER" && "⚙️"}
|
)}
|
||||||
{entry.characterClass === "MERCHANT" && "💰"}
|
</div>
|
||||||
{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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,86 +120,35 @@ export default function LeaderboardSection({
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<span
|
<div
|
||||||
className={`font-bold cursor-pointer relative z-10 ${
|
className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition"
|
||||||
entry.rank <= 3 ? "text-pixel-gold" : "text-white"
|
onClick={() => setSelectedEntry(entry)}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
{entry.username}
|
<span
|
||||||
</span>
|
className={`font-bold ${
|
||||||
{entry.characterClass && (
|
entry.rank <= 3 ? "text-pixel-gold" : "text-white"
|
||||||
<span className="text-xs text-gray-400 uppercase tracking-wider">
|
}`}
|
||||||
[{entry.characterClass === "WARRIOR" && "⚔️"}
|
>
|
||||||
{entry.characterClass === "MAGE" && "🔮"}
|
{entry.username}
|
||||||
{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>
|
||||||
)}
|
{entry.characterClass && (
|
||||||
{entry.rank <= 3 && (
|
<span className="text-xs text-gray-400 uppercase tracking-wider">
|
||||||
<span className="text-pixel-gold text-xs">✦</span>
|
[{entry.characterClass === "WARRIOR" && "⚔️"}
|
||||||
)}
|
{entry.characterClass === "MAGE" && "🔮"}
|
||||||
{(entry.bio || entry.characterClass) && (
|
{entry.characterClass === "ROGUE" && "🗡️"}
|
||||||
<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 === "RANGER" && "🏹"}
|
||||||
{entry.characterClass && (
|
{entry.characterClass === "PALADIN" && "🛡️"}
|
||||||
<div className="mb-3">
|
{entry.characterClass === "ENGINEER" && "⚙️"}
|
||||||
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-1 font-bold">
|
{entry.characterClass === "MERCHANT" && "💰"}
|
||||||
Classe
|
{entry.characterClass === "SCHOLAR" && "📚"}
|
||||||
</div>
|
{entry.characterClass === "BERSERKER" && "🔥"}
|
||||||
<div className="text-sm text-gray-200 flex items-center gap-2">
|
{entry.characterClass === "NECROMANCER" && "💀"}]
|
||||||
<span>
|
</span>
|
||||||
{entry.characterClass === "WARRIOR" && "⚔️"}
|
)}
|
||||||
{entry.characterClass === "MAGE" && "🔮"}
|
{entry.rank <= 3 && (
|
||||||
{entry.characterClass === "ROGUE" && "🗡️"}
|
<span className="text-pixel-gold text-xs">✦</span>
|
||||||
{entry.characterClass === "RANGER" && "🏹"}
|
)}
|
||||||
{entry.characterClass === "PALADIN" && "🛡️"}
|
</div>
|
||||||
{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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user