Add game settings

src/ui/message-ui-handler.ts

@@ -6,7 +6,7 @@ import * as Utils from "../utils";
 export default abstract class MessageUiHandler extends AwaitableUiHandler {
   protected textTimer: Phaser.Time.TimerEvent;
   protected textCallbackTimer: Phaser.Time.TimerEvent;
-  protected pendingPrompt: boolean;
+  public pendingPrompt: boolean;
 
   public message: Phaser.GameObjects.Text;
   public prompt: Phaser.GameObjects.Sprite;

src/ui/settings-ui-handler.ts

@@ -0,0 +1,174 @@
+import BattleScene, { Button } from "../battle-scene";
+import { Setting, settingDefaults, settingOptions } from "../system/settings";
+import { TextStyle, addTextObject, getTextColor } from "./text";
+import { Mode } from "./ui";
+import UiHandler from "./uiHandler";
+
+export default class SettingsUiHandler extends UiHandler {
+  private settingsContainer: Phaser.GameObjects.Container;
+  private optionsContainer: Phaser.GameObjects.Container;
+
+  private optionsBg: Phaser.GameObjects.NineSlice;
+
+  private optionCursors: integer[];
+
+  private optionValueLabels: Phaser.GameObjects.Text[][];
+
+  private cursorObj: Phaser.GameObjects.NineSlice;
+
+  constructor(scene: BattleScene, mode?: Mode) {
+    super(scene, mode);
+  }
+
+  setup() {
+    const ui = this.getUi();
+    
+    this.settingsContainer = this.scene.add.container(1, -(this.scene.game.canvas.height / 6) + 1);
+
+    const headerBg = this.scene.add.nineslice(0, 0, 'window', null, (this.scene.game.canvas.width / 6) - 2, 24, 6, 6, 6, 6);
+    headerBg.setOrigin(0, 0);
+
+    const headerText = addTextObject(this.scene, 0, 0, 'Options', TextStyle.SETTINGS_LABEL);
+    headerText.setOrigin(0, 0);
+    headerText.setPositionRelative(headerBg, 8, 4);
+
+    this.optionsBg = this.scene.add.nineslice(0, headerBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 2, 6, 6, 6, 6);
+    this.optionsBg.setOrigin(0, 0);
+
+    this.optionsContainer = this.scene.add.container(0, 0);
+
+    this.optionValueLabels = [];
+
+    Object.keys(Setting).forEach((setting, s) => {
+      const settingLabel = addTextObject(this.scene, 8, 28 + s * 16, setting.replace(/\_/g, ' '), TextStyle.SETTINGS_LABEL);
+      settingLabel.setOrigin(0, 0);
+
+      this.optionsContainer.add(settingLabel);
+
+      this.optionValueLabels.push(settingOptions[Setting[setting]].map((option, o) => {
+        const valueLabel = addTextObject(this.scene, 0, 0, option, settingDefaults[Setting[setting]] === o ? TextStyle.SETTINGS_SELECTED : TextStyle.WINDOW);
+        valueLabel.setOrigin(0, 0);
+
+        this.optionsContainer.add(valueLabel);
+
+        return valueLabel;
+      }));
+
+      const totalWidth = this.optionValueLabels[s].map(o => o.width).reduce((total, width) => total += width, 0);
+
+      const totalSpace = 220 - totalWidth / 6;
+      const optionSpacing = Math.floor(totalSpace / (this.optionValueLabels[s].length - 1));
+
+      let xOffset = 0;
+
+      for (let value of this.optionValueLabels[s]) {
+        value.setPositionRelative(settingLabel, 82 + xOffset, 0);
+        xOffset += value.width / 6 + optionSpacing;
+      }
+    });
+
+    this.optionCursors = Object.values(settingDefaults);
+
+    this.settingsContainer.add(headerBg);
+    this.settingsContainer.add(headerText);
+    this.settingsContainer.add(this.optionsBg);
+    this.settingsContainer.add(this.optionsContainer);
+
+    ui.add(this.settingsContainer);
+
+    this.setCursor(0);
+
+    this.settingsContainer.setVisible(false);
+  }
+
+  show(args: any[]) {
+    super.show(args);
+    
+    const settings: object = localStorage.hasOwnProperty('settings') ? JSON.parse(localStorage.getItem('settings')) : {};
+
+    Object.keys(settingDefaults).forEach((setting, s) => {
+      this.setOptionCursor(s, settings.hasOwnProperty(setting) ? settings[setting] : settingDefaults[setting]);
+    });
+
+    this.settingsContainer.setVisible(true);
+    this.setCursor(0);
+
+    this.getUi().moveTo(this.settingsContainer, this.getUi().length - 1);
+  }
+
+  processInput(button: Button) {
+    const ui = this.getUi();
+
+    let success = false;
+
+    if (button === Button.CANCEL) {
+      success = true;
+      this.scene.ui.revertMode();
+    } else {
+      switch (button) {
+        case Button.UP:
+          if (this.cursor)
+            success = this.setCursor(this.cursor - 1);
+          break;
+        case Button.DOWN:
+          if (this.cursor < this.optionValueLabels.length - 1)
+            success = this.setCursor(this.cursor + 1);
+          break;
+        case Button.LEFT:
+          if (this.optionCursors[this.cursor])
+            success = this.setOptionCursor(this.cursor, this.optionCursors[this.cursor] - 1, true);
+          break;
+        case Button.RIGHT:
+          if (this.optionCursors[this.cursor] < this.optionValueLabels[this.cursor].length - 1)
+            success = this.setOptionCursor(this.cursor, this.optionCursors[this.cursor] + 1, true);
+          break;
+      }
+    }
+
+    if (success)
+      ui.playSelect();
+  }
+
+  setCursor(cursor: integer): boolean {
+    const ret = super.setCursor(cursor);
+
+    if (!this.cursorObj) {
+      this.cursorObj = this.scene.add.nineslice(0, 0, 'starter_select_cursor_highlight', null, (this.scene.game.canvas.width / 6) - 10, 16, 1, 1, 1, 1);
+      this.cursorObj.setOrigin(0, 0);
+      this.optionsContainer.add(this.cursorObj);
+    }
+
+    this.cursorObj.setPositionRelative(this.optionsBg, 4, 4 + this.cursor * 16);
+
+    return ret;
+  }
+
+  setOptionCursor(settingIndex: integer, cursor: integer, save?: boolean): boolean {
+    const lastValueLabel = this.optionValueLabels[settingIndex][this.optionCursors[settingIndex]];
+    lastValueLabel.setColor(getTextColor(TextStyle.WINDOW));
+    lastValueLabel.setShadowColor(getTextColor(TextStyle.WINDOW, true));
+
+    this.optionCursors[settingIndex] = cursor;
+
+    const newValueLabel = this.optionValueLabels[settingIndex][cursor];
+    newValueLabel.setColor(getTextColor(TextStyle.SETTINGS_SELECTED));
+    newValueLabel.setShadowColor(getTextColor(TextStyle.SETTINGS_SELECTED, true));
+
+    if (save)
+      this.scene.gameData.saveSetting(Setting[Object.keys(Setting)[settingIndex]], cursor);
+
+    return true;
+  }
+
+  clear() {
+    super.clear();
+    this.settingsContainer.setVisible(false);
+    this.eraseCursor();
+  }
+
+  eraseCursor() {
+    if (this.cursorObj)
+      this.cursorObj.destroy();
+    this.cursorObj = null;
+  }
+}

src/ui/text.ts

@@ -7,7 +7,9 @@ export enum TextStyle {
   SUMMARY,
   SUMMARY_RED,
   SUMMARY_GOLD,
-  MONEY
+  MONEY,
+  SETTINGS_LABEL,
+  SETTINGS_SELECTED
 };
 
 export function addTextObject(scene: Phaser.Scene, x: number, y: number, content: string, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle) {
@@ -29,6 +31,8 @@ export function addTextObject(scene: Phaser.Scene, x: number, y: number, content
     case TextStyle.SUMMARY_GOLD:
     case TextStyle.WINDOW:
     case TextStyle.MESSAGE:
+    case TextStyle.SETTINGS_LABEL:
+    case TextStyle.SETTINGS_SELECTED:
       styleOptions.fontSize = '96px';
       break;
     case TextStyle.BATTLE_INFO:
@@ -80,5 +84,9 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean) {
     case TextStyle.SUMMARY_GOLD:
     case TextStyle.MONEY:
       return !shadow ? '#e8e8a8' : '#a0a060'
+    case TextStyle.SETTINGS_LABEL:
+      return !shadow ? '#f8b050' : '#c07800';
+    case TextStyle.SETTINGS_SELECTED:
+      return !shadow ? '#f88880' : '#f83018';
   }
 }

src/ui/ui.ts

@@ -14,6 +14,7 @@ import EvolutionSceneHandler from './evolution-scene-handler';
 import BiomeSelectUiHandler from './biome-select-ui-handler';
 import TargetSelectUiHandler from './target-select-ui-handler';
 import GameModeSelectUiHandler from './game-mode-select-ui-handler';
+import SettingsUiHandler from './settings-ui-handler';
 
 export enum Mode {
   MESSAGE,
@@ -28,7 +29,8 @@ export enum Mode {
   STARTER_SELECT,
   EVOLUTION_SCENE,
   CONFIRM,
-  GAME_MODE_SELECT
+  GAME_MODE_SELECT,
+  SETTINGS
 };
 
 const transitionModes = [
@@ -40,11 +42,13 @@ const transitionModes = [
 
 const noTransitionModes = [
   Mode.CONFIRM,
-  Mode.GAME_MODE_SELECT
+  Mode.GAME_MODE_SELECT,
+  Mode.SETTINGS
 ];
 
 export default class UI extends Phaser.GameObjects.Container {
   private mode: Mode;
+  private lastMode: Mode;
   private handlers: UiHandler[];
   private overlay: Phaser.GameObjects.Rectangle;
   
@@ -67,7 +71,8 @@ export default class UI extends Phaser.GameObjects.Container {
       new StarterSelectUiHandler(scene),
       new EvolutionSceneHandler(scene),
       new ConfirmUiHandler(scene),
-      new GameModeSelectUiHandler(scene)
+      new GameModeSelectUiHandler(scene),
+      new SettingsUiHandler(scene)
     ];
   }
 
@@ -181,6 +186,7 @@ export default class UI extends Phaser.GameObjects.Container {
         if (this.mode !== mode) {
           if (clear)
             this.getHandler().clear();
+          this.lastMode = this.mode && !clear ? this.mode : undefined;
           this.mode = mode;
           this.getHandler().show(args);
         }
@@ -199,6 +205,10 @@ export default class UI extends Phaser.GameObjects.Container {
     });
   }
 
+  getMode(): Mode {
+    return this.mode;
+  }
+
   setMode(mode: Mode, ...args: any[]): Promise<void> {
     return this.setModeInternal(mode, true, false, args);
   }
@@ -210,4 +220,13 @@ export default class UI extends Phaser.GameObjects.Container {
   setModeWithoutClear(mode: Mode, ...args: any[]): Promise<void> {
     return this.setModeInternal(mode, false, false, args);
   }
+
+  revertMode(): void {
+    if (!this.lastMode)
+      return;
+    
+    this.getHandler().clear();
+    this.mode = this.lastMode;
+    this.lastMode = undefined;
+  }
 }