Additions to summary UI

src/battle-scene.ts

@@ -188,7 +188,7 @@ export default class BattleScene extends Phaser.Scene {
 
 		this.loadBgm('level_up_fanfare');
 
-		this.load.glsl('sprite', 'shaders/sprite.frag');
+		//this.load.glsl('sprite', 'shaders/sprite.frag');
 
 		populateAnims();
 	}

src/ui/summary-ui-handler.ts

@@ -1,6 +1,7 @@
 import BattleScene from "../battle-scene";
 import { Mode } from "./ui";
 import UiHandler from "./uiHandler";
+import * as Utils from "../utils";
 
 enum Page {
   PROFILE,
@@ -9,10 +10,12 @@ enum Page {
 
 export default class SummaryUiHandler extends UiHandler {
   private summaryContainer: Phaser.GameObjects.Container;
-  private summaryPage: Phaser.GameObjects.Sprite;
+  private summaryPageContainer: Phaser.GameObjects.Container;
-  private summaryPageTransition: Phaser.GameObjects.Sprite;
+  private summaryPageBg: Phaser.GameObjects.Sprite;
+  private summaryPageTransitionContainer: Phaser.GameObjects.Container;
+  private summaryPageTransitionBg: Phaser.GameObjects.Sprite;
 
-  private page: integer;
+  private transitioning: boolean;
 
   constructor(scene: BattleScene) {
     super(scene, Mode.SUMMARY);
@@ -29,55 +32,117 @@ export default class SummaryUiHandler extends UiHandler {
     summaryBg.setOrigin(0, 1);
     this.summaryContainer.add(summaryBg);
 
-    this.page = 0;
+    const getSummaryPageBg = () => {
+      const ret = this.scene.add.sprite(0, 0, this.getPageKey(0));
+      ret.setOrigin(0, 1);
+      ret.setVisible(false);
+      return ret;
+    };
 
-    this.summaryPage = this.scene.add.sprite(106, 21, this.getPageKey());
+    this.summaryPageContainer = this.scene.add.container(106, 0);
-    this.summaryPage.setVisible(false);
+    this.summaryPageContainer.add((this.summaryPageBg = getSummaryPageBg()));
-    this.summaryContainer.add(this.summaryPage);
+    this.summaryPageTransitionContainer = this.scene.add.container(106, 0);
+    this.summaryPageTransitionContainer.add((this.summaryPageTransitionBg = getSummaryPageBg()));
   }
 
-  setPage(newPage: integer) {
+  getPageKey(page?: integer) {
-    this.page = newPage;
+    if (page === undefined)
-  
+      page = this.cursor;
-    if (this.summaryPage.visible) {
+    return `summary_${Page[page].toLowerCase()}`;
-
-    } else {
-      this.summaryPage.setTexture(this.getPageKey());
-      this.summaryPage.setVisible(true);
-    }
-  }
-
-  getPageKey() {
-    return `summary_${Page[this.page].toLowerCase()}`;
   }
 
   show(args: any[]) {
     super.show(args);
 
     this.summaryContainer.setVisible(true);
+    this.cursor = -1;
+    this.setCursor(args.length ? args[0] as Page : 0);
   }
 
   processInput(keyCode: integer) {
+    if (this.transitioning)
+      return;
+
     const ui = this.getUi();
     const keyCodes = Phaser.Input.Keyboard.KeyCodes;
 
+    let success = false;
+
     if (keyCode === keyCodes.X) {
       ui.setMode(Mode.PARTY);
-      ui.playSelect();
+      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;
+      }
     }
+
+    if (success)
+      ui.playSelect();
   }
 
   setCursor(cursor: integer): boolean {
     const 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.summaryPageContainer.setVisible(true);
+      }
     }
 
     return changed;
   }
 
+  populatePageContainer(pageContainer: Phaser.GameObjects.Container, page?: Page) {
+    if (page === undefined)
+      page = this.cursor;
+
+    if (pageContainer.getAll().length > 1)
+      pageContainer.removeBetween(1, undefined, true);
+    (pageContainer.getAt(0) as Phaser.GameObjects.Sprite).setTexture(this.getPageKey(page));
+    
+    switch (page) {
+      case Page.MOVES:
+        break;
+    }
+  }
+
   clear() {
     super.clear();
+    this.cursor = -1;
     this.summaryContainer.setVisible(false);
-    this.summaryPage.setVisible(false);
+    this.summaryPageContainer.setVisible(false);
   }
 }