spacebar/SplatNet
spacebar/SplatNet
Watch
13
1
Fork
You've already forked SplatNet
 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PR #5: Add equipment screen functionality (merges main with dev)

Browse source
This commit is contained in:
kittentm 2026-03-18 21:13:52 +01:00
commit 429a1eb6ff
No known key found for this signature in database
GPG key ID: AC43DFDBC1F44A91
411 changed files with 17956 additions and 779 deletions
Download patch file Download diff file Expand all files Collapse all files

18
ranking/index.html
View file

@ -5,8 +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="/config.js"></script>
<script src="/assets/jquery-1.9.1.js"></script>
</head>
<body>
<div id="header-container"></div>
@ -30,14 +29,25 @@
<img class="icon-layer" src="../assets/en/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
<img class="label-layer" src="../assets/en/svg/text/scene/rank/tx_ranking_wht-f79b9c472757006700455a8b74eaa4e50fee7c316373c98d873e0769f9bdb6d9.svg">
</div>
<div class="equipmentsubtitle-text">
<div class="equipmentsubtitle-text" id="mode-subtitle">
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 class="stages-container" id="stages-container"></div>
</div>
<div class="mode-selection">
<a href="?mode=regular" class="mode-button" id="link-regular">
<img id="img-regular" src="../assets/en/svg/ui/btn_tab_regular-40682de5f47922c608c0ddf6eddd44efcf4b0516092041cdb48977f777030487.svg" alt="Turf War">
</a>
<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>
</div>
<div class="stages-container" id="stages-container"></div>
</div>
</div>
<script src="/assets/general.js"></script>
<script src="rank.js"></script>
</body>
</html>

176
ranking/rank.js
View file

@ -1,65 +1,127 @@
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 (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 logoutForm = document.getElementById("logout-form");
if (logoutForm) {
logoutForm.action = "/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 extractMiiName = (miiDataB64) => {
try {
const data = Uint8Array.from(atob(miiDataB64.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0));
const size = data.length;
let offset = -1;
let isBE = false;
if ([92, 96, 104, 106, 108, 336, 72].includes(size)) offset = 0x1A; // 3DS/WiiU
else if ([74, 76].includes(size)) { offset = 0x02; isBE = true; } // Wii
else if (size === 88) offset = 0x10; // Switch CharInfo
else if ([48, 68].includes(size)) offset = 0x1C; // Switch CoreData
if (offset === -1) return null;
const decoder = new TextDecoder(isBE ? 'utf-16be' : 'utf-16le');
let end = offset;
while (end < offset + 20 && (data[end] !== 0 || data[end + 1] !== 0)) end += 2;
return decoder.decode(data.slice(offset, end));
} catch (e) {
return null;
}
};
const getMiiRenderUrl = (data) => {
return `https://mii-unsecure.ariankordi.net/miis/image.png?data=${encodeURIComponent(data)}&type=face&width=270&resourceType=very_high`;
};
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');
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
if (nameEl) {
const parsedName = miiBlob ? extractMiiName(miiBlob) : null;
nameEl.textContent = parsedName || (data.mii && data.mii.name) || data.nickname || data.username || "User";
}
if (imgEl && miiBlob) {
imgEl.src = getMiiRenderUrl(miiBlob);
imgEl.style.display = 'block';
}
};
const init = () => {
const cached = sessionStorage.getItem('user_cache');
if (cached) renderData(JSON.parse(cached));
fetch("/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";
}
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';
}
}
};
console.error("Profile fetch failed:", err);
});
const cached = sessionStorage.getItem('user_cache');
if (cached) renderData(JSON.parse(cached));
const urlParams = new URLSearchParams(window.location.search);
const mode = urlParams.get('mode') || 'regular';
const regImg = document.getElementById('img-regular');
const gachiImg = document.getElementById('img-gachi');
const images = {
regular: "../assets/en/svg/ui/btn_tab_regular_selected-b636e3d21ace9434120061a32658b21a34feb6468553b6d6da30ce890b85ec1f.svg",
gachi: "../assets/en/svg/ui/btn_tab_gachi_selected-4796f167399dca12cb274dcb0348cdf709a1f722ddd241210e55a3e04fdb6ff4.svg",
regular_off: "../assets/en/svg/ui/btn_tab_regular-40682de5f47922c608c0ddf6eddd44efcf4b0516092041cdb48977f777030487.svg",
gachi_off: "../assets/en/svg/ui/btn_tab_gachi-1ab8351babd76ea6dd8e23eb86293c8ceafaf23b9cae3001166fabf3a01011a7.svg"
};
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);
});
if (regImg) regImg.src = (mode === 'regular') ? images.regular : images.regular_off;
if (gachiImg) gachiImg.src = (mode === 'gachi') ? images.gachi : images.gachi_off;
if (typeof loadRankings === 'function') {
loadRankings();
}
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 loadingOverlay = document.getElementById("loading-overlay");
if (loadingOverlay) {
loadingOverlay.style.display = "none";
}
};
document.querySelectorAll('.mode-selection a').forEach(link => {
link.addEventListener('click', function(e) {
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();
});
});
init();
});

60
ranking/styles.css
View file

@ -43,24 +43,23 @@ body {
}
.loading-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 250px;
background-color: rgba(0,0,0,0.8);
border: 3px solid white;
border-radius: 12px;
padding: 20px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
user-select: none;
pointer-events: none;
box-sizing: border-box;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: rgba(0,0,0);
border-radius: 20px;
padding: 20px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
user-select: none;
pointer-events: none;
box-sizing: border-box;
}
#loading-canvas {
@ -167,4 +166,29 @@ body {
font-family: "Regular", sans-serif;
font-size: 24px;
line-height: 1.3;
}
.mode-selection {
display: flex;
justify-content: center;
gap: 15px;
margin: 30px 0;
width: 100%;
}
.mode-button {
cursor: pointer;
width: 280px;
transition: transform 0.1s ease-in-out;
text-decoration: none;
}
.mode-button:hover {
transform: scale(1.03);
}
.mode-button img {
width: 100%;
height: auto;
display: block;
}