57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
|
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);
|
||
|
|
}
|
||
|
|
}
|