Add WiP move replacement and UI transition

src/ui/confirm-ui-handler.ts

@@ -0,0 +1,114 @@
+import BattleScene from "../battle-scene";
+import { addTextObject, TextStyle } from "../text";
+import { Mode } from "./ui";
+import UiHandler from "./uiHandler";
+
+export default class ConfirmUiHandler extends UiHandler {
+  private yesHandler: Function;
+  private noHander: Function;
+
+  private confirmContainer: Phaser.GameObjects.Container;
+  private confirmBg: Phaser.GameObjects.Image;
+
+  private cursorObj: Phaser.GameObjects.Image;
+
+  private switchCheck: boolean;
+  private switchCheckCursor: integer;
+
+  constructor(scene: BattleScene) {
+    super(scene, Mode.CONFIRM);
+  }
+
+  setup() {
+    const ui = this.getUi();
+    
+    this.confirmContainer = this.scene.add.container((this.scene.game.canvas.width / 6) - 49, -49);
+    this.confirmContainer.setVisible(false);
+    ui.add(this.confirmContainer);
+
+    this.confirmBg = this.scene.add.image(0, 0, 'boolean_window');
+    this.confirmBg.setOrigin(0, 1);
+    this.confirmContainer.add(this.confirmBg);
+
+    const confirmText = addTextObject(this.scene, 0, 0, 'Yes\nNo', TextStyle.WINDOW, { maxLines: 2 });
+    confirmText.setPositionRelative(this.confirmBg, 16, 9);
+    confirmText.setLineSpacing(12);
+    this.confirmContainer.add(confirmText);
+
+    this.setCursor(0);
+  }
+
+  show(args: any[]) {
+    if (args.length >= 2 && args[0] instanceof Function && args[1] instanceof Function) {
+      super.show(args);
+      
+      this.yesHandler = args[0] as Function;
+      this.noHander = args[1] as Function;
+      this.switchCheck = args.length >= 3 && args[2] as boolean;
+
+      this.confirmContainer.setVisible(true);
+      this.setCursor(this.switchCheck ? this.switchCheckCursor : 0);
+    }
+  }
+
+  processInput(keyCode: integer) {
+    const keyCodes = Phaser.Input.Keyboard.KeyCodes;
+    const ui = this.getUi();
+
+    let success = false;
+
+    if (keyCode === keyCodes.Z || keyCode === keyCodes.X) {
+      success = true;
+      if (keyCode === keyCodes.X)
+        this.setCursor(1);
+      const handler = this.cursor ? this.noHander : this.yesHandler;
+      handler();
+      console.log(this.cursor ? this.noHander : this.yesHandler);
+      this.clear();
+    } else {
+      switch (keyCode) {
+        case keyCodes.UP:
+          if (this.cursor)
+            success = this.setCursor(0);
+          break;
+        case keyCodes.DOWN:
+          if (!this.cursor)
+            success = this.setCursor(1);
+          break;
+      }
+    }
+
+    if (success)
+      ui.playSelect();
+  }
+
+  setCursor(cursor: integer): boolean {
+    const ret = super.setCursor(cursor);
+
+    if (ret && this.switchCheck)
+      this.switchCheckCursor = this.cursor;
+
+    if (!this.cursorObj) {
+      this.cursorObj = this.scene.add.image(0, 0, 'cursor');
+      this.confirmContainer.add(this.cursorObj);
+    }
+
+    this.cursorObj.setPositionRelative(this.confirmBg, 12, this.cursor ? 33 : 17);
+
+    return ret;
+  }
+
+  clear() {
+    super.clear();
+    this.yesHandler = null;
+    this.noHander = null;
+    this.confirmContainer.setVisible(false);
+    this.eraseCursor();
+  }
+
+  eraseCursor() {
+    if (this.cursorObj)
+      this.cursorObj.destroy();
+    this.cursorObj = null;
+  }
+}

src/ui/modifier-select-ui-handler.ts

@@ -13,7 +13,7 @@ export default class ModifierSelectUiHandler extends AwaitableUiHandler {
   private cursorObj: Phaser.GameObjects.Image;
 
   constructor(scene: BattleScene) {
-    super(scene, Mode.SWITCH_CHECK);
+    super(scene, Mode.CONFIRM);
 
     this.options = [];
   }

src/ui/party-ui-handler.ts

@@ -172,7 +172,7 @@ export default class PartyUiHandler extends MessageUiHandler {
         } else if (option === PartyOption.SUMMARY) {
           this.clearOptions();
           ui.playSelect();
-          ui.setModeWithoutClear(Mode.SUMMARY);
+          ui.setModeWithoutClear(Mode.SUMMARY, this.scene.getParty()[this.cursor]);
         } else if (option === PartyOption.CANCEL)
           this.processInput(keyCodes.X);
       } else if (keyCode === keyCodes.X) {

src/ui/summary-ui-handler.ts

@@ -2,21 +2,41 @@ import BattleScene from "../battle-scene";
 import { Mode } from "./ui";
 import UiHandler from "./uiHandler";
 import * as Utils from "../utils";
+import { PlayerPokemon } from "../pokemon";
+import { Type } from "../type";
+import { TextStyle, addTextObject } from "../text";
+import Move from "../move";
 
 enum Page {
   PROFILE,
   MOVES
 }
 
+export enum SummaryUiMode {
+  DEFAULT,
+  LEARN_MOVE
+}
+
 export default class SummaryUiHandler extends UiHandler {
+  private summaryUiMode: SummaryUiMode;
+
   private summaryContainer: Phaser.GameObjects.Container;
   private summaryPageContainer: Phaser.GameObjects.Container;
-  private summaryPageBg: Phaser.GameObjects.Sprite;
+  private movesContainer: Phaser.GameObjects.Container;
+  private moveCursorObj: Phaser.GameObjects.Sprite;
+  private selectedMoveCursorObj: Phaser.GameObjects.Sprite;
+  private extraMoveRowContainer: Phaser.GameObjects.Container;
   private summaryPageTransitionContainer: Phaser.GameObjects.Container;
-  private summaryPageTransitionBg: Phaser.GameObjects.Sprite;
 
+  private pokemon: PlayerPokemon;
+  private newMove: Move;
+  private moveSelectFunction: Function;
   private transitioning: boolean;
 
+  private moveSelect: boolean;
+  private moveCursor: integer;
+  private selectedMoveIndex: integer;
+
   constructor(scene: BattleScene) {
     super(scene, Mode.SUMMARY);
   }
@@ -35,14 +55,15 @@ export default class SummaryUiHandler extends UiHandler {
     const getSummaryPageBg = () => {
       const ret = this.scene.add.sprite(0, 0, this.getPageKey(0));
       ret.setOrigin(0, 1);
-      ret.setVisible(false);
       return ret;
     };
 
-    this.summaryPageContainer = this.scene.add.container(106, 0);
-    this.summaryPageContainer.add((this.summaryPageBg = getSummaryPageBg()));
-    this.summaryPageTransitionContainer = this.scene.add.container(106, 0);
-    this.summaryPageTransitionContainer.add((this.summaryPageTransitionBg = getSummaryPageBg()));
+    this.summaryContainer.add((this.summaryPageContainer = this.scene.add.container(106, 0)));
+    this.summaryPageContainer.add(getSummaryPageBg());
+    this.summaryPageContainer.setVisible(false);
+    this.summaryContainer.add((this.summaryPageTransitionContainer = this.scene.add.container(106, 0)));
+    this.summaryPageTransitionContainer.add(getSummaryPageBg());
+    this.summaryPageTransitionContainer.setVisible(false);
   }
 
   getPageKey(page?: integer) {
@@ -54,9 +75,26 @@ export default class SummaryUiHandler extends UiHandler {
   show(args: any[]) {
     super.show(args);
 
+    this.pokemon = args[0] as PlayerPokemon;
+    this.summaryUiMode = args.length > 1 ? args[1] as SummaryUiMode : SummaryUiMode.DEFAULT;
+
     this.summaryContainer.setVisible(true);
     this.cursor = -1;
-    this.setCursor(args.length ? args[0] as Page : 0);
+
+    this.pokemon.cry();
+
+    switch (this.summaryUiMode) {
+      case SummaryUiMode.DEFAULT:
+        this.setCursor(Page.PROFILE);
+        break;
+      case SummaryUiMode.LEARN_MOVE:
+        this.newMove = args[2] as Move;
+        this.moveSelectFunction = args[3] as Function;
+
+        this.setCursor(Page.MOVES);
+        this.showMoveSelect();
+        break;
+    }
   }
 
   processInput(keyCode: integer) {
@@ -68,20 +106,50 @@ export default class SummaryUiHandler extends UiHandler {
 
     let success = false;
 
-    if (keyCode === keyCodes.X) {
-      ui.setMode(Mode.PARTY);
-      success = true;
+    if (this.moveSelect) {
+      if (keyCode === keyCodes.Z) {
+        if (this.moveCursor < this.pokemon.moveset.length) {
+          if (this.summaryUiMode === SummaryUiMode.LEARN_MOVE)
+            this.moveSelectFunction(this.moveCursor);
+          else
+            this.selectedMoveIndex = this.moveCursor;
+          success = true;
+        } else if (this.moveCursor === 4)
+          this.processInput(keyCodes.X);
+      } else if (keyCode === keyCodes.X) {
+        this.hideMoveSelect();
+        success = true;
+      } else {
+        switch (keyCode) {
+          case keyCodes.UP:
+            success = this.setCursor(this.moveCursor ? this.moveCursor - 1 : 4);
+            break;
+          case keyCodes.DOWN:
+            success = this.setCursor(this.moveCursor < 4 ? this.moveCursor + 1 : 0);
+            break;
+        }
+      }
     } else {
-      const pages = Utils.getEnumValues(Page);
-      switch (keyCode) {
-        case keyCodes.LEFT:
-          if (this.cursor)
-            success = this.setCursor(this.cursor - 1);
-          break;
-        case keyCodes.RIGHT:
-          if (this.cursor < pages.length - 1)
-            success = this.setCursor(this.cursor + 1);
-          break;
+      if (keyCode === keyCodes.Z) {
+        if (this.cursor === Page.MOVES) {
+          this.showMoveSelect();
+          success = true;
+        }
+      } else if (keyCode === keyCodes.X) {
+        ui.setMode(Mode.PARTY);
+        success = true;
+      } else {
+        const pages = Utils.getEnumValues(Page);
+        switch (keyCode) {
+          case keyCodes.LEFT:
+            if (this.cursor)
+              success = this.setCursor(this.cursor - 1);
+            break;
+          case keyCodes.RIGHT:
+            if (this.cursor < pages.length - 1)
+              success = this.setCursor(this.cursor + 1);
+            break;
+        }
       }
     }
 
@@ -90,35 +158,52 @@ export default class SummaryUiHandler extends UiHandler {
   }
 
   setCursor(cursor: integer): boolean {
-    const changed = this.cursor !== cursor;
-    if (changed) {
-      const forward = this.cursor < cursor;
-      this.cursor = cursor;
+    let changed: boolean;
+    
+    if (this.moveSelect) {
+      changed = this.moveCursor !== cursor;
+      if (changed) {
+        this.moveCursor = cursor;
 
-      if (this.summaryPageContainer.visible) {
-        this.transitioning = true;
-        this.populatePageContainer(this.summaryPageTransitionContainer, forward ? cursor : cursor + 1);
-        if (forward)
-          this.summaryPageTransitionContainer.x += 214;
-        else
+        if (!this.moveCursorObj) {
+          this.moveCursorObj = this.scene.add.sprite(-2, 0, 'summary_moves_cursor', 'highlight');
+          this.moveCursorObj.setOrigin(0, 1);
+          this.movesContainer.add(this.moveCursorObj);
+        }
+    
+        this.moveCursorObj.setY(16 * this.moveCursor + 1);
+      }
+    } else {
+      changed = this.cursor !== cursor;
+      if (changed) {
+        const forward = this.cursor < cursor;
+        this.cursor = cursor;
+
+        if (this.summaryPageContainer.visible) {
+          this.transitioning = true;
+          this.populatePageContainer(this.summaryPageTransitionContainer, forward ? cursor : cursor + 1);
+          if (forward)
+            this.summaryPageTransitionContainer.x += 214;
+          else
+            this.populatePageContainer(this.summaryPageContainer);
+          this.scene.tweens.add({
+            targets: this.summaryPageTransitionContainer,
+            x: forward ? '-=214' : '+=214',
+            duration: 250,
+            onComplete: () => {
+              if (forward)
+                this.populatePageContainer(this.summaryPageContainer);
+              else
+                this.summaryPageTransitionContainer.x -= 214;
+              this.summaryPageTransitionContainer.setVisible(false);
+              this.transitioning = false;
+            }
+          });
+          this.summaryPageTransitionContainer.setVisible(true);
+        } else {
           this.populatePageContainer(this.summaryPageContainer);
-        this.scene.tweens.add({
-          targets: this.summaryPageTransitionContainer,
-          x: forward ? '-=214' : '+=214',
-          duration: 250,
-          onComplete: () => {
-            if (forward)
-              this.populatePageContainer(this.summaryPageContainer);
-            else
-              this.summaryPageTransitionContainer.x -= 214;
-            this.summaryPageTransitionContainer.setVisible(false);
-            this.transitioning = false;
-          }
-        });
-        this.summaryPageTransitionContainer.setVisible(true);
-      } else {
-        this.populatePageContainer(this.summaryPageContainer);
-        this.summaryPageContainer.setVisible(true);
+          this.summaryPageContainer.setVisible(true);
+        }
       }
     }
 
@@ -129,19 +214,68 @@ export default class SummaryUiHandler extends UiHandler {
     if (page === undefined)
       page = this.cursor;
 
-    if (pageContainer.getAll().length > 1)
+    if (pageContainer.getAll().length > 1) {
+      if (this.movesContainer)
+        this.movesContainer.removeAll(true);
       pageContainer.removeBetween(1, undefined, true);
-    (pageContainer.getAt(0) as Phaser.GameObjects.Sprite).setTexture(this.getPageKey(page));
+    }
+    const pageBg =  (pageContainer.getAt(0) as Phaser.GameObjects.Sprite);
+    pageBg.setTexture(this.getPageKey(page));
     
     switch (page) {
       case Page.MOVES:
+        this.movesContainer = this.scene.add.container(5, -pageBg.height + 26);
+        pageContainer.add(this.movesContainer);
+
+        this.extraMoveRowContainer = this.scene.add.container(0, 64);
+        this.movesContainer.add(this.extraMoveRowContainer);
+
+        const extraRowOverlay = this.scene.add.image(-2, 1, 'summary_moves_overlay_row');
+        extraRowOverlay.setOrigin(0, 1);
+        this.extraMoveRowContainer.add(extraRowOverlay);
+
+        const extraRowText = addTextObject(this.scene, 35, 0, this.summaryUiMode === SummaryUiMode.LEARN_MOVE ? this.newMove.name : 'CANCEL',
+          this.summaryUiMode === SummaryUiMode.LEARN_MOVE ? TextStyle.SUMMARY_RED : TextStyle.SUMMARY);
+        extraRowText.setOrigin(0, 1);
+        this.extraMoveRowContainer.add(extraRowText);
+
+        for (let m = 0; m < 4; m++) {
+          const move = m < this.pokemon.moveset.length ? this.pokemon.moveset[m] : null;
+
+          if (move) {
+            const typeIcon = this.scene.add.sprite(0, 16 * m, 'types', Type[move.getMove().type].toLowerCase());
+            typeIcon.setOrigin(0, 1);
+            this.movesContainer.add(typeIcon);
+          }
+
+          const moveText = addTextObject(this.scene, 35, 16 * m, move ? move.getName() : '-', TextStyle.SUMMARY);
+          moveText.setOrigin(0, 1);
+          this.movesContainer.add(moveText);
+        }
         break;
     }
   }
 
+  showMoveSelect() {
+    this.moveSelect = true;
+    this.setCursor(0);
+  }
+
+  hideMoveSelect() {
+    if (this.summaryUiMode === SummaryUiMode.LEARN_MOVE) {
+      this.moveSelectFunction(4);
+      return;
+    }
+
+    this.moveSelect = false;
+  }
+
   clear() {
     super.clear();
+    this.pokemon = null;
     this.cursor = -1;
+    this.newMove = null;
+    this.moveSelectFunction = null;
     this.summaryContainer.setVisible(false);
     this.summaryPageContainer.setVisible(false);
   }

src/ui/switch-check-ui-handler.ts

@@ -1,114 +0,0 @@
-import { SwitchPhase, SwitchSummonPhase } from "../battle-phase";
-import BattleScene from "../battle-scene";
-import { addTextObject, TextStyle } from "../text";
-import AwaitableUiHandler from "./awaitable-ui-handler";
-import { Mode } from "./ui";
-
-export default class SwitchCheckUiHandler extends AwaitableUiHandler {
-  private switchCheckContainer: Phaser.GameObjects.Container;
-  private switchCheckBg: Phaser.GameObjects.Image;
-
-  private cursorObj: Phaser.GameObjects.Image;
-
-  constructor(scene: BattleScene) {
-    super(scene, Mode.SWITCH_CHECK);
-  }
-
-  setup() {
-    const ui = this.getUi();
-    
-    const switchCheckContainer = this.scene.add.container((this.scene.game.canvas.width / 6) - 49, -49);
-    switchCheckContainer.setVisible(false);
-    ui.add(switchCheckContainer);
-
-    this.switchCheckContainer = switchCheckContainer;
-
-    const switchCheckBg = this.scene.add.image(0, 0, 'boolean_window');
-    switchCheckBg.setOrigin(0, 1);
-    switchCheckContainer.add(switchCheckBg);
-
-    this.switchCheckBg = switchCheckBg;
-
-    const switchCheckText = addTextObject(this.scene, 0, 0, 'Yes\nNo', TextStyle.WINDOW, { maxLines: 2 });
-    switchCheckText.setPositionRelative(switchCheckBg, 16, 9);
-    switchCheckText.setLineSpacing(12);
-    switchCheckContainer.add(switchCheckText);
-
-    this.setCursor(0);
-  }
-
-  show(args: any[]) {
-    if (args.length && args[0] instanceof Function) {
-      super.show(args);
-      
-      this.awaitingActionInput = true;
-      this.onActionInput = args[0] as Function;
-
-      this.switchCheckContainer.setVisible(true);
-      this.setCursor(this.cursor);
-    }
-  }
-
-  processInput(keyCode: integer) {
-    const keyCodes = Phaser.Input.Keyboard.KeyCodes;
-    const ui = this.getUi();
-
-    if (!this.awaitingActionInput)
-      return;
-
-    let success = false;
-
-    if (keyCode === keyCodes.Z || keyCode === keyCodes.X) {
-      success = true;
-      if (keyCode === keyCodes.X)
-        this.setCursor(1);
-      if (this.onActionInput) {
-        if (!this.cursor)
-          this.scene.unshiftPhase(new SwitchPhase(this.scene, false, true));
-        const originalOnActionInput = this.onActionInput;
-        this.onActionInput = null;
-        originalOnActionInput();
-        this.clear();
-      }
-    } else {
-      switch (keyCode) {
-        case keyCodes.UP:
-          if (this.cursor)
-            success = this.setCursor(0);
-          break;
-        case keyCodes.DOWN:
-          if (!this.cursor)
-            success = this.setCursor(1);
-          break;
-      }
-    }
-
-    if (success)
-      ui.playSelect();
-  }
-
-  setCursor(cursor: integer): boolean {
-    const ret = super.setCursor(cursor);
-
-    if (!this.cursorObj) {
-      this.cursorObj = this.scene.add.image(0, 0, 'cursor');
-      this.switchCheckContainer.add(this.cursorObj);
-    }
-
-    this.cursorObj.setPositionRelative(this.switchCheckBg, 12, this.cursor ? 33 : 17);
-
-    return ret;
-  }
-
-  clear() {
-    super.clear();
-    this.switchCheckContainer.setVisible(false);
-    this.eraseCursor();
-  }
-
-  eraseCursor() {
-    if (this.cursorObj)
-      this.cursorObj.destroy();
-    this.cursorObj = null;
-  }
-}

src/ui/ui.ts

@@ -5,7 +5,7 @@ import CommandUiHandler from './command-ui-handler';
 import PartyUiHandler from './party-ui-handler';
 import FightUiHandler from './fight-ui-handler';
 import MessageUiHandler from './message-ui-handler';
-import SwitchCheckUiHandler from './switch-check-ui-handler';
+import ConfirmUiHandler from './confirm-ui-handler';
 import ModifierSelectUiHandler from './modifier-select-ui-handler';
 import BallUiHandler from './ball-ui-handler';
 import SummaryUiHandler from './summary-ui-handler';
@@ -15,15 +15,21 @@ export enum Mode {
   COMMAND,
   FIGHT,
   BALL,
-  SWITCH_CHECK,
+  CONFIRM,
   MODIFIER_SELECT,
   PARTY,
   SUMMARY
 };
 
+const transitionModes = [
+  Mode.PARTY,
+  Mode.SUMMARY
+];
+
 export default class UI extends Phaser.GameObjects.Container {
   private mode: Mode;
   private handlers: UiHandler[];
+  private overlay: Phaser.GameObjects.Rectangle;
 
   constructor(scene: BattleScene) {
     super(scene, 0, scene.game.canvas.height / 6);
@@ -34,7 +40,7 @@ export default class UI extends Phaser.GameObjects.Container {
       new CommandUiHandler(scene),
       new FightUiHandler(scene),
       new BallUiHandler(scene),
-      new SwitchCheckUiHandler(scene),
+      new ConfirmUiHandler(scene),
       new ModifierSelectUiHandler(scene),
       new PartyUiHandler(scene),
       new SummaryUiHandler(scene)
@@ -45,6 +51,10 @@ export default class UI extends Phaser.GameObjects.Container {
     for (let handler of this.handlers) {
       handler.setup();
     }
+    this.overlay = this.scene.add.rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6, 0);
+    this.overlay.setOrigin(0, 0);
+    (this.scene as BattleScene).uiContainer.add(this.overlay);
+    this.overlay.setVisible(false);
   }
 
   getHandler() {
@@ -91,18 +101,47 @@ export default class UI extends Phaser.GameObjects.Container {
     this.scene.sound.play('error');
   }
 
-  setMode(mode: Mode, ...args: any[]) {
-    if (this.mode === mode)
-      return;
-    this.getHandler().clear();
-    this.mode = mode;
-    this.getHandler().show(args);
+  private setModeInternal(mode: Mode, clear: boolean, args: any[]): Promise<void> {
+    return new Promise(resolve => {
+      if (this.mode === mode) {
+        resolve();
+        return;
+      }
+      const doSetMode = () => {
+        this.getHandler().clear();
+        this.mode = mode;
+        this.getHandler().show(args);
+        resolve();
+      };
+      if (transitionModes.indexOf(this.mode) > -1 || transitionModes.indexOf(mode) > -1) {
+        this.overlay.setAlpha(0);
+        this.overlay.setVisible(true);
+        this.scene.tweens.add({
+          targets: this.overlay,
+          alpha: 1,
+          duration: 250,
+          onComplete: () => {
+            this.scene.time.delayedCall(250, () => {
+              doSetMode();
+              this.scene.tweens.add({
+                targets: this.overlay,
+                alpha: 0,
+                duration: 250,
+                onComplete: () => this.overlay.setVisible(false)
+              });
+            });
+          }
+        });
+      } else
+        doSetMode();
+    });
   }
 
-  setModeWithoutClear(mode: Mode, ...args: any[]) {
-    if (this.mode === mode)
-      return;
-    this.mode = mode;
-    this.getHandler().show(args);
+  setMode(mode: Mode, ...args: any[]): Promise<void> {
+    return this.setModeInternal(mode, true, args);
+  }
+
+  setModeWithoutClear(mode: Mode, ...args: any[]): Promise<void> {
+    return this.setModeInternal(mode, false, args);
   }
 }