Skip to content

Commit

Permalink
Merge pull request #4 from SerStars/main
Browse files Browse the repository at this point in the history 
SUFFERRRRED (badges)
  • Loading branch information
@KrstlSkll69
KrstlSkll69 authored Jan 27, 2025
2 parents 64685df + 0fb5b96 commit b98715e
Show file tree
Hide file tree
Showing 3 changed files with 258 additions and 1 deletion.
213 changes: 213 additions & 0 deletions Javascript/DiscordProfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ function connectWebSocket() {
userData = { data: d };
await updateClanBadge();
await updateAvatarDecoration();
await updateBadges();

// Update Status
if (d.discord_status !== previousStatus) {
Expand Down Expand Up @@ -238,4 +239,216 @@ async function updateClanBadge() {
} catch (error) {
console.error(`Error updating clan badge: ${error.message}`);
}
}

const DISCORD_BADGES = {
// We cannot get the Nitro badges due limitations
// But you can add an function to check if the user has an animated profile picture and add the Nitro badge
DISCORD_EMPLOYEE: 1 << 0,
PARTNERED_SERVER_OWNER: 1 << 1,
HYPESQUAD_EVENTS: 1 << 2,
BUGHUNTER_LEVEL_1: 1 << 3,
HOUSE_BRAVERY: 1 << 6,
HOUSE_BRILLIANCE: 1 << 7,
HOUSE_BALANCE: 1 << 8,
EARLY_SUPPORTER: 1 << 9,
BUGHUNTER_LEVEL_2: 1 << 14,
VERIFIED_BOT_DEVELOPER: 1 << 17,
CERTIFIED_MODERATOR: 1 << 18,
ACTIVE_DEVELOPER: 1 << 22
};

const DISCORD_BADGE_DETAILS = {
// If you're adding more badges, make sure to add them below
DISCORD_EMPLOYEE: {
tooltip: "Discord Staff",
icon: "https://cdn.discordapp.com/badge-icons/5e74e9b61934fc1f67c65515d1f7e60d.png"
},
PARTNERED_SERVER_OWNER: {
tooltip: "Partnered Server Owner",
icon: "https://cdn.discordapp.com/badge-icons/3f9748e53446a137a052f3454e2de41e.png"
},
HYPESQUAD_EVENTS: {
tooltip: "HypeSquad Events",
icon: "https://cdn.discordapp.com/badge-icons/bf01d1073931f921909045f3a39fd264.png"
},
HOUSE_BRAVERY: {
tooltip: "HypeSquad Bravery",
icon: "https://cdn.discordapp.com/badge-icons/8a88d63823d8a71cd5e390baa45efa02.png"
},
HOUSE_BRILLIANCE: {
tooltip: "HypeSquad Brilliance",
icon: "https://cdn.discordapp.com/badge-icons/011940fd013da3f7fb926e4a1cd2e618.png"
},
HOUSE_BALANCE: {
tooltip: "HypeSquad Balance",
icon: "https://cdn.discordapp.com/badge-icons/3aa41de486fa12454c3761e8e223442e.png"
},
EARLY_SUPPORTER: {
tooltip: "Early Supporter",
icon: "https://cdn.discordapp.com/badge-icons/7060786766c9c840eb3019e725d2b358.png"
},
BUGHUNTER_LEVEL_1: {
tooltip: "Bug Hunter",
icon: "https://cdn.discordapp.com/badge-icons/2717692c7dca7289b35297368a940dd0.png"
},
BUGHUNTER_LEVEL_2: {
tooltip: "Bug Hunter",
icon: "https://cdn.discordapp.com/badge-icons/848f79194d4be5ff5f81505cbd0ce1e6.png"
},
VERIFIED_BOT_DEVELOPER: {
tooltip: "Early Verified Bot Developer",
icon: "https://cdn.discordapp.com/badge-icons/6df5892e0f35b051f8b61eace34f4967.png"
},
CERTIFIED_MODERATOR: {
tooltip: "Moderator Programs Alumni",
icon: "https://cdn.discordapp.com/badge-icons/fee1624003e2fee35cb398e125dc479b.png"
},
ACTIVE_DEVELOPER: {
tooltip: "Active Developer",
icon: "https://cdn.discordapp.com/badge-icons/6bdc42827a38498929a4920da12695d9.png"
}
};

function fetchDiscordBadges(flags) {
const badges = [];
for (const [flag, bitwise] of Object.entries(DISCORD_BADGES)) {
if (flags & bitwise) {
const badge = DISCORD_BADGE_DETAILS[flag];
badges.push({
name: badge.tooltip,
tooltip: badge.tooltip,
icon: badge.icon,
type: 'discord'
});
}
}
return badges;
}

async function fetchBadges() {
try {
const [equicordResponse, vencordResponse, nekocordResponse, clientModBadgesApiResponse] = await Promise.all([
fetch('https://raw.githubusercontent.com/Equicord/Equibored/refs/heads/main/badges.json'),
fetch('https://badges.vencord.dev/badges.json'),
fetch('https://nekocord.dev/assets/badges.json'),
fetch(`https://api.domi-btnr.dev/clientmodbadges/users/${userId}`)
]);

let userBadges = [];

// Handle Discord badges
if (userData?.data?.discord_user?.public_flags) {
const discordBadges = fetchDiscordBadges(userData.data.discord_user.public_flags);
userBadges.push(...discordBadges);
}

// Handle Vencord badges
const vencordBadges = await vencordResponse.json();
if (vencordBadges[userId] && Array.isArray(vencordBadges[userId])) {
userBadges.push(...vencordBadges[userId].map(badge => ({
name: badge.tooltip,
tooltip: badge.tooltip,
icon: badge.badge,
type: 'vencord'
})));
}

// Handle Equicord badges
const equicordBadges = await equicordResponse.json();
if (equicordBadges[userId] && Array.isArray(equicordBadges[userId])) {
userBadges.push(...equicordBadges[userId].map(badge => ({
name: badge.tooltip,
tooltip: badge.tooltip,
icon: badge.badge,
type: 'equicord'
})));
}

// Handle Nekocord badges
const nekocordData = await nekocordResponse.json();
if (nekocordData.users?.[userId]?.badges) {
const userNekoBadges = nekocordData.users[userId].badges;
const nekoBadges = nekocordData.badges;

userNekoBadges.forEach(badgeId => {
const badge = nekoBadges[badgeId];
if (badge) {
userBadges.push({
name: badge.name,
tooltip: badge.description,
icon: badge.image,
type: 'nekocord'
});
}
});
}

// Handle ClientModBadges-API badges
const clientModBadgesApiData = await clientModBadgesApiResponse.json();

// Handle Enmity badges
if (clientModBadgesApiData?.Enmity?.length > 0) {
clientModBadgesApiData.Enmity.forEach(badge => {
userBadges.push({
name: badge,
tooltip: `Enmity: ${badge}`,
icon: `https://api.domi-btnr.dev/clientmodbadges/badges/Enmity/${badge}`,
type: 'enmity'
});
});
}

// Handle BadgeVault badges
// You can change BadgeVault to Vencord or any other client mod that's supported @ https://github.com/domi-btnr/ClientModBadges-API?tab=readme-ov-file#supported-client-mods just make sure it's in the right format
// if (clientModBadgesApiData?.BadgeVault?.length > 0) {
// clientModBadgesApiData.BadgeVault.forEach(badge => {
// userBadges.push({
// name: badge.name,
// tooltip: badge.name,
// icon:badge.badge,
// type: 'badgevault'
// });
// });
// }

return userBadges;
} catch (error) {
console.error('Error fetching badges:', error);
return [];
}
}

async function updateBadges() {
try {
const badges = await fetchBadges();
if (!badges.length) return;

let badgesContainer = document.getElementById('badges-container');
if (!badgesContainer) {
badgesContainer = document.createElement('div');
badgesContainer.id = 'badges-container';
badgesContainer.className = 'badges-wrapper';
badgesContainer.style.cssText = `
display: flex;
gap: 0.5rem;
margin: 0.5rem 0;
`;

const clanBadge = document.getElementById('clan-container');
if (clanBadge) {
clanBadge.parentNode.insertBefore(badgesContainer, clanBadge.nextSibling);
}
}

badgesContainer.innerHTML = badges.map(badge => `
<div class="badge-item">
<img src="${badge.icon}" alt="${badge.tooltip}" style="width: 20px; height: 20px; border-radius: 50%;">
<span class="badge-tooltip">${badge.tooltip}</span>
</div>
`).join('');

} catch (error) {
console.error('Error updating badges:', error);
}
}
42 changes: 42 additions & 0 deletions cssfiles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -389,4 +389,46 @@ a {
&:hover {scale: 0.95; background-color: rgb(0,183,235); z-index: 99999999; }
&:active {scale: 1.05; }
transition: scale 0.6s cubic-bezier(0.34, 1.54, 0.64, 1);
}

.badge-item {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4px);
border-radius: 0.375rem;
padding: 0.3rem;
height: 20px;
transition: all 0.3s cubic-bezier(0.34, 1.54, 0.64, 1);
}

.badge-item:hover {
scale: 0.95;
background-color: oklch(0% 0 0);
z-index: 99999999;
}

.badge-item:active {
scale: 1.05;
}

.badge-tooltip {
position: absolute;
white-space: nowrap;
left: 50%;
transform: translateX(-50%);
top: 2rem;
background-color: oklch(0% 0 0);
padding: 0.25rem;
border-radius: 0.5rem;
font-family: "Comic Neue", cursive;
font-weight: 700;
display: none;
z-index: 99999999;
}

.badge-item:hover .badge-tooltip {
display: block;
}
4 changes: 3 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,12 @@
</div>
</div>

<div class="panel"> <div class="maxwell"></div>
<div class="panel">
<div class="maxwell"></div>
<p style="display: flex; align-items: center; gap: 8px; margin-top: 2px;">
<d>By: KrystalSkull <span id="clan-container" class="clan-badge"></span></d>
</p>
<div id="badges-container" class="badges-item"></div>
<p><d3>
The best way to reach me is either Telegram, or Discord.
</d3></p>
Expand Down

0 comments on commit b98715e

Please sign in to comment.