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

Add bio field to user model and update related components: Enhance leaderboard and profile features by including a bio field in user data. Update API routes, UI components, and validation logic to support bio input and display, improving user profiles and leaderboard entries.

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-09 22:00:19 +01:00
parent 16b0437ecb
commit 3a0dd57bb6
13 changed files with 147 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/Leaderboard.tsx
View File

@@ -8,6 +8,7 @@ interface LeaderboardEntry {
score: number;
level: number;
avatar?: string | null;
bio?: string | null;
}
// Format number with consistent locale to avoid hydration mismatch
@@ -48,7 +49,7 @@ export default function Leaderboard() {
LEADERBOARD
</h2>
<div className="bg-black/80 border-2 border-pixel-gold/30 rounded-lg overflow-hidden backdrop-blur-sm">
<div className="bg-black/80 border-2 border-pixel-gold/30 rounded-lg backdrop-blur-sm">
{/* Header */}
<div className="bg-gray-900/80 border-b-2 border-pixel-gold/30 grid grid-cols-12 gap-4 p-4 font-bold text-sm text-gray-300">
<div className="col-span-1 text-center">Rank</div>
@@ -58,11 +59,11 @@ export default function Leaderboard() {
</div>
{/* Entries */}
<div className="divide-y divide-pixel-gold/10">
<div className="divide-y divide-pixel-gold/10 overflow-visible">
{leaderboard.map((entry) => (
<div
key={entry.rank}
className={`grid grid-cols-12 gap-4 p-4 hover:bg-gray-900/50 transition ${
className={`grid grid-cols-12 gap-4 p-4 hover:bg-gray-900/50 transition relative ${
entry.rank <= 3 ? "bg-gray-950/50" : "bg-black/40"
}`}
>
@@ -81,10 +82,20 @@ export default function Leaderboard() {
{entry.rank}
</span>
</div>
<div className="col-span-5 flex items-center">
<span className="font-bold text-pixel-gold">
<div className="col-span-5 flex items-center relative group">
<span className="font-bold text-pixel-gold cursor-pointer relative z-10">
{entry.username}
</span>
{entry.bio && (
<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>
</div>
)}
</div>
<div className="col-span-3 text-right flex items-center justify-end">
<span className="font-mono text-gray-300">

23
components/LeaderboardSection.tsx
View File

@@ -6,6 +6,7 @@ interface LeaderboardEntry {
score: number;
level: number;
avatar?: string | null;
bio?: string | null;
}
interface LeaderboardSectionProps {
@@ -23,7 +24,7 @@ export default function LeaderboardSection({
backgroundImage,
}: LeaderboardSectionProps) {
return (
<section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden 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 */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
@@ -57,7 +58,7 @@ export default function LeaderboardSection({
</div>
{/* Leaderboard Table */}
<div className="bg-black/60 border border-pixel-gold/30 rounded-lg overflow-hidden backdrop-blur-sm">
<div className="bg-black/60 border border-pixel-gold/30 rounded-lg backdrop-blur-sm">
{/* Header */}
<div className="bg-gray-900/80 border-b border-pixel-gold/30 grid grid-cols-12 gap-4 p-4 font-bold text-xs uppercase tracking-widest text-gray-300">
<div className="col-span-1 text-center">Rank</div>
@@ -67,11 +68,11 @@ export default function LeaderboardSection({
</div>
{/* Entries */}
<div className="divide-y divide-pixel-gold/10">
<div className="divide-y divide-pixel-gold/10 overflow-visible">
{leaderboard.map((entry) => (
<div
key={entry.rank}
className={`grid grid-cols-12 gap-4 p-4 hover:bg-gray-900/50 transition ${
className={`grid grid-cols-12 gap-4 p-4 hover:bg-gray-900/50 transition relative ${
entry.rank <= 3
? "bg-gradient-to-r from-pixel-gold/10 via-pixel-gold/5 to-transparent"
: "bg-black/40"
@@ -95,7 +96,7 @@ export default function LeaderboardSection({
</div>
{/* Player */}
<div className="col-span-6 flex items-center gap-3">
<div className="col-span-6 flex items-center gap-3 relative group">
{entry.avatar ? (
<div className="w-10 h-10 rounded-full border border-pixel-gold/30 overflow-hidden">
<img
@@ -112,7 +113,7 @@ export default function LeaderboardSection({
</div>
)}
<span
className={`font-bold ${
className={`font-bold cursor-pointer relative z-10 ${
entry.rank <= 3 ? "text-pixel-gold" : "text-white"
}`}
>
@@ -121,6 +122,16 @@ export default function LeaderboardSection({
{entry.rank <= 3 && (
<span className="text-pixel-gold text-xs">✦</span>
)}
{entry.bio && (
<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>
</div>
)}
</div>
{/* Score */}

22
components/ProfileForm.tsx
View File

@@ -8,6 +8,7 @@ interface UserProfile {
email: string;
username: string;
avatar: string | null;
bio: string | null;
hp: number;
maxHp: number;
xp: number;
@@ -38,6 +39,7 @@ 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 fileInputRef = useRef<HTMLInputElement>(null);
const [uploadingAvatar, setUploadingAvatar] = useState(false);
@@ -99,12 +101,14 @@ export default function ProfileForm({
body: JSON.stringify({
username,
avatar,
bio,
}),
});
if (response.ok) {
const data = await response.json();
setProfile(data);
setBio(data.bio || null);
setSuccess("Profil mis à jour avec succès");
setTimeout(() => setSuccess(null), 3000);
} else {
@@ -316,6 +320,24 @@ export default function ProfileForm({
<p className="text-gray-500 text-xs mt-1">3-20 caractères</p>
</div>
{/* Bio Field */}
<div>
<label className="block text-pixel-gold text-sm uppercase tracking-widest mb-2">
Bio
</label>
<textarea
value={bio || ""}
onChange={(e) => setBio(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 resize-none"
rows={4}
maxLength={500}
placeholder="Parlez-nous de vous..."
/>
<p className="text-gray-500 text-xs mt-1">
{(bio || "").length}/500 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">