[ui] add wrap around and scrolling bar to the achievements menu

src/ui/achvs-ui-handler.ts

@@ -1,12 +1,13 @@
-import BattleScene from "../battle-scene";
+import BattleScene from "#app/battle-scene";
 import { Button } from "#enums/buttons";
 import i18next from "i18next";
-import { Achv, achvs, getAchievementDescription } from "../system/achv";
+import { Achv, achvs, getAchievementDescription } from "#app/system/achv";
-import { Voucher, getVoucherTypeIcon, getVoucherTypeName, vouchers } from "../system/voucher";
+import { Voucher, getVoucherTypeIcon, getVoucherTypeName, vouchers } from "#app/system/voucher";
-import MessageUiHandler from "./message-ui-handler";
+import MessageUiHandler from "#app/ui/message-ui-handler";
-import { addTextObject, TextStyle } from "./text";
+import { addTextObject, TextStyle } from "#app/ui/text";
-import { Mode } from "./ui";
+import { Mode } from "#app/ui/ui";
-import { addWindow } from "./ui-theme";
+import { addWindow } from "#app/ui/ui-theme";
+import { ScrollBar } from "#app/ui/scroll-bar";
 import { PlayerGender } from "#enums/player-gender";
 
 enum Page {
@@ -49,6 +50,7 @@ export default class AchvsUiHandler extends MessageUiHandler {
   private vouchersTotal: number;
   private currentTotal: number;
 
+  private scrollBar: ScrollBar;
   private scrollCursor: number;
   private cursorObj: Phaser.GameObjects.NineSlice | null;
   private currentPage: Page;
@@ -91,7 +93,10 @@ export default class AchvsUiHandler extends MessageUiHandler {
     this.iconsBg = addWindow(this.scene, 0, this.headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - this.headerBg.height - 68);
     this.iconsBg.setOrigin(0, 0);
 
-    this.iconsContainer = this.scene.add.container(6, this.headerBg.height + 6);
+    const yOffset = 6;
+    this.scrollBar = new ScrollBar(this.scene, this.iconsBg.width - 9, this.iconsBg.y + yOffset, 4, this.iconsBg.height - yOffset * 2, this.ROWS);
+
+    this.iconsContainer = this.scene.add.container(5, this.headerBg.height + 8);
 
     this.icons = [];
 
@@ -148,6 +153,7 @@ export default class AchvsUiHandler extends MessageUiHandler {
     this.mainContainer.add(this.headerText);
     this.mainContainer.add(this.headerActionText);
     this.mainContainer.add(this.iconsBg);
+    this.mainContainer.add(this.scrollBar);
     this.mainContainer.add(this.iconsContainer);
     this.mainContainer.add(titleBg);
     this.mainContainer.add(this.titleText);
@@ -162,6 +168,7 @@ export default class AchvsUiHandler extends MessageUiHandler {
 
     this.currentPage = Page.ACHIEVEMENTS;
     this.setCursor(0);
+    this.setScrollCursor(0);
 
     this.mainContainer.setVisible(false);
   }
@@ -175,6 +182,8 @@ export default class AchvsUiHandler extends MessageUiHandler {
     this.mainContainer.setVisible(true);
     this.setCursor(0);
     this.setScrollCursor(0);
+    this.scrollBar.setTotalRows(Math.ceil(this.currentTotal / this.COLS));
+    this.scrollBar.setScrollCursor(0);
 
     this.getUi().moveTo(this.mainContainer, this.getUi().length - 1);
 
@@ -224,6 +233,8 @@ export default class AchvsUiHandler extends MessageUiHandler {
         this.updateAchvIcons();
       }
       this.setCursor(0, true);
+      this.scrollBar.setTotalRows(Math.ceil(this.currentTotal / this.COLS));
+      this.scrollBar.setScrollCursor(0);
       this.mainContainer.update();
     }
     if (button === Button.CANCEL) {
@@ -237,32 +248,44 @@ export default class AchvsUiHandler extends MessageUiHandler {
         if (this.cursor < this.COLS) {
           if (this.scrollCursor) {
             success = this.setScrollCursor(this.scrollCursor - 1);
+          } else {
+            // Wrap around to the last row
+            success = this.setScrollCursor(Math.ceil(this.currentTotal / this.COLS) - this.ROWS);
+            let newCursorIndex = this.cursor + (this.ROWS - 1) * this.COLS;
+            if (newCursorIndex > this.currentTotal - this.scrollCursor * this.COLS -1) {
+              newCursorIndex -= this.COLS;
+            }
+            success = success && this.setCursor(newCursorIndex);
           }
         } else {
           success = this.setCursor(this.cursor - this.COLS);
         }
         break;
       case Button.DOWN:
-        const canMoveDown = (this.cursor + itemOffset) + this.COLS < this.currentTotal;
+        const canMoveDown = itemOffset + 1 < this.currentTotal;
         if (rowIndex >= this.ROWS - 1) {
           if (this.scrollCursor < Math.ceil(this.currentTotal / this.COLS) - this.ROWS && canMoveDown) {
+            // scroll down one row
             success = this.setScrollCursor(this.scrollCursor + 1);
+          } else {
+            // wrap back to the first row
+            success = this.setScrollCursor(0) && this.setCursor(this.cursor % this.COLS);
           }
         } else if (canMoveDown) {
-          success = this.setCursor(this.cursor + this.COLS);
+          success = this.setCursor(Math.min(this.cursor + this.COLS, this.currentTotal - itemOffset - 1));
         }
         break;
       case Button.LEFT:
-        if (!this.cursor && this.scrollCursor) {
+        if (this.cursor % this.COLS === 0) {
-          success = this.setScrollCursor(this.scrollCursor - 1) && this.setCursor(this.cursor + (this.COLS - 1));
+          success = this.setCursor(Math.min(this.cursor + this.COLS - 1, this.currentTotal - itemOffset - 1));
-        } else if (this.cursor) {
+        } else {
           success = this.setCursor(this.cursor - 1);
         }
         break;
       case Button.RIGHT:
-        if (this.cursor + 1 === this.ROWS * this.COLS && this.scrollCursor < Math.ceil(this.currentTotal / this.COLS) - this.ROWS) {
+        if ((this.cursor + 1) % this.COLS === 0 || (this.cursor + itemOffset) === (this.currentTotal - 1)) {
-          success = this.setScrollCursor(this.scrollCursor + 1) && this.setCursor(this.cursor - (this.COLS - 1));
+          success = this.setCursor(this.cursor - this.cursor % this.COLS);
-        } else if (this.cursor + itemOffset < this.currentTotal - 1) {
+        } else {
           success = this.setCursor(this.cursor + 1);
         }
         break;
@@ -315,15 +338,22 @@ export default class AchvsUiHandler extends MessageUiHandler {
     }
 
     this.scrollCursor = scrollCursor;
+    this.scrollBar.setScrollCursor(this.scrollCursor);
+
+    // Cursor cannot go farther than the last element in the list
+    const maxCursor = Math.min(this.cursor, this.currentTotal - this.scrollCursor * this.COLS - 1);
+    if (maxCursor !== this.cursor) {
+      this.setCursor(maxCursor);
+    }
 
     switch (this.currentPage) {
     case Page.ACHIEVEMENTS:
       this.updateAchvIcons();
-      this.showAchv(achvs[Object.keys(achvs)[Math.min(this.cursor + this.scrollCursor * this.COLS, Object.values(achvs).length - 1)]]);
+      this.showAchv(achvs[Object.keys(achvs)[this.cursor + this.scrollCursor * this.COLS]]);
       break;
     case Page.VOUCHERS:
       this.updateVoucherIcons();
-      this.showVoucher(vouchers[Object.keys(vouchers)[Math.min(this.cursor + this.scrollCursor * this.COLS, Object.values(vouchers).length - 1)]]);
+      this.showVoucher(vouchers[Object.keys(vouchers)[this.cursor + this.scrollCursor * this.COLS]]);
       break;
     }
     return true;

src/ui/scroll-bar.ts

@@ -1,36 +1,65 @@
+/**
+ * A vertical scrollbar element that resizes dynamically based on the current scrolling
+ * and number of elements that can be shown on screen
+ */
 export class ScrollBar extends Phaser.GameObjects.Container {
-  private bg: Phaser.GameObjects.Image;
+  private bg: Phaser.GameObjects.NineSlice;
   private handleBody: Phaser.GameObjects.Rectangle;
-  private handleBottom: Phaser.GameObjects.Image;
+  private handleBottom: Phaser.GameObjects.NineSlice;
-  private pages: number;
+  private currentRow: number;
-  private page: number;
+  private totalRows: number;
+  private maxRows: number;
 
-  constructor(scene: Phaser.Scene, x: number, y: number, pages: number) {
+  /**
+   * @param scene the current scene
+   * @param x the scrollbar's x position (origin: top left)
+   * @param y the scrollbar's y position (origin: top left)
+   * @param width the scrollbar's width
+   * @param height the scrollbar's height
+   * @param maxRows the maximum number of rows that can be shown at once
+   */
+  constructor(scene: Phaser.Scene, x: number, y: number, width: number, height: number, maxRows: number) {
     super(scene, x, y);
 
-    this.bg = scene.add.image(0, 0, "scroll_bar");
+    this.maxRows = maxRows;
+
+    const borderSize = 2;
+    width = Math.max(width, 4);
+
+    this.bg = scene.add.nineslice(0, 0, "scroll_bar", undefined, width, height, borderSize, borderSize, borderSize, borderSize);
     this.bg.setOrigin(0, 0);
     this.add(this.bg);
 
-    this.handleBody = scene.add.rectangle(1, 1, 3, 4, 0xaaaaaa);
+    this.handleBody = scene.add.rectangle(1, 1, width - 2, 4, 0xaaaaaa);
     this.handleBody.setOrigin(0, 0);
     this.add(this.handleBody);
 
-    this.handleBottom = scene.add.image(1, 1, "scroll_bar_handle");
+    this.handleBottom = scene.add.nineslice(1, 1, "scroll_bar_handle", undefined, width - 2, 2, 2, 0, 0, 0);
     this.handleBottom.setOrigin(0, 0);
     this.add(this.handleBottom);
   }
 
-  setPage(page: number): void {
+  /**
-    this.page = page;
+   * Set the current row that is displayed
-    this.handleBody.y = 1 + (this.bg.displayHeight - 1 - this.handleBottom.displayHeight) / this.pages * page;
+   * Moves the bar handle up or down accordingly
+   * @param scrollCursor how many times the view was scrolled down
+   */
+  setScrollCursor(scrollCursor: number): void {
+    this.currentRow = scrollCursor;
+    this.handleBody.y = 1 + (this.bg.displayHeight - 1 - this.handleBottom.displayHeight) / this.totalRows * this.currentRow;
     this.handleBottom.y = this.handleBody.y + this.handleBody.displayHeight;
   }
 
-  setPages(pages: number): void {
+  /**
-    this.pages = pages;
+   * Set the total number of rows to display
-    this.handleBody.height = (this.bg.displayHeight - 1 - this.handleBottom.displayHeight) * 9 / this.pages;
+   * If it's smaller than the maximum number of rows on screen the bar will get hidden
+   * Otherwise the scrollbar handle gets resized based on the ratio to the maximum number of rows
+   * @param rows how many rows of data there are in total
+   */
+  setTotalRows(rows: number): void {
+    this.totalRows = rows;
+    this.handleBody.height = (this.bg.displayHeight - 1 - this.handleBottom.displayHeight) * this.maxRows / this.totalRows;
 
-    this.setVisible(this.pages > 9);
+    this.setVisible(this.totalRows > this.maxRows);
   }
 }

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

@@ -627,7 +627,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
 
     const starterBoxContainer = this.scene.add.container(speciesContainerX + 6, 9); //115
 
-    this.starterSelectScrollBar = new ScrollBar(this.scene, 161, 12, 0);
+    this.starterSelectScrollBar = new ScrollBar(this.scene, 161, 12, 5, starterContainerWindow.height - 6, 9);
 
     starterBoxContainer.add(this.starterSelectScrollBar);
 
@@ -2540,8 +2540,8 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
       }
     });
 
-    this.starterSelectScrollBar.setPages(Math.max(Math.ceil(this.filteredStarterContainers.length / 9), 1));
+    this.starterSelectScrollBar.setTotalRows(Math.max(Math.ceil(this.filteredStarterContainers.length / 9), 1));
-    this.starterSelectScrollBar.setPage(0);
+    this.starterSelectScrollBar.setScrollCursor(0);
 
     // sort
     const sort = this.filterBar.getVals(DropDownColumn.SORT)[0];
@@ -2576,7 +2576,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     const onScreenFirstIndex = this.scrollCursor * maxColumns;
     const onScreenLastIndex = Math.min(this.filteredStarterContainers.length - 1, onScreenFirstIndex + maxRows * maxColumns -1);
 
-    this.starterSelectScrollBar.setPage(this.scrollCursor);
+    this.starterSelectScrollBar.setScrollCursor(this.scrollCursor);
 
     let pokerusCursorIndex = 0;
     this.filteredStarterContainers.forEach((container, i) => {