[QoL] Improve shop readibility (#2267)

* Change Rouge Text Color to green, add black shadow behind name text

* Also added shader to cost text

* Update src/ui/modifier-select-ui-handler.ts

* Changed colors that didnt fit the contrast scaling thanks to @dakurai on discord.

* Removed a useless line and added a comment

* Apply suggestions from code review

Co-authored-by: Dakurei <maxime.palanchini@gmail.com>

* Revert changes

* Change colors for better contrast score (makes reading easier)

  + Corrects colors that were totally white when they should have been f8f8f8 like the others

* Created a new overlay especially for the shop

  + This one is an almost black color with a higher opacity. This makes the shop elements easier to read, as they blend much less into the UI underneath

* Add a filter on modifiers displayed in the shop

  + Add a getModifierBar() getter to retrieve the battle-scene bar directly
  + Modified the updateModifiers() method to filter the items displayed (modifiers held by Pokémon can be hidden)
  + Shop overlay hidding transition lengthened to the same duration as its showing

* Apply suggestion from @bennybroseph

* Apply suggestion from @brain-frog

* Fix - Removal of a warning in the generation of the typedoc for which my modification is responsible

---------

Co-authored-by: Dakurei <maxime.palanchini@gmail.com>

src/battle-scene.ts

@@ -219,6 +219,7 @@ export default class BattleScene extends SceneBase {
   public arenaFlyout: ArenaFlyout;
 
   private fieldOverlay: Phaser.GameObjects.Rectangle;
+  private shopOverlay: Phaser.GameObjects.Rectangle;
   public modifiers: PersistentModifier[];
   private enemyModifiers: PersistentModifier[];
   public uiContainer: Phaser.GameObjects.Container;
@@ -386,6 +387,12 @@ export default class BattleScene extends SceneBase {
     this.fieldOverlay.setAlpha(0);
     this.fieldUI.add(this.fieldOverlay);
 
+    this.shopOverlay = this.add.rectangle(0, overlayHeight * -1 - 48, overlayWidth, overlayHeight, 0x070707);
+    this.shopOverlay.setName("rect-shop-overlay");
+    this.shopOverlay.setOrigin(0, 0);
+    this.shopOverlay.setAlpha(0);
+    this.fieldUI.add(this.shopOverlay);
+
     this.modifiers = [];
     this.enemyModifiers = [];
 
@@ -737,6 +744,14 @@ export default class BattleScene extends SceneBase {
       : ret;
   }
 
+  /**
+   * Returns the ModifierBar of this scene, which is declared private and therefore not accessible elsewhere
+   * @returns {ModifierBar}
+   */
+  getModifierBar(): ModifierBar {
+    return this.modifierBar;
+  }
+
   // store info toggles to be accessible by the ui
   addInfoToggle(infoToggle: InfoToggle): void {
     this.infoToggles.push(infoToggle);
@@ -1397,6 +1412,30 @@ export default class BattleScene extends SceneBase {
     });
   }
 
+  showShopOverlay(duration: integer): Promise<void> {
+    return new Promise(resolve => {
+      this.tweens.add({
+        targets: this.shopOverlay,
+        alpha: 0.95,
+        ease: "Sine.easeOut",
+        duration: duration,
+        onComplete: () => resolve()
+      });
+    });
+  }
+
+  hideShopOverlay(duration: integer): Promise<void> {
+    return new Promise(resolve => {
+      this.tweens.add({
+        targets: this.shopOverlay,
+        alpha: 0,
+        duration: duration,
+        ease: "Cubic.easeIn",
+        onComplete: () => resolve()
+      });
+    });
+  }
+
   showEnemyModifierBar(): void {
     this.enemyModifierBar.setVisible(true);
   }

src/modifier/modifier.ts

@@ -64,13 +64,19 @@ export class ModifierBar extends Phaser.GameObjects.Container {
     this.setScale(0.5);
   }
 
-  updateModifiers(modifiers: PersistentModifier[]) {
+  /**
+   * Method to update content displayed in {@linkcode ModifierBar}
+   * @param {PersistentModifier[]} modifiers - The list of modifiers to be displayed in the {@linkcode ModifierBar}
+   * @param {boolean} hideHeldItems - If set to "true", only modifiers not assigned to a Pokémon are displayed
+   */
+  updateModifiers(modifiers: PersistentModifier[], hideHeldItems: boolean = false) {
     this.removeAll(true);
 
     const visibleIconModifiers = modifiers.filter(m => m.isIconVisible(this.scene as BattleScene));
     const nonPokemonSpecificModifiers = visibleIconModifiers.filter(m => !(m as PokemonHeldItemModifier).pokemonId).sort(modifierSortFunc);
     const pokemonSpecificModifiers = visibleIconModifiers.filter(m => (m as PokemonHeldItemModifier).pokemonId).sort(modifierSortFunc);
-    const sortedVisibleIconModifiers = nonPokemonSpecificModifiers.concat(pokemonSpecificModifiers);
+
+    const sortedVisibleIconModifiers = hideHeldItems ? nonPokemonSpecificModifiers : nonPokemonSpecificModifiers.concat(pokemonSpecificModifiers);
 
     const thisArg = this;
 

src/ui/modifier-select-ui-handler.ts

@@ -180,7 +180,10 @@ export default class ModifierSelectUiHandler extends AwaitableUiHandler {
 
     const maxUpgradeCount = typeOptions.map(to => to.upgradeCount).reduce((max, current) => Math.max(current, max), 0);
 
-    this.scene.showFieldOverlay(750);
+    /* Force updateModifiers without pokemonSpecificModifiers */
+    this.scene.getModifierBar().updateModifiers(this.scene.modifiers, true);
+
+    this.scene.showShopOverlay(750);
     this.scene.updateAndShowText(750);
     this.scene.updateMoneyText();
 
@@ -472,9 +475,12 @@ export default class ModifierSelectUiHandler extends AwaitableUiHandler {
     this.getUi().clearText();
     this.eraseCursor();
 
-    this.scene.hideFieldOverlay(250);
+    this.scene.hideShopOverlay(750);
     this.scene.hideLuckText(250);
 
+    /* Normally already called just after the shop, but not sure if it happens in 100% of cases */
+    this.scene.getModifierBar().updateModifiers(this.scene.modifiers);
+
     const options = this.options.concat(this.shopOptionsRows.flat());
     this.options.splice(0, this.options.length);
     this.shopOptionsRows.splice(0, this.shopOptionsRows.length);

src/ui/text.ts

@@ -198,10 +198,10 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: Ui
   case TextStyle.PARTY_RED:
     return !shadow ? "#f89890" : "#984038";
   case TextStyle.SUMMARY:
-    return !shadow ? "#ffffff" : "#636363";
+    return !shadow ? "#f8f8f8" : "#636363";
   case TextStyle.SUMMARY_ALT:
     if (uiTheme) {
-      return !shadow ? "#ffffff" : "#636363";
+      return !shadow ? "#f8f8f8" : "#636363";
     }
     return !shadow ? "#484848" : "#d0d0c8";
   case TextStyle.SUMMARY_RED:
@@ -233,17 +233,17 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: Ui
 export function getModifierTierTextTint(tier: ModifierTier): integer {
   switch (tier) {
   case ModifierTier.COMMON:
-    return 0xffffff;
+    return 0xf8f8f8;
   case ModifierTier.GREAT:
-    return 0x3890f8;
+    return 0x4998f8;
   case ModifierTier.ULTRA:
     return 0xf8d038;
   case ModifierTier.ROGUE:
-    return 0xd52929;
+    return 0xdb4343;
   case ModifierTier.MASTER:
-    return 0xe020c0;
+    return 0xe331c5;
   case ModifierTier.LUXURY:
-    return 0xe64a18;
+    return 0xe74c18;
   }
 }