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

Refactor avatar display logic in LeaderboardSection: Simplify avatar rendering by consolidating conditional checks and enhancing fallback display for users without avatars, improving visual consistency and user experience.
Some checks failed
Deploy with Docker Compose / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-12 08:09:12 +01:00
parent 369c83d162
commit db2993c50b
1 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/LeaderboardSection.tsx
View File

@@ -105,21 +105,28 @@ export default function LeaderboardSection({
{/* Player */} {/* Player */}
<div className="col-span-5 sm:col-span-6 flex items-center gap-2 sm:gap-3 min-w-0"> <div className="col-span-5 sm:col-span-6 flex items-center gap-2 sm:gap-3 min-w-0">
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-pixel-gold/30 overflow-hidden bg-black/60 flex-shrink-0">
{entry.avatar ? ( {entry.avatar ? (
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-pixel-gold/30 overflow-hidden flex-shrink-0">
<img <img
src={entry.avatar} src={entry.avatar}
alt={entry.username} alt={entry.username}
className="w-full h-full object-cover" className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.style.display = "none";
e.currentTarget.nextElementSibling?.classList.remove(
"hidden"
);
}}
/> />
</div> ) : null}
) : ( <div
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-pixel-gold/30 flex items-center justify-center flex-shrink-0"> className={`w-full h-full flex items-center justify-center text-pixel-gold text-[10px] sm:text-xs font-bold ${
<span className="text-pixel-gold text-[10px] sm:text-xs font-bold"> entry.avatar ? "hidden" : ""
}`}
>
{entry.username.charAt(0).toUpperCase()} {entry.username.charAt(0).toUpperCase()}
</span>
</div> </div>
)} </div>
<div <div
className="flex items-center gap-1 sm:gap-2 cursor-pointer hover:opacity-80 transition min-w-0" className="flex items-center gap-1 sm:gap-2 cursor-pointer hover:opacity-80 transition min-w-0"
onClick={() => setSelectedEntry(entry)} onClick={() => setSelectedEntry(entry)}
@@ -206,21 +213,28 @@ export default function LeaderboardSection({
{/* Avatar and Class */} {/* Avatar and Class */}
<div className="flex items-center gap-4 sm:gap-6 mb-6"> <div className="flex items-center gap-4 sm:gap-6 mb-6">
<div className="w-16 h-16 sm:w-24 sm:h-24 rounded-full border-2 sm:border-4 border-pixel-gold/50 overflow-hidden bg-black/60 flex-shrink-0">
{selectedEntry.avatar ? ( {selectedEntry.avatar ? (
<div className="w-16 h-16 sm:w-24 sm:h-24 rounded-full border-2 sm:border-4 border-pixel-gold/50 overflow-hidden flex-shrink-0">
<img <img
src={selectedEntry.avatar} src={selectedEntry.avatar}
alt={selectedEntry.username} alt={selectedEntry.username}
className="w-full h-full object-cover" className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.style.display = "none";
e.currentTarget.nextElementSibling?.classList.remove(
"hidden"
);
}}
/> />
</div> ) : null}
) : ( <div
<div className="w-16 h-16 sm:w-24 sm:h-24 rounded-full border-2 sm:border-4 border-pixel-gold/50 bg-gray-900 flex items-center justify-center flex-shrink-0"> className={`w-full h-full flex items-center justify-center text-pixel-gold text-2xl sm:text-4xl font-bold ${
<span className="text-pixel-gold text-2xl sm:text-4xl font-bold"> selectedEntry.avatar ? "hidden" : ""
}`}
>
{selectedEntry.username.charAt(0).toUpperCase()} {selectedEntry.username.charAt(0).toUpperCase()}
</span>
</div> </div>
)} </div>
<div> <div>
<div className="text-xs text-gray-400 uppercase tracking-widest mb-2"> <div className="text-xs text-gray-400 uppercase tracking-widest mb-2">
Rank #{selectedEntry.rank} Rank #{selectedEntry.rank}