Add daily rankings board

src/ui/daily-run-scoreboard.ts

@@ -0,0 +1,97 @@
+import BattleScene from "../battle-scene";
+import { TextStyle, addTextObject } from "./text";
+import { WindowVariant, addWindow } from "./window";
+import * as Utils from "../utils";
+
+interface RankingEntry {
+  rank: integer,
+  username: string,
+  score: integer
+}
+
+export class DailyRunScoreboard extends Phaser.GameObjects.Container {
+  private loadingLabel: Phaser.GameObjects.Text;
+  private titleLabel: Phaser.GameObjects.Text;
+  private rankingsContainer: Phaser.GameObjects.Container;
+
+  constructor(scene: BattleScene, x: number, y: number) {
+    super(scene, x, y);
+
+    this.setup();
+  }
+
+  setup() {
+    const titleWindow = addWindow(this.scene, 0, 0, 110, 16, false, false, null, null, WindowVariant.THIN);
+    this.add(titleWindow);
+
+    this.titleLabel = addTextObject(this.scene, titleWindow.displayWidth / 2, titleWindow.displayHeight / 2, 'Daily Rankings', TextStyle.WINDOW, { fontSize: '64px' });
+    this.titleLabel.setOrigin(0.5, 0.5);
+    this.add(this.titleLabel);
+
+    const window = addWindow(this.scene, 0, 15, 110, 115, false, false, null, null, WindowVariant.THIN);
+    this.add(window);
+
+    this.rankingsContainer = this.scene.add.container(6, 19);
+    this.add(this.rankingsContainer);
+
+    this.loadingLabel = addTextObject(this.scene, window.displayWidth / 2, window.displayHeight / 2 + 16, '', TextStyle.WINDOW);
+    this.loadingLabel.setOrigin(0.5, 0.5);
+    this.loadingLabel.setVisible(false);
+
+    this.add(this.loadingLabel);
+
+    this.setVisible(false);
+  }
+
+  updateRankings(rankings: RankingEntry[]) {
+    const getEntry = (rank: string, username: string, score: string) => {
+      const entryContainer = this.scene.add.container(0, 0);
+
+      const rankLabel = addTextObject(this.scene, 0, 0, rank, TextStyle.WINDOW, { fontSize: '54px' });
+      entryContainer.add(rankLabel);
+
+      const usernameLabel = addTextObject(this.scene, 12, 0, username, TextStyle.WINDOW, { fontSize: '54px' });
+      entryContainer.add(usernameLabel);
+
+      const scoreLabel = addTextObject(this.scene, 68, 0, score, TextStyle.WINDOW, { fontSize: '54px' });
+      entryContainer.add(scoreLabel);
+
+      return entryContainer;
+    };
+
+    this.rankingsContainer.add(getEntry('#', 'Username', 'Score'));
+
+    rankings.forEach((r: RankingEntry, i: integer) => {
+      const entryContainer = getEntry(r.rank.toString(), r.username, r.score.toString());
+      entryContainer.setY(r.rank * 9);
+      this.rankingsContainer.add(entryContainer);
+    });
+  }
+
+  showAndUpdate() {
+    this.rankingsContainer.removeAll(true);
+
+    this.loadingLabel.setText('Loading…');
+    this.loadingLabel.setVisible(true);
+
+    Utils.apiFetch(`daily/rankings`)
+      .then(response => response.json())
+      .then(jsonResponse => {
+        if (jsonResponse) {
+          this.loadingLabel.setVisible(false);
+          this.updateRankings(jsonResponse);
+        } else
+          this.loadingLabel.setText('No Rankings');
+      });
+
+    this.setVisible(true);
+  }
+
+  hide() {
+    this.setVisible(false);
+  }
+}
+
+export interface DailyRunScoreboard {
+  scene: BattleScene
+};