Enhance user profiles with character class feature: Add character class field to user model and update related API routes, UI components, and validation logic. This update improves user profile customization and leaderboard entries by allowing users to select and display their character class.
This commit is contained in:
Julien Froidefond
@@ -9,6 +9,7 @@ interface LeaderboardEntry {
|
||||
level: number;
|
||||
avatar?: string | null;
|
||||
bio?: string | null;
|
||||
characterClass?: string | null;
|
||||
}
|
||||
|
||||
// Format number with consistent locale to avoid hydration mismatch
|
||||
@@ -82,18 +83,80 @@ export default function Leaderboard() {
|
||||
{entry.rank}
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-span-5 flex items-center relative group">
|
||||
<div className="col-span-5 flex items-center gap-2 relative group">
|
||||
<span className="font-bold text-pixel-gold cursor-pointer relative z-10">
|
||||
{entry.username}
|
||||
</span>
|
||||
{entry.bio && (
|
||||
{entry.characterClass && (
|
||||
<span className="text-xs text-gray-400 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>
|
||||
)}
|
||||
{(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">
|
||||
<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>
|
||||
{entry.characterClass && (
|
||||
<div className="mb-3">
|
||||
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-1 font-bold">
|
||||
Classe
|
||||
</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>
|
||||
|
||||
@@ -7,6 +7,7 @@ interface LeaderboardEntry {
|
||||
level: number;
|
||||
avatar?: string | null;
|
||||
bio?: string | null;
|
||||
characterClass?: string | null;
|
||||
}
|
||||
|
||||
interface LeaderboardSectionProps {
|
||||
@@ -119,17 +120,77 @@ export default function LeaderboardSection({
|
||||
>
|
||||
{entry.username}
|
||||
</span>
|
||||
{entry.characterClass && (
|
||||
<span className="text-xs text-gray-400 uppercase tracking-wider">
|
||||
[{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>
|
||||
)}
|
||||
{entry.rank <= 3 && (
|
||||
<span className="text-pixel-gold text-xs">✦</span>
|
||||
)}
|
||||
{entry.bio && (
|
||||
{(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">
|
||||
<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>
|
||||
{entry.characterClass && (
|
||||
<div className="mb-3">
|
||||
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-1 font-bold">
|
||||
Classe
|
||||
</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>
|
||||
|
||||
@@ -3,12 +3,26 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
type CharacterClass =
|
||||
| "WARRIOR"
|
||||
| "MAGE"
|
||||
| "ROGUE"
|
||||
| "RANGER"
|
||||
| "PALADIN"
|
||||
| "ENGINEER"
|
||||
| "MERCHANT"
|
||||
| "SCHOLAR"
|
||||
| "BERSERKER"
|
||||
| "NECROMANCER"
|
||||
| null;
|
||||
|
||||
interface UserProfile {
|
||||
id: string;
|
||||
email: string;
|
||||
username: string;
|
||||
avatar: string | null;
|
||||
bio: string | null;
|
||||
characterClass: CharacterClass;
|
||||
hp: number;
|
||||
maxHp: number;
|
||||
xp: number;
|
||||
@@ -40,6 +54,9 @@ export default function ProfileForm({
|
||||
const [username, setUsername] = useState(initialProfile.username);
|
||||
const [avatar, setAvatar] = useState<string | null>(initialProfile.avatar);
|
||||
const [bio, setBio] = useState<string | null>(initialProfile.bio || null);
|
||||
const [characterClass, setCharacterClass] = useState<CharacterClass>(
|
||||
initialProfile.characterClass || null
|
||||
);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [uploadingAvatar, setUploadingAvatar] = useState(false);
|
||||
|
||||
@@ -102,6 +119,7 @@ export default function ProfileForm({
|
||||
username,
|
||||
avatar,
|
||||
bio,
|
||||
characterClass,
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -109,6 +127,7 @@ export default function ProfileForm({
|
||||
const data = await response.json();
|
||||
setProfile(data);
|
||||
setBio(data.bio || null);
|
||||
setCharacterClass(data.characterClass || null);
|
||||
setSuccess("Profil mis à jour avec succès");
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} else {
|
||||
@@ -338,6 +357,111 @@ export default function ProfileForm({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Character Class Selection */}
|
||||
<div>
|
||||
<label className="block text-pixel-gold text-sm uppercase tracking-widest mb-3">
|
||||
Classe de Personnage
|
||||
</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{[
|
||||
{
|
||||
value: "WARRIOR",
|
||||
name: "Guerrier",
|
||||
icon: "⚔️",
|
||||
desc: "Maître du combat au corps à corps",
|
||||
},
|
||||
{
|
||||
value: "MAGE",
|
||||
name: "Mage",
|
||||
icon: "🔮",
|
||||
desc: "Manipulateur des arcanes",
|
||||
},
|
||||
{
|
||||
value: "ROGUE",
|
||||
name: "Voleur",
|
||||
icon: "🗡️",
|
||||
desc: "Furtif et mortel",
|
||||
},
|
||||
{
|
||||
value: "RANGER",
|
||||
name: "Rôdeur",
|
||||
icon: "🏹",
|
||||
desc: "Chasseur des terres sauvages",
|
||||
},
|
||||
{
|
||||
value: "PALADIN",
|
||||
name: "Paladin",
|
||||
icon: "🛡️",
|
||||
desc: "Protecteur sacré",
|
||||
},
|
||||
{
|
||||
value: "ENGINEER",
|
||||
name: "Ingénieur",
|
||||
icon: "⚙️",
|
||||
desc: "Créateur d'artefacts",
|
||||
},
|
||||
{
|
||||
value: "MERCHANT",
|
||||
name: "Marchand",
|
||||
icon: "💰",
|
||||
desc: "Maître du commerce",
|
||||
},
|
||||
{
|
||||
value: "SCHOLAR",
|
||||
name: "Érudit",
|
||||
icon: "📚",
|
||||
desc: "Gardien du savoir",
|
||||
},
|
||||
{
|
||||
value: "BERSERKER",
|
||||
name: "Berserker",
|
||||
icon: "🔥",
|
||||
desc: "Rage destructrice",
|
||||
},
|
||||
{
|
||||
value: "NECROMANCER",
|
||||
name: "Nécromancien",
|
||||
icon: "💀",
|
||||
desc: "Maître des morts",
|
||||
},
|
||||
].map((cls) => (
|
||||
<button
|
||||
key={cls.value}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setCharacterClass(cls.value as CharacterClass)
|
||||
}
|
||||
className={`p-4 border-2 rounded-lg text-left transition-all ${
|
||||
characterClass === cls.value
|
||||
? "border-pixel-gold bg-pixel-gold/20 shadow-lg shadow-pixel-gold/30"
|
||||
: "border-pixel-gold/30 bg-black/40 hover:border-pixel-gold/50 hover:bg-black/60"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-2xl">{cls.icon}</span>
|
||||
<span
|
||||
className={`font-bold text-sm uppercase tracking-wider ${
|
||||
characterClass === cls.value
|
||||
? "text-pixel-gold"
|
||||
: "text-white"
|
||||
}`}
|
||||
>
|
||||
{cls.name}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 leading-tight">
|
||||
{cls.desc}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{characterClass && (
|
||||
<p className="text-pixel-gold text-xs mt-2 uppercase tracking-widest">
|
||||
✓ Classe sélectionnée
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user