[QoL] Automatically center window vertically when playing on landscape

src/main.ts

@@ -7,6 +7,8 @@ import BBCodeTextPlugin from "phaser3-rex-plugins/plugins/bbcodetext-plugin";
 import InputTextPlugin from "phaser3-rex-plugins/plugins/inputtext-plugin.js";
 import TransitionImagePackPlugin from "phaser3-rex-plugins/templates/transitionimagepack/transitionimagepack-plugin.js";
 import { LoadingScene } from "./loading-scene";
+import { isMobile, hasTouchscreen } from "./touch-controls";
+import { SettingKeys, Setting } from "./system/settings/settings";
 
 
 // Catch global errors and display them in an alert so users can report the issue.
@@ -25,13 +27,38 @@ window.addEventListener("unhandledrejection", (event) => {
   //alert(errorString);
 });
 
+/**
+ * Determines if the game window should be centered based on the current device and settings.
+ *
+ * This function checks several conditions to decide whether the game window should be centered:
+ * 1. Checks if the device is in landscape orientation.
+ * 2. Checks if the device is not a mobile device.
+ * 3. Checks if the device has a touchscreen.
+ * 4. Checks if touch controls is explicitly enabled in the settings.
+ *
+ * @returns {boolean} - Returns true if the window should be centered, false otherwise.
+ */
+const shouldCenterWindow = (): boolean => {
+  const touchControlsOptions = Setting.find(s => s.key === SettingKeys.Touch_Controls).options;
+  const settings = localStorage.hasOwnProperty("settings") ? JSON.parse(localStorage.getItem("settings")) : null;
+
+  const isLandscape = window.matchMedia("(orientation: landscape)").matches;
+  const isTouchControlsEnabled: boolean | null = settings ? touchControlsOptions[settings[SettingKeys.Touch_Controls]] !== "Disabled" : null;
+
+  if (isLandscape && !isMobile() && (!hasTouchscreen() || (hasTouchscreen() && (typeof isTouchControlsEnabled === "boolean" && !isTouchControlsEnabled)))) {
+    return true;
+  }
+  return false;
+};
+
 const config: Phaser.Types.Core.GameConfig = {
   type: Phaser.WEBGL,
   parent: "app",
   scale: {
     width: 1920,
     height: 1080,
-    mode: Phaser.Scale.FIT
+    mode: Phaser.Scale.FIT,
+    autoCenter: shouldCenterWindow() ? Phaser.Scale.CENTER_VERTICALLY : Phaser.Scale.NO_CENTER
   },
   plugins: {
     global: [{
@@ -151,7 +178,7 @@ Phaser.GameObjects.Rectangle.prototype.setPositionRelative = setPositionRelative
 
 document.fonts.load("16px emerald").then(() => document.fonts.load("10px pkmnems"));
 
-let game;
+let game: Phaser.Game;
 
 const startGame = () => {
   game = new Phaser.Game(config);

src/system/settings/settings.ts

@@ -244,7 +244,8 @@ export const Setting: Array<Setting> = [
     label: "Touch Controls",
     options: AUTO_DISABLED,
     default: 0,
-    type: SettingType.GENERAL
+    type: SettingType.GENERAL,
+    requireReload: true
   },
   {
     key: SettingKeys.Vibration,

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

@@ -34,6 +34,7 @@ export default class AbstractSettingsUiHandler extends UiHandler {
   private reloadSettings: Array<Setting>;
   private reloadRequired: boolean;
   private rowsToDisplay: number;
+  private settingIndex: integer;
 
   protected title: string;
   protected settings: Array<Setting>;
@@ -95,7 +96,10 @@ export default class AbstractSettingsUiHandler extends UiHandler {
       .forEach((setting, s) => {
         let settingName = setting.label;
         if (setting?.requireReload) {
-          settingName += " (Requires Reload)";
+          // Skip SettingKeys.Touch_Controls if device is mobile or has no touch screen capabilities
+          if (!(setting.key === SettingKeys.Touch_Controls && (!hasTouchscreen() || isMobile()))) {
+            settingName += " (Requires Reload)";
+          }
         }
 
         this.settingLabels[s] = addTextObject(this.scene, 8, 28 + s * 16, settingName, TextStyle.SETTINGS_LABEL);
@@ -302,6 +306,7 @@ export default class AbstractSettingsUiHandler extends UiHandler {
    * @returns `true` if the option cursor was set successfully.
    */
   setOptionCursor(settingIndex: integer, cursor: integer, save?: boolean): boolean {
+    this.settingIndex = settingIndex;
     const setting = this.settings[settingIndex];
 
     if (setting.key === SettingKeys.Touch_Controls && cursor && hasTouchscreen() && isMobile()) {
@@ -324,7 +329,11 @@ export default class AbstractSettingsUiHandler extends UiHandler {
     if (save) {
       this.scene.gameData.saveSetting(setting.key, cursor);
       if (this.reloadSettings.includes(setting)) {
-        this.reloadRequired = true;
+        if (setting.key === SettingKeys.Touch_Controls && (!hasTouchscreen() || isMobile())) {
+          this.reloadRequired = false;
+        } else {
+          this.reloadRequired = true;
+        }
       }
     }
 
@@ -370,10 +379,16 @@ export default class AbstractSettingsUiHandler extends UiHandler {
    * Clear the UI elements and state.
    */
   clear() {
+    const setting = this.settings[this.settingIndex];
+
     super.clear();
     this.settingsContainer.setVisible(false);
     this.eraseCursor();
     if (this.reloadRequired) {
+      if (setting.key === SettingKeys.Touch_Controls) {
+        window.location.reload();
+        return;
+      }
       this.reloadRequired = false;
       this.scene.reset(true, false, true);
     }