mirror of
https://github.com/pagefaultgames/pokerogue.git
synced 2025-01-15 13:31:40 +00:00
[UI/UX][QoL] Ask confirmation before disabling touchpad controls in settings (#4949)
* [UI] Ask Confirmation before disabling touch controls * show a message when asking for confirmation in settings * small cleanup * change settings message box to display 2 lines with word wrap
This commit is contained in:
Moka
GitHub
parent
75af359154
commit
5cc8013341
@ -1,9 +1,9 @@
|
||||
import { Mode } from "#app/ui/ui";
|
||||
import i18next from "i18next";
|
||||
import BattleScene from "../../battle-scene";
|
||||
import { hasTouchscreen } from "../../touch-controls";
|
||||
import { updateWindowType } from "../../ui/ui-theme";
|
||||
import { CandyUpgradeNotificationChangedEvent } from "../../events/battle-scene";
|
||||
import BattleScene from "#app/battle-scene";
|
||||
import { hasTouchscreen } from "#app/touch-controls";
|
||||
import { updateWindowType } from "#app/ui/ui-theme";
|
||||
import { CandyUpgradeNotificationChangedEvent } from "#app/events/battle-scene";
|
||||
import SettingsUiHandler from "#app/ui/settings/settings-ui-handler";
|
||||
import { EaseType } from "#enums/ease-type";
|
||||
import { MoneyFormat } from "#enums/money-format";
|
||||
@ -44,6 +44,7 @@ const OFF_ON: SettingOption[] = [
|
||||
label: i18next.t("settings:on")
|
||||
}
|
||||
];
|
||||
|
||||
const AUTO_DISABLED: SettingOption[] = [
|
||||
{
|
||||
value: "Auto",
|
||||
@ -55,6 +56,19 @@ const AUTO_DISABLED: SettingOption[] = [
|
||||
}
|
||||
];
|
||||
|
||||
const TOUCH_CONTROLS_OPTIONS: SettingOption[] = [
|
||||
{
|
||||
value: "Auto",
|
||||
label: i18next.t("settings:auto")
|
||||
},
|
||||
{
|
||||
value: "Disabled",
|
||||
label: i18next.t("settings:disabled"),
|
||||
needConfirmation: true,
|
||||
confirmationMessage: i18next.t("settings:confirmDisableTouch")
|
||||
}
|
||||
];
|
||||
|
||||
const SHOP_CURSOR_TARGET_OPTIONS: SettingOption[] = [
|
||||
{
|
||||
value: "Rewards",
|
||||
@ -100,7 +114,9 @@ export enum SettingType {
|
||||
|
||||
type SettingOption = {
|
||||
value: string,
|
||||
label: string
|
||||
label: string,
|
||||
needConfirmation?: boolean,
|
||||
confirmationMessage?: string
|
||||
};
|
||||
|
||||
export interface Setting {
|
||||
@ -344,13 +360,6 @@ export const Setting: Array<Setting> = [
|
||||
default: 1,
|
||||
type: SettingType.GENERAL
|
||||
},
|
||||
{
|
||||
key: SettingKeys.Touch_Controls,
|
||||
label: i18next.t("settings:touchControls"),
|
||||
options: AUTO_DISABLED,
|
||||
default: 0,
|
||||
type: SettingType.GENERAL
|
||||
},
|
||||
{
|
||||
key: SettingKeys.Vibration,
|
||||
label: i18next.t("settings:vibrations"),
|
||||
@ -358,6 +367,28 @@ export const Setting: Array<Setting> = [
|
||||
default: 0,
|
||||
type: SettingType.GENERAL
|
||||
},
|
||||
{
|
||||
key: SettingKeys.Touch_Controls,
|
||||
label: i18next.t("settings:touchControls"),
|
||||
options: TOUCH_CONTROLS_OPTIONS,
|
||||
default: 0,
|
||||
type: SettingType.GENERAL,
|
||||
isHidden: () => !hasTouchscreen()
|
||||
},
|
||||
{
|
||||
key: SettingKeys.Move_Touch_Controls,
|
||||
label: i18next.t("settings:moveTouchControls"),
|
||||
options: [
|
||||
{
|
||||
value: "Configure",
|
||||
label: i18next.t("settings:change")
|
||||
}
|
||||
],
|
||||
default: 0,
|
||||
type: SettingType.GENERAL,
|
||||
activatable: true,
|
||||
isHidden: () => !hasTouchscreen()
|
||||
},
|
||||
{
|
||||
key: SettingKeys.Language,
|
||||
label: i18next.t("settings:language"),
|
||||
@ -643,20 +674,6 @@ export const Setting: Array<Setting> = [
|
||||
type: SettingType.AUDIO,
|
||||
requireReload: true
|
||||
},
|
||||
{
|
||||
key: SettingKeys.Move_Touch_Controls,
|
||||
label: i18next.t("settings:moveTouchControls"),
|
||||
options: [
|
||||
{
|
||||
value: "Configure",
|
||||
label: i18next.t("settings:change")
|
||||
}
|
||||
],
|
||||
default: 0,
|
||||
type: SettingType.GENERAL,
|
||||
activatable: true,
|
||||
isHidden: () => !hasTouchscreen()
|
||||
},
|
||||
{
|
||||
key: SettingKeys.Shop_Cursor_Target,
|
||||
label: i18next.t("settings:shopCursorTarget"),
|
||||
@ -849,7 +866,7 @@ export function setSetting(scene: BattleScene, setting: string, value: integer):
|
||||
if (scene.ui) {
|
||||
const cancelHandler = () => {
|
||||
scene.ui.revertMode();
|
||||
(scene.ui.getHandler() as SettingsUiHandler).setOptionCursor(0, 0, true);
|
||||
(scene.ui.getHandler() as SettingsUiHandler).setOptionCursor(-1, 0, true);
|
||||
};
|
||||
const changeLocaleHandler = (locale: string): boolean => {
|
||||
try {
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
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 MessageUiHandler from "#app/ui/message-ui-handler";
|
||||
import { addWindow } from "#app/ui/ui-theme";
|
||||
import { ScrollBar } from "#app/ui/scroll-bar";
|
||||
import { Button } from "#enums/buttons";
|
||||
@ -15,9 +14,10 @@ import i18next from "i18next";
|
||||
/**
|
||||
* Abstract class for handling UI elements related to settings.
|
||||
*/
|
||||
export default class AbstractSettingsUiHandler extends UiHandler {
|
||||
export default class AbstractSettingsUiHandler extends MessageUiHandler {
|
||||
private settingsContainer: Phaser.GameObjects.Container;
|
||||
private optionsContainer: Phaser.GameObjects.Container;
|
||||
private messageBoxContainer: Phaser.GameObjects.Container;
|
||||
private navigationContainer: NavigationMenu;
|
||||
|
||||
private scrollCursor: number;
|
||||
@ -135,6 +135,23 @@ export default class AbstractSettingsUiHandler extends UiHandler {
|
||||
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);
|
||||
|
||||
// Two-lines message box
|
||||
this.messageBoxContainer = this.scene.add.container(0, this.scene.scaledCanvas.height);
|
||||
this.messageBoxContainer.setName("settings-message-box");
|
||||
this.messageBoxContainer.setVisible(false);
|
||||
|
||||
const settingsMessageBox = addWindow(this.scene, 0, -1, this.scene.scaledCanvas.width - 2, 48);
|
||||
settingsMessageBox.setOrigin(0, 1);
|
||||
this.messageBoxContainer.add(settingsMessageBox);
|
||||
|
||||
const messageText = addTextObject(this.scene, 8, -40, "", TextStyle.WINDOW, { maxLines: 2 });
|
||||
messageText.setWordWrapWidth(this.scene.game.canvas.width - 60);
|
||||
messageText.setName("settings-message");
|
||||
messageText.setOrigin(0, 0);
|
||||
|
||||
this.messageBoxContainer.add(messageText);
|
||||
this.message = messageText;
|
||||
|
||||
this.settingsContainer.add(this.optionsBg);
|
||||
this.settingsContainer.add(this.scrollBar);
|
||||
this.settingsContainer.add(this.navigationContainer);
|
||||
@ -144,6 +161,7 @@ export default class AbstractSettingsUiHandler extends UiHandler {
|
||||
this.settingsContainer.add(iconCancel);
|
||||
this.settingsContainer.add(actionText);
|
||||
this.settingsContainer.add(cancelText);
|
||||
this.settingsContainer.add(this.messageBoxContainer);
|
||||
|
||||
ui.add(this.settingsContainer);
|
||||
|
||||
@ -326,18 +344,16 @@ export default class AbstractSettingsUiHandler extends UiHandler {
|
||||
/**
|
||||
* Set the option cursor to the specified position.
|
||||
*
|
||||
* @param settingIndex - The index of the setting.
|
||||
* @param settingIndex - The index of the setting or -1 to change the current setting
|
||||
* @param cursor - The cursor position to set.
|
||||
* @param save - Whether to save the setting to local storage.
|
||||
* @returns `true` if the option cursor was set successfully.
|
||||
*/
|
||||
setOptionCursor(settingIndex: number, cursor: number, save?: boolean): boolean {
|
||||
const setting = this.settings[settingIndex];
|
||||
|
||||
if (setting.key === SettingKeys.Touch_Controls && cursor && hasTouchscreen() && isMobile()) {
|
||||
this.getUi().playError();
|
||||
return false;
|
||||
if (settingIndex === -1) {
|
||||
settingIndex = this.cursor + this.scrollCursor;
|
||||
}
|
||||
const setting = this.settings[settingIndex];
|
||||
|
||||
const lastCursor = this.optionCursors[settingIndex];
|
||||
|
||||
@ -352,10 +368,34 @@ export default class AbstractSettingsUiHandler extends UiHandler {
|
||||
newValueLabel.setShadowColor(this.getTextColor(TextStyle.SETTINGS_SELECTED, true));
|
||||
|
||||
if (save) {
|
||||
const saveSetting = () => {
|
||||
this.scene.gameData.saveSetting(setting.key, cursor);
|
||||
if (this.reloadSettings.includes(setting)) {
|
||||
if (setting.requireReload) {
|
||||
this.reloadRequired = true;
|
||||
}
|
||||
};
|
||||
|
||||
// For settings that ask for confirmation, display confirmation message and a Yes/No prompt before saving the setting
|
||||
if (setting.options[cursor].needConfirmation) {
|
||||
const confirmUpdateSetting = () => {
|
||||
this.scene.ui.revertMode();
|
||||
this.showText("");
|
||||
saveSetting();
|
||||
};
|
||||
const cancelUpdateSetting = () => {
|
||||
this.scene.ui.revertMode();
|
||||
this.showText("");
|
||||
// Put the cursor back to its previous position without saving or asking for confirmation again
|
||||
this.setOptionCursor(settingIndex, lastCursor, false);
|
||||
};
|
||||
|
||||
const confirmationMessage = setting.options[cursor].confirmationMessage ?? i18next.t("settings:defaultConfirmMessage");
|
||||
this.scene.ui.showText(confirmationMessage, null, () => {
|
||||
this.scene.ui.setOverlayMode(Mode.CONFIRM, confirmUpdateSetting, cancelUpdateSetting, null, null, 1, 750);
|
||||
});
|
||||
} else {
|
||||
saveSetting();
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
@ -421,4 +461,9 @@ export default class AbstractSettingsUiHandler extends UiHandler {
|
||||
}
|
||||
this.cursorObj = null;
|
||||
}
|
||||
|
||||
override showText(text: string, delay?: integer, callback?: Function, callbackDelay?: integer, prompt?: boolean, promptDelay?: integer) {
|
||||
this.messageBoxContainer.setVisible(!!text?.length);
|
||||
super.showText(text, delay, callback, callbackDelay, prompt, promptDelay);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user