forked from spacebar/SplatNet
Feat: layout of ranking screen
This commit is contained in:
parent
cb99f07904
commit
7be635d5f0
6 changed files with 382 additions and 25 deletions
|
|
@ -41,6 +41,17 @@
|
|||
<a href="?mode=gachi" class="mode-button" id="link-gachi">
|
||||
<img id="img-gachi" src="../assets/en/svg/ui/btn_tab_gachi-1ab8351babd76ea6dd8e23eb86293c8ceafaf23b9cae3001166fabf3a01011a7.svg" alt="Ranked Battle">
|
||||
</a>
|
||||
<a href="?mode=fes" class="mode-button" id="link-fes">
|
||||
<img id="img-fes" src="../assets/en/svg/ui/btn_tab_fes-f6f7d08ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg" alt="Splatfest">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="rank-glass-panel">
|
||||
<div class="rank-header-area">
|
||||
<img src="/assets/en/svg/text/scene/rank/tx_splatfest-7a0ef00ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg" class="splatfest-title-svg">
|
||||
<div class="splatfest-subtitle">Rice VS Bread</div>
|
||||
</div>
|
||||
<div id="ranking-cards-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="stages-container" id="stages-container"></div>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -173,22 +173,115 @@ body {
|
|||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin: 30px 0;
|
||||
width: 100%;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
.mode-button {
|
||||
cursor: pointer;
|
||||
width: 280px;
|
||||
transition: transform 0.1s ease-in-out;
|
||||
text-decoration: none;
|
||||
.mode-button { width: 280px; transition: transform 0.1s ease; }
|
||||
.mode-button:hover { transform: scale(1.03); }
|
||||
|
||||
.rank-glass-panel {
|
||||
width: 1044px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 25px;
|
||||
margin: 40px auto;
|
||||
padding: 30px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
.mode-button:hover {
|
||||
transform: scale(1.03);
|
||||
.rank-header-area {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mode-button img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
.splatfest-title-svg {
|
||||
height: 45px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.splatfest-subtitle {
|
||||
font-family: "Regular", sans-serif;
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
margin-top: 5px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.rank-card-container {
|
||||
position: relative;
|
||||
width: 1000px;
|
||||
height: 237px;
|
||||
}
|
||||
|
||||
.rank-bg {
|
||||
position: absolute;
|
||||
left: 27px;
|
||||
top: 35px;
|
||||
width: 952px;
|
||||
height: 187px;
|
||||
background-color: #000000;
|
||||
border-radius: 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rank-profile-circle {
|
||||
position: absolute;
|
||||
left: 74px;
|
||||
top: 79px;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.rank-name-row {
|
||||
position: absolute;
|
||||
left: 204px;
|
||||
top: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
font-family: 'Regular', sans-serif;
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rank-power-icon { width: 54px; height: 42px; }
|
||||
|
||||
.rank-power-value {
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
top: 70px;
|
||||
font-family: 'Splatoon1', sans-serif;
|
||||
font-size: 90px;
|
||||
color: white;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.rank-gear-row {
|
||||
position: absolute;
|
||||
left: 510px;
|
||||
top: 95px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.gear-main { width: 130px; height: 112px; }
|
||||
.gear-sub { width: 84px; height: 73px; }
|
||||
|
||||
.rank-accent {
|
||||
position: absolute;
|
||||
left: 47px;
|
||||
top: 20px;
|
||||
width: 21px;
|
||||
height: 41px;
|
||||
z-index: 4;
|
||||
}
|
||||
Loading…
Reference in a new issue