Converted badges to inventory (#3209)

* added inventory type

* new badges

* fixed badges not showing on all time leaderboards

* sending the selected badge id to daily lb

* returning inventory in profiles

* updated types to support inventory and single badge id

* fixed all badges not showing on profile page

* removed await

* smol refactor

backend/src/api/controllers/result.ts

@@ -330,6 +330,9 @@ export async function addResult(
     (process.env.MODE === "dev" || (user.timeTyping ?? 0) > 7200);
 
   if (dailyLeaderboard && validResultCriteria) {
+    //get the selected badge id
+    const badgeId = user.inventory?.badges?.find((b) => b.selected)?.id;
+
     incrementDailyLeaderboard(result.mode, result.mode2, result.language);
     dailyLeaderboardRank = await dailyLeaderboard.addResult(
       {
@@ -342,7 +345,7 @@ export async function addResult(
         uid,
         discordAvatar: user.discordAvatar,
         discordId: user.discordId,
-        badgeIds: user.badgeIds,
+        badgeId,
       },
       dailyLeaderboardsConfig
     );

backend/src/api/controllers/user.ts

@@ -385,7 +385,7 @@ export async function getProfile(
   const {
     name,
     banned,
-    badgeIds,
+    inventory,
     profileDetails,
     personalBests,
     completedTests,
@@ -426,7 +426,7 @@ export async function getProfile(
 
   const profileData = {
     ...baseProfile,
-    badgeIds,
+    inventory,
     details: {
       bio: "",
       keyboard: "",

backend/src/dal/leaderboards.ts

@@ -90,7 +90,7 @@ export async function update(
             [str + ".name"]: "$name",
             [str + ".discordId"]: "$discordId",
             [str + ".discordAvatar"]: "$discordAvatar",
-            [str + ".badgeIds"]: "$badgeIds",
+            [str + ".badges"]: "$inventory.badges",
           },
         },
         {
@@ -118,6 +118,14 @@ export async function update(
     if (uid && lbEntry.uid === uid) {
       retval = index + 1;
     }
+
+    // extract selected badge
+    if (lbEntry.badges) {
+      lbEntry.badgeId = lbEntry.badges.filter(
+        (badge) => badge.selected === true
+      )[0].id;
+      delete lbEntry.badges;
+    }
   });
   const end2 = performance.now();
   const start3 = performance.now();

backend/src/types/types.d.ts

@@ -112,9 +112,18 @@ declare namespace MonkeyTypes {
     favoriteQuotes?: Record<string, string[]>;
     needsToChangeName?: boolean;
     discordAvatar?: string;
-    badgeIds?: number[];
     resultFilterPresets?: ResultFilters[];
     profileDetails?: UserProfileDetails;
+    inventory?: UserInventory;
+  }
+
+  interface UserInventory {
+    badges: Badge[];
+  }
+
+  interface Badge {
+    id: number;
+    selected?: boolean;
   }
 
   interface ResultFilters {
@@ -209,6 +218,8 @@ declare namespace MonkeyTypes {
     uid: string;
     name: string;
     rank: number;
+    badges?: Badge[];
+    badgeId?: number;
   }
 
   interface CustomTheme {

backend/src/utils/daily-leaderboards.ts

@@ -15,7 +15,7 @@ interface DailyLeaderboardEntry {
   count?: number;
   discordAvatar?: string;
   discordId?: string;
-  badgeIds?: number[];
+  badgeId?: number;
 }
 
 const dailyLeaderboardNamespace = "monkeytypes:dailyleaderboard";

frontend/src/ts/db.ts

@@ -95,7 +95,7 @@ export async function initSnapshot(): Promise<
       userData.favouriteThemes === undefined ? [] : userData.favouriteThemes;
     snap.details = userData.profileDetails;
     snap.addedAt = userData.addedAt;
-    snap.badgeIds = userData.badgeIds;
+    snap.inventory = userData.inventory;
 
     if (userData.lbMemory?.time15 || userData.lbMemory?.time60) {
       //old memory format

frontend/src/ts/elements/leaderboards.ts

@@ -323,7 +323,7 @@ async function fillTable(lb: LbKey, prepend?: number): Promise<void> {
     <td>
     <div class="avatarNameBadge">${avatar}
       <span class="entryName" uid=${entry.uid}>${entry.name}</span>
-      ${entry.badgeIds ? getBadgeHTMLbyId(entry.badgeIds[0]) : ""}
+      ${entry.badgeId ? getBadgeHTMLbyId(entry.badgeId) : ""}
     </div>
     </td>
     <td class="alignRight">${(Config.alwaysShowCPM

frontend/src/ts/elements/profile.ts

@@ -38,15 +38,20 @@ export async function update(
     }
   }
 
-  if (profile.badgeIds && !banned) {
-    const firstBadgeId = profile.badgeIds[0];
-    const restOfBadges = profile.badgeIds.filter((bid) => bid !== firstBadgeId);
-    const miniBadges = restOfBadges
-      .map((bid) => getHTMLById(bid, true))
-      .join("");
+  if (profile.inventory?.badges && !banned) {
+    let mainHtml = "";
+    let restHtml = "";
 
-    details.find(".badges").empty().append(getHTMLById(firstBadgeId));
-    details.find(".allBadges").empty().append(miniBadges);
+    for (const badge of profile.inventory.badges) {
+      if (badge.selected === true) {
+        mainHtml = getHTMLById(badge.id);
+      } else {
+        restHtml += getHTMLById(badge.id, true);
+      }
+    }
+
+    details.find(".badges").empty().append(mainHtml);
+    details.find(".allBadges").empty().append(restHtml);
   }
 
   details.find(".name").text(profile.name);

frontend/src/ts/pages/profile.ts

@@ -19,6 +19,7 @@ function reset(): void {
           <div>
             <div class="name">-</div>
             <div class="badges"></div>
+            <div class="allBadges"></div>
             <div class="joined" data-balloon-pos="up">-</div>
           </div>
         </div>

frontend/src/ts/types/types.d.ts

@@ -433,7 +433,7 @@ declare namespace MonkeyTypes {
     name: string;
     discordId?: string;
     discordAvatar?: string;
-    badgeIds?: number[];
+    badgeId?: number;
     rank: number;
     count?: number;
     hidden?: boolean;
@@ -466,7 +466,7 @@ declare namespace MonkeyTypes {
     needsToChangeName?: boolean;
     discordAvatar?: string;
     details?: UserDetails;
-    badgeIds?: number[];
+    inventory?: UserInventory;
     addedAt: number;
     filterPresets: ResultFilters[];
   }
@@ -481,6 +481,15 @@ declare namespace MonkeyTypes {
     };
   }
 
+  interface UserInventory {
+    badges: Badge[];
+  }
+
+  interface Badge {
+    id: number;
+    selected?: boolean;
+  }
+
   type FavoriteQuotes = Record<string, string[]>;
 
   // Converting this to an interface causes a TS error

frontend/static/html/pages/profile.html

@@ -15,6 +15,7 @@
           <div>
             <div class="name">-</div>
             <div class="badges"></div>
+            <div class="allBadges"></div>
             <div class="joined" data-balloon-pos="up">-</div>
           </div>
         </div>