kitten/SplatNet
Watch
0
0
Fork
You've already forked SplatNet
 0
forked from spacebar/SplatNet
Code Pull requests Activity

Feat: layout of ranking screen

Browse source
This commit is contained in:
kittentm 2026-03-21 20:55:53 +01:00
commit 7be635d5f0
No known key found for this signature in database
GPG key ID: AC43DFDBC1F44A91
6 changed files with 382 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

62
ranking/rank.js
View file

@ -62,6 +62,49 @@ window.loadHeader(function(headerContainer) {
}
};
const getRankIcon = (rank) => {
const icons = {
1: "tx_nb_1_purple-e854b65457dce33c1570ee22dfdc6f3dbe74b49606d08bc92d69fb6d1ed7690a.svg",
2: "tx_nb_2_purple-50c81f51ce9f30ce89dd3f01a9812c846e7fbb7a00fc95d72726a772d2ef5bd7.svg",
3: "tx_nb_3_purple-0901c032e718a09d5e4c9c1f47646a3958da7bb566a2d4da06322d7be2a911aa.svg",
4: "tx_nb_4_purple-a2e279292822c0f181b7726bcef1ee6c3d7a18b2763ec4d8c0a54ca452fc5e04.svg",
5: "tx_nb_5_purple-16e43ef9f23e514f900ede4bde7bcb81aa062af961c553374fc7c80566cf8b47.svg",
6: "tx_nb_6_purple-1ed2cae2808bb656eb89d986c9e10289fc273cb7d026b989af0aac39722c6989.svg",
7: "tx_nb_7_purple-8cae82b95463c7ca3ab55f0bf652d10e2212b43d99e442d89fda9b1951c8b261.svg",
8: "tx_nb_8_purple-faf0aa1407d058709db1338ba8d4c42495911d63e77e9653b74b26ff25f4f355.svg",
9: "tx_nb_9_purple-68d2b702b4240b2cd2886fb146d2c9835e1a2fd79b8d218cb5b7fb32cecb4bfa.svg"
};
return `../assets/en/svg/text/scene/rank/number/${icons[rank]}`;
};
const renderRankings = () => {
const container = document.getElementById('ranking-cards-container');
if (!container) return;
container.innerHTML = '';
for (let i = 1; i <= 9; i++) {
const card = document.createElement('div');
card.className = 'rank-card-container';
card.innerHTML = `
<div class="rank-bg"></div>
<div class="rank-profile-circle"></div>
<img src="${getRankIcon(i)}" class="rank-accent">
<div class="rank-name-row">
<img src="/assets/en/svg/ui/34b4b97a4411.svg" class="rank-power-icon">
<div class="rank-name">Player ${i}</div>
</div>
<div class="rank-power-value">${2500 - (i * 10)}</div>
<div class="rank-gear-row">
<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">
<img src="/assets/en/ui/gearsmallbg.png" class="gear-sub">
</div>
`;
container.appendChild(card);
}
};
const init = () => {
const cached = sessionStorage.getItem('user_cache');
if (cached) renderData(JSON.parse(cached));
@ -84,7 +127,6 @@ window.loadHeader(function(headerContainer) {
const nameEl = document.getElementById('mii-name');
if (nameEl) nameEl.textContent = "Guest";
}
console.error("Profile fetch failed:", err);
});
const urlParams = new URLSearchParams(window.location.search);
@ -92,20 +134,22 @@ window.loadHeader(function(headerContainer) {
const regImg = document.getElementById('img-regular');
const gachiImg = document.getElementById('img-gachi');
const fesImg = document.getElementById('img-fes');
const images = {
regular: "../assets/en/svg/ui/btn_tab_regular_selected-b636e3d21ace9434120061a32658b21a34feb6468553b6d6da30ce890b85ec1f.svg",
gachi: "../assets/en/svg/ui/btn_tab_gachi_selected-4796f167399dca12cb274dcb0348cdf709a1f722ddd241210e55a3e04fdb6ff4.svg",
fes: "../assets/en/svg/ui/btn_tab_fes_selected-7a0ef00ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg",
regular_off: "../assets/en/svg/ui/btn_tab_regular-40682de5f47922c608c0ddf6eddd44efcf4b0516092041cdb48977f777030487.svg",
gachi_off: "../assets/en/svg/ui/btn_tab_gachi-1ab8351babd76ea6dd8e23eb86293c8ceafaf23b9cae3001166fabf3a01011a7.svg"
gachi_off: "../assets/en/svg/ui/btn_tab_gachi-1ab8351babd76ea6dd8e23eb86293c8ceafaf23b9cae3001166fabf3a01011a7.svg",
fes_off: "../assets/en/svg/ui/btn_tab_fes-f6f7d08ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg"
};
if (regImg) regImg.src = (mode === 'regular') ? images.regular : images.regular_off;
if (gachiImg) gachiImg.src = (mode === 'gachi') ? images.gachi : images.gachi_off;
if (fesImg) fesImg.src = (mode === 'fes') ? images.fes : images.fes_off;
if (typeof loadRankings === 'function') {
loadRankings();
}
renderRankings();
const loadingOverlay = document.getElementById("loading-overlay");
if (loadingOverlay) {
@ -118,14 +162,6 @@ window.loadHeader(function(headerContainer) {
e.preventDefault();
const href = this.getAttribute('href');
window.history.pushState({}, '', href);
const loadingOverlay = document.getElementById("loading-overlay");
if (loadingOverlay) {
loadingOverlay.style.display = "flex";
if (typeof window.animateLoadingCanvas === 'function') {
window.animateLoadingCanvas();
}
}
init();
});
});