[Feature] Refactored Game Settings UI navigation menu and sorting (#1860)

* Refactored settings UI menu options and added the battle style setting

* Removed the new Battle Style setting. It will be added in a seperate PR.

* Fixed typo and spacing

index.css

@@ -146,8 +146,8 @@ body {
   margin-left: 10%;
 }
 
-#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode='SETTINGS']):not([data-ui-mode='SETTINGS_ACCESSIBILITY']):not([data-ui-mode='SETTINGS_GAMEPAD']):not([data-ui-mode='SETTINGS_KEYBOARD']) #apad .apadRectBtnContainer > .apadSqBtn:not(.apadBattle),
+#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode='SETTINGS']):not([data-ui-mode='SETTINGS_DISPLAY']):not([data-ui-mode='SETTINGS_AUDIO']):not([data-ui-mode='SETTINGS_GAMEPAD']):not([data-ui-mode='SETTINGS_KEYBOARD']) #apad .apadRectBtnContainer > .apadSqBtn,
-#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode='SETTINGS']):not([data-ui-mode='SETTINGS_ACCESSIBILITY']):not([data-ui-mode='SETTINGS_GAMEPAD']):not([data-ui-mode='SETTINGS_KEYBOARD']) #apad .apadSqBtnContainer > .apadSqBtn:not(.apadBattle)
+#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode='SETTINGS']):not([data-ui-mode='SETTINGS_DISPLAY']):not([data-ui-mode='SETTINGS_AUDIO']):not([data-ui-mode='SETTINGS_GAMEPAD']):not([data-ui-mode='SETTINGS_KEYBOARD']) #apad .apadSqBtnContainer
 {
   display: none;
 }

src/system/settings/settings.ts

@@ -19,7 +19,8 @@ const AUTO_DISABLED = ["Auto", "Disabled"];
  */
 export enum SettingType {
   GENERAL,
-  ACCESSIBILITY
+  DISPLAY,
+  AUDIO
 }
 
 export interface Setting {
@@ -37,34 +38,34 @@ export interface Setting {
  */
 export const SettingKeys = {
   Game_Speed: "GAME_SPEED",
-  Master_Volume: "MASTER_VOLUME",
+  HP_Bar_Speed: "HP_BAR_SPEED",
-  BGM_Volume: "BGM_VOLUME",
+  EXP_Gains_Speed: "EXP_GAINS_SPEED",
-  SE_Volume: "SE_VOLUME",
+  EXP_Party_Display: "EXP_PARTY_DISPLAY",
+  Skip_Seen_Dialogues: "SKIP_SEEN_DIALOGUES",
+  Enable_Retries: "ENABLE_RETRIES",
+  Tutorials: "TUTORIALS",
+  Touch_Controls: "TOUCH_CONTROLS",
+  Vibration: "VIBRATION",
   Language: "LANGUAGE",
-  Damage_Numbers: "DAMAGE_NUMBERS",
   UI_Theme: "UI_THEME",
   Window_Type: "WINDOW_TYPE",
-  Tutorials: "TUTORIALS",
+  Money_Format: "MONEY_FORMAT",
-  Move_Info: "MOVE_INFO",
+  Damage_Numbers: "DAMAGE_NUMBERS",
-  Enable_Retries: "ENABLE_RETRIES",
+  Move_Animations: "MOVE_ANIMATIONS",
-  Skip_Seen_Dialogues: "SKIP_SEEN_DIALOGUES",
+  Show_Stats_on_Level_Up: "SHOW_LEVEL_UP_STATS",
   Candy_Upgrade_Notification: "CANDY_UPGRADE_NOTIFICATION",
   Candy_Upgrade_Display: "CANDY_UPGRADE_DISPLAY",
-  Money_Format: "MONEY_FORMAT",
+  Move_Info: "MOVE_INFO",
-  Sprite_Set: "SPRITE_SET",
-  Move_Animations: "MOVE_ANIMATIONS",
   Show_Moveset_Flyout: "SHOW_MOVESET_FLYOUT",
   Show_Arena_Flyout: "SHOW_ARENA_FLYOUT",
   Show_Time_Of_Day_Widget: "SHOW_TIME_OF_DAY_WIDGET",
   Time_Of_Day_Animation: "TIME_OF_DAY_ANIMATION",
-  Show_Stats_on_Level_Up: "SHOW_LEVEL_UP_STATS",
+  Sprite_Set: "SPRITE_SET",
-  EXP_Gains_Speed: "EXP_GAINS_SPEED",
-  EXP_Party_Display: "EXP_PARTY_DISPLAY",
-  HP_Bar_Speed: "HP_BAR_SPEED",
   Fusion_Palette_Swaps: "FUSION_PALETTE_SWAPS",
   Player_Gender: "PLAYER_GENDER",
-  Touch_Controls: "TOUCH_CONTROLS",
+  Master_Volume: "MASTER_VOLUME",
-  Vibration: "VIBRATION"
+  BGM_Volume: "BGM_VOLUME",
+  SE_Volume: "SE_VOLUME"
 };
 
 /**
@@ -79,155 +80,10 @@ export const Setting: Array<Setting> = [
     type: SettingType.GENERAL
   },
   {
-    key: SettingKeys.Master_Volume,
+    key: SettingKeys.HP_Bar_Speed,
-    label: "Master Volume",
+    label: "HP Bar Speed",
-    options: VOLUME_OPTIONS,
+    options: ["Normal", "Fast", "Faster", "Skip"],
-    default: 5,
-    type: SettingType.GENERAL
-  },
-  {
-    key: SettingKeys.BGM_Volume,
-    label: "BGM Volume",
-    options: VOLUME_OPTIONS,
-    default: 10,
-    type: SettingType.GENERAL
-  },
-  {
-    key: SettingKeys.SE_Volume,
-    label: "SE Volume",
-    options: VOLUME_OPTIONS,
-    default: 10,
-    type: SettingType.GENERAL
-  },
-  {
-    key: SettingKeys.Language,
-    label: "Language",
-    options: ["English", "Change"],
     default: 0,
-    type: SettingType.GENERAL,
-    requireReload: true
-  },
-  {
-    key: SettingKeys.Damage_Numbers,
-    label: "Damage Numbers",
-    options: ["Off", "Simple", "Fancy"],
-    default: 0,
-    type: SettingType.GENERAL
-  },
-  {
-    key: SettingKeys.UI_Theme,
-    label: "UI Theme",
-    options: ["Default", "Legacy"],
-    default: 0,
-    type: SettingType.GENERAL,
-    requireReload: true
-  },
-  {
-    key: SettingKeys.Window_Type,
-    label: "Window Type",
-    options: new Array(5).fill(null).map((_, i) => (i + 1).toString()),
-    default: 0,
-    type: SettingType.GENERAL
-  },
-  {
-    key: SettingKeys.Tutorials,
-    label: "Tutorials",
-    options: OFF_ON,
-    default: 1,
-    type: SettingType.GENERAL
-  },
-  {
-    key: SettingKeys.Move_Info,
-    label: "Move Info",
-    options: OFF_ON,
-    default: 1,
-    type: SettingType.ACCESSIBILITY
-  },
-  {
-    key: SettingKeys.Enable_Retries,
-    label: "Enable Retries",
-    options: OFF_ON,
-    default: 0,
-    type: SettingType.ACCESSIBILITY
-  },
-  {
-    key: SettingKeys.Skip_Seen_Dialogues,
-    label: "Skip Seen Dialogues",
-    options: OFF_ON,
-    default: 0,
-    type: SettingType.GENERAL
-  },
-  {
-    key: SettingKeys.Candy_Upgrade_Notification,
-    label: "Candy Upgrade Notification",
-    options: ["Off", "Passives Only", "On"],
-    default: 0,
-    type: SettingType.ACCESSIBILITY
-  },
-  {
-    key: SettingKeys.Candy_Upgrade_Display,
-    label: "Candy Upgrade Display",
-    options: ["Icon", "Animation"],
-    default: 0,
-    type: SettingType.ACCESSIBILITY,
-    requireReload: true
-  },
-  {
-    key: SettingKeys.Money_Format,
-    label: "Money Format",
-    options: ["Normal", "Abbreviated"],
-    default: 0,
-    type: SettingType.ACCESSIBILITY
-  },
-  {
-    key: SettingKeys.Sprite_Set,
-    label: "Sprite Set",
-    options: ["Consistent", "Mixed Animated"],
-    default: 0,
-    type: SettingType.GENERAL,
-    requireReload: true
-  },
-  {
-    key: SettingKeys.Move_Animations,
-    label: "Move Animations",
-    options: OFF_ON,
-    default: 1,
-    type: SettingType.GENERAL
-  },
-  {
-    key: SettingKeys.Show_Moveset_Flyout,
-    label: "Show Moveset Flyout",
-    options: OFF_ON,
-    default: 1,
-    type: SettingType.ACCESSIBILITY
-  },
-  {
-    key: SettingKeys.Show_Arena_Flyout,
-    label: "Show Battle Effects Flyout",
-    options: OFF_ON,
-    default: 1,
-    type: SettingType.ACCESSIBILITY
-  },
-  {
-    key: SettingKeys.Show_Time_Of_Day_Widget,
-    label: "Show Time of Day Widget",
-    options: OFF_ON,
-    default: 1,
-    type: SettingType.ACCESSIBILITY,
-    requireReload: true,
-  },
-  {
-    key: SettingKeys.Time_Of_Day_Animation,
-    label: "Time of Day Animation",
-    options: ["Bounce", "Back"],
-    default: 0,
-    type: SettingType.ACCESSIBILITY
-  },
-  {
-    key: SettingKeys.Show_Stats_on_Level_Up,
-    label: "Show Stats on Level Up",
-    options: OFF_ON,
-    default: 1,
     type: SettingType.GENERAL
   },
   {
@@ -245,26 +101,26 @@ export const Setting: Array<Setting> = [
     type: SettingType.GENERAL
   },
   {
-    key: SettingKeys.HP_Bar_Speed,
+    key: SettingKeys.Skip_Seen_Dialogues,
-    label: "HP Bar Speed",
+    label: "Skip Seen Dialogues",
-    options: ["Normal", "Fast", "Faster", "Skip"],
+    options: OFF_ON,
     default: 0,
     type: SettingType.GENERAL
   },
   {
-    key: SettingKeys.Fusion_Palette_Swaps,
+    key: SettingKeys.Enable_Retries,
-    label: "Fusion Palette Swaps",
+    label: "Enable Retries",
+    options: OFF_ON,
+    default: 0,
+    type: SettingType.GENERAL
+  },
+  {
+    key: SettingKeys.Tutorials,
+    label: "Tutorials",
     options: OFF_ON,
     default: 1,
     type: SettingType.GENERAL
   },
-  {
-    key: SettingKeys.Player_Gender,
-    label: "Player Gender",
-    options: ["Boy", "Girl"],
-    default: 0,
-    type: SettingType.GENERAL
-  },
   {
     key: SettingKeys.Touch_Controls,
     label: "Touch Controls",
@@ -278,6 +134,151 @@ export const Setting: Array<Setting> = [
     options: AUTO_DISABLED,
     default: 0,
     type: SettingType.GENERAL
+  },
+  {
+    key: SettingKeys.Language,
+    label: "Language",
+    options: ["English", "Change"],
+    default: 0,
+    type: SettingType.DISPLAY,
+    requireReload: true
+  },
+  {
+    key: SettingKeys.UI_Theme,
+    label: "UI Theme",
+    options: ["Default", "Legacy"],
+    default: 0,
+    type: SettingType.DISPLAY,
+    requireReload: true
+  },
+  {
+    key: SettingKeys.Window_Type,
+    label: "Window Type",
+    options: new Array(5).fill(null).map((_, i) => (i + 1).toString()),
+    default: 0,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Money_Format,
+    label: "Money Format",
+    options: ["Normal", "Abbreviated"],
+    default: 0,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Damage_Numbers,
+    label: "Damage Numbers",
+    options: ["Off", "Simple", "Fancy"],
+    default: 0,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Move_Animations,
+    label: "Move Animations",
+    options: OFF_ON,
+    default: 1,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Show_Stats_on_Level_Up,
+    label: "Show Stats on Level Up",
+    options: OFF_ON,
+    default: 1,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Candy_Upgrade_Notification,
+    label: "Candy Upgrade Notification",
+    options: ["Off", "Passives Only", "On"],
+    default: 0,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Candy_Upgrade_Display,
+    label: "Candy Upgrade Display",
+    options: ["Icon", "Animation"],
+    default: 0,
+    type: SettingType.DISPLAY,
+    requireReload: true
+  },
+  {
+    key: SettingKeys.Move_Info,
+    label: "Move Info",
+    options: OFF_ON,
+    default: 1,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Show_Moveset_Flyout,
+    label: "Show Moveset Flyout",
+    options: OFF_ON,
+    default: 1,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Show_Arena_Flyout,
+    label: "Show Battle Effects Flyout",
+    options: OFF_ON,
+    default: 1,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Show_Time_Of_Day_Widget,
+    label: "Show Time of Day Widget",
+    options: OFF_ON,
+    default: 1,
+    type: SettingType.DISPLAY,
+    requireReload: true,
+  },
+  {
+    key: SettingKeys.Time_Of_Day_Animation,
+    label: "Time of Day Animation",
+    options: ["Bounce", "Back"],
+    default: 0,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Sprite_Set,
+    label: "Sprite Set",
+    options: ["Consistent", "Mixed Animated"],
+    default: 0,
+    type: SettingType.DISPLAY,
+    requireReload: true
+  },
+  {
+    key: SettingKeys.Fusion_Palette_Swaps,
+    label: "Fusion Palette Swaps",
+    options: OFF_ON,
+    default: 1,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Player_Gender,
+    label: "Player Gender",
+    options: ["Boy", "Girl"],
+    default: 0,
+    type: SettingType.DISPLAY
+  },
+  {
+    key: SettingKeys.Master_Volume,
+    label: "Master Volume",
+    options: VOLUME_OPTIONS,
+    default: 5,
+    type: SettingType.AUDIO
+  },
+  {
+    key: SettingKeys.BGM_Volume,
+    label: "BGM Volume",
+    options: VOLUME_OPTIONS,
+    default: 10,
+    type: SettingType.AUDIO
+  },
+  {
+    key: SettingKeys.SE_Volume,
+    label: "SE Volume",
+    options: VOLUME_OPTIONS,
+    default: 10,
+    type: SettingType.AUDIO
   }
 ];
 

src/ui-inputs.ts

@@ -9,7 +9,8 @@ import {Button} from "./enums/buttons";
 import SettingsGamepadUiHandler from "./ui/settings/settings-gamepad-ui-handler";
 import SettingsKeyboardUiHandler from "#app/ui/settings/settings-keyboard-ui-handler";
 import BattleScene from "./battle-scene";
-import SettingsAccessibilityUiHandler from "./ui/settings/settings-accessiblity-ui-handler";
+import SettingsDisplayUiHandler from "./ui/settings/settings-display-ui-handler";
+import SettingsAudioUiHandler from "./ui/settings/settings-audio-ui-handler";
 
 type ActionKeys = Record<Button, () => void>;
 
@@ -169,7 +170,7 @@ export class UiInputs {
   }
 
   buttonCycleOption(button: Button): void {
-    const whitelist = [StarterSelectUiHandler, SettingsUiHandler, SettingsAccessibilityUiHandler, SettingsGamepadUiHandler, SettingsKeyboardUiHandler];
+    const whitelist = [StarterSelectUiHandler, SettingsUiHandler, SettingsDisplayUiHandler, SettingsAudioUiHandler, SettingsGamepadUiHandler, SettingsKeyboardUiHandler];
     const uiHandler = this.scene.ui?.getHandler();
     if (whitelist.some(handler => uiHandler instanceof handler)) {
       this.scene.ui.processInput(button);

src/ui/settings/navigationMenu.ts

@@ -27,11 +27,12 @@ export class NavigationManager {
   constructor() {
     this.modes = [
       Mode.SETTINGS,
-      Mode.SETTINGS_ACCESSIBILITY,
+      Mode.SETTINGS_DISPLAY,
+      Mode.SETTINGS_AUDIO,
       Mode.SETTINGS_GAMEPAD,
       Mode.SETTINGS_KEYBOARD,
     ];
-    this.labels = ["General", "Accessibility", "Gamepad", "Keyboard"];
+    this.labels = ["General", "Display", "Audio", "Gamepad", "Keyboard"];
   }
 
   public reset() {

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

@@ -4,7 +4,7 @@ import { Mode } from "../ui";
 import AbstractSettingsUiHandler from "./abstract-settings-ui-handler";
 import { Setting, SettingType } from "#app/system/settings/settings";
 
-export default class SettingsAccessibilityUiHandler extends AbstractSettingsUiHandler {
+export default class SettingsAudioUiHandler extends AbstractSettingsUiHandler {
   /**
    * Creates an instance of SettingsGamepadUiHandler.
    *
@@ -13,8 +13,8 @@ export default class SettingsAccessibilityUiHandler extends AbstractSettingsUiHa
    */
   constructor(scene: BattleScene, mode?: Mode) {
     super(scene, mode);
-    this.title = "Accessibility";
+    this.title = "Audio";
-    this.settings = Setting.filter(s => s.type === SettingType.ACCESSIBILITY);
+    this.settings = Setting.filter(s => s.type === SettingType.AUDIO);
     this.localStorageKey = "settings";
   }
 }

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

@@ -0,0 +1,20 @@
+import BattleScene from "../../battle-scene";
+import { Mode } from "../ui";
+"#app/inputs-controller.js";
+import AbstractSettingsUiHandler from "./abstract-settings-ui-handler";
+import { Setting, SettingType } from "#app/system/settings/settings";
+
+export default class SettingsDisplayUiHandler extends AbstractSettingsUiHandler {
+  /**
+   * Creates an instance of SettingsGamepadUiHandler.
+   *
+   * @param scene - The BattleScene instance.
+   * @param mode - The UI mode, optional.
+   */
+  constructor(scene: BattleScene, mode?: Mode) {
+    super(scene, mode);
+    this.title = "Display";
+    this.settings = Setting.filter(s => s.type === SettingType.DISPLAY);
+    this.localStorageKey = "settings";
+  }
+}

src/ui/ui.ts

@@ -42,7 +42,8 @@ import { PlayerGender } from "#app/data/enums/player-gender";
 import GamepadBindingUiHandler from "./settings/gamepad-binding-ui-handler";
 import SettingsKeyboardUiHandler from "#app/ui/settings/settings-keyboard-ui-handler";
 import KeyboardBindingUiHandler from "#app/ui/settings/keyboard-binding-ui-handler";
-import SettingsAccessibilityUiHandler from "./settings/settings-accessiblity-ui-handler";
+import SettingsDisplayUiHandler from "./settings/settings-display-ui-handler";
+import SettingsAudioUiHandler from "./settings/settings-audio-ui-handler";
 
 export enum Mode {
   MESSAGE,
@@ -63,7 +64,8 @@ export enum Mode {
   MENU,
   MENU_OPTION_SELECT,
   SETTINGS,
-  SETTINGS_ACCESSIBILITY,
+  SETTINGS_DISPLAY,
+  SETTINGS_AUDIO,
   SETTINGS_GAMEPAD,
   GAMEPAD_BINDING,
   SETTINGS_KEYBOARD,
@@ -101,7 +103,8 @@ const noTransitionModes = [
   Mode.GAMEPAD_BINDING,
   Mode.KEYBOARD_BINDING,
   Mode.SETTINGS,
-  Mode.SETTINGS_ACCESSIBILITY,
+  Mode.SETTINGS_AUDIO,
+  Mode.SETTINGS_DISPLAY,
   Mode.SETTINGS_GAMEPAD,
   Mode.SETTINGS_KEYBOARD,
   Mode.ACHIEVEMENTS,
@@ -154,7 +157,8 @@ export default class UI extends Phaser.GameObjects.Container {
       new MenuUiHandler(scene),
       new OptionSelectUiHandler(scene, Mode.MENU_OPTION_SELECT),
       new SettingsUiHandler(scene),
-      new SettingsAccessibilityUiHandler(scene),
+      new SettingsDisplayUiHandler(scene),
+      new SettingsAudioUiHandler(scene),
       new SettingsGamepadUiHandler(scene),
       new GamepadBindingUiHandler(scene),
       new SettingsKeyboardUiHandler(scene),