From 071043f08e04d604c9b35f62ae622442865047c7 Mon Sep 17 00:00:00 2001
From: Bruce Berrios <58147810+Bruception@users.noreply.github.com>
Date: Thu, 9 Jun 2022 14:25:55 -0400
Subject: [PATCH] Refactor avatar logic and badges (#3086)

---
 .../src/ts/controllers/badge-controller.ts    | 20 ++++++++-----------
 frontend/src/ts/elements/leaderboards.ts      | 17 ++++++++++------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/frontend/src/ts/controllers/badge-controller.ts b/frontend/src/ts/controllers/badge-controller.ts
index 869a6ae8d..1ced61012 100644
--- a/frontend/src/ts/controllers/badge-controller.ts
+++ b/frontend/src/ts/controllers/badge-controller.ts
@@ -1,5 +1,5 @@
-const badges: MonkeyTypes.UserBadge[] = [
-  {
+const badges: Record<number, MonkeyTypes.UserBadge> = {
+  1: {
     id: 1,
     name: "Developer",
     description: "I made this",
@@ -7,7 +7,7 @@ const badges: MonkeyTypes.UserBadge[] = [
     color: "white",
     customStyle: "animation: rgb-bg 10s linear infinite;",
   },
-  {
+  2: {
     id: 2,
     name: "Collaborator",
     description: "I helped make this",
@@ -15,7 +15,7 @@ const badges: MonkeyTypes.UserBadge[] = [
     color: "white",
     customStyle: "animation: rgb-bg 10s linear infinite;",
   },
-  {
+  3: {
     id: 3,
     name: "Server Mod",
     description: "Discord server moderator",
@@ -23,7 +23,7 @@ const badges: MonkeyTypes.UserBadge[] = [
     color: "white",
     customStyle: "animation: rgb-bg 10s linear infinite;",
   },
-  {
+  4: {
     id: 4,
     name: "OG Account",
     description: "First 100 users on the site",
@@ -31,7 +31,7 @@ const badges: MonkeyTypes.UserBadge[] = [
     color: "var(--bg-color)",
     background: "var(--main-color)",
   },
-  {
+  5: {
     id: 5,
     name: "OG Discordian",
     description: "First 100 Discord server members",
@@ -39,14 +39,10 @@ const badges: MonkeyTypes.UserBadge[] = [
     color: "var(--bg-color)",
     background: "var(--main-color)",
   },
-];
-
-export function getById(id: number): MonkeyTypes.UserBadge | undefined {
-  return badges.find((b) => b.id === id);
-}
+};
 
 export function getHTMLById(id: number): string {
-  const badge = getById(id);
+  const badge = badges[id];
   if (!badge) {
     return "";
   }
diff --git a/frontend/src/ts/elements/leaderboards.ts b/frontend/src/ts/elements/leaderboards.ts
index 240ae9114..d3cb71021 100644
--- a/frontend/src/ts/elements/leaderboards.ts
+++ b/frontend/src/ts/elements/leaderboards.ts
@@ -275,15 +275,20 @@ function fillTable(lb: LbKey, prepend?: number): void {
     let avatar = `<div class="avatarPlaceholder"><i class="fas fa-user-circle"></i></div>`;
 
     const snap = DB.getSnapshot();
-    if (
+
+    const isCurrentUser =
       Auth.currentUser &&
       entry.uid === Auth.currentUser.uid &&
       snap.discordAvatar &&
-      snap.discordId
-    ) {
-      avatar = `<div class="avatar" style="background-image:url(https://cdn.discordapp.com/avatars/${snap.discordId}/${snap.discordAvatar}.png)"></div>`;
-    } else if (entry.discordAvatar && entry.discordId) {
-      avatar = `<div class="avatar" style="background-image:url(https://cdn.discordapp.com/avatars/${entry.discordId}/${entry.discordAvatar}.png)"></div>`;
+      snap.discordId;
+
+    const entryHasAvatar = entry.discordAvatar && entry.discordId;
+
+    const avatarSource = (isCurrentUser && snap) || (entryHasAvatar && entry);
+
+    if (avatarSource) {
+      const avatarUrl = `https://cdn.discordapp.com/avatars/${avatarSource.discordId}/${avatarSource.discordAvatar}.png?size=32`;
+      avatar = `<div class="avatar" style="background-image:url(${avatarUrl})"></div>`;
     }
 
     html += `