forked from spacebar/SplatNet
Overhaul of how header is managed & loaded
- Fixes a bunch of hardcodes - Uses more centralized general.js more - adds Lang selector (not used currently) - Adds "to official splatoon website" text
This commit is contained in:
parent
7c5013e365
commit
5029fa3346
12 changed files with 10088 additions and 394 deletions
|
|
@ -5,7 +5,7 @@
|
|||
<title>SplatNet - Splatoon's multiplayer service hub</title>
|
||||
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="/assets/jquery-1.9.1.js"></script>
|
||||
<script src="/config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -22,11 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<div id="header-container"></div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="logo-left-align">
|
||||
<div id="stage-header-logo">
|
||||
<img class="bg-layer" src="../assets/en/svg/ui/bg_h1-62e768f2a1ca52f993b5953c78d46bc53b35b70df7f8e13619a982f8f10ab750.svg">
|
||||
|
|
@ -34,10 +30,14 @@
|
|||
<img class="label-layer" src="../assets/en/svg/text/scene/rank/tx_ranking_wht-f79b9c472757006700455a8b74eaa4e50fee7c316373c98d873e0769f9bdb6d9.svg">
|
||||
</div>
|
||||
<div class="equipmentsubtitle-text">
|
||||
Win battles to raise your weekly rank! Rankings are reset every Sunday at midnight! (Your rank is calculated by multiplying number of wins X win rate.)
|
||||
Win battles to raise your weekly rank! Rankings are reset every Sunday at midnight! (Your rank is calculated by multiplying number of wins X win rate.)
|
||||
</div>
|
||||
</div>
|
||||
<div class="stages-container" id="stages-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="rank.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
123
ranking/rank.js
123
ranking/rank.js
|
|
@ -1,65 +1,68 @@
|
|||
fetch("../header.html")
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
if (headerContainer) headerContainer.innerHTML = html;
|
||||
window.loadHeader(function(headerContainer) {
|
||||
const rankButton = headerContainer.querySelector('.menu-item.rank');
|
||||
if (rankButton) {
|
||||
rankButton.classList.add('active');
|
||||
}
|
||||
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
if (typeof CONFIG !== 'undefined') {
|
||||
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
|
||||
const logoutForm = document.getElementById("logout-form");
|
||||
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
|
||||
if (logoutForm) {
|
||||
logoutForm.action = apiBase + "/api/v1/spfn/logout";
|
||||
const originInput = document.getElementById("logout_frontend_origin");
|
||||
if (originInput) originInput.value = window.location.origin;
|
||||
|
||||
logoutForm.addEventListener('submit', () => {
|
||||
sessionStorage.removeItem('user_cache');
|
||||
});
|
||||
}
|
||||
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); }
|
||||
catch (e) { console.error(e); }
|
||||
}
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
if (nameEl) {
|
||||
nameEl.textContent = (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
if (imgEl) {
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
if (miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cached) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error(err);
|
||||
});
|
||||
logoutForm.addEventListener('submit', () => {
|
||||
sessionStorage.removeItem('user_cache');
|
||||
});
|
||||
}
|
||||
|
||||
const friendButton = headerContainer.querySelector('.menu-item.rank');
|
||||
if (friendButton) {
|
||||
friendButton.classList.add('active');
|
||||
}
|
||||
|
||||
// temporaily force hide lol
|
||||
document.getElementById("loading-overlay").style.display = "none";
|
||||
const renderData = (data) => {
|
||||
if (typeof data === 'string') {
|
||||
try { data = JSON.parse(data); } catch (e) { console.error(e); }
|
||||
}
|
||||
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
const imgEl = document.getElementById('mii-img');
|
||||
|
||||
if (nameEl) {
|
||||
nameEl.textContent = (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
}
|
||||
|
||||
if (imgEl) {
|
||||
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
|
||||
if (miiBlob) {
|
||||
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodeURIComponent(miiBlob)}&type=face&width=270`;
|
||||
imgEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cached = sessionStorage.getItem('user_cache');
|
||||
if (cached) renderData(JSON.parse(cached));
|
||||
|
||||
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
|
||||
.then(res => res.ok ? res.json() : Promise.reject(res))
|
||||
.then(data => {
|
||||
sessionStorage.setItem('user_cache', JSON.stringify(data));
|
||||
renderData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cached) {
|
||||
const nameEl = document.getElementById('mii-name');
|
||||
if (nameEl) nameEl.textContent = "Guest";
|
||||
}
|
||||
console.error("Profile fetch failed:", err);
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof loadRankings === 'function') {
|
||||
loadRankings();
|
||||
}
|
||||
|
||||
const loadingOverlay = document.getElementById("loading-overlay");
|
||||
if (loadingOverlay) {
|
||||
loadingOverlay.style.display = "none";
|
||||
}
|
||||
});
|
||||
Loading…
Reference in a new issue