View Peak Rank

// ==UserScript==
// @name         View Peak Rank
// @namespace    a2m.ca
// @version      1.0.0
// @description  Easily toggle to view peak rank in Tracker
// @author       waf9000
// @match        https://tracker.gg/valorant/**
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tracker.gg
// @grant        none
// ==/UserScript==

function withPeakRank(name, f) {
  const cache = localStorage.getItem(name);
  if (cache !== null) return f(JSON.parse(cache));
  fetch(`https://api.tracker.gg/api/v2/valorant/standard/profile/riot/${encodeURIComponent(name)}`).then(r => r.json()).then(json => {
    const data = json.data?.segments?.[0]?.stats?.peakRank?.metadata ?? false;
    try {
      localStorage.setItem(name, JSON.stringify(data));
    } catch (e) {
      if (e instanceof DOMException && e.name === 'QuotaExceededError') {
        localStorage.clear();
        localStorage.setItem(name, JSON.stringify(data));
      } else { throw e; }
    }
    return f(data);
  });
}

window.getHeaderLabels = () => document.querySelectorAll(".st-entry-rank.st-header__item > span:not(.toggle-rank)");

function addPeakRankToggle() {
  const headerLabels = window.getHeaderLabels();
  const rows = document.querySelectorAll('.st-valorant-team div.st-content__item');
  headerLabels.forEach((h) => h.classList.add('toggle-rank') ?? h.parentNode.addEventListener('click', (ev) => {
    if (/(Current|Match) Rank/.exec(h.textContent)) {
      headerLabels.forEach((header) => {
        header.oldTextContent = header.textContent;
        header.textContent = 'Peak Rank';
      });
      rows.forEach((row) => {
        const name = row.querySelector('.trn-ign').innerText.replace('\n', '');
        const rankImg = row.querySelector('.st-entry-rank img');
        rankImg.currentRankSrc = rankImg.src;
        withPeakRank(name, (metadata) => metadata && (rankImg.src = metadata?.iconUrl));
      });
    } else {
      headerLabels.forEach((header) => { header.textContent = header.oldTextContent; });
      document.querySelectorAll('.st-entry-rank img').forEach((img) => {
        if (img.currentRankSrc) img.src = img.currentRankSrc;
      });
    }
  }));
};

function findRankHeader() {
  if (window.getHeaderLabels()?.length > 0) {
    console.debug("[ViewPeakRank] found rank header!");
    addPeakRankToggle();
    return true;
  }
}

setTimeout(() => {
  const finder = new MutationObserver(findRankHeader); const elem = document.querySelector('#trn-teleport-drawer-content');
  if (elem) finder.observe(elem, { subtree: true, childList: true }); else console.warn('[ViewPeakRank] could not find drawer');
  console.debug("[ViewPeakRank] hi!");
  findRankHeader() || console.debug("[ViewPeakRank] could not find rank header");
}, 500);