Use data from server for Ranking Information

This commit is contained in:
kittentm 2026-03-22 07:06:52 +01:00
commit e1ca843314
No known key found for this signature in database
GPG key ID: AC43DFDBC1F44A91

View file

@ -109,25 +109,38 @@ window.loadHeader(function(headerContainer) {
return `../assets/en/svg/text/scene/rank/number/tx_nb_${rank}_${modeColor}-${hash}.svg`; return `../assets/en/svg/text/scene/rank/number/tx_nb_${rank}_${modeColor}-${hash}.svg`;
}; };
let cachedLeaderboardData = null;
const renderRankings = (mode) => { const renderRankings = (mode) => {
const container = document.getElementById('ranking-cards-container'); const container = document.getElementById('ranking-cards-container');
if (!container) return; if (!container || !cachedLeaderboardData) return;
container.innerHTML = ''; container.innerHTML = '';
const modeMap = { 'regular': 0, 'gachi': 1, 'fes': 2 };
const apiModeKey = `mode_${modeMap[mode] || 0}`;
const players = cachedLeaderboardData[apiModeKey] || [];
const isFes = mode === 'fes'; const isFes = mode === 'fes';
for (let i = 1; i <= 9; i++) { players.forEach((player, index) => {
const rankNum = index + 1;
const displayScore = isFes ? player.FesPower : player.RankingScore;
const powerIconHtml = (isFes && player.is_top_100_fes)
? `<img src="/assets/en/svg/ui/34b4b97a4411.svg" class="rank-power-icon">`
: '';
const card = document.createElement('div'); const card = document.createElement('div');
card.className = 'rank-card-container'; card.className = `rank-card-container`;
card.innerHTML = ` card.innerHTML = `
<div class="rank-bg"></div> <div class="rank-bg"></div>
<div class="rank-profile-circle"></div> <div class="rank-profile-circle"></div>
<img src="${getRankIcon(i, mode)}" class="rank-accent ${!isFes ? 'standard-mode-fix' : ''}"> <img src="${getRankIcon(rankNum, mode)}" class="rank-accent ${!isFes ? 'standard-mode-fix' : ''}">
<div class="rank-name-row"> <div class="rank-name-row">
<img src="/assets/en/svg/ui/34b4b97a4411.svg" class="rank-power-icon"> ${powerIconHtml}
<div class="rank-name">Player ${i}</div> <div class="rank-name">${player.MiiName || 'User'}</div>
</div> </div>
<div class="rank-power-value">${2500 - (i * 10)}</div> <div class="rank-power-value">${displayScore}</div>
<div class="rank-gear-row"> <div class="rank-gear-row">
<img src="/assets/en/ui/gearbigbg.png" class="gear-main"> <img src="/assets/en/ui/gearbigbg.png" class="gear-main">
<img src="/assets/en/ui/gearsmallbg.png" class="gear-sub"> <img src="/assets/en/ui/gearsmallbg.png" class="gear-sub">
@ -136,36 +149,10 @@ window.loadHeader(function(headerContainer) {
</div> </div>
`; `;
container.appendChild(card); container.appendChild(card);
} });
}; };
const init = () => { const updateTabUI = (mode) => {
const cached = sessionStorage.getItem('user_cache');
if (cached) renderData(JSON.parse(cached));
fetch("/api/v1/me", { credentials: 'include' })
.then(res => {
if (res.redirected) {
window.location.href = res.url;
return;
}
return res.ok ? res.json() : Promise.reject(res);
})
.then(data => {
if (!data) return;
sessionStorage.setItem('user_cache', JSON.stringify(data));
renderData(data);
})
.catch(err => {
if (!cached) {
const nameEl = document.getElementById('mii-name');
if (nameEl) nameEl.textContent = "Guest";
}
});
const urlParams = new URLSearchParams(window.location.search);
const mode = urlParams.get('mode') || 'regular';
const regImg = document.getElementById('img-regular'); const regImg = document.getElementById('img-regular');
const gachiImg = document.getElementById('img-gachi'); const gachiImg = document.getElementById('img-gachi');
const fesImg = document.getElementById('img-fes'); const fesImg = document.getElementById('img-fes');
@ -197,19 +184,42 @@ window.loadHeader(function(headerContainer) {
} }
renderRankings(mode); renderRankings(mode);
};
const loadingOverlay = document.getElementById("loading-overlay"); const init = () => {
if (loadingOverlay) { const cachedUser = sessionStorage.getItem('user_cache');
loadingOverlay.style.display = "none"; if (cachedUser) renderData(JSON.parse(cachedUser));
}
fetch("/api/v1/me", { credentials: 'include' })
.then(res => res.ok ? res.json() : Promise.reject(res))
.then(data => {
if (!data) return;
sessionStorage.setItem('user_cache', JSON.stringify(data));
renderData(data);
}).catch(() => {});
fetch("/api/v1/leaderboard")
.then(res => res.json())
.then(data => {
cachedLeaderboardData = data;
const urlParams = new URLSearchParams(window.location.search);
const mode = urlParams.get('mode') || 'regular';
updateTabUI(mode);
const loadingOverlay = document.getElementById("loading-overlay");
if (loadingOverlay) loadingOverlay.style.display = "none";
})
.catch(err => console.error("Leaderboard preload failed:", err));
}; };
document.querySelectorAll('.mode-selection a').forEach(link => { document.querySelectorAll('.mode-selection a').forEach(link => {
link.addEventListener('click', function(e) { link.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
const href = this.getAttribute('href'); const url = new URL(this.href, window.location.origin);
window.history.pushState({}, '', href); const newMode = url.searchParams.get('mode') || 'regular';
init();
window.history.pushState({}, '', this.href);
updateTabUI(newMode);
}); });
}); });