re-code the userscript

src/pages/impl/player-page.ts

@@ -0,0 +1,57 @@
+import Page from "../page";
+import {getElement, getSvelteClass} from "../../common/page-utils";
+import {getPlayer, getPlayerIdFromUrl} from "../../common/player";
+
+export default class PlayerPage extends Page {
+  constructor() {
+    super("/u/");
+  }
+
+  public async onLoad() {
+    try {
+      // Wait for the title element to load, so we know the page is fully loaded
+      const titleElement = await getElement(".title.is-5.player.has-text-centered-mobile", 250);
+
+      const id = getPlayerIdFromUrl();
+      const player = await getPlayer(id);
+
+      console.log(player);
+      await this.addStats(player);
+    } catch (error) {
+      console.error("Failed to load player page", error);
+    }
+  }
+
+  /**
+   * Add the custom stats to the player's page
+   *
+   * @param player the player to add stats for
+   */
+  private async addStats(player: any) {
+    await this.addStat(
+      "+1 PP",
+      `${player.rawPerGlobalPerformancePoints.toFixed(2)}pp`,
+      "Raw performance points to gain +1 global PP"
+    );
+  }
+
+  /**
+   * Add a stat to the player's stats
+   *
+   * @param stat the title of the stat
+   * @param value the value of the stat
+   * @param hover the hover text of the stat
+   */
+  private async addStat(stat: string, value: string, hover?: string) {
+    const statsContainer = await getElement(".stats-container");
+    const statElement = document.createElement("div");
+    const svelteClass = getSvelteClass(".stats-container");
+
+    statElement.className = `stat-item ${svelteClass}`;
+    statElement.innerHTML = `
+      <span class="stat-title ${svelteClass}">${stat}</span>
+      <span class="stat-spacer ${svelteClass}"></span>
+      <span class="stat-content ${hover && "has-hover"} ${svelteClass}" ${hover && `title="${hover}"`}>${value}</span>`;
+    statsContainer.appendChild(statElement);
+  }
+}