From 5ac1b7245f68820ffc92471ec84685fc7dc23e11 Mon Sep 17 00:00:00 2001 From: SeafoamQueen <167576411+SeafoamQueen@users.noreply.github.com> Date: Thu, 6 Jun 2024 10:38:54 -0400 Subject: [PATCH] [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 | 4 +- src/system/settings/settings.ts | 357 +++++++++--------- src/ui-inputs.ts | 5 +- src/ui/settings/navigationMenu.ts | 5 +- ...andler.ts => settings-audio-ui-handler.ts} | 6 +- .../settings/settings-display-ui-handler.ts | 20 + src/ui/ui.ts | 12 +- 7 files changed, 218 insertions(+), 191 deletions(-) rename src/ui/settings/{settings-accessiblity-ui-handler.ts => settings-audio-ui-handler.ts} (81%) create mode 100644 src/ui/settings/settings-display-ui-handler.ts diff --git a/index.css b/index.css index 5497d3b9398..c0791259002 100644 --- a/index.css +++ b/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_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 .apadRectBtnContainer > .apadSqBtn, +#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; } diff --git a/src/system/settings/settings.ts b/src/system/settings/settings.ts index b2175275eef..3cd578dbaf4 100644 --- a/src/system/settings/settings.ts +++ b/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", - BGM_Volume: "BGM_VOLUME", - SE_Volume: "SE_VOLUME", + HP_Bar_Speed: "HP_BAR_SPEED", + EXP_Gains_Speed: "EXP_GAINS_SPEED", + 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", - Move_Info: "MOVE_INFO", - Enable_Retries: "ENABLE_RETRIES", - Skip_Seen_Dialogues: "SKIP_SEEN_DIALOGUES", + Money_Format: "MONEY_FORMAT", + Damage_Numbers: "DAMAGE_NUMBERS", + Move_Animations: "MOVE_ANIMATIONS", + 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", - Sprite_Set: "SPRITE_SET", - Move_Animations: "MOVE_ANIMATIONS", + Move_Info: "MOVE_INFO", 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", - EXP_Gains_Speed: "EXP_GAINS_SPEED", - EXP_Party_Display: "EXP_PARTY_DISPLAY", - HP_Bar_Speed: "HP_BAR_SPEED", + Sprite_Set: "SPRITE_SET", Fusion_Palette_Swaps: "FUSION_PALETTE_SWAPS", Player_Gender: "PLAYER_GENDER", - Touch_Controls: "TOUCH_CONTROLS", - Vibration: "VIBRATION" + Master_Volume: "MASTER_VOLUME", + BGM_Volume: "BGM_VOLUME", + SE_Volume: "SE_VOLUME" }; /** @@ -79,155 +80,10 @@ export const Setting: Array = [ type: SettingType.GENERAL }, { - key: SettingKeys.Master_Volume, - label: "Master Volume", - options: VOLUME_OPTIONS, - 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"], + key: SettingKeys.HP_Bar_Speed, + label: "HP Bar Speed", + options: ["Normal", "Fast", "Faster", "Skip"], 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 = [ type: SettingType.GENERAL }, { - key: SettingKeys.HP_Bar_Speed, - label: "HP Bar Speed", - options: ["Normal", "Fast", "Faster", "Skip"], + key: SettingKeys.Skip_Seen_Dialogues, + label: "Skip Seen Dialogues", + options: OFF_ON, default: 0, type: SettingType.GENERAL }, { - key: SettingKeys.Fusion_Palette_Swaps, - label: "Fusion Palette Swaps", + key: SettingKeys.Enable_Retries, + 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 = [ 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 } ]; diff --git a/src/ui-inputs.ts b/src/ui-inputs.ts index ebe055d8de1..d068cbebde7 100644 --- a/src/ui-inputs.ts +++ b/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 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); diff --git a/src/ui/settings/navigationMenu.ts b/src/ui/settings/navigationMenu.ts index d9664276872..c35e60d3ac7 100644 --- a/src/ui/settings/navigationMenu.ts +++ b/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() { diff --git a/src/ui/settings/settings-accessiblity-ui-handler.ts b/src/ui/settings/settings-audio-ui-handler.ts similarity index 81% rename from src/ui/settings/settings-accessiblity-ui-handler.ts rename to src/ui/settings/settings-audio-ui-handler.ts index ef700a7a9ab..47606d3c54c 100644 --- a/src/ui/settings/settings-accessiblity-ui-handler.ts +++ b/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.settings = Setting.filter(s => s.type === SettingType.ACCESSIBILITY); + this.title = "Audio"; + this.settings = Setting.filter(s => s.type === SettingType.AUDIO); this.localStorageKey = "settings"; } } diff --git a/src/ui/settings/settings-display-ui-handler.ts b/src/ui/settings/settings-display-ui-handler.ts new file mode 100644 index 00000000000..9e61c2ba0b2 --- /dev/null +++ b/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"; + } +} diff --git a/src/ui/ui.ts b/src/ui/ui.ts index 55ac06a3488..aaf764f501f 100644 --- a/src/ui/ui.ts +++ b/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),