added avatars to leaderboards

frontend/src/styles/core.scss

@@ -444,3 +444,13 @@ key {
   gap: 0.5rem;
   text-decoration: none;
 }
+
+.avatar {
+  transition: opacity 0.125s, filter 0.125s, webkit-filter 0.125s;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 100%;
+  background-position: center center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}

frontend/src/styles/leaderboards.scss

@@ -119,6 +119,23 @@
         border-spacing: 0;
         border-collapse: collapse;
 
+        .avatarAndName {
+          display: grid;
+          grid-template-columns: 1.25rem auto;
+          gap: 0.5rem;
+          place-items: center left;
+          .avatarPlaceholder {
+            width: 1.25rem;
+            height: 1.25rem;
+            font-size: 1.25rem;
+            // background: var(--sub-color);
+            color: var(--sub-color);
+            // display: grid;
+            // place-content: center center;
+            border-radius: 100%;
+          }
+        }
+
         tr td:first-child {
           text-align: center;
         }

frontend/src/styles/nav.scss

@@ -33,13 +33,6 @@
       }
 
       .avatar {
-        transition: opacity 0.125s, filter 0.125s, webkit-filter 0.125s;
-        width: 1.25rem;
-        height: 1.25rem;
-        border-radius: 100%;
-        background-position: center center;
-        background-size: contain;
-        background-repeat: no-repeat;
         filter: saturate(0);
         -webkit-filter: saturate(0);
       }

frontend/src/ts/elements/leaderboards.ts

@@ -272,12 +272,18 @@ function fillTable(lb: LbKey, prepend?: number): void {
       entry.rank = i + 1;
     }
 
+    let avatar = `<div class="avatarPlaceholder"><i class="fas fa-user-circle"></i></div>`;
+
+    if (entry.discordAvatar && entry.discordId) {
+      avatar = `<div class="avatar" style="background-image:url(https://cdn.discordapp.com/avatars/${entry.discordId}/${entry.discordAvatar}.png)"></div>`;
+    }
+
     html += `
     <tr ${meClassString}>
     <td>${
       entry.rank === 1 ? '<i class="fas fa-fw fa-crown"></i>' : entry.rank
     }</td>
-    <td>${entry.name}</td>
+    <td><div class="avatarAndName">${avatar}${entry.name}</div></td>
     <td class="alignRight">${(Config.alwaysShowCPM
       ? entry.wpm * 5
       : entry.wpm