Add Mii image & name support in sidebar

equipment/equipment.js

@@ -1,25 +1,68 @@
 fetch("../header.html")
-.then(res => res.text())
+    .then(res => res.text())
-.then(html => {
+    .then(html => {
-const headerContainer = document.getElementById("header-container");
+        const headerContainer = document.getElementById("header-container");
-headerContainer.innerHTML = html;
+        if (headerContainer) {
+            headerContainer.innerHTML = html;
+        }
 
-const logoutForm = document.getElementById("logout-form");
+        if (typeof CONFIG !== 'undefined') {
-if (logoutForm && typeof CONFIG !== 'undefined') {
+            const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
-    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;
-    }
-}
 
-const friendButton = headerContainer.querySelector('.menu-item.equipment');
+            const logoutForm = document.getElementById("logout-form");
-if (friendButton) {
+            if (logoutForm) {
-friendButton.classList.add('active');
+                logoutForm.action = apiBase + "/api/v1/spfn/logout";
-}
+                const originInput = document.getElementById("logout_frontend_origin");
-    
+                if (originInput) originInput.value = window.location.origin;
-// temporaily force hide lol
+            }
-document.getElementById("loading-overlay").style.display = "none";
+
-});
+            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";
+    });

friend_list/friendlist.js

@@ -1,19 +1,64 @@
 fetch("../header.html")
-.then(res => res.text())
+    .then(res => res.text())
-.then(html => {
+    .then(html => {
-const headerContainer = document.getElementById("header-container");
+        const headerContainer = document.getElementById("header-container");
-headerContainer.innerHTML = html;
+        if (headerContainer) {
+            headerContainer.innerHTML = html;
+        }
 
-const logoutForm = document.getElementById("logout-form");
+        if (typeof CONFIG !== 'undefined') {
-if (logoutForm && typeof CONFIG !== 'undefined') {
+            const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
-    const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
+
-    logoutForm.action = apiBase + "/api/v1/spfn/logout";
+            const logoutForm = document.getElementById("logout-form");
-    
+            if (logoutForm) {
-    const originInput = document.getElementById("logout_frontend_origin");
+                logoutForm.action = apiBase + "/api/v1/spfn/logout";
-    if (originInput) {
+                const originInput = document.getElementById("logout_frontend_origin");
-        originInput.value = window.location.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) {

header.html

@@ -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">

ranking/rank.js

@@ -1,19 +1,64 @@
 fetch("../header.html")
-.then(res => res.text())
+    .then(res => res.text())
-.then(html => {
+    .then(html => {
-const headerContainer = document.getElementById("header-container");
+        const headerContainer = document.getElementById("header-container");
-headerContainer.innerHTML = html;
+        if (headerContainer) {
+            headerContainer.innerHTML = html;
+        }
 
-const logoutForm = document.getElementById("logout-form");
+        if (typeof CONFIG !== 'undefined') {
-if (logoutForm && typeof CONFIG !== 'undefined') {
+            const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
-    const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
+
-    logoutForm.action = apiBase + "/api/v1/spfn/logout";
+            const logoutForm = document.getElementById("logout-form");
-    
+            if (logoutForm) {
-    const originInput = document.getElementById("logout_frontend_origin");
+                logoutForm.action = apiBase + "/api/v1/spfn/logout";
-    if (originInput) {
+                const originInput = document.getElementById("logout_frontend_origin");
-        originInput.value = window.location.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) {

readme.md

@@ -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

stages/index.html

@@ -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");
+<script>
-        if (logoutForm && typeof CONFIG !== 'undefined') {
+fetch("../header.html")
-          const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
+    .then(res => res.text())
-          logoutForm.action = apiBase + "/api/v1/spfn/logout";
+    .then(html => {
-
+        const headerContainer = document.getElementById("header-container");
-          const originInput = document.getElementById("logout_frontend_origin");
+        if (headerContainer) {
-          if (originInput) {
+            headerContainer.innerHTML = html;
-            originInput.value = window.location.origin;
+            
-          }
+            const friendButton = headerContainer.querySelector('.menu-item.stage');
+            if (friendButton) {
+                friendButton.classList.add('active');
+            }
         }
 
-        const friendButton = headerBox.querySelector('.menu-item.stage');
+        if (typeof CONFIG !== 'undefined') {
-        if (friendButton) {
+            const apiBase = CONFIG.API_BASE_URL.replace(/\/$/, "");
-          friendButton.classList.add('active');
+
+            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));
+    .catch(err => console.error("Failed to load header:", err));
-  </script>
+</script>
 
   <script src="stages.js"></script>
 </body>

style.css

@@ -135,8 +135,7 @@ body {
   z-index: 2;
 }
 
-.twitterbgbox::before {
+.mii-icon-container {
-  content: "";
   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 {
+#mii-img {
-  content: "WWWWWWWWWWWW";
+  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;