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.

app/api/leaderboard/route.ts

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

app/leaderboard/page.tsx

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