Merge 6947e46316 into 51bb80cb66

* [bug] fix scrollable elements not resetting properly

* [ui] add wrap around and scrolling bar to the achievements menu

* [ui] add scrollbar to the settings

README.md

@@ -56,7 +56,7 @@ Check out [Github Issues](https://github.com/pagefaultgames/pokerogue/issues) to
   - Pokémon Legends: Arceus
   - Pokémon Scarlet/Violet
   - Firel (Custom Ice Cave, Laboratory, Metropolis, Plains, Power Plant, Seabed, Space, and Volcano biome music)
-  - Lmz (Custom Jungle biome music)
+  - Lmz (Custom Ancient Ruins, Jungle, and Lake biome music)
   - Andr06 (Custom Slum and Sea biome music)
 
 ### 🎵 Sound Effects

src/battle-scene.ts

@@ -25,7 +25,7 @@ import {
   modifierTypes, PokemonHeldItemModifierType
 } from "./modifier/modifier-type";
 import AbilityBar from "./ui/ability-bar";
-import { BlockItemTheftAbAttr, DoubleBattleChanceAbAttr, ChangeMovePriorityAbAttr, PostBattleInitAbAttr, applyAbAttrs, applyPostBattleInitAbAttrs } from "./data/ability";
+import { BlockItemTheftAbAttr, DoubleBattleChanceAbAttr, PostBattleInitAbAttr, applyAbAttrs, applyPostBattleInitAbAttrs } from "./data/ability";
 import { allAbilities } from "./data/ability";
 import Battle, { BattleType, FixedBattleConfig } from "./battle";
 import { GameMode, GameModes, getGameMode } from "./game-mode";
@@ -2326,17 +2326,6 @@ export default class BattleScene extends SceneBase {
     return false;
   }
 
-  pushMovePhase(movePhase: MovePhase, priorityOverride?: integer): void {
-    const movePriority = new Utils.IntegerHolder(priorityOverride !== undefined ? priorityOverride : movePhase.move.getMove().priority);
-    applyAbAttrs(ChangeMovePriorityAbAttr, movePhase.pokemon, null, false, movePhase.move.getMove(), movePriority);
-    const lowerPriorityPhase = this.phaseQueue.find(p => p instanceof MovePhase && p.move.getMove().priority < movePriority.value);
-    if (lowerPriorityPhase) {
-      this.phaseQueue.splice(this.phaseQueue.indexOf(lowerPriorityPhase), 0, movePhase);
-    } else {
-      this.pushPhase(movePhase);
-    }
-  }
-
   /**
    * Tries to add the input phase to index before target phase in the phaseQueue, else simply calls unshiftPhase()
    * @param phase {@linkcode Phase} the phase to be added

src/data/move.ts

@@ -3974,18 +3974,17 @@ export class StatusCategoryOnAllyAttr extends VariableMoveCategoryAttr {
 export class ShellSideArmCategoryAttr extends VariableMoveCategoryAttr {
   apply(user: Pokemon, target: Pokemon, move: Move, args: any[]): boolean {
     const category = (args[0] as Utils.NumberHolder);
-    const atkRatio = user.getEffectiveStat(Stat.ATK, target, move) / target.getEffectiveStat(Stat.DEF, user, move);
-    const specialRatio = user.getEffectiveStat(Stat.SPATK, target, move) / target.getEffectiveStat(Stat.SPDEF, user, move);
 
-    // Shell Side Arm is much more complicated than it looks, this is a partial implementation to try to achieve something similar to the games
-    if (atkRatio > specialRatio) {
+    const predictedPhysDmg = target.getBaseDamage(user, move, MoveCategory.PHYSICAL, true, true);
+    const predictedSpecDmg = target.getBaseDamage(user, move, MoveCategory.SPECIAL, true, true);
+
+    if (predictedPhysDmg > predictedSpecDmg) {
       category.value = MoveCategory.PHYSICAL;
       return true;
-    } else if (atkRatio === specialRatio && user.randSeedInt(2) === 0) {
+    } else if (predictedPhysDmg === predictedSpecDmg && user.randSeedInt(2) === 0) {
       category.value = MoveCategory.PHYSICAL;
       return true;
     }
-
     return false;
   }
 }
@@ -9106,7 +9105,7 @@ export function initMoves() {
     new AttackMove(Moves.SHELL_SIDE_ARM, Type.POISON, MoveCategory.SPECIAL, 90, 100, 10, 20, 0, 8)
       .attr(ShellSideArmCategoryAttr)
       .attr(StatusEffectAttr, StatusEffect.POISON)
-      .partial(),
+      .partial(), // Physical version of the move does not make contact
     new AttackMove(Moves.MISTY_EXPLOSION, Type.FAIRY, MoveCategory.SPECIAL, 100, 100, 5, -1, 0, 8)
       .attr(SacrificialAttr)
       .target(MoveTarget.ALL_NEAR_OTHERS)

src/field/arena.ts

@@ -391,16 +391,16 @@ export class Arena {
     return true;
   }
 
-  isMoveWeatherCancelled(user: Pokemon, move: Move) {
-    return this.weather && !this.weather.isEffectSuppressed(this.scene) && this.weather.isMoveWeatherCancelled(user, move);
+  isMoveWeatherCancelled(user: Pokemon, move: Move): boolean {
+    return (this.weather && !this.weather.isEffectSuppressed(this.scene) && this.weather.isMoveWeatherCancelled(user, move)) as boolean;
   }
 
-  isMoveTerrainCancelled(user: Pokemon, targets: BattlerIndex[], move: Move) {
-    return this.terrain && this.terrain.isMoveTerrainCancelled(user, targets, move);
+  isMoveTerrainCancelled(user: Pokemon, targets: BattlerIndex[], move: Move): boolean {
+    return (this.terrain && this.terrain.isMoveTerrainCancelled(user, targets, move)) as boolean;
   }
 
   getTerrainType(): TerrainType {
-    return this.terrain?.terrainType || TerrainType.NONE;
+    return this.terrain?.terrainType ?? TerrainType.NONE;
   }
 
   getAttackTypeMultiplier(attackType: Type, grounded: boolean): number {
@@ -762,7 +762,7 @@ export class Arena {
     case Biome.BEACH:
       return 3.462;
     case Biome.LAKE:
-      return 5.350;
+      return 7.215;
     case Biome.SEABED:
       return 2.600;
     case Biome.MOUNTAIN:
@@ -788,7 +788,7 @@ export class Arena {
     case Biome.FACTORY:
       return 4.985;
     case Biome.RUINS:
-      return 2.270;
+      return 0.000;
     case Biome.WASTELAND:
       return 6.336;
     case Biome.ABYSS:

src/field/pokemon.ts

@@ -2322,11 +2322,61 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
     return accuracyMultiplier.value / evasionMultiplier.value;
   }
 
+  /**
+   * Calculates the base damage of the given move against this Pokemon when attacked by the given source.
+   * Used during damage calculation and for Shell Side Arm's forecasting effect.
+   * @param source the attacking {@linkcode Pokemon}.
+   * @param move the {@linkcode Move} used in the attack.
+   * @param moveCategory the move's {@linkcode MoveCategory} after variable-category effects are applied.
+   * @param ignoreAbility if `true`, ignores this Pokemon's defensive ability effects (defaults to `false`).
+   * @param ignoreSourceAbility if `true`, ignore's the attacking Pokemon's ability effects (defaults to `false`).
+   * @param isCritical if `true`, calculates effective stats as if the hit were critical (defaults to `false`).
+   * @param simulated if `true`, suppresses changes to game state during calculation (defaults to `true`).
+   * @returns The move's base damage against this Pokemon when used by the source Pokemon.
+   */
+  getBaseDamage(source: Pokemon, move: Move, moveCategory: MoveCategory, ignoreAbility: boolean = false, ignoreSourceAbility: boolean = false, isCritical: boolean = false, simulated: boolean = true): number {
+    const isPhysical = moveCategory === MoveCategory.PHYSICAL;
+
+    /** A base damage multiplier based on the source's level */
+    const levelMultiplier = (2 * source.level / 5 + 2);
+
+    /** The power of the move after power boosts from abilities, etc. have applied */
+    const power = move.calculateBattlePower(source, this, simulated);
+
+    /**
+     * The attacker's offensive stat for the given move's category.
+     * Critical hits cause negative stat stages to be ignored.
+     */
+    const sourceAtk = new Utils.NumberHolder(source.getEffectiveStat(isPhysical ? Stat.ATK : Stat.SPATK, this, undefined, ignoreSourceAbility, ignoreAbility, isCritical, simulated));
+    applyMoveAttrs(VariableAtkAttr, source, this, move, sourceAtk);
+
+    /**
+     * This Pokemon's defensive stat for the given move's category.
+     * Critical hits cause positive stat stages to be ignored.
+     */
+    const targetDef = new Utils.NumberHolder(this.getEffectiveStat(isPhysical ? Stat.DEF : Stat.SPDEF, source, move, ignoreAbility, ignoreSourceAbility, isCritical, simulated));
+    applyMoveAttrs(VariableDefAttr, source, this, move, targetDef);
+
+    /**
+     * The attack's base damage, as determined by the source's level, move power
+     * and Attack stat as well as this Pokemon's Defense stat
+     */
+    const baseDamage = ((levelMultiplier * power * sourceAtk.value / targetDef.value) / 50) + 2;
+
+    /** Debug message for non-simulated calls (i.e. when damage is actually dealt) */
+    if (!simulated) {
+      console.log("base damage", baseDamage, move.name, power, sourceAtk.value, targetDef.value);
+    }
+
+    return baseDamage;
+  }
+
   /**
    * Calculates the damage of an attack made by another Pokemon against this Pokemon
    * @param source {@linkcode Pokemon} the attacking Pokemon
    * @param move {@linkcode Pokemon} the move used in the attack
    * @param ignoreAbility If `true`, ignores this Pokemon's defensive ability effects
+   * @param ignoreSourceAbility If `true`, ignores the attacking Pokemon's ability effects
    * @param isCritical If `true`, calculates damage for a critical hit.
    * @param simulated If `true`, suppresses changes to game state during the calculation.
    * @returns a {@linkcode DamageCalculationResult} object with three fields:
@@ -2395,35 +2445,11 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
       };
     }
 
-    // ----- BEGIN BASE DAMAGE MULTIPLIERS -----
-
-    /** A base damage multiplier based on the source's level */
-    const levelMultiplier = (2 * source.level / 5 + 2);
-
-    /** The power of the move after power boosts from abilities, etc. have applied */
-    const power = move.calculateBattlePower(source, this, simulated);
-
-    /**
-     * The attacker's offensive stat for the given move's category.
-     * Critical hits ignore negative stat stages.
-     */
-    const sourceAtk = new Utils.NumberHolder(source.getEffectiveStat(isPhysical ? Stat.ATK : Stat.SPATK, this, undefined, ignoreSourceAbility, ignoreAbility, isCritical, simulated));
-    applyMoveAttrs(VariableAtkAttr, source, this, move, sourceAtk);
-
-    /**
-     * This Pokemon's defensive stat for the given move's category.
-     * Critical hits ignore positive stat stages.
-     */
-    const targetDef = new Utils.NumberHolder(this.getEffectiveStat(isPhysical ? Stat.DEF : Stat.SPDEF, source, move, ignoreAbility, ignoreSourceAbility, isCritical, simulated));
-    applyMoveAttrs(VariableDefAttr, source, this, move, targetDef);
-
     /**
      * The attack's base damage, as determined by the source's level, move power
      * and Attack stat as well as this Pokemon's Defense stat
      */
-    const baseDamage = ((levelMultiplier * power * sourceAtk.value / targetDef.value) / 50) + 2;
-
-    // ------ END BASE DAMAGE MULTIPLIERS ------
+    const baseDamage = this.getBaseDamage(source, move, moveCategory, ignoreAbility, ignoreSourceAbility, isCritical, simulated);
 
     /** 25% damage debuff on moves hitting more than one non-fainted target (regardless of immunities) */
     const { targets, multiple } = getMoveTargets(source, move.id);
@@ -2549,7 +2575,7 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
 
     // debug message for when damage is applied (i.e. not simulated)
     if (!simulated) {
-      console.log("damage", damage.value, move.name, power, sourceAtk, targetDef);
+      console.log("damage", damage.value, move.name);
     }
 
     let hitResult: HitResult;
@@ -4863,8 +4889,8 @@ export class PokemonBattleSummonData {
 export class PokemonTurnData {
   public flinched: boolean = false;
   public acted: boolean = false;
-  public hitCount: number;
-  public hitsLeft: number;
+  public hitCount: number = 0;
+  public hitsLeft: number = -1;
   public damageDealt: number = 0;
   public currDamageDealt: number = 0;
   public damageTaken: number = 0;

src/locales/en/bgm-name.json

@@ -112,13 +112,13 @@
   "island": "PMD EoS Craggy Coast",
   "jungle": "Lmz - Jungle",
   "laboratory": "Firel - Laboratory",
-  "lake": "PMD EoS Crystal Cave",
+  "lake": "Lmz - Lake",
   "meadow": "PMD EoS Sky Peak Forest",
   "metropolis": "Firel - Metropolis",
   "mountain": "PMD EoS Mt. Horn",
   "plains": "Firel - Route 888",
   "power_plant": "Firel - The Klink",
-  "ruins": "PMD EoS Deep Sealed Ruin",
+  "ruins": "Lmz - Ancient Ruins",
   "sea": "Andr06 - Marine Mystique",
   "seabed": "Firel - Seabed",
   "slum": "Andr06 - Sneaky Snom",

src/phases/move-effect-phase.ts

@@ -69,7 +69,7 @@ export class MoveEffectPhase extends PokemonPhase {
          * resolve the move's total hit count. This block combines the
          * effects of the move itself, Parental Bond, and Multi-Lens to do so.
          */
-      if (user.turnData.hitsLeft === undefined) {
+      if (user.turnData.hitsLeft === -1) {
         const hitCount = new Utils.IntegerHolder(1);
         // Assume single target for multi hit
         applyMoveAttrs(MultiHitAttr, user, this.getTarget() ?? null, move, hitCount);

src/phases/move-phase.ts

@@ -1,5 +1,5 @@
-import BattleScene from "#app/battle-scene";
 import { BattlerIndex } from "#app/battle";
+import BattleScene from "#app/battle-scene";
 import { applyAbAttrs, applyPostMoveUsedAbAttrs, applyPreAttackAbAttrs, BlockRedirectAbAttr, IncreasePpAbAttr, PokemonTypeChangeAbAttr, PostMoveUsedAbAttr, RedirectMoveAbAttr } from "#app/data/ability";
 import { CommonAnim } from "#app/data/battle-anims";
 import { BattlerTagLapseType, CenterOfAttentionTag } from "#app/data/battler-tags";
@@ -15,23 +15,51 @@ import { StatusEffect } from "#app/enums/status-effect";
 import { MoveUsedEvent } from "#app/events/battle-scene";
 import Pokemon, { MoveResult, PokemonMove, TurnMove } from "#app/field/pokemon";
 import { getPokemonNameWithAffix } from "#app/messages";
+import { BattlePhase } from "#app/phases/battle-phase";
+import { CommonAnimPhase } from "#app/phases/common-anim-phase";
+import { MoveEffectPhase } from "#app/phases/move-effect-phase";
+import { MoveEndPhase } from "#app/phases/move-end-phase";
+import { ShowAbilityPhase } from "#app/phases/show-ability-phase";
 import * as Utils from "#app/utils";
 import i18next from "i18next";
-import { BattlePhase } from "./battle-phase";
-import { CommonAnimPhase } from "./common-anim-phase";
-import { MoveEffectPhase } from "./move-effect-phase";
-import { MoveEndPhase } from "./move-end-phase";
-import { ShowAbilityPhase } from "./show-ability-phase";
 
 export class MovePhase extends BattlePhase {
-  public pokemon: Pokemon;
-  public move: PokemonMove;
-  public targets: BattlerIndex[];
+  protected _pokemon: Pokemon;
+  protected _move: PokemonMove;
+  protected _targets: BattlerIndex[];
   protected followUp: boolean;
   protected ignorePp: boolean;
-  protected failed: boolean;
-  protected cancelled: boolean;
+  protected failed: boolean = false;
+  protected cancelled: boolean = false;
 
+  public get pokemon(): Pokemon {
+    return this._pokemon;
+  }
+
+  protected set pokemon(pokemon: Pokemon) {
+    this._pokemon = pokemon;
+  }
+
+  public get move(): PokemonMove {
+    return this._move;
+  }
+
+  protected set move(move: PokemonMove) {
+    this._move = move;
+  }
+
+  public get targets(): BattlerIndex[] {
+    return this._targets;
+  }
+
+  protected set targets(targets: BattlerIndex[]) {
+    this._targets = targets;
+  }
+
+  /**
+   * @param followUp Indicates that the move being uses is a "follow-up" - for example, a move being used by Metronome or Dancer.
+   *                 Follow-ups bypass a few failure conditions, including flinches, sleep/paralysis/freeze and volatile status checks, etc.
+   */
   constructor(scene: BattleScene, pokemon: Pokemon, targets: BattlerIndex[], move: PokemonMove, followUp?: boolean, ignorePp?: boolean) {
     super(scene);
 
@@ -40,10 +68,13 @@ export class MovePhase extends BattlePhase {
     this.move = move;
     this.followUp = followUp ?? false;
     this.ignorePp = ignorePp ?? false;
-    this.failed = false;
-    this.cancelled = false;
   }
 
+  /**
+   * Checks if the pokemon is active, if the move is usable, and that the move is targetting something.
+   * @param ignoreDisableTags `true` to not check if the move is disabled
+   * @returns `true` if all the checks pass
+   */
   canMove(ignoreDisableTags?: boolean): boolean {
     return this.pokemon.isActive(true) && this.move.isUsable(this.pokemon, this.ignorePp, ignoreDisableTags) && !!this.targets.length;
   }
@@ -63,8 +94,9 @@ export class MovePhase extends BattlePhase {
 
     console.log(Moves[this.move.moveId]);
 
+    // Check if move is unusable (e.g. because it's out of PP due to a mid-turn Spite).
     if (!this.canMove(true)) {
-      if (this.pokemon.isActive(true) && this.move.ppUsed >= this.move.getMovePp()) { // if the move PP was reduced from Spite or otherwise, the move fails
+      if (this.pokemon.isActive(true) && this.move.ppUsed >= this.move.getMovePp()) {
         this.fail();
         this.showMoveText();
         this.showFailedText();
@@ -72,179 +104,57 @@ export class MovePhase extends BattlePhase {
       return this.end();
     }
 
+    this.pokemon.turnData.acted = true;
+
+    // Reset hit-related turn data when starting follow-up moves (e.g. Metronomed moves, Dancer repeats)
+    if (this.followUp) {
+      this.pokemon.turnData.hitsLeft = -1;
+      this.pokemon.turnData.hitCount = 0;
+    }
+
+    // Check move to see if arena.ignoreAbilities should be true.
     if (!this.followUp) {
       if (this.move.getMove().checkFlag(MoveFlags.IGNORE_ABILITIES, this.pokemon, null)) {
         this.scene.arena.setIgnoreAbilities();
       }
-    } else {
-      this.pokemon.turnData.hitsLeft = 0; // TODO: is `0` correct?
-      this.pokemon.turnData.hitCount = 0; // TODO: is `0` correct?
     }
 
-    // Move redirection abilities (ie. Storm Drain) only support single target moves
-    const moveTarget = this.targets.length === 1
-      ? new Utils.IntegerHolder(this.targets[0])
-      : null;
-    if (moveTarget) {
-      const oldTarget = moveTarget.value;
-      this.scene.getField(true).filter(p => p !== this.pokemon).forEach(p => applyAbAttrs(RedirectMoveAbAttr, p, null, false, this.move.moveId, moveTarget));
-      this.pokemon.getOpponents().forEach(p => {
-        const redirectTag = p.getTag(CenterOfAttentionTag) as CenterOfAttentionTag;
-        if (redirectTag && (!redirectTag.powder || (!this.pokemon.isOfType(Type.GRASS) && !this.pokemon.hasAbility(Abilities.OVERCOAT)))) {
-          moveTarget.value = p.getBattlerIndex();
-        }
-      });
-      //Check if this move is immune to being redirected, and restore its target to the intended target if it is.
-      if ((this.pokemon.hasAbilityWithAttr(BlockRedirectAbAttr) || this.move.getMove().hasAttr(BypassRedirectAttr))) {
-        //If an ability prevented this move from being redirected, display its ability pop up.
-        if ((this.pokemon.hasAbilityWithAttr(BlockRedirectAbAttr) && !this.move.getMove().hasAttr(BypassRedirectAttr)) && oldTarget !== moveTarget.value) {
-          this.scene.unshiftPhase(new ShowAbilityPhase(this.scene, this.pokemon.getBattlerIndex(), this.pokemon.getPassiveAbility().hasAttr(BlockRedirectAbAttr)));
-        }
-        moveTarget.value = oldTarget;
-      }
-      this.targets[0] = moveTarget.value;
-    }
+    this.resolveRedirectTarget();
 
-    // Check for counterattack moves to switch target
-    if (this.targets.length === 1 && this.targets[0] === BattlerIndex.ATTACKER) {
-      if (this.pokemon.turnData.attacksReceived.length) {
-        const attack = this.pokemon.turnData.attacksReceived[0];
-        this.targets[0] = attack.sourceBattlerIndex;
+    this.resolveCounterAttackTarget();
 
-        // account for metal burst and comeuppance hitting remaining targets in double battles
-        // counterattack will redirect to remaining ally if original attacker faints
-        if (this.scene.currentBattle.double && this.move.getMove().hasFlag(MoveFlags.REDIRECT_COUNTER)) {
-          if (this.scene.getField()[this.targets[0]].hp === 0) {
-            const opposingField = this.pokemon.isPlayer() ? this.scene.getEnemyField() : this.scene.getPlayerField();
-            //@ts-ignore
-            this.targets[0] = opposingField.find(p => p.hp > 0)?.getBattlerIndex(); //TODO: fix ts-ignore
-          }
-        }
-      }
-      if (this.targets[0] === BattlerIndex.ATTACKER) {
-        this.fail(); // Marks the move as failed for later in doMove
-        this.showMoveText();
-        this.showFailedText();
-      }
-    }
+    this.resolvePreMoveStatusEffects();
 
-    const targets = this.scene.getField(true).filter(p => {
-      if (this.targets.indexOf(p.getBattlerIndex()) > -1) {
-        return true;
-      }
-      return false;
-    });
+    this.lapsePreMoveAndMoveTags();
 
-    const doMove = () => {
-      this.pokemon.turnData.acted = true; // Record that the move was attempted, even if it fails
+    this.resolveFinalPreMoveCancellationChecks();
 
-      this.pokemon.lapseTags(BattlerTagLapseType.PRE_MOVE);
-
-      let ppUsed = 1;
-      // Filter all opponents to include only those this move is targeting
-      const targetedOpponents = this.pokemon.getOpponents().filter(o => this.targets.includes(o.getBattlerIndex()));
-      for (const opponent of targetedOpponents) {
-        if (this.move.ppUsed + ppUsed >= this.move.getMovePp()) { // If we're already at max PP usage, stop checking
-          break;
-        }
-        if (opponent.hasAbilityWithAttr(IncreasePpAbAttr)) { // Accounting for abilities like Pressure
-          ppUsed++;
-        }
-      }
-
-      if (!this.followUp && this.canMove() && !this.cancelled) {
-        this.pokemon.lapseTags(BattlerTagLapseType.MOVE);
-      }
-
-      const moveQueue = this.pokemon.getMoveQueue();
     if (this.cancelled || this.failed) {
-        if (this.failed) {
-          this.move.usePp(ppUsed); // Only use PP if the move failed
-          this.scene.eventTarget.dispatchEvent(new MoveUsedEvent(this.pokemon?.id, this.move.getMove(), this.move.ppUsed));
-        }
-
-        // Record a failed move so Abilities like Truant don't trigger next turn and soft-lock
-        this.pokemon.pushMoveHistory({ move: Moves.NONE, result: MoveResult.FAIL });
-
-        this.pokemon.lapseTags(BattlerTagLapseType.MOVE_EFFECT); // Remove any tags from moves like Fly/Dive/etc.
-        this.pokemon.lapseTags(BattlerTagLapseType.AFTER_MOVE);
-        moveQueue.shift(); // Remove the second turn of charge moves
-        return this.end();
-      }
-
-      this.scene.triggerPokemonFormChange(this.pokemon, SpeciesFormChangePreMoveTrigger);
-
-      if (this.move.moveId) {
-        this.showMoveText();
-      }
-
-      // This should only happen when there are no valid targets left on the field
-      if ((moveQueue.length && moveQueue[0].move === Moves.NONE) || !targets.length) {
-        this.showFailedText();
-        this.cancel();
-
-        // Record a failed move so Abilities like Truant don't trigger next turn and soft-lock
-        this.pokemon.pushMoveHistory({ move: Moves.NONE, result: MoveResult.FAIL });
-
-        this.pokemon.lapseTags(BattlerTagLapseType.MOVE_EFFECT); // Remove any tags from moves like Fly/Dive/etc.
-        this.pokemon.lapseTags(BattlerTagLapseType.AFTER_MOVE);
-
-        moveQueue.shift();
-        return this.end();
-      }
-
-      if ((!moveQueue.length || !moveQueue.shift()?.ignorePP) && !this.ignorePp) { // using .shift here clears out two turn moves once they've been used
-        this.move.usePp(ppUsed);
-        this.scene.eventTarget.dispatchEvent(new MoveUsedEvent(this.pokemon?.id, this.move.getMove(), this.move.ppUsed));
-      }
-
-      if (!allMoves[this.move.moveId].hasAttr(CopyMoveAttr)) {
-        this.scene.currentBattle.lastMove = this.move.moveId;
-      }
-
-      // Assume conditions affecting targets only apply to moves with a single target
-      let success = this.move.getMove().applyConditions(this.pokemon, targets[0], this.move.getMove());
-      const cancelled = new Utils.BooleanHolder(false);
-      let failedText = this.move.getMove().getFailedText(this.pokemon, targets[0], this.move.getMove(), cancelled);
-      if (success && this.scene.arena.isMoveWeatherCancelled(this.pokemon, this.move.getMove())) {
-        success = false;
-      } else if (success && this.scene.arena.isMoveTerrainCancelled(this.pokemon, this.targets, this.move.getMove())) {
-        success = false;
-        if (failedText === null) {
-          failedText = getTerrainBlockMessage(targets[0], this.scene.arena.terrain?.terrainType!); // TODO: is this bang correct?
-        }
-      }
-
-      /**
-         * Trigger pokemon type change before playing the move animation
-         * Will still change the user's type when using Roar, Whirlwind, Trick-or-Treat, and Forest's Curse,
-         * regardless of whether the move successfully executes or not.
-         */
-      if (success || [Moves.ROAR, Moves.WHIRLWIND, Moves.TRICK_OR_TREAT, Moves.FORESTS_CURSE].includes(this.move.moveId)) {
-        applyPreAttackAbAttrs(PokemonTypeChangeAbAttr, this.pokemon, null, this.move.getMove());
-      }
-
-      if (success) {
-        this.scene.unshiftPhase(this.getEffectPhase());
+      this.handlePreMoveFailures();
     } else {
-        this.pokemon.pushMoveHistory({ move: this.move.moveId, targets: this.targets, result: MoveResult.FAIL, virtual: this.move.virtual });
-        if (!cancelled.value) {
-          this.showFailedText(failedText);
+      this.useMove();
     }
-      }
-      // Checks if Dancer ability is triggered
-      if (this.move.getMove().hasFlag(MoveFlags.DANCE_MOVE) && !this.followUp) {
-        // Pokemon with Dancer can be on either side of the battle so we check in both cases
-        this.scene.getPlayerField().forEach(pokemon => {
-          applyPostMoveUsedAbAttrs(PostMoveUsedAbAttr, pokemon, this.move, this.pokemon, this.targets);
-        });
-        this.scene.getEnemyField().forEach(pokemon => {
-          applyPostMoveUsedAbAttrs(PostMoveUsedAbAttr, pokemon, this.move, this.pokemon, this.targets);
-        });
-      }
-      this.end();
-    };
 
+    this.end();
+  }
+
+  /** Check for cancellation edge cases - no targets remaining, or Moves.NONE is on the queue (TODO: when does this happen?) */
+  resolveFinalPreMoveCancellationChecks() {
+    const targets = this.getActiveTargetPokemon();
+    const moveQueue = this.pokemon.getMoveQueue();
+
+    if (targets.length === 0 || (moveQueue.length && moveQueue[0].move === Moves.NONE)) {
+      this.showFailedText();
+      this.cancelled = true;
+    }
+  }
+
+  getActiveTargetPokemon() {
+    return this.scene.getField(true).filter(p => this.targets.includes(p.getBattlerIndex()));
+  }
+
+  /** Handles Sleep/Paralysis/Freeze rolls and side effects, along with lapsing volatile statuses. */
+  resolvePreMoveStatusEffects() {
     if (!this.followUp && this.pokemon.status && !this.pokemon.status.isPostTurn()) {
       this.pokemon.status.incrementTurn();
       let activated = false;
@@ -273,25 +183,260 @@ export class MovePhase extends BattlePhase {
       if (activated) {
         this.scene.queueMessage(getStatusEffectActivationText(this.pokemon.status.effect, getPokemonNameWithAffix(this.pokemon)));
         this.scene.unshiftPhase(new CommonAnimPhase(this.scene, this.pokemon.getBattlerIndex(), undefined, CommonAnim.POISON + (this.pokemon.status.effect - 1)));
-        doMove();
-      } else {
-        if (healed) {
+      } else if (healed) {
         this.scene.queueMessage(getStatusEffectHealText(this.pokemon.status.effect, getPokemonNameWithAffix(this.pokemon)));
         this.pokemon.resetStatus();
         this.pokemon.updateInfo();
       }
-        doMove();
-      }
-    } else {
-      doMove();
     }
   }
 
-  getEffectPhase(): MoveEffectPhase {
-    return new MoveEffectPhase(this.scene, this.pokemon.getBattlerIndex(), this.targets, this.move);
+  /**
+   * Lapse `PRE_MOVE` tags that trigger before a move is used, regardless of whether or not it failed.
+   * Also lapse `MOVE` tags if the move should be successful.
+   */
+  lapsePreMoveAndMoveTags() {
+    this.pokemon.lapseTags(BattlerTagLapseType.PRE_MOVE);
+
+    // TODO: does this intentionally happen before the no targets/Moves.NONE on queue cancellation case is checked?
+    if (!this.followUp && this.canMove() && !this.cancelled) {
+      this.pokemon.lapseTags(BattlerTagLapseType.MOVE);
+    }
+  }
+
+  useMove() {
+    const targets = this.getActiveTargetPokemon();
+    const moveQueue = this.pokemon.getMoveQueue();
+
+    // form changes happen even before we know that the move wll execute.
+    this.scene.triggerPokemonFormChange(this.pokemon, SpeciesFormChangePreMoveTrigger);
+
+    this.showMoveText();
+
+    // TODO: Clean up implementation of two-turn moves.
+    if (moveQueue.length > 0) { // Using .shift here clears out two turn moves once they've been used
+      this.ignorePp = moveQueue.shift()?.ignorePP ?? false;
+    }
+
+    // "commit" to using the move, deducting PP.
+    if (!this.ignorePp) {
+      const ppUsed = 1 + this.getPpIncreaseFromPressure(targets);
+
+      this.move.usePp(ppUsed);
+      this.scene.eventTarget.dispatchEvent(new MoveUsedEvent(this.pokemon?.id, this.move.getMove(), ppUsed));
+    }
+
+    // Update the battle's "last move" pointer, unless we're currently mimicking a move.
+    if (!allMoves[this.move.moveId].hasAttr(CopyMoveAttr)) {
+      this.scene.currentBattle.lastMove = this.move.moveId;
+    }
+
+    /**
+     * Determine if the move is successful (meaning that its damage/effects can be attempted)
+     * by checking that all of the following are true:
+     * - Conditional attributes of the move are all met
+     * - The target's `ForceSwitchOutImmunityAbAttr` is not triggered (see {@linkcode Move.prototype.applyConditions})
+     * - Weather does not block the move
+     * - Terrain does not block the move
+     *
+     * TODO: These steps are straightforward, but the implementation below is extremely convoluted.
+     */
+
+    const move = this.move.getMove();
+
+    /**
+     * Move conditions assume the move has a single target
+     * TODO: is this sustainable?
+     */
+    const passesConditions = move.applyConditions(this.pokemon, targets[0], move);
+
+    let failedDueToWeather: boolean = false;
+    let failedDueToTerrain: boolean = false;
+
+    if (!passesConditions) {
+      failedDueToWeather = this.scene.arena.isMoveWeatherCancelled(this.pokemon, move);
+
+      if (!failedDueToWeather) {
+        failedDueToTerrain = this.scene.arena.isMoveTerrainCancelled(this.pokemon, this.targets, move);
+      }
+    }
+
+    const success = passesConditions && !failedDueToWeather && !failedDueToTerrain;
+
+    /**
+     * If the move has not failed, trigger ability-based user type changes and then execute it.
+     *
+     * Notably, Roar, Whirlwind, Trick-or-Treat, and Forest's Curse will trigger these type changes even
+     * if the move fails.
+     *
+     * TODO: Should these exceptions have a move flag?
+     */
+    if (success) {
+      applyPreAttackAbAttrs(PokemonTypeChangeAbAttr, this.pokemon, null, this.move.getMove());
+      this.scene.unshiftPhase(new MoveEffectPhase(this.scene, this.pokemon.getBattlerIndex(), this.targets, this.move));
+
+    } else {
+      if ([Moves.ROAR, Moves.WHIRLWIND, Moves.TRICK_OR_TREAT, Moves.FORESTS_CURSE].includes(this.move.moveId)) {
+        applyPreAttackAbAttrs(PokemonTypeChangeAbAttr, this.pokemon, null, this.move.getMove());
+      }
+
+      this.pokemon.pushMoveHistory({ move: this.move.moveId, targets: this.targets, result: MoveResult.FAIL, virtual: this.move.virtual });
+
+      let failedText: string | undefined;
+      const failureMessage = move.getFailedText(this.pokemon, targets[0], move, new Utils.BooleanHolder(false));
+
+      if (failureMessage) {
+        failedText = failureMessage;
+      } else if (failedDueToTerrain) {
+        failedText = getTerrainBlockMessage(this.pokemon, this.scene.arena.getTerrainType());
+      }
+
+      this.showFailedText(failedText);
+    }
+
+    // Handle Dance, which triggers immediately after a move is used (rather than waiting on this.end()).
+    // Note that the !this.followUp check here prevents an infinite Dancer loop.
+    if (this.move.getMove().hasFlag(MoveFlags.DANCE_MOVE) && !this.followUp) {
+      this.scene.getField(true).forEach(pokemon => {
+        applyPostMoveUsedAbAttrs(PostMoveUsedAbAttr, pokemon, this.move, this.pokemon, this.targets);
+      });
+    }
+  }
+
+  end() {
+    if (!this.followUp && this.canMove()) {
+      this.scene.unshiftPhase(new MoveEndPhase(this.scene, this.pokemon.getBattlerIndex()));
+    }
+
+    super.end();
+  }
+
+  /**
+   * Applies PP increasing abilities (so, Pressure) if they exist on the target pokemon.
+   * Note that targets must include only active pokemon.
+   *
+   * TODO: This hardcodes the PP increase at 1 per opponent, rather than deferring to the ability.
+   */
+  getPpIncreaseFromPressure(targets: Pokemon[]) {
+    const foesWithPressure = this.pokemon.getOpponents().filter(o => targets.includes(o) && o.isActive(true) && o.hasAbilityWithAttr(IncreasePpAbAttr));
+    return foesWithPressure.length;
+  }
+
+  /**
+   * Modifies this.targets in place, based upon:
+   * - Move redirection abilities, effects, etc.
+   * - Counterattacks, which pass a special value into the `targets` constructor param (`[BattlerIndex.ATTACKER]`).
+   */
+  resolveRedirectTarget() {
+    if (this.targets.length === 1) {
+      const currentTarget = this.targets[0];
+      const redirectTarget = new Utils.NumberHolder(currentTarget);
+
+      // check move redirection abilities of every pokemon *except* the user.
+      this.scene.getField(true).filter(p => p !== this.pokemon).forEach(p => applyAbAttrs(RedirectMoveAbAttr, p, null, false, this.move.moveId, redirectTarget));
+
+      // check for center-of-attention tags (note that this will override redirect abilities)
+      this.pokemon.getOpponents().forEach(p => {
+        const redirectTag = p.getTag(CenterOfAttentionTag) as CenterOfAttentionTag;
+
+        // TODO: don't hardcode this interaction.
+        // Handle interaction between the rage powder center-of-attention tag and moves used by grass types/overcoat-havers (which are immune to RP's redirect)
+        if (redirectTag && (!redirectTag.powder || (!this.pokemon.isOfType(Type.GRASS) && !this.pokemon.hasAbility(Abilities.OVERCOAT)))) {
+          redirectTarget.value = p.getBattlerIndex();
+        }
+      });
+
+      if (currentTarget !== redirectTarget.value) {
+        if (this.move.getMove().hasAttr(BypassRedirectAttr)) {
+          redirectTarget.value = currentTarget;
+
+        } else if (this.pokemon.hasAbilityWithAttr(BlockRedirectAbAttr)) {
+          redirectTarget.value = currentTarget;
+          this.scene.unshiftPhase(new ShowAbilityPhase(this.scene, this.pokemon.getBattlerIndex(), this.pokemon.getPassiveAbility().hasAttr(BlockRedirectAbAttr)));
+        }
+
+        this.targets[0] = redirectTarget.value;
+      }
+    }
+  }
+
+  /**
+   * Counter-attacking moves pass in `[BattlerIndex.ATTACKER]` into the constructor's `targets` param.
+   * This function modifies `this.targets` to reflect the actual battler index of the user's last
+   * attacker.
+   *
+   * If there is no last attacker, or they are no longer on the field, a message is displayed and the
+   * move is marked for failure.
+   */
+  resolveCounterAttackTarget() {
+    if (this.targets.length === 1 && this.targets[0] === BattlerIndex.ATTACKER) {
+      if (this.pokemon.turnData.attacksReceived.length) {
+        const attacker = this.pokemon.scene.getPokemonById(this.pokemon.turnData.attacksReceived[0].sourceId);
+
+        if (attacker?.isActive(true)) {
+          this.targets[0] = attacker.getBattlerIndex();
+        }
+
+        // account for metal burst and comeuppance hitting remaining targets in double battles
+        // counterattack will redirect to remaining ally if original attacker faints
+        if (this.scene.currentBattle.double && this.move.getMove().hasFlag(MoveFlags.REDIRECT_COUNTER)) {
+          if (this.scene.getField()[this.targets[0]].hp === 0) {
+            const opposingField = this.pokemon.isPlayer() ? this.scene.getEnemyField() : this.scene.getPlayerField();
+            this.targets[0] = opposingField.find(p => p.hp > 0)?.getBattlerIndex() ?? BattlerIndex.ATTACKER;
+          }
+        }
+      }
+
+      if (this.targets[0] === BattlerIndex.ATTACKER) {
+        this.fail();
+        this.showMoveText();
+        this.showFailedText();
+      }
+    }
+  }
+
+  /**
+   * Handles the case where the move was cancelled or failed:
+   * - Uses PP if the move failed (not cancelled) and should use PP (failed moves are not affected by Pressure)
+   * - Records a cancelled OR failed move in move history, so Abilities like Truant don't trigger on the
+   *   next turn and soft-lock.
+   * - Lapses `MOVE_EFFECT` tags:
+   *   - Semi-invulnerable battler tags (Fly/Dive/etc.) are intended to lapse on move effects, but also need
+   *     to lapse on move failure/cancellation.
+   *
+   *     TODO: ...this seems weird.
+   * - Lapses `AFTER_MOVE` tags:
+   *   - This handles the effects of {@linkcode Moves.SUBSTITUTE}
+   * - Removes the second turn of charge moves
+   *
+   *   TODO: handle charge moves more gracefully
+   */
+  handlePreMoveFailures() {
+    if (this.cancelled || this.failed) {
+      if (this.failed) {
+        const ppUsed = this.ignorePp ? 0 : 1;
+
+        if (ppUsed) {
+          this.move.usePp();
+        }
+
+        this.scene.eventTarget.dispatchEvent(new MoveUsedEvent(this.pokemon?.id, this.move.getMove(), ppUsed));
+      }
+
+      this.pokemon.pushMoveHistory({ move: Moves.NONE, result: MoveResult.FAIL });
+
+      this.pokemon.lapseTags(BattlerTagLapseType.MOVE_EFFECT);
+      this.pokemon.lapseTags(BattlerTagLapseType.AFTER_MOVE);
+
+      this.pokemon.getMoveQueue().shift();
+    }
   }
 
   showMoveText(): void {
+    if (this.move.moveId === Moves.NONE) {
+      return;
+    }
+
     if (this.move.getMove().hasAttr(ChargeAttr)) {
       const lastMove = this.pokemon.getLastXMoves() as TurnMove[];
       if (!lastMove.length || lastMove[0].move !== this.move.getMove().id || lastMove[0].result !== MoveResult.OTHER) {
@@ -311,18 +456,10 @@ export class MovePhase extends BattlePhase {
       pokemonNameWithAffix: getPokemonNameWithAffix(this.pokemon),
       moveName: this.move.getName()
     }), 500);
-    applyMoveAttrs(PreMoveMessageAttr, this.pokemon, this.pokemon.getOpponents().find(() => true)!, this.move.getMove()); //TODO: is the bang correct here?
+    applyMoveAttrs(PreMoveMessageAttr, this.pokemon, this.pokemon.getOpponents()[0], this.move.getMove());
   }
 
-  showFailedText(failedText: string | null = null): void {
-    this.scene.queueMessage(failedText || i18next.t("battle:attackFailed"));
-  }
-
-  end() {
-    if (!this.followUp && this.canMove()) {
-      this.scene.unshiftPhase(new MoveEndPhase(this.scene, this.pokemon.getBattlerIndex()));
-    }
-
-    super.end();
+  showFailedText(failedText?: string): void {
+    this.scene.queueMessage(failedText ?? i18next.t("battle:attackFailed"));
   }
 }

src/test/moves/shell_side_arm.test.ts

@@ -0,0 +1,87 @@
+import { BattlerIndex } from "#app/battle";
+import { allMoves, ShellSideArmCategoryAttr } from "#app/data/move";
+import { Abilities } from "#enums/abilities";
+import { Moves } from "#enums/moves";
+import { Species } from "#enums/species";
+import GameManager from "#test/utils/gameManager";
+import Phaser from "phaser";
+import { afterEach, beforeAll, beforeEach, describe, it, expect, vi } from "vitest";
+
+describe("Moves - Shell Side Arm", () => {
+  let phaserGame: Phaser.Game;
+  let game: GameManager;
+  const TIMEOUT = 20 * 1000;
+
+  beforeAll(() => {
+    phaserGame = new Phaser.Game({
+      type: Phaser.HEADLESS,
+    });
+  });
+
+  afterEach(() => {
+    game.phaseInterceptor.restoreOg();
+  });
+
+  beforeEach(() => {
+    game = new GameManager(phaserGame);
+    game.override
+      .moveset([Moves.SHELL_SIDE_ARM])
+      .battleType("single")
+      .startingLevel(100)
+      .enemyLevel(100)
+      .enemyAbility(Abilities.BALL_FETCH)
+      .enemyMoveset(Moves.SPLASH);
+  });
+
+  it("becomes a physical attack if forecasted to deal more damage as physical", async () => {
+    game.override.enemySpecies(Species.SNORLAX);
+
+    await game.classicMode.startBattle([Species.MANAPHY]);
+
+    const shellSideArm = allMoves[Moves.SHELL_SIDE_ARM];
+    const shellSideArmAttr = shellSideArm.getAttrs(ShellSideArmCategoryAttr)[0];
+    vi.spyOn(shellSideArmAttr, "apply");
+
+    game.move.select(Moves.SHELL_SIDE_ARM);
+
+    await game.phaseInterceptor.to("MoveEffectPhase");
+
+    expect(shellSideArmAttr.apply).toHaveLastReturnedWith(true);
+  }, TIMEOUT);
+
+  it("remains a special attack if forecasted to deal more damage as special", async () => {
+    game.override.enemySpecies(Species.SLOWBRO);
+
+    await game.classicMode.startBattle([Species.MANAPHY]);
+
+    const shellSideArm = allMoves[Moves.SHELL_SIDE_ARM];
+    const shellSideArmAttr = shellSideArm.getAttrs(ShellSideArmCategoryAttr)[0];
+    vi.spyOn(shellSideArmAttr, "apply");
+
+    game.move.select(Moves.SHELL_SIDE_ARM);
+
+    await game.phaseInterceptor.to("MoveEffectPhase");
+
+    expect(shellSideArmAttr.apply).toHaveLastReturnedWith(false);
+  }, TIMEOUT);
+
+  it("respects stat stage changes when forecasting base damage", async () => {
+    game.override
+      .enemySpecies(Species.SNORLAX)
+      .enemyMoveset(Moves.COTTON_GUARD);
+
+    await game.classicMode.startBattle([Species.MANAPHY]);
+
+    const shellSideArm = allMoves[Moves.SHELL_SIDE_ARM];
+    const shellSideArmAttr = shellSideArm.getAttrs(ShellSideArmCategoryAttr)[0];
+    vi.spyOn(shellSideArmAttr, "apply");
+
+    game.move.select(Moves.SHELL_SIDE_ARM);
+
+    await game.setTurnOrder([BattlerIndex.ENEMY, BattlerIndex.PLAYER]);
+
+    await game.phaseInterceptor.to("BerryPhase", false);
+
+    expect(shellSideArmAttr.apply).toHaveLastReturnedWith(false);
+  }, TIMEOUT);
+});

src/ui/abstact-option-select-ui-handler.ts

@@ -344,6 +344,7 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler {
     super.clear();
     this.config = null;
     this.optionSelectContainer.setVisible(false);
+    this.scrollCursor = 0;
     this.eraseCursor();
   }
 

src/ui/achvs-ui-handler.ts

@@ -1,12 +1,13 @@
-import BattleScene from "../battle-scene";
+import BattleScene from "#app/battle-scene";
 import { Button } from "#enums/buttons";
 import i18next from "i18next";
-import { Achv, achvs, getAchievementDescription } from "../system/achv";
-import { Voucher, getVoucherTypeIcon, getVoucherTypeName, vouchers } from "../system/voucher";
-import MessageUiHandler from "./message-ui-handler";
-import { addTextObject, TextStyle } from "./text";
-import { Mode } from "./ui";
-import { addWindow } from "./ui-theme";
+import { Achv, achvs, getAchievementDescription } from "#app/system/achv";
+import { Voucher, getVoucherTypeIcon, getVoucherTypeName, vouchers } from "#app/system/voucher";
+import MessageUiHandler from "#app/ui/message-ui-handler";
+import { addTextObject, TextStyle } from "#app/ui/text";
+import { Mode } from "#app/ui/ui";
+import { addWindow } from "#app/ui/ui-theme";
+import { ScrollBar } from "#app/ui/scroll-bar";
 import { PlayerGender } from "#enums/player-gender";
 
 enum Page {
@@ -49,6 +50,7 @@ export default class AchvsUiHandler extends MessageUiHandler {
   private vouchersTotal: number;
   private currentTotal: number;
 
+  private scrollBar: ScrollBar;
   private scrollCursor: number;
   private cursorObj: Phaser.GameObjects.NineSlice | null;
   private currentPage: Page;
@@ -91,7 +93,10 @@ export default class AchvsUiHandler extends MessageUiHandler {
     this.iconsBg = addWindow(this.scene, 0, this.headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - this.headerBg.height - 68);
     this.iconsBg.setOrigin(0, 0);
 
-    this.iconsContainer = this.scene.add.container(6, this.headerBg.height + 6);
+    const yOffset = 6;
+    this.scrollBar = new ScrollBar(this.scene, this.iconsBg.width - 9, this.iconsBg.y + yOffset, 4, this.iconsBg.height - yOffset * 2, this.ROWS);
+
+    this.iconsContainer = this.scene.add.container(5, this.headerBg.height + 8);
 
     this.icons = [];
 
@@ -148,6 +153,7 @@ export default class AchvsUiHandler extends MessageUiHandler {
     this.mainContainer.add(this.headerText);
     this.mainContainer.add(this.headerActionText);
     this.mainContainer.add(this.iconsBg);
+    this.mainContainer.add(this.scrollBar);
     this.mainContainer.add(this.iconsContainer);
     this.mainContainer.add(titleBg);
     this.mainContainer.add(this.titleText);
@@ -162,6 +168,7 @@ export default class AchvsUiHandler extends MessageUiHandler {
 
     this.currentPage = Page.ACHIEVEMENTS;
     this.setCursor(0);
+    this.setScrollCursor(0);
 
     this.mainContainer.setVisible(false);
   }
@@ -175,6 +182,8 @@ export default class AchvsUiHandler extends MessageUiHandler {
     this.mainContainer.setVisible(true);
     this.setCursor(0);
     this.setScrollCursor(0);
+    this.scrollBar.setTotalRows(Math.ceil(this.currentTotal / this.COLS));
+    this.scrollBar.setScrollCursor(0);
 
     this.getUi().moveTo(this.mainContainer, this.getUi().length - 1);
 
@@ -224,6 +233,8 @@ export default class AchvsUiHandler extends MessageUiHandler {
         this.updateAchvIcons();
       }
       this.setCursor(0, true);
+      this.scrollBar.setTotalRows(Math.ceil(this.currentTotal / this.COLS));
+      this.scrollBar.setScrollCursor(0);
       this.mainContainer.update();
     }
     if (button === Button.CANCEL) {
@@ -237,32 +248,44 @@ export default class AchvsUiHandler extends MessageUiHandler {
         if (this.cursor < this.COLS) {
           if (this.scrollCursor) {
             success = this.setScrollCursor(this.scrollCursor - 1);
+          } else {
+            // Wrap around to the last row
+            success = this.setScrollCursor(Math.ceil(this.currentTotal / this.COLS) - this.ROWS);
+            let newCursorIndex = this.cursor + (this.ROWS - 1) * this.COLS;
+            if (newCursorIndex > this.currentTotal - this.scrollCursor * this.COLS -1) {
+              newCursorIndex -= this.COLS;
+            }
+            success = success && this.setCursor(newCursorIndex);
           }
         } else {
           success = this.setCursor(this.cursor - this.COLS);
         }
         break;
       case Button.DOWN:
-        const canMoveDown = (this.cursor + itemOffset) + this.COLS < this.currentTotal;
+        const canMoveDown = itemOffset + 1 < this.currentTotal;
         if (rowIndex >= this.ROWS - 1) {
           if (this.scrollCursor < Math.ceil(this.currentTotal / this.COLS) - this.ROWS && canMoveDown) {
+            // scroll down one row
             success = this.setScrollCursor(this.scrollCursor + 1);
+          } else {
+            // wrap back to the first row
+            success = this.setScrollCursor(0) && this.setCursor(this.cursor % this.COLS);
           }
         } else if (canMoveDown) {
-          success = this.setCursor(this.cursor + this.COLS);
+          success = this.setCursor(Math.min(this.cursor + this.COLS, this.currentTotal - itemOffset - 1));
         }
         break;
       case Button.LEFT:
-        if (!this.cursor && this.scrollCursor) {
-          success = this.setScrollCursor(this.scrollCursor - 1) && this.setCursor(this.cursor + (this.COLS - 1));
-        } else if (this.cursor) {
+        if (this.cursor % this.COLS === 0) {
+          success = this.setCursor(Math.min(this.cursor + this.COLS - 1, this.currentTotal - itemOffset - 1));
+        } else {
           success = this.setCursor(this.cursor - 1);
         }
         break;
       case Button.RIGHT:
-        if (this.cursor + 1 === this.ROWS * this.COLS && this.scrollCursor < Math.ceil(this.currentTotal / this.COLS) - this.ROWS) {
-          success = this.setScrollCursor(this.scrollCursor + 1) && this.setCursor(this.cursor - (this.COLS - 1));
-        } else if (this.cursor + itemOffset < this.currentTotal - 1) {
+        if ((this.cursor + 1) % this.COLS === 0 || (this.cursor + itemOffset) === (this.currentTotal - 1)) {
+          success = this.setCursor(this.cursor - this.cursor % this.COLS);
+        } else {
           success = this.setCursor(this.cursor + 1);
         }
         break;
@@ -315,15 +338,22 @@ export default class AchvsUiHandler extends MessageUiHandler {
     }
 
     this.scrollCursor = scrollCursor;
+    this.scrollBar.setScrollCursor(this.scrollCursor);
+
+    // Cursor cannot go farther than the last element in the list
+    const maxCursor = Math.min(this.cursor, this.currentTotal - this.scrollCursor * this.COLS - 1);
+    if (maxCursor !== this.cursor) {
+      this.setCursor(maxCursor);
+    }
 
     switch (this.currentPage) {
     case Page.ACHIEVEMENTS:
       this.updateAchvIcons();
-      this.showAchv(achvs[Object.keys(achvs)[Math.min(this.cursor + this.scrollCursor * this.COLS, Object.values(achvs).length - 1)]]);
+      this.showAchv(achvs[Object.keys(achvs)[this.cursor + this.scrollCursor * this.COLS]]);
       break;
     case Page.VOUCHERS:
       this.updateVoucherIcons();
-      this.showVoucher(vouchers[Object.keys(vouchers)[Math.min(this.cursor + this.scrollCursor * this.COLS, Object.values(vouchers).length - 1)]]);
+      this.showVoucher(vouchers[Object.keys(vouchers)[this.cursor + this.scrollCursor * this.COLS]]);
       break;
     }
     return true;
@@ -411,6 +441,7 @@ export default class AchvsUiHandler extends MessageUiHandler {
     super.clear();
     this.currentPage = Page.ACHIEVEMENTS;
     this.mainContainer.setVisible(false);
+    this.setScrollCursor(0);
     this.eraseCursor();
   }
 

src/ui/scroll-bar.ts

@@ -1,36 +1,65 @@
+/**
+ * A vertical scrollbar element that resizes dynamically based on the current scrolling
+ * and number of elements that can be shown on screen
+ */
 export class ScrollBar extends Phaser.GameObjects.Container {
-  private bg: Phaser.GameObjects.Image;
+  private bg: Phaser.GameObjects.NineSlice;
   private handleBody: Phaser.GameObjects.Rectangle;
-  private handleBottom: Phaser.GameObjects.Image;
-  private pages: number;
-  private page: number;
+  private handleBottom: Phaser.GameObjects.NineSlice;
+  private currentRow: number;
+  private totalRows: number;
+  private maxRows: number;
 
-  constructor(scene: Phaser.Scene, x: number, y: number, pages: number) {
+  /**
+   * @param scene the current scene
+   * @param x the scrollbar's x position (origin: top left)
+   * @param y the scrollbar's y position (origin: top left)
+   * @param width the scrollbar's width
+   * @param height the scrollbar's height
+   * @param maxRows the maximum number of rows that can be shown at once
+   */
+  constructor(scene: Phaser.Scene, x: number, y: number, width: number, height: number, maxRows: number) {
     super(scene, x, y);
 
-    this.bg = scene.add.image(0, 0, "scroll_bar");
+    this.maxRows = maxRows;
+
+    const borderSize = 2;
+    width = Math.max(width, 4);
+
+    this.bg = scene.add.nineslice(0, 0, "scroll_bar", undefined, width, height, borderSize, borderSize, borderSize, borderSize);
     this.bg.setOrigin(0, 0);
     this.add(this.bg);
 
-    this.handleBody = scene.add.rectangle(1, 1, 3, 4, 0xaaaaaa);
+    this.handleBody = scene.add.rectangle(1, 1, width - 2, 4, 0xaaaaaa);
     this.handleBody.setOrigin(0, 0);
     this.add(this.handleBody);
 
-    this.handleBottom = scene.add.image(1, 1, "scroll_bar_handle");
+    this.handleBottom = scene.add.nineslice(1, 1, "scroll_bar_handle", undefined, width - 2, 2, 2, 0, 0, 0);
     this.handleBottom.setOrigin(0, 0);
     this.add(this.handleBottom);
   }
 
-  setPage(page: number): void {
-    this.page = page;
-    this.handleBody.y = 1 + (this.bg.displayHeight - 1 - this.handleBottom.displayHeight) / this.pages * page;
+  /**
+   * Set the current row that is displayed
+   * Moves the bar handle up or down accordingly
+   * @param scrollCursor how many times the view was scrolled down
+   */
+  setScrollCursor(scrollCursor: number): void {
+    this.currentRow = scrollCursor;
+    this.handleBody.y = 1 + (this.bg.displayHeight - 1 - this.handleBottom.displayHeight) / this.totalRows * this.currentRow;
     this.handleBottom.y = this.handleBody.y + this.handleBody.displayHeight;
   }
 
-  setPages(pages: number): void {
-    this.pages = pages;
-    this.handleBody.height = (this.bg.displayHeight - 1 - this.handleBottom.displayHeight) * 9 / this.pages;
+  /**
+   * Set the total number of rows to display
+   * If it's smaller than the maximum number of rows on screen the bar will get hidden
+   * Otherwise the scrollbar handle gets resized based on the ratio to the maximum number of rows
+   * @param rows how many rows of data there are in total
+   */
+  setTotalRows(rows: number): void {
+    this.totalRows = rows;
+    this.handleBody.height = (this.bg.displayHeight - 1 - this.handleBottom.displayHeight) * this.maxRows / this.totalRows;
 
-    this.setVisible(this.pages > 9);
+    this.setVisible(this.totalRows > this.maxRows);
   }
 }

src/ui/settings/abstract-control-settings-ui-handler.ts

@@ -1,9 +1,10 @@
-import UiHandler from "../ui-handler";
-import BattleScene from "../../battle-scene";
-import {Mode} from "../ui";
-import {InterfaceConfig} from "../../inputs-controller";
-import {addWindow} from "../ui-theme";
-import {addTextObject, TextStyle} from "../text";
+import UiHandler from "#app/ui/ui-handler";
+import BattleScene from "#app/battle-scene";
+import { Mode } from "#app/ui/ui";
+import { InterfaceConfig } from "#app/inputs-controller";
+import { addWindow } from "#app/ui/ui-theme";
+import { addTextObject, TextStyle } from "#app/ui/text";
+import { ScrollBar } from "#app/ui/scroll-bar";
 import { getIconWithSettingName } from "#app/configs/inputs/configHandler";
 import NavigationMenu, { NavigationManager } from "#app/ui/settings/navigationMenu";
 import { Device } from "#enums/devices";
@@ -19,7 +20,7 @@ export interface LayoutConfig {
     inputsIcons: InputsIcons;
     settingLabels: Phaser.GameObjects.Text[];
     optionValueLabels: Phaser.GameObjects.Text[][];
-    optionCursors: integer[];
+    optionCursors: number[];
     keys: string[];
     bindingSettings: Array<String>;
 }
@@ -31,8 +32,9 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
   protected optionsContainer: Phaser.GameObjects.Container;
   protected navigationContainer: NavigationMenu;
 
-  protected scrollCursor: integer;
-  protected optionCursors: integer[];
+  protected scrollBar: ScrollBar;
+  protected scrollCursor: number;
+  protected optionCursors: number[];
   protected cursorObj: Phaser.GameObjects.NineSlice | null;
 
   protected optionsBg: Phaser.GameObjects.NineSlice;
@@ -65,7 +67,7 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
   protected device: Device;
 
   abstract saveSettingToLocalStorage(setting, cursor): void;
-  abstract setSetting(scene: BattleScene, setting, value: integer): boolean;
+  abstract setSetting(scene: BattleScene, setting, value: number): boolean;
 
   /**
    * Constructor for the AbstractSettingsUiHandler.
@@ -241,7 +243,7 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
 
         // Calculate the total available space for placing option labels next to their setting label
         // We reserve space for the setting label and then distribute the remaining space evenly
-        const totalSpace = (300 - labelWidth) - totalWidth / 6;
+        const totalSpace = (297 - labelWidth) - totalWidth / 6;
         // Calculate the spacing between options based on the available space divided by the number of gaps between labels
         const optionSpacing = Math.floor(totalSpace / (optionValueLabels[s].length - 1));
 
@@ -269,6 +271,11 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
       // Add the options container to the overall settings container to be displayed in the UI.
       this.settingsContainer.add(optionsContainer);
     }
+
+    // Add vertical scrollbar
+    this.scrollBar = new ScrollBar(this.scene, this.optionsBg.width - 9, this.optionsBg.y + 5, 4, this.optionsBg.height - 11, this.rowsToDisplay);
+    this.settingsContainer.add(this.scrollBar);
+
     // Add the settings container to the UI.
     ui.add(this.settingsContainer);
 
@@ -413,6 +420,8 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
     this.optionCursors = layout.optionCursors;
     this.inputsIcons = layout.inputsIcons;
     this.bindingSettings = layout.bindingSettings;
+    this.scrollBar.setTotalRows(layout.settingLabels.length);
+    this.scrollBar.setScrollCursor(0);
 
     // Return true indicating the layout was successfully applied.
     return true;
@@ -538,7 +547,7 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
    * @param cursor - The cursor position to set.
    * @returns `true` if the cursor was set successfully.
    */
-  setCursor(cursor: integer): boolean {
+  setCursor(cursor: number): boolean {
     const ret = super.setCursor(cursor);
     // If the optionsContainer is not initialized, return the result from the parent class directly.
     if (!this.optionsContainer) {
@@ -547,7 +556,8 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
 
     // Check if the cursor object exists, if not, create it.
     if (!this.cursorObj) {
-      this.cursorObj = this.scene.add.nineslice(0, 0, "summary_moves_cursor", undefined, (this.scene.game.canvas.width / 6) - 10, 16, 1, 1, 1, 1);
+      const cursorWidth = (this.scene.game.canvas.width / 6) - (this.scrollBar.visible? 16 : 10);
+      this.cursorObj = this.scene.add.nineslice(0, 0, "summary_moves_cursor", undefined, cursorWidth, 16, 1, 1, 1, 1);
       this.cursorObj.setOrigin(0, 0); // Set the origin to the top-left corner.
       this.optionsContainer.add(this.cursorObj); // Add the cursor to the options container.
     }
@@ -564,7 +574,7 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
    * @param scrollCursor - The scroll cursor position to set.
    * @returns `true` if the scroll cursor was set successfully.
    */
-  setScrollCursor(scrollCursor: integer): boolean {
+  setScrollCursor(scrollCursor: number): boolean {
     // Check if the new scroll position is the same as the current one; if so, do not update.
     if (scrollCursor === this.scrollCursor) {
       return false;
@@ -572,6 +582,7 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
 
     // Update the internal scroll cursor state
     this.scrollCursor = scrollCursor;
+    this.scrollBar.setScrollCursor(this.scrollCursor);
 
     // Apply the new scroll position to the settings UI.
     this.updateSettingsScroll();
@@ -590,7 +601,7 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
    * @param save - Whether to save the setting to local storage.
    * @returns `true` if the option cursor was set successfully.
    */
-  setOptionCursor(settingIndex: integer, cursor: integer, save?: boolean): boolean {
+  setOptionCursor(settingIndex: number, cursor: number, save?: boolean): boolean {
     // Retrieve the specific setting using the settingIndex from the settingDevice enumeration.
     const setting = this.setting[Object.keys(this.setting)[settingIndex]];
 

src/ui/settings/abstract-settings-ui-handler.ts

@@ -1,9 +1,10 @@
-import BattleScene from "../../battle-scene";
-import { hasTouchscreen, isMobile } from "../../touch-controls";
-import { TextStyle, addTextObject } from "../text";
-import { Mode } from "../ui";
-import UiHandler from "../ui-handler";
-import { addWindow } from "../ui-theme";
+import BattleScene from "#app/battle-scene";
+import { hasTouchscreen, isMobile } from "#app/touch-controls";
+import { TextStyle, addTextObject } from "#app/ui/text";
+import { Mode } from "#app/ui/ui";
+import UiHandler from "#app/ui/ui-handler";
+import { addWindow } from "#app/ui/ui-theme";
+import { ScrollBar } from "#app/ui/scroll-bar";
 import { Button } from "#enums/buttons";
 import { InputsIcons } from "#app/ui/settings/abstract-control-settings-ui-handler";
 import NavigationMenu, { NavigationManager } from "#app/ui/settings/navigationMenu";
@@ -19,11 +20,12 @@ export default class AbstractSettingsUiHandler extends UiHandler {
   private optionsContainer: Phaser.GameObjects.Container;
   private navigationContainer: NavigationMenu;
 
-  private scrollCursor: integer;
+  private scrollCursor: number;
+  private scrollBar: ScrollBar;
 
   private optionsBg: Phaser.GameObjects.NineSlice;
 
-  private optionCursors: integer[];
+  private optionCursors: number[];
 
   private settingLabels: Phaser.GameObjects.Text[];
   private optionValueLabels: Phaser.GameObjects.Text[][];
@@ -117,7 +119,7 @@ export default class AbstractSettingsUiHandler extends UiHandler {
 
         const labelWidth =  Math.max(78, this.settingLabels[s].displayWidth + 8);
 
-        const totalSpace = (300 - labelWidth) - totalWidth / 6;
+        const totalSpace = (297 - labelWidth) - totalWidth / 6;
         const optionSpacing = Math.floor(totalSpace / (this.optionValueLabels[s].length - 1));
 
         let xOffset = 0;
@@ -130,7 +132,11 @@ export default class AbstractSettingsUiHandler extends UiHandler {
 
     this.optionCursors = this.settings.map(setting => setting.default);
 
+    this.scrollBar = new ScrollBar(this.scene, this.optionsBg.width - 9, this.optionsBg.y + 5, 4, this.optionsBg.height - 11, this.rowsToDisplay);
+    this.scrollBar.setTotalRows(this.settings.length);
+
     this.settingsContainer.add(this.optionsBg);
+    this.settingsContainer.add(this.scrollBar);
     this.settingsContainer.add(this.navigationContainer);
     this.settingsContainer.add(actionsBg);
     this.settingsContainer.add(this.optionsContainer);
@@ -186,6 +192,7 @@ export default class AbstractSettingsUiHandler extends UiHandler {
 
     this.settingsContainer.setVisible(true);
     this.setCursor(0);
+    this.setScrollCursor(0);
 
     this.getUi().moveTo(this.settingsContainer, this.getUi().length - 1);
 
@@ -301,11 +308,12 @@ export default class AbstractSettingsUiHandler extends UiHandler {
    * @param cursor - The cursor position to set.
    * @returns `true` if the cursor was set successfully.
    */
-  setCursor(cursor: integer): boolean {
+  setCursor(cursor: number): boolean {
     const ret = super.setCursor(cursor);
 
     if (!this.cursorObj) {
-      this.cursorObj = this.scene.add.nineslice(0, 0, "summary_moves_cursor", undefined, (this.scene.game.canvas.width / 6) - 10, 16, 1, 1, 1, 1);
+      const cursorWidth = (this.scene.game.canvas.width / 6) - (this.scrollBar.visible? 16 : 10);
+      this.cursorObj = this.scene.add.nineslice(0, 0, "summary_moves_cursor", undefined, cursorWidth, 16, 1, 1, 1, 1);
       this.cursorObj.setOrigin(0, 0);
       this.optionsContainer.add(this.cursorObj);
     }
@@ -323,7 +331,7 @@ export default class AbstractSettingsUiHandler extends UiHandler {
    * @param save - Whether to save the setting to local storage.
    * @returns `true` if the option cursor was set successfully.
    */
-  setOptionCursor(settingIndex: integer, cursor: integer, save?: boolean): boolean {
+  setOptionCursor(settingIndex: number, cursor: number, save?: boolean): boolean {
     const setting = this.settings[settingIndex];
 
     if (setting.key === SettingKeys.Touch_Controls && cursor && hasTouchscreen() && isMobile()) {
@@ -359,12 +367,13 @@ export default class AbstractSettingsUiHandler extends UiHandler {
    * @param scrollCursor - The scroll cursor position to set.
    * @returns `true` if the scroll cursor was set successfully.
    */
-  setScrollCursor(scrollCursor: integer): boolean {
+  setScrollCursor(scrollCursor: number): boolean {
     if (scrollCursor === this.scrollCursor) {
       return false;
     }
 
     this.scrollCursor = scrollCursor;
+    this.scrollBar.setScrollCursor(this.scrollCursor);
 
     this.updateSettingsScroll();
 
@@ -394,6 +403,7 @@ export default class AbstractSettingsUiHandler extends UiHandler {
   clear() {
     super.clear();
     this.settingsContainer.setVisible(false);
+    this.setScrollCursor(0);
     this.eraseCursor();
     this.getUi().bgmBar.toggleBgmBar(this.scene.showBgmBar);
     if (this.reloadRequired) {

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

@@ -627,7 +627,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
 
     const starterBoxContainer = this.scene.add.container(speciesContainerX + 6, 9); //115
 
-    this.starterSelectScrollBar = new ScrollBar(this.scene, 161, 12, 0);
+    this.starterSelectScrollBar = new ScrollBar(this.scene, 161, 12, 5, starterContainerWindow.height - 6, 9);
 
     starterBoxContainer.add(this.starterSelectScrollBar);
 
@@ -2540,8 +2540,8 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
       }
     });
 
-    this.starterSelectScrollBar.setPages(Math.max(Math.ceil(this.filteredStarterContainers.length / 9), 1));
-    this.starterSelectScrollBar.setPage(0);
+    this.starterSelectScrollBar.setTotalRows(Math.max(Math.ceil(this.filteredStarterContainers.length / 9), 1));
+    this.starterSelectScrollBar.setScrollCursor(0);
 
     // sort
     const sort = this.filterBar.getVals(DropDownColumn.SORT)[0];
@@ -2576,7 +2576,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     const onScreenFirstIndex = this.scrollCursor * maxColumns;
     const onScreenLastIndex = Math.min(this.filteredStarterContainers.length - 1, onScreenFirstIndex + maxRows * maxColumns -1);
 
-    this.starterSelectScrollBar.setPage(this.scrollCursor);
+    this.starterSelectScrollBar.setScrollCursor(this.scrollCursor);
 
     let pokerusCursorIndex = 0;
     this.filteredStarterContainers.forEach((container, i) => {