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 */}
<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 ? (
<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
src={entry.avatar}
alt={entry.username}
className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.style.display = "none";
e.currentTarget.nextElementSibling?.classList.remove(
"hidden"
);
}}
/>
</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">
<span className="text-pixel-gold text-[10px] sm:text-xs font-bold">
) : null}
<div
className={`w-full h-full flex items-center justify-center text-pixel-gold text-[10px] sm:text-xs font-bold ${
entry.avatar ? "hidden" : ""
}`}
>
{entry.username.charAt(0).toUpperCase()}
</span>
</div>
)}
</div>
<div
className="flex items-center gap-1 sm:gap-2 cursor-pointer hover:opacity-80 transition min-w-0"
onClick={() => setSelectedEntry(entry)}
@@ -206,21 +213,28 @@ export default function LeaderboardSection({
{/* Avatar and Class */}
<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 ? (
<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
src={selectedEntry.avatar}
alt={selectedEntry.username}
className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.style.display = "none";
e.currentTarget.nextElementSibling?.classList.remove(
"hidden"
);
}}
/>
</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">
<span className="text-pixel-gold text-2xl sm:text-4xl font-bold">
) : null}
<div
className={`w-full h-full flex items-center justify-center text-pixel-gold text-2xl sm:text-4xl font-bold ${
selectedEntry.avatar ? "hidden" : ""
}`}
>
{selectedEntry.username.charAt(0).toUpperCase()}
</span>
</div>
)}
</div>
<div>
<div className="text-xs text-gray-400 uppercase tracking-widest mb-2">
Rank #{selectedEntry.rank}