From cf5fa887e95afbdc230a81acf574e353c9e4d1b7 Mon Sep 17 00:00:00 2001 From: Jannik Tappert <38758606+CodeTappert@users.noreply.github.com> Date: Sat, 22 Jun 2024 01:04:25 +0200 Subject: [PATCH] [QoL] Improve shop readibility (#2267) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * 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 --- src/battle-scene.ts | 39 ++++++++++++++++++++++++++++ src/modifier/modifier.ts | 10 +++++-- src/ui/modifier-select-ui-handler.ts | 10 +++++-- src/ui/text.ts | 14 +++++----- 4 files changed, 62 insertions(+), 11 deletions(-) diff --git a/src/battle-scene.ts b/src/battle-scene.ts index 43224ab074b..2bafa6f417b 100644 --- a/src/battle-scene.ts +++ b/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 { + return new Promise(resolve => { + this.tweens.add({ + targets: this.shopOverlay, + alpha: 0.95, + ease: "Sine.easeOut", + duration: duration, + onComplete: () => resolve() + }); + }); + } + + hideShopOverlay(duration: integer): Promise { + 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); } diff --git a/src/modifier/modifier.ts b/src/modifier/modifier.ts index 626d744eef2..b28d4e3b5b3 100644 --- a/src/modifier/modifier.ts +++ b/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; diff --git a/src/ui/modifier-select-ui-handler.ts b/src/ui/modifier-select-ui-handler.ts index 09f73ac2749..34c3c4bbd06 100644 --- a/src/ui/modifier-select-ui-handler.ts +++ b/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); diff --git a/src/ui/text.ts b/src/ui/text.ts index 046abce2d87..dd1ac57523a 100644 --- a/src/ui/text.ts +++ b/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; } }