203 lines
No EOL
9.6 KiB
JavaScript
203 lines
No EOL
9.6 KiB
JavaScript
window.loadHeader(function(headerContainer) {
|
|
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 extractMiiName = (miiDataB64) => {
|
|
try {
|
|
const binaryString = atob(miiDataB64.replace(/-/g, '+').replace(/_/g, '/'));
|
|
const data = new Uint8Array(binaryString.length);
|
|
for (let i = 0; i < binaryString.length; i++) {
|
|
data[i] = binaryString.charCodeAt(i);
|
|
}
|
|
const size = data.length;
|
|
let offset = -1;
|
|
let isBE = false;
|
|
if ([92, 96, 104, 106, 108, 336, 72].includes(size)) offset = 0x1A;
|
|
else if ([74, 76].includes(size)) { offset = 0x02; isBE = true; }
|
|
else if (size === 88) offset = 0x10;
|
|
else if ([48, 68].includes(size)) offset = 0x1C;
|
|
if (offset === -1) return null;
|
|
const decoder = new TextDecoder(isBE ? 'utf-16be' : 'utf-16le');
|
|
let end = offset;
|
|
while (end < offset + 20 && end + 1 < data.length && (data[end] !== 0 || data[end + 1] !== 0)) {
|
|
end += 2;
|
|
}
|
|
return decoder.decode(data.slice(offset, end));
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const udemaeMap = {
|
|
"0": "C-", "1": "C", "2": "C+", "3": "B-", "4": "B",
|
|
"5": "B+", "6": "A-", "7": "A", "8": "A+", "9": "S", "10": "S+"
|
|
};
|
|
|
|
let combinedData = {};
|
|
|
|
const preloadImage = (url) => {
|
|
return new Promise((resolve) => {
|
|
if (!url) return resolve();
|
|
const img = new Image();
|
|
img.onload = () => resolve();
|
|
img.onerror = () => resolve();
|
|
img.src = url;
|
|
});
|
|
};
|
|
|
|
const renderData = async (newData) => {
|
|
if (!newData) return;
|
|
|
|
let data = newData;
|
|
while (typeof data === 'string') {
|
|
try {
|
|
data = JSON.parse(data);
|
|
} catch (e) {
|
|
console.error("Parse Error:", e);
|
|
break;
|
|
}
|
|
}
|
|
|
|
combinedData = { ...combinedData, ...data };
|
|
const finalData = combinedData;
|
|
const equipped = finalData.last_equipped || {};
|
|
|
|
const miiBlob = (finalData.mii && finalData.mii.data) || finalData.mii_data;
|
|
const parsedName = miiBlob ? extractMiiName(miiBlob) : null;
|
|
const name = parsedName || (finalData.mii && finalData.mii.name) || finalData.nickname || finalData.user_id || finalData.mii_name || "User";
|
|
|
|
const miiImgUrl = miiBlob ? `https://mii-unsecure.ariankordi.net/miis/image.png?data=${encodeURIComponent(miiBlob)}&type=face&width=270` : "";
|
|
|
|
const sidebarName = document.getElementById('mii-name');
|
|
const sidebarImg = document.getElementById('mii-img');
|
|
if (sidebarName) sidebarName.textContent = name;
|
|
if (sidebarImg && miiImgUrl) {
|
|
sidebarImg.src = miiImgUrl;
|
|
sidebarImg.style.display = 'block';
|
|
}
|
|
|
|
const infoBox = document.querySelector('.splat-info-box');
|
|
if (infoBox) {
|
|
const fetchJson = url => fetch(url).then(r => r.ok ? r.json() : []);
|
|
const [clothing, headgear, shoes, weapons, abilities] = await Promise.all([
|
|
fetchJson('/assets/mapping/clothing.json'),
|
|
fetchJson('/assets/mapping/headgear.json'),
|
|
fetchJson('/assets/mapping/shoes.json'),
|
|
fetchJson('/assets/mapping/weapons.json'),
|
|
fetchJson('/assets/mapping/ability.json')
|
|
]);
|
|
|
|
const getImg = (list, id, folder, isAbility = false) => {
|
|
const fallback = isAbility ? "../assets/ability/ParameterIcon^q.png" : "/assets/weapons/NotFound^w.png";
|
|
if (id === undefined || id === null) return fallback;
|
|
const item = list.find(i => String(i.id) === String(id));
|
|
return (item && item.image) ? `../assets/${folder}/${item.image}` : fallback;
|
|
};
|
|
|
|
const weaponImg = getImg(weapons, equipped.weapon, 'weapons');
|
|
const headImg = getImg(headgear, equipped.Gear_Head, 'headgear');
|
|
const clothesImg = getImg(clothing, equipped.Gear_Clothes, 'clothing');
|
|
const shoesImg = getImg(shoes, equipped.Gear_Shoes, 'shoes');
|
|
|
|
const headMain = getImg(abilities, equipped.Gear_Head_Skill0, 'ability', true);
|
|
const headSub1 = getImg(abilities, equipped.Gear_Head_Skill1, 'ability', true);
|
|
const headSub2 = getImg(abilities, equipped.Gear_Head_Skill2, 'ability', true);
|
|
|
|
const clothesMain = getImg(abilities, equipped.Gear_Clothes_Skill0, 'ability', true);
|
|
const clothesSub1 = getImg(abilities, equipped.Gear_Clothes_Skill1, 'ability', true);
|
|
const clothesSub2 = getImg(abilities, equipped.Gear_Clothes_Skill2, 'ability', true);
|
|
|
|
const shoesMain = getImg(abilities, equipped.Gear_Shoes_Skill0, 'ability', true);
|
|
const shoesSub1 = getImg(abilities, equipped.Gear_Shoes_Skill1, 'ability', true);
|
|
const shoesSub2 = getImg(abilities, equipped.Gear_Shoes_Skill2, 'ability', true);
|
|
|
|
await Promise.all([
|
|
preloadImage(miiImgUrl),
|
|
preloadImage(weaponImg),
|
|
preloadImage(headImg),
|
|
preloadImage(clothesImg),
|
|
preloadImage(shoesImg)
|
|
]);
|
|
|
|
const rankLevel = equipped.Rank !== undefined ? equipped.Rank : (finalData.Rank || "--");
|
|
const udemaeKey = equipped.Udemae !== undefined ? String(equipped.Udemae) : String(finalData.Udemae || "");
|
|
const rankGrade = udemaeMap[udemaeKey] || (udemaeKey !== "undefined" && udemaeKey !== "" ? udemaeKey : "C-");
|
|
|
|
infoBox.innerHTML = `
|
|
<div id="scale-root">
|
|
<div id="canvas">
|
|
<div class="panel"></div>
|
|
<div class="white-dot" style="display: flex; align-items: center; justify-content: center; overflow: hidden; background: white; border-radius: 50%;">
|
|
${miiImgUrl ? `<img src="${miiImgUrl}" style="width: 100%; height: 100%; object-fit: contain;">` : ''}
|
|
</div>
|
|
<div class="player-name">${name}</div>
|
|
<div class="rank-box rank-level">
|
|
<span class="rank-text">${rankLevel}</span>
|
|
<img src="../assets/en/svg/text/scene/equipment/tx_rank-2bcc8d331694f06c2af30e720acafda60760c71f086906489afb73190a6913ce.svg" class="rank-label" />
|
|
</div>
|
|
<div class="rank-box rank-grade">
|
|
<span class="rank-text">${rankGrade}</span>
|
|
<img src="../assets/en/svg/text/scene/equipment/tx_udemae-3f0e377d89a469c62069c2304dae87dfdf2b98076a0a4662b9190800c2d9da91.svg" class="rank-label" />
|
|
</div>
|
|
<div class="weapon-slot"><img class="weapon" src="${weaponImg}" /></div>
|
|
|
|
<div class="gear-slot-small head-slot">
|
|
<img class="main-ability" src="${headMain}" />
|
|
<img class="gear-icon" src="${headImg}" />
|
|
</div>
|
|
<div class="abilities mid">
|
|
<img src="${clothesSub1}" /><img src="${clothesSub2}" />
|
|
</div>
|
|
|
|
<div class="gear-slot-small body-slot">
|
|
<img class="main-ability" src="${clothesMain}" />
|
|
<img class="gear-icon" src="${clothesImg}" />
|
|
</div>
|
|
<div class="abilities bottom">
|
|
<img src="${headSub1}" /><img src="${headSub2}" />
|
|
</div>
|
|
|
|
<div class="gear-slot-small shoes-slot">
|
|
<img class="main-ability" src="${shoesMain}" />
|
|
<img class="gear-icon" src="${shoesImg}" />
|
|
</div>
|
|
<div class="abilities bottom-right">
|
|
<img src="${shoesSub1}" /><img src="${shoesSub2}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
|
|
const init = async () => {
|
|
const overlay = document.getElementById("loading-overlay");
|
|
try {
|
|
const [profileRes, equipRes] = await Promise.all([
|
|
fetch("/api/v1/me", { credentials: 'include' }).then(res => res.ok ? res.json() : {}),
|
|
fetch("/api/v1/me/equipment", { credentials: 'include' }).then(res => res.ok ? res.json() : {})
|
|
]);
|
|
await renderData(profileRes);
|
|
await renderData(equipRes);
|
|
sessionStorage.setItem('user_cache', JSON.stringify(combinedData));
|
|
} catch (err) {
|
|
const cached = sessionStorage.getItem('user_cache');
|
|
if (cached) await renderData(JSON.parse(cached));
|
|
else await renderData({ user_id: "Guest" });
|
|
} finally {
|
|
if (overlay) overlay.style.display = "none";
|
|
}
|
|
};
|
|
|
|
const equipButton = headerContainer.querySelector('.menu-item.equipment');
|
|
if (equipButton) equipButton.classList.add('active');
|
|
|
|
init();
|
|
}); |