make the script work when changing pages
All checks were successful
Deploy App / docker (ubuntu-latest, 2.44.0, 17, 3.8.5) (push) Successful in 1m20s

This commit is contained in:
Lee 2024-04-25 08:30:50 +01:00
parent bc8a9f6fdc
commit 54b20cf016

@ -16,7 +16,7 @@
* Fetches data from an API endpoint. * Fetches data from an API endpoint.
* *
* @param {string} url The URL of the API endpoint * @param {string} url The URL of the API endpoint
* @returns The JSON response from the API * @returns {Promise<any>} The JSON response from the API
*/ */
async function fetchData(url) { async function fetchData(url) {
const response = await fetch(url); const response = await fetch(url);
@ -35,7 +35,7 @@ function addStat(containerSelector, stat, value, hoverText) {
const container = document.querySelector(containerSelector); const container = document.querySelector(containerSelector);
if (!container) return; if (!container) return;
const svelteClass = container.getAttribute("class").split(" ")[1]; const svelteClass = container.classList.item(1);
const statElement = document.createElement("div"); const statElement = document.createElement("div");
statElement.className = `stat-item ${svelteClass}`; statElement.className = `stat-item ${svelteClass}`;
@ -51,7 +51,7 @@ function addStat(containerSelector, stat, value, hoverText) {
* Delays execution for the specified duration. * Delays execution for the specified duration.
* *
* @param {number} ms The duration to delay in milliseconds * @param {number} ms The duration to delay in milliseconds
* @returns A promise that resolves after the delay * @returns {Promise<void>} A promise that resolves after the delay
*/ */
function sleep(ms) { function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms)); return new Promise((resolve) => setTimeout(resolve, ms));
@ -60,8 +60,12 @@ function sleep(ms) {
/** /**
* Loads ScoreSaber Utils data on player pages. * Loads ScoreSaber Utils data on player pages.
*/ */
async function loadPlayerData() { async function loadPlayerData(path) {
const path = window.location.pathname; if (!path) {
path = window.location.pathname;
}
path = path.replace("https://scoresaber.com", "");
const isPlayerPage = path.startsWith("/u/"); const isPlayerPage = path.startsWith("/u/");
if (!isPlayerPage) { if (!isPlayerPage) {
@ -76,12 +80,13 @@ async function loadPlayerData() {
const playerId = path.split("/")[2]; const playerId = path.split("/")[2];
// Get the title element // Get the title element
await sleep(250);
const titleElement = document.querySelector(".title.is-5.player.has-text-centered-mobile"); const titleElement = document.querySelector(".title.is-5.player.has-text-centered-mobile");
if (!titleElement) return; if (!titleElement) {
const svelteClass = titleElement console.error("Failed to find title element");
.getAttribute("class") return;
.split(" ") }
.find((c) => c.startsWith("svelte")); const svelteClass = titleElement.classList.item(1);
// Add a loading indicator // Add a loading indicator
const loadingElement = document.createElement("span"); const loadingElement = document.createElement("span");
@ -105,3 +110,8 @@ async function loadPlayerData() {
} }
loadPlayerData(); loadPlayerData();
// Watch for URL changes
window.navigation.addEventListener("navigate", (event) => {
loadPlayerData(event.destination.url);
});