From db2993c50b6bebe097eabf577e7f1eb687288a8b Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 12 Dec 2025 08:09:12 +0100
Subject: [PATCH] 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.

---
 components/LeaderboardSection.tsx | 50 ++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/components/LeaderboardSection.tsx b/components/LeaderboardSection.tsx
index f12dcb0..5f0ca8e 100644
--- a/components/LeaderboardSection.tsx
+++ b/components/LeaderboardSection.tsx
@@ -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">
-                  {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">
+                  <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 ? (
                       <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"
+                          );
+                        }}
                       />
+                    ) : 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()}
                     </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">
-                        {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">
-                {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">
+                <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 ? (
                     <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"
+                        );
+                      }}
                     />
+                  ) : 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()}
                   </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">
-                      {selectedEntry.username.charAt(0).toUpperCase()}
-                    </span>
-                  </div>
-                )}
+                </div>
                 <div>
                   <div className="text-xs text-gray-400 uppercase tracking-widest mb-2">
                     Rank #{selectedEntry.rank}