[UI/UX][Beta][Bug] Fix ribbons using wrong index when showMissingRibbons is off (#6648)

Fix ribbons using wrong index when showMissingRibbons is off

src/system/ribbons/ribbon-data.ts

@@ -73,28 +73,39 @@ export class RibbonData {
   public static readonly MONO_GEN_9 = 0x4000000n as RibbonFlag;
   //#endregion Monogen ribbons
 
+  // biome-ignore format: manual
   /** Ribbon for winning classic */
-  public static readonly CLASSIC = 0x8000000n as RibbonFlag;
+  public static readonly CLASSIC        = 0x0008000000n as RibbonFlag;
+  // biome-ignore format: manual
   /** Ribbon for winning the nuzzlocke challenge */
-  public static readonly NUZLOCKE = 0x10000000n as RibbonFlag;
+  public static readonly NUZLOCKE       = 0x0010000000n as RibbonFlag;
+  // biome-ignore format: manual
   /** Ribbon for reaching max friendship */
-  public static readonly FRIENDSHIP = 0x20000000n as RibbonFlag;
+  public static readonly FRIENDSHIP     = 0x0020000000n as RibbonFlag;
+  // biome-ignore format: manual
   /** Ribbon for winning the flip stats challenge */
-  public static readonly FLIP_STATS = 0x40000000n as RibbonFlag;
+  public static readonly FLIP_STATS     = 0x0040000000n as RibbonFlag;
+  // biome-ignore format: manual
   /** Ribbon for winning the inverse challenge */
-  public static readonly INVERSE = 0x80000000n as RibbonFlag;
+  public static readonly INVERSE        = 0x0080000000n as RibbonFlag;
+  // biome-ignore format: manual
   /** Ribbon for winning the fresh start challenge */
-  public static readonly FRESH_START = 0x100000000n as RibbonFlag;
+  public static readonly FRESH_START    = 0x0100000000n as RibbonFlag;
+  // biome-ignore format: manual
   /** Ribbon for winning the hardcore challenge */
-  public static readonly HARDCORE = 0x200000000n as RibbonFlag;
+  public static readonly HARDCORE       = 0x0200000000n as RibbonFlag;
+  // biome-ignore format: manual
   /** Ribbon for winning the limited catch challenge */
-  public static readonly LIMITED_CATCH = 0x400000000n as RibbonFlag;
+  public static readonly LIMITED_CATCH  = 0x0400000000n as RibbonFlag;
+  // biome-ignore format: manual
   /** Ribbon for winning the limited support challenge set to no heal */
-  public static readonly NO_HEAL = 0x800000000n as RibbonFlag;
+  public static readonly NO_HEAL        = 0x0800000000n as RibbonFlag;
+  // biome-ignore format: manual
   /** Ribbon for winning the limited uspport challenge set to no shop */
-  public static readonly NO_SHOP = 0x1000000000n as RibbonFlag;
+  public static readonly NO_SHOP        = 0x1000000000n as RibbonFlag;
+  // biome-ignore format: manual
   /** Ribbon for winning the limited support challenge set to both*/
-  public static readonly NO_SUPPORT = 0x2000000000n as RibbonFlag;
+  public static readonly NO_SUPPORT     = 0x2000000000n as RibbonFlag;
 
   // NOTE: max possible ribbon flag is 0x20000000000000 (53 total ribbons)
   // Once this is exceeded, bitfield needs to be changed to a bigint or even a uint array

src/ui/containers/ribbon-tray-container.ts

@@ -111,21 +111,18 @@ export class RibbonTray extends Phaser.GameObjects.Container {
   }
 
   open(species: PokemonSpecies): boolean {
-    this.ribbons = getAvailableRibbons(species);
+    const ribbons: RibbonFlag[] = (this.ribbons = []);
 
     this.ribbonData = globalScene.gameData.dexData[species.speciesId].ribbons;
 
-    this.trayNumIcons = this.ribbons.length;
-    this.trayRows =
-      Math.floor(this.trayNumIcons / this.maxColumns) + (this.trayNumIcons % this.maxColumns === 0 ? 0 : 1);
-    this.trayColumns = Math.min(this.trayNumIcons, this.maxColumns);
-
-    this.trayBg.setSize(15 + this.trayColumns * 17, 8 + this.trayRows * 18);
-
     this.trayIcons = [];
     let index = 0;
-    for (const ribbon of this.ribbons) {
+    for (const ribbon of getAvailableRibbons(species)) {
       const hasRibbon = this.ribbonData.has(ribbon);
+      if (!hasRibbon && !globalScene.dexForDevs && !globalScene.showMissingRibbons) {
+        continue;
+      }
+      ribbons.push(ribbon);
 
       const icon = ribbonFlagToAssetKey(ribbon);
 
@@ -145,6 +142,12 @@ export class RibbonTray extends Phaser.GameObjects.Container {
       }
     }
 
+    this.trayNumIcons = ribbons.length;
+    this.trayRows =
+      Math.floor(this.trayNumIcons / this.maxColumns) + (this.trayNumIcons % this.maxColumns === 0 ? 0 : 1);
+    this.trayColumns = Math.min(this.trayNumIcons, this.maxColumns);
+    this.trayBg.setSize(15 + this.trayColumns * 17, 8 + this.trayRows * 18);
+
     this.setVisible(true).setTrayCursor(0);
 
     return true;

src/utils/ribbon-utils.ts

@@ -84,11 +84,35 @@ export function getAvailableRibbons(species: PokemonSpecies): RibbonFlag[] {
   return ribbons.concat(extraRibbons);
 }
 
+/**
+ * Get the locale key for the given ribbon flag
+ * @param flag - The ribbon flag to get the key for
+ */
 export function getRibbonKey(flag: RibbonFlag): string {
-  for (const [key, value] of Object.entries(RibbonData)) {
+  switch (flag) {
-    if (typeof value === "bigint" && value === flag) {
+    case RibbonData.CLASSIC:
-      return key;
+      return "CLASSIC";
-    }
+    case RibbonData.NUZLOCKE:
+      return "NUZLOCKE";
+    case RibbonData.FRIENDSHIP:
+      return "FRIENDSHIP";
+    case RibbonData.FLIP_STATS:
+      return "FLIP_STATS";
+    case RibbonData.INVERSE:
+      return "INVERSE";
+    case RibbonData.FRESH_START:
+      return "FRESH_START";
+    case RibbonData.HARDCORE:
+      return "HARDCORE";
+    case RibbonData.LIMITED_CATCH:
+      return "LIMITED_CATCH";
+    case RibbonData.NO_HEAL:
+      return "NO_HEAL";
+    case RibbonData.NO_SHOP:
+      return "NO_SHOP";
+    case RibbonData.NO_SUPPORT:
+      return "NO_SUPPORT";
+    default:
+      return "";
   }
-  return "";
 }