Add profile link to Navigation component for user access, enhancing navigation options.

app/api/profile/avatar/route.ts

@@ -0,0 +1,66 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { writeFile, mkdir } from "fs/promises";
+import { join } from "path";
+import { existsSync } from "fs";
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth();
+
+    if (!session?.user) {
+      return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
+    }
+
+    const formData = await request.formData();
+    const file = formData.get("file") as File;
+
+    if (!file) {
+      return NextResponse.json({ error: "Aucun fichier fourni" }, { status: 400 });
+    }
+
+    // Vérifier le type de fichier
+    if (!file.type.startsWith("image/")) {
+      return NextResponse.json(
+        { error: "Le fichier doit être une image" },
+        { status: 400 }
+      );
+    }
+
+    // Limiter la taille (par exemple 5MB)
+    const maxSize = 5 * 1024 * 1024; // 5MB
+    if (file.size > maxSize) {
+      return NextResponse.json(
+        { error: "L'image est trop grande (max 5MB)" },
+        { status: 400 }
+      );
+    }
+
+    // Créer le dossier uploads s'il n'existe pas
+    const uploadsDir = join(process.cwd(), "public", "uploads");
+    if (!existsSync(uploadsDir)) {
+      await mkdir(uploadsDir, { recursive: true });
+    }
+
+    // Générer un nom de fichier unique avec l'ID utilisateur
+    const timestamp = Date.now();
+    const filename = `avatar-${session.user.id}-${timestamp}-${file.name}`;
+    const filepath = join(uploadsDir, filename);
+
+    // Convertir le fichier en buffer et l'écrire
+    const bytes = await file.arrayBuffer();
+    const buffer = Buffer.from(bytes);
+    await writeFile(filepath, buffer);
+
+    // Retourner l'URL de l'image
+    const imageUrl = `/uploads/${filename}`;
+    return NextResponse.json({ url: imageUrl });
+  } catch (error) {
+    console.error("Error uploading avatar:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de l'upload de l'avatar" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/profile/route.ts

@@ -0,0 +1,122 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function GET() {
+  try {
+    const session = await auth();
+
+    if (!session?.user) {
+      return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
+    }
+
+    const user = await prisma.user.findUnique({
+      where: { id: session.user.id },
+      select: {
+        id: true,
+        email: true,
+        username: true,
+        avatar: true,
+        hp: true,
+        maxHp: true,
+        xp: true,
+        maxXp: true,
+        level: true,
+        score: true,
+        createdAt: true,
+      },
+    });
+
+    if (!user) {
+      return NextResponse.json({ error: "Utilisateur non trouvé" }, { status: 404 });
+    }
+
+    return NextResponse.json(user);
+  } catch (error) {
+    console.error("Error fetching profile:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération du profil" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PUT(request: Request) {
+  try {
+    const session = await auth();
+
+    if (!session?.user) {
+      return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { username, avatar } = body;
+
+    // Validation
+    if (username !== undefined) {
+      if (typeof username !== "string" || username.trim().length === 0) {
+        return NextResponse.json(
+          { error: "Le nom d'utilisateur ne peut pas être vide" },
+          { status: 400 }
+        );
+      }
+
+      if (username.length < 3 || username.length > 20) {
+        return NextResponse.json(
+          { error: "Le nom d'utilisateur doit contenir entre 3 et 20 caractères" },
+          { status: 400 }
+        );
+      }
+
+      // Vérifier si le username est déjà pris par un autre utilisateur
+      const existingUser = await prisma.user.findFirst({
+        where: {
+          username: username.trim(),
+          NOT: { id: session.user.id },
+        },
+      });
+
+      if (existingUser) {
+        return NextResponse.json(
+          { error: "Ce nom d'utilisateur est déjà pris" },
+          { status: 400 }
+        );
+      }
+    }
+
+    // Mettre à jour l'utilisateur
+    const updateData: { username?: string; avatar?: string | null } = {};
+    if (username !== undefined) {
+      updateData.username = username.trim();
+    }
+    if (avatar !== undefined) {
+      updateData.avatar = avatar || null;
+    }
+
+    const updatedUser = await prisma.user.update({
+      where: { id: session.user.id },
+      data: updateData,
+      select: {
+        id: true,
+        email: true,
+        username: true,
+        avatar: true,
+        hp: true,
+        maxHp: true,
+        xp: true,
+        maxXp: true,
+        level: true,
+        score: true,
+      },
+    });
+
+    return NextResponse.json(updatedUser);
+  } catch (error) {
+    console.error("Error updating profile:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la mise à jour du profil" },
+      { status: 500 }
+    );
+  }
+}
+

app/profile/page.tsx

@@ -0,0 +1,365 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import Navigation from "@/components/Navigation";
+import { useBackgroundImage } from "@/hooks/usePreferences";
+
+interface UserProfile {
+  id: string;
+  email: string;
+  username: string;
+  avatar: string | null;
+  hp: number;
+  maxHp: number;
+  xp: number;
+  maxXp: number;
+  level: number;
+  score: number;
+  createdAt: string;
+}
+
+const formatNumber = (num: number): string => {
+  return num.toLocaleString("en-US");
+};
+
+export default function ProfilePage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const backgroundImage = useBackgroundImage("home", "/got-background.jpg");
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  
+  const [username, setUsername] = useState("");
+  const [avatar, setAvatar] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploadingAvatar, setUploadingAvatar] = useState(false);
+
+  useEffect(() => {
+    if (status === "unauthenticated") {
+      router.push("/login");
+      return;
+    }
+
+    if (status === "authenticated" && session?.user) {
+      fetchProfile();
+    }
+  }, [status, session, router]);
+
+  const fetchProfile = async () => {
+    try {
+      const response = await fetch("/api/profile");
+      if (response.ok) {
+        const data = await response.json();
+        setProfile(data);
+        setUsername(data.username);
+        setAvatar(data.avatar);
+      } else {
+        setError("Erreur lors du chargement du profil");
+      }
+    } catch (err) {
+      console.error("Error fetching profile:", err);
+      setError("Erreur lors du chargement du profil");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploadingAvatar(true);
+    setError(null);
+
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const response = await fetch("/api/profile/avatar", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setAvatar(data.url);
+        setSuccess("Avatar mis à jour avec succès");
+        setTimeout(() => setSuccess(null), 3000);
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || "Erreur lors de l'upload de l'avatar");
+      }
+    } catch (err) {
+      console.error("Error uploading avatar:", err);
+      setError("Erreur lors de l'upload de l'avatar");
+    } finally {
+      setUploadingAvatar(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const response = await fetch("/api/profile", {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          username,
+          avatar,
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setProfile(data);
+        setSuccess("Profil mis à jour avec succès");
+        setTimeout(() => setSuccess(null), 3000);
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || "Erreur lors de la mise à jour");
+      }
+    } catch (err) {
+      console.error("Error updating profile:", err);
+      setError("Erreur lors de la mise à jour du profil");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading || status === "loading") {
+    return (
+      <main className="min-h-screen bg-black relative">
+        <Navigation />
+        <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>
+      </main>
+    );
+  }
+
+  if (!profile) {
+    return (
+      <main className="min-h-screen bg-black relative">
+        <Navigation />
+        <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
+          <div className="text-red-400 text-xl">Erreur lors du chargement du profil</div>
+        </section>
+      </main>
+    );
+  }
+
+  const hpPercentage = (profile.hp / profile.maxHp) * 100;
+  const xpPercentage = (profile.xp / profile.maxXp) * 100;
+
+  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 (
+    <main className="min-h-screen bg-black relative">
+      <Navigation />
+      <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
+        {/* Background Image */}
+        <div
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+          style={{
+            backgroundImage: `url('${backgroundImage}')`,
+          }}
+        >
+          {/* Dark overlay for readability */}
+          <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
+        </div>
+
+        {/* Content */}
+        <div className="relative z-10 w-full max-w-4xl mx-auto px-8 py-16">
+          {/* Title Section */}
+          <div className="text-center mb-12">
+            <h1 className="text-5xl md:text-7xl font-gaming font-black mb-4 tracking-tight">
+              <span
+                className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent"
+                style={{
+                  textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
+                }}
+              >
+                PROFIL
+              </span>
+            </h1>
+            <div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide">
+              <span>✦</span>
+              <span>Gérez votre profil</span>
+              <span>✦</span>
+            </div>
+          </div>
+
+          {/* Profile Card */}
+          <div className="bg-black/60 border border-pixel-gold/30 rounded-lg overflow-hidden backdrop-blur-sm">
+            <form onSubmit={handleSubmit} className="p-8 space-y-8">
+              {/* Messages */}
+              {error && (
+                <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm">
+                  {error}
+                </div>
+              )}
+              {success && (
+                <div className="bg-green-900/50 border border-green-500/50 text-green-400 px-4 py-3 rounded text-sm">
+                  {success}
+                </div>
+              )}
+
+              {/* Avatar Section */}
+              <div className="flex flex-col items-center gap-4">
+                <div className="relative">
+                  <div className="w-32 h-32 rounded-full border-4 border-pixel-gold/50 overflow-hidden bg-gray-900 flex items-center justify-center">
+                    {avatar ? (
+                      <img
+                        src={avatar}
+                        alt={username}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <span className="text-pixel-gold text-4xl font-bold">
+                        {username.charAt(0).toUpperCase()}
+                      </span>
+                    )}
+                  </div>
+                  {uploadingAvatar && (
+                    <div className="absolute inset-0 bg-black/60 flex items-center justify-center rounded-full">
+                      <div className="text-pixel-gold text-sm">Upload...</div>
+                    </div>
+                  )}
+                </div>
+                <div>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    onChange={handleAvatarUpload}
+                    className="hidden"
+                    id="avatar-upload"
+                  />
+                  <label
+                    htmlFor="avatar-upload"
+                    className="px-4 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition cursor-pointer inline-block"
+                  >
+                    {uploadingAvatar ? "Upload en cours..." : "Changer l'avatar"}
+                  </label>
+                </div>
+              </div>
+
+              {/* Username Field */}
+              <div>
+                <label className="block text-pixel-gold text-sm uppercase tracking-widest mb-2">
+                  Nom d'utilisateur
+                </label>
+                <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  className="w-full px-4 py-3 bg-black/40 border border-pixel-gold/30 rounded text-white focus:outline-none focus:border-pixel-gold transition"
+                  required
+                  minLength={3}
+                  maxLength={20}
+                />
+                <p className="text-gray-500 text-xs mt-1">
+                  3-20 caractères
+                </p>
+              </div>
+
+              {/* Stats Display */}
+              <div className="border-t border-pixel-gold/20 pt-6">
+                <h3 className="text-pixel-gold text-sm uppercase tracking-widest mb-4">
+                  Statistiques
+                </h3>
+                
+                <div className="grid grid-cols-2 gap-4 mb-4">
+                  <div className="bg-black/40 border border-pixel-gold/20 rounded p-4">
+                    <div className="text-gray-400 text-xs uppercase mb-1">Score</div>
+                    <div className="text-pixel-gold text-xl font-bold">
+                      {formatNumber(profile.score)}
+                    </div>
+                  </div>
+                  <div className="bg-black/40 border border-pixel-gold/20 rounded p-4">
+                    <div className="text-gray-400 text-xs uppercase mb-1">Niveau</div>
+                    <div className="text-pixel-gold text-xl font-bold">
+                      Lv.{profile.level}
+                    </div>
+                  </div>
+                </div>
+
+                {/* HP Bar */}
+                <div className="mb-4">
+                  <div className="flex justify-between text-xs text-gray-400 mb-1">
+                    <span>HP</span>
+                    <span>{profile.hp} / {profile.maxHp}</span>
+                  </div>
+                  <div className="relative h-3 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>
+                </div>
+
+                {/* XP Bar */}
+                <div>
+                  <div className="flex justify-between text-xs text-gray-400 mb-1">
+                    <span>XP</span>
+                    <span>{formatNumber(profile.xp)} / {formatNumber(profile.maxXp)}</span>
+                  </div>
+                  <div className="relative h-3 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>
+                </div>
+              </div>
+
+              {/* Email (read-only) */}
+              <div>
+                <label className="block text-gray-500 text-sm uppercase tracking-widest mb-2">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  value={profile.email}
+                  disabled
+                  className="w-full px-4 py-3 bg-black/20 border border-gray-700/50 rounded text-gray-500 cursor-not-allowed"
+                />
+              </div>
+
+              {/* Submit Button */}
+              <div className="flex justify-end gap-4 pt-4 border-t border-pixel-gold/20">
+                <button
+                  type="submit"
+                  disabled={saving}
+                  className="px-6 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {saving ? "Enregistrement..." : "Enregistrer les modifications"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
+

components/Navigation.tsx

@@ -57,6 +57,12 @@ export default function Navigation() {
           {session ? (
             <>
               <PlayerStats />
+              <Link
+                href="/profile"
+                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
+              >
+                PROFIL
+              </Link>
               <button
                 onClick={() => signOut()}
                 className="text-gray-400 hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"