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

Add Mii image & name support in sidebar

Browse source
This commit is contained in:
kittentm 2026-02-21 06:16:14 +01:00
commit f294e136d7
7 changed files with 289 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

87
equipment/equipment.js
View file

@ -1,25 +1,68 @@
fetch("../header.html")
.then(res => res.text())
.then(html => {
const headerContainer = document.getElementById("header-container");
headerContainer.innerHTML = html;
.then(res => res.text())
.then(html => {
const headerContainer = document.getElementById("header-container");
if (headerContainer) {
headerContainer.innerHTML = html;
}
const logoutForm = document.getElementById("logout-form");
if (logoutForm && typeof CONFIG !== 'undefined') {
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
logoutForm.action = apiBase + "/api/v1/spfn/logout";
const originInput = document.getElementById("logout_frontend_origin");
if (originInput) {
originInput.value = window.location.origin;
}
}
if (typeof CONFIG !== 'undefined') {
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
const friendButton = headerContainer.querySelector('.menu-item.equipment');
if (friendButton) {
friendButton.classList.add('active');
}
// temporaily force hide lol
document.getElementById("loading-overlay").style.display = "none";
});
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;
}
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
.then(res => {
if (!res.ok) throw new Error("Status: " + res.status);
return res.json();
})
.then(data => {
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) {
console.error("Failed to parse inner JSON:", e);
}
}
const nameEl = document.getElementById('mii-name');
const imgEl = document.getElementById('mii-img');
if (nameEl) {
const displayName =
(data.mii && data.mii.name) ||
data.nickname ||
data.user_id ||
data.username ||
"User";
nameEl.textContent = displayName;
}
if (imgEl) {
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
if (miiBlob) {
const encodedData = encodeURIComponent(miiBlob);
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodedData}&type=face&width=270`;
imgEl.style.display = 'block';
}
}
})
.catch(err => {
const nameEl = document.getElementById('mii-name');
if (nameEl) nameEl.textContent = "Guest";
console.error("Profile Error:", err);
});
}
const friendButton = document.querySelector('.menu-item.equipment');
if (friendButton) friendButton.classList.add('active');
const overlay = document.getElementById("loading-overlay");
if (overlay) overlay.style.display = "none";
});

73
friend_list/friendlist.js
View file

@ -1,19 +1,64 @@
fetch("../header.html")
.then(res => res.text())
.then(html => {
const headerContainer = document.getElementById("header-container");
headerContainer.innerHTML = html;
.then(res => res.text())
.then(html => {
const headerContainer = document.getElementById("header-container");
if (headerContainer) {
headerContainer.innerHTML = html;
}
const logoutForm = document.getElementById("logout-form");
if (logoutForm && typeof CONFIG !== 'undefined') {
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
logoutForm.action = apiBase + "/api/v1/spfn/logout";
const originInput = document.getElementById("logout_frontend_origin");
if (originInput) {
originInput.value = window.location.origin;
}
}
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;
}
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
.then(res => {
if (!res.ok) throw new Error("Status: " + res.status);
return res.json();
})
.then(data => {
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) {
console.error("Failed to parse inner JSON:", e);
}
}
const nameEl = document.getElementById('mii-name');
const imgEl = document.getElementById('mii-img');
if (nameEl) {
const displayName =
(data.mii && data.mii.name) ||
data.nickname ||
data.user_id ||
data.username ||
"User";
nameEl.textContent = displayName;
}
if (imgEl) {
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
if (miiBlob) {
const encodedData = encodeURIComponent(miiBlob);
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodedData}&type=face&width=270`;
imgEl.style.display = 'block';
}
}
})
.catch(err => {
const nameEl = document.getElementById('mii-name');
if (nameEl) nameEl.textContent = "Guest";
console.error("Profile Error:", err);
});
}
const friendButton = headerContainer.querySelector('.menu-item.friend');
if (friendButton) {

5
header.html
View file

@ -56,6 +56,11 @@
</a>
<div class="twitterbgbox">
<div class="mii-icon-container">
<img id="mii-img" src="" style="display:none; width:100%; border-radius:50%;">
</div>
<span id="mii-name" class="profile-name-label">Loading...</span>
<div class="button-container">
<button class="box-btn twitter-btn">
<img src="../assets/en/svg/ui/ico_twitter-e7c60d7a77d2adc6a5ca9338e1c74d4a2378804fc979929a4fc9cad1127945f0.svg" alt="" class="btn-icon">

73
ranking/rank.js
View file

@ -1,19 +1,64 @@
fetch("../header.html")
.then(res => res.text())
.then(html => {
const headerContainer = document.getElementById("header-container");
headerContainer.innerHTML = html;
.then(res => res.text())
.then(html => {
const headerContainer = document.getElementById("header-container");
if (headerContainer) {
headerContainer.innerHTML = html;
}
const logoutForm = document.getElementById("logout-form");
if (logoutForm && typeof CONFIG !== 'undefined') {
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
logoutForm.action = apiBase + "/api/v1/spfn/logout";
const originInput = document.getElementById("logout_frontend_origin");
if (originInput) {
originInput.value = window.location.origin;
}
}
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;
}
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
.then(res => {
if (!res.ok) throw new Error("Status: " + res.status);
return res.json();
})
.then(data => {
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) {
console.error("Failed to parse inner JSON:", e);
}
}
const nameEl = document.getElementById('mii-name');
const imgEl = document.getElementById('mii-img');
if (nameEl) {
const displayName =
(data.mii && data.mii.name) ||
data.nickname ||
data.user_id ||
data.username ||
"User";
nameEl.textContent = displayName;
}
if (imgEl) {
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
if (miiBlob) {
const encodedData = encodeURIComponent(miiBlob);
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodedData}&type=face&width=270`;
imgEl.style.display = 'block';
}
}
})
.catch(err => {
const nameEl = document.getElementById('mii-name');
if (nameEl) nameEl.textContent = "Guest";
console.error("Profile Error:", err);
});
}
const friendButton = headerContainer.querySelector('.menu-item.rank');
if (friendButton) {

3
readme.md
View file

@ -45,7 +45,8 @@ This project operates on a frontend - backend basis. The backend is not optional
- [x] Title Bar
- [x] Page switching (hamburger menu)
- [ ] Show Mii name
- [x] Show Mii name
- [x] Render mii via [mii-unsecure](https://mii-unsecure.ariankordi.net/)
- [ ] Link/unlink Twitter functionality
- [x] Squid swimming background
- [x] Port to use canvas

88
stages/index.html
View file

@ -41,31 +41,77 @@
</div>
</div>
<script>
const headerBox = document.getElementById("header-container");
fetch("../header.html")
.then(res => res.text())
.then(html => {
headerBox.innerHTML = html;
const logoutForm = document.getElementById("logout-form");
if (logoutForm && typeof CONFIG !== 'undefined') {
const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
logoutForm.action = apiBase + "/api/v1/spfn/logout";
const originInput = document.getElementById("logout_frontend_origin");
if (originInput) {
originInput.value = window.location.origin;
}
<script>
fetch("../header.html")
.then(res => res.text())
.then(html => {
const headerContainer = document.getElementById("header-container");
if (headerContainer) {
headerContainer.innerHTML = html;
const friendButton = headerContainer.querySelector('.menu-item.stage');
if (friendButton) {
friendButton.classList.add('active');
}
}
const friendButton = headerBox.querySelector('.menu-item.stage');
if (friendButton) {
friendButton.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;
}
fetch(apiBase + "/api/v1/me", { credentials: 'include' })
.then(res => {
if (!res.ok) throw new Error("Status: " + res.status);
return res.json();
})
.then(data => {
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) {
console.error("Failed to parse inner JSON:", e);
}
}
const nameEl = document.getElementById('mii-name');
const imgEl = document.getElementById('mii-img');
if (nameEl) {
const displayName =
(data.mii && data.mii.name) ||
data.nickname ||
data.user_id ||
data.username ||
"User";
nameEl.textContent = displayName;
}
if (imgEl) {
const miiBlob = (data.mii && data.mii.data) || data.mii_data;
if (miiBlob) {
const encodedData = encodeURIComponent(miiBlob);
imgEl.src = `https://mii-unsecure.ariankordi.net/miis/image.png?erri=s6u7r-rsp&data=${encodedData}&type=face&width=270`;
imgEl.style.display = 'block';
}
}
})
.catch(err => {
const nameEl = document.getElementById('mii-name');
if (nameEl) nameEl.textContent = "Guest";
console.error("Profile Error:", err);
});
}
})
.catch(err => console.error("Failed to load header:", err));
</script>
})
.catch(err => console.error("Failed to load header:", err));
</script>
<script src="stages.js"></script>
</body>

34
style.css
View file

@ -135,8 +135,7 @@ body {
z-index: 2;
}
.twitterbgbox::before {
content: "";
.mii-icon-container {
position: absolute;
width: 60px;
height: 60px;
@ -144,11 +143,36 @@ body {
left: -20px;
background-color: white;
border-radius: 50%;
z-index: 2;
z-index: 3;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #333333; /* tickles my brain but might remove for original look */
}
.twitterbgbox::after {
content: "WWWWWWWWWWWW";
#mii-img {
width: 110%;
height: auto;
display: none;
}
.twitterbgbox::before {
display: none;
}
.profile-name-label {
position: absolute;
top: 14px;
left: 55px;
color: white;
font-family: 'RegularFont', sans-serif;
font-weight: normal;
font-size: 18px;
z-index: 1;
}
.profile-name-label {
position: absolute;
top: 12px;
left: 48px;