[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
This commit is contained in:
SeafoamQueen 2024-06-06 10:38:54 -04:00 committed by GitHub
parent 63ce24afb2
commit 5ac1b7245f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 218 additions and 191 deletions

View File

@ -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;
}

View File

@ -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<Setting> = [
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<Setting> = [
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<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
}
];

View File

@ -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);

View File

@ -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() {

View File

@ -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";
}
}

View File

@ -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";
}
}

View File

@ -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),