diff --git a/index.tsx b/index.tsx
index d9bfd2b..1ffc942 100644
--- a/index.tsx
+++ b/index.tsx
@@ -5,20 +5,19 @@
*/
//
+import "./style.css";
+
import { ProfileBadge } from "@api/Badges";
import { Badges } from "@api/index";
-import { definePluginSettings } from "@api/Settings";
import { Devs } from "@utils/constants";
-import definePlugin, { OptionType } from "@utils/types";
+import definePlugin from "@utils/types";
import { Forms, Toasts, UserStore } from "@webpack/common";
-// eslint-disable-next-line unused-imports/no-unused-imports
-import { User } from "discord-types/general";
-import "./style.css";
+import settings from "./settings";
function isCurrentUser(userId: string) {
const u = UserStore.getCurrentUser().id;
- return u == userId;
+ return u === userId;
}
export default definePlugin({
@@ -26,7 +25,8 @@ export default definePlugin({
description: "Adds client-side badges to your profile. Other users can't see them!",
authors: [
Devs.nin0dev,
- { name: "KrystalSkullOfficial", id: 929208515883569182n }
+ { name: "KrystalSkullOfficial", id: 929208515883569182n },
+ { name: "thororen", id: 848339671629299742n }
],
settingsAboutComponent: () => <>
@@ -37,151 +37,63 @@ export default definePlugin({
>,
- settings: definePluginSettings({
- discordStaff: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- partneredServerOwner: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- earlySupporter: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- activeDeveloper: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- earlyVerifiedBotDeveloper: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- moderatorProgramsAlumni: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- bugHunter: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- goldenBugHunter: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
-
- // shout out krystalskullofficial
- // Nino missed some badges
- hypesquadEvents: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- houseOfBravery: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- houseOfBrilliance: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- houseOfBalance: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- discordQuests: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- nitro: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- serverBooster: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- legacyUsername: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
-
- // These are badges meant for bots so idk why you would want but might as well add them
- supportsCommands: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- premiumApp: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- usesAutomod: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
-
- // These is a badge discord made for april fools 2024, again idk why you would want it but might as well add it
- aClownForATime: {
- type: OptionType.BOOLEAN,
- restartNeeded: true,
- },
- }),
+ settings,
async start() {
const NativeBadges: ProfileBadge[] = [
{
description: "Discord Staff",
image: "https://cdn.discordapp.com/badge-icons/5e74e9b61934fc1f67c65515d1f7e60d.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.discordStaff,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.discordStaff,
link: "https://discord.com/company"
},
{
description: "Partnered Server Owner",
image: "https://cdn.discordapp.com/badge-icons/3f9748e53446a137a052f3454e2de41e.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.partneredServerOwner,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.partneredServerOwner,
link: "https://discord.com/partners"
},
{
description: "Early Supporter",
image: "https://cdn.discordapp.com/badge-icons/7060786766c9c840eb3019e725d2b358.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.earlySupporter,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.earlySupporter,
link: "https://discord.com/settings/premium"
},
{
description: "Active Developer",
image: "https://cdn.discordapp.com/badge-icons/6bdc42827a38498929a4920da12695d9.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.activeDeveloper,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.activeDeveloper,
link: "https://support-dev.discord.com/hc/en-us/articles/10113997751447"
},
{
description: "Early Verified Bot Developer",
image: "https://cdn.discordapp.com/badge-icons/6df5892e0f35b051f8b61eace34f4967.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.earlyVerifiedBotDeveloper,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.earlyVerifiedBotDeveloper,
link: "https://discord.com/settings/premium"
},
{
description: "Moderator Programs Alumni",
image: "https://cdn.discordapp.com/badge-icons/fee1624003e2fee35cb398e125dc479b.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.moderatorProgramsAlumni,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.moderatorProgramsAlumni,
link: "https://discord.com/settings/premium"
},
{
description: "Discord Bug Hunter",
image: "https://cdn.discordapp.com/badge-icons/2717692c7dca7289b35297368a940dd0.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.bugHunter,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.bugHunter,
link: "https://discord.com/settings/premium"
},
{
description: "Discord Bug Hunter",
image: "https://cdn.discordapp.com/badge-icons/848f79194d4be5ff5f81505cbd0ce1e6.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.goldenBugHunter,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.goldenBugHunter,
link: "https://discord.com/settings/premium"
},
@@ -191,56 +103,112 @@ export default definePlugin({
description: "HypeSquad Events",
image: "https://cdn.discordapp.com/badge-icons/bf01d1073931f921909045f3a39fd264.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.hypesquadEvents,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.hypesquadEvents,
link: "https://support.discord.com/hc/en-us/articles/360035962891-Profile-Badges-101#h_01GM67K5EJ16ZHYZQ5MPRW3JT3"
},
{
description: "HypeSquad Bravery",
image: "https://cdn.discordapp.com/badge-icons/8a88d63823d8a71cd5e390baa45efa02.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.houseOfBravery,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.houseOfBravery,
link: "https://discord.com/settings/hypesquad-online"
},
{
description: "HypeSquad Briliance",
image: "https://cdn.discordapp.com/badge-icons/011940fd013da3f7fb926e4a1cd2e618.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.houseOfBrilliance,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.houseOfBrilliance,
link: "https://discord.com/settings/hypesquad-online"
},
{
description: "HypeSquad Balance",
image: "https://cdn.discordapp.com/badge-icons/3aa41de486fa12454c3761e8e223442e.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.houseOfBalance,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.houseOfBalance,
link: "https://discord.com/settings/hypesquad-online"
},
{
description: "Discord Quests",
image: "https://cdn.discordapp.com/badge-icons/7d9ae358c8c5e118768335dbe68b4fb8.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.discordQuests,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.discordQuests,
link: "https://discord.com/discovery/quests"
},
{
description: "Discord Nitro",
image: "https://cdn.discordapp.com/badge-icons/2ba85e8026a8614b640c2837bcdfe21b.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.nitro,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.nitro,
+ link: "https://discord.com/settings/premium"
+ },
+ {
+ description: "Discord Nitro Bronze",
+ image: "https://cdn.discordapp.com/badge-icons/4f33c4a9c64ce221936bd256c356f91f.png",
+ position: Badges.BadgePosition.END,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.nitroBronze,
+ link: "https://discord.com/settings/premium"
+ },
+ {
+ description: "Discord Nitro Silver",
+ image: "https://cdn.discordapp.com/badge-icons/4514fab914bdbfb4ad2fa23df76121a6.png",
+ position: Badges.BadgePosition.END,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.nitroSilver,
+ link: "https://discord.com/settings/premium"
+ },
+ {
+ description: "Discord Nitro Gold",
+ image: "https://cdn.discordapp.com/badge-icons/2895086c18d5531d499862e41d1155a6.png",
+ position: Badges.BadgePosition.END,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.nitroGold,
+ link: "https://discord.com/settings/premium"
+ },
+ {
+ description: "Discord Nitro Platinum",
+ image: "https://cdn.discordapp.com/badge-icons/0334688279c8359120922938dcb1d6f8.png",
+ position: Badges.BadgePosition.END,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.nitroPlatinum,
+ link: "https://discord.com/settings/premium"
+ },
+ {
+ description: "Discord Nitro Diamond",
+ image: "https://cdn.discordapp.com/badge-icons/0d61871f72bb9a33a7ae568c1fb4f20a.png",
+ position: Badges.BadgePosition.END,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.nitroDiamond,
+ link: "https://discord.com/settings/premium"
+ },
+ {
+ description: "Discord Nitro Emerald",
+ image: "https://cdn.discordapp.com/badge-icons/11e2d339068b55d3a506cff34d3780f3.png",
+ position: Badges.BadgePosition.END,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.nitroEmerald,
+ link: "https://discord.com/settings/premium"
+ },
+ {
+ description: "Discord Nitro Ruby",
+ image: "https://cdn.discordapp.com/badge-icons/cd5e2cfd9d7f27a8cdcd3e8a8d5dc9f4.png",
+ position: Badges.BadgePosition.END,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.nitroRuby,
+ link: "https://discord.com/settings/premium"
+ },
+ {
+ description: "Discord Nitro Opal",
+ image: "https://cdn.discordapp.com/badge-icons/5b154df19c53dce2af92c9b61e6be5e2.png",
+ position: Badges.BadgePosition.END,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.nitroOpal,
link: "https://discord.com/settings/premium"
},
{
description: "Server Booster",
image: "https://cdn.discordapp.com/badge-icons/ec92202290b48d0879b7413d2dde3bab.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.serverBooster,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.serverBooster,
link: "https://discord.com/settings/premium"
},
{
description: "Supports Commands",
image: "https://cdn.discordapp.com/badge-icons/6f9e37f9029ff57aef81db857890005e.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.supportsCommands,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.supportsCommands,
link: "https://discord.com/blog/welcome-to-the-new-era-of-discord-apps?ref=badge"
},
@@ -249,21 +217,21 @@ export default definePlugin({
description: "Premium App",
image: "https://cdn.discordapp.com/badge-icons/d2010c413a8da2208b7e4f35bd8cd4ac.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.premiumApp,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.premiumApp,
link: ""
},
{
description: "Uses Automod",
image: "https://cdn.discordapp.com/badge-icons/f2459b691ac7453ed6039bbcfaccbfcd.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.usesAutomod,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.usesAutomod,
link: ""
},
{
description: "Legacy Username",
image: "https://cdn.discordapp.com/badge-icons/6de6d34650760ba5551a79732e98ed60.png",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.legacyUsername,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.legacyUsername,
link: ""
},
@@ -272,11 +240,11 @@ export default definePlugin({
description: "A clown, for a limited time",
image: "https://discord.com/assets/971cfe4aa5c0582000ea.svg",
position: Badges.BadgePosition.END,
- shouldShow: ({ userId }) => isCurrentUser(userId) && this.settings.store.aClownForATime,
+ shouldShow: ({ userId }) => isCurrentUser(userId) && !!settings.store.aClownForATime,
link: "https://youtu.be/cc2-4ci4G84"
},
];
- NativeBadges.forEach(b => Badges.addBadge(b));
+ NativeBadges.forEach(b => Badges.addProfileBadge(b));
},
async stop() {
Toasts.show({
diff --git a/settings.tsx b/settings.tsx
new file mode 100644
index 0000000..5090ffb
--- /dev/null
+++ b/settings.tsx
@@ -0,0 +1,323 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { definePluginSettings } from "@api/Settings";
+import { OptionType } from "@utils/types";
+import { Text, useEffect, UserStore, useState } from "@webpack/common";
+
+const settings = definePluginSettings({
+ discordStaff: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Staff"
+ },
+ partneredServerOwner: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Partnered Server Owner"
+ },
+ earlySupporter: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Early Supporter"
+ },
+ activeDeveloper: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Active Developer"
+ },
+ earlyVerifiedBotDeveloper: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Early Verified Bot Developer"
+ },
+ moderatorProgramsAlumni: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Moderator Programs Alumni"
+ },
+ bugHunter: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Bug Hunter"
+ },
+ goldenBugHunter: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Bug Hunter"
+ },
+
+ // shout out krystalskullofficial
+ // Nino missed some badges
+ hypesquadEvents: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "HypeSquad Events"
+ },
+ houseOfBravery: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "HypeSquad Bravery"
+ },
+ houseOfBrilliance: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "HypeSquad Briliance"
+ },
+ houseOfBalance: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "HypeSquad Balance"
+ },
+ discordQuests: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Quests"
+ },
+ serverBooster: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Server Booster"
+ },
+ legacyUsername: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Legacy Username"
+ },
+
+ // These are badges meant for bots so idk why you would want but might as well add them
+ supportsCommands: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Supports Commands"
+ },
+ premiumApp: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Premium App"
+ },
+ usesAutomod: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Uses Automod"
+ },
+
+ // These is a badge discord made for april fools 2024, again idk why you would want it but might as well add it
+ aClownForATime: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "A clown, for a limited time"
+ },
+ nitro: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Nitro",
+ },
+ nitroBronze: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Nitro Bronze"
+ },
+ nitroSilver: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Nitro Silver"
+ },
+ nitroGold: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Nitro Gold"
+ },
+ nitroPlatinum: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Nitro Platinum"
+ },
+ nitroDiamond: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Nitro Diamond"
+ },
+ nitroEmerald: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Nitro Emerald"
+ },
+ nitroRuby: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Nitro Ruby"
+ },
+ nitroOpal: {
+ type: OptionType.BOOLEAN,
+ hidden: true,
+ description: "Discord Nitro Opal"
+ },
+ badgeSettings: {
+ type: OptionType.COMPONENT,
+ description: "Setup badge layout and visibility",
+ component: () =>
+ }
+});
+
+export default settings;
+
+const BadgeSettings = () => {
+ const [images, setImages] = useState([
+ { src: "https://cdn.discordapp.com/badge-icons/5e74e9b61934fc1f67c65515d1f7e60d.png", shown: settings.store.discordStaff, key: "DiscordStaff", title: "Discord Staff" },
+ { src: "https://cdn.discordapp.com/badge-icons/3f9748e53446a137a052f3454e2de41e.png", shown: settings.store.partneredServerOwner, key: "PartneredServerOwner", title: "Partnered Server Owner" },
+ { src: "https://cdn.discordapp.com/badge-icons/7060786766c9c840eb3019e725d2b358.png", shown: settings.store.earlySupporter, key: "EarlySupporter", title: "Early Supporter" },
+ { src: "https://cdn.discordapp.com/badge-icons/6bdc42827a38498929a4920da12695d9.png", shown: settings.store.activeDeveloper, key: "ActiveDeveloper", title: "Active Developer" },
+ { src: "https://cdn.discordapp.com/badge-icons/6df5892e0f35b051f8b61eace34f4967.png", shown: settings.store.earlyVerifiedBotDeveloper, key: "EarlyVerifiedBotDeveloper", title: "Early Verified Bot Developer" },
+ { src: "https://cdn.discordapp.com/badge-icons/fee1624003e2fee35cb398e125dc479b.png", shown: settings.store.moderatorProgramsAlumni, key: "ModeratorProgramsAlumni", title: "Moderator Programs Alumni" },
+ { src: "https://cdn.discordapp.com/badge-icons/2717692c7dca7289b35297368a940dd0.png", shown: settings.store.bugHunter, key: "DiscordBugHunter", title: "Discord Bug Hunter" },
+ { src: "https://cdn.discordapp.com/badge-icons/848f79194d4be5ff5f81505cbd0ce1e6.png", shown: settings.store.goldenBugHunter, key: "DiscordGoldBugHunter", title: "Discord Golden Bug Hunter" },
+ { src: "https://cdn.discordapp.com/badge-icons/bf01d1073931f921909045f3a39fd264.png", shown: settings.store.hypesquadEvents, key: "HypeSquadEvents", title: "HypeSquad Events" },
+ { src: "https://cdn.discordapp.com/badge-icons/8a88d63823d8a71cd5e390baa45efa02.png", shown: settings.store.houseOfBravery, key: "HypeSquadBravery", title: "HypeSquad Bravery" },
+ { src: "https://cdn.discordapp.com/badge-icons/011940fd013da3f7fb926e4a1cd2e618.png", shown: settings.store.houseOfBrilliance, key: "HypeSquadBriliance", title: "HypeSquad Briliance" },
+ { src: "https://cdn.discordapp.com/badge-icons/3aa41de486fa12454c3761e8e223442e.png", shown: settings.store.houseOfBalance, key: "HypeSquadBalance", title: "HypeSquad Balance" },
+ { src: "https://cdn.discordapp.com/badge-icons/7d9ae358c8c5e118768335dbe68b4fb8.png", shown: settings.store.discordQuests, key: "DiscordQuests", title: "Discord Quests" },
+ { src: "https://cdn.discordapp.com/badge-icons/2ba85e8026a8614b640c2837bcdfe21b.png", shown: settings.store.nitro, key: "DiscordNitro", title: "Discord Nitro" },
+ { src: "https://cdn.discordapp.com/badge-icons/4f33c4a9c64ce221936bd256c356f91f.png", shown: settings.store.nitroBronze, key: "DiscordNitroBronze", title: "Discord Nitro Bronze" },
+ { src: "https://cdn.discordapp.com/badge-icons/4514fab914bdbfb4ad2fa23df76121a6.png", shown: settings.store.nitroSilver, key: "DiscordNitroSilver", title: "Discord Nitro Silver" },
+ { src: "https://cdn.discordapp.com/badge-icons/2895086c18d5531d499862e41d1155a6.png", shown: settings.store.nitroGold, key: "DiscordNitroGold", title: "Discord Nitro Gold" },
+ { src: "https://cdn.discordapp.com/badge-icons/0334688279c8359120922938dcb1d6f8.png", shown: settings.store.nitroPlatinum, key: "DiscordNitroPlatinum", title: "Discord Nitro Platinum" },
+ { src: "https://cdn.discordapp.com/badge-icons/0d61871f72bb9a33a7ae568c1fb4f20a.png", shown: settings.store.nitroDiamond, key: "DiscordNitroDiamond", title: "Discord Nitro Diamond" },
+ { src: "https://cdn.discordapp.com/badge-icons/11e2d339068b55d3a506cff34d3780f3.png", shown: settings.store.nitroEmerald, key: "DiscordNitroEmerald", title: "Discord Nitro Emerald" },
+ { src: "https://cdn.discordapp.com/badge-icons/cd5e2cfd9d7f27a8cdcd3e8a8d5dc9f4.png", shown: settings.store.nitroRuby, key: "DiscordNitroRuby", title: "Discord Nitro Ruby" },
+ { src: "https://cdn.discordapp.com/badge-icons/5b154df19c53dce2af92c9b61e6be5e2.png", shown: settings.store.nitroOpal, key: "DiscordNitroOpal", title: "Discord Nitro Opal" },
+ { src: "https://cdn.discordapp.com/badge-icons/ec92202290b48d0879b7413d2dde3bab.png", shown: settings.store.serverBooster, key: "ServerBooster", title: "Server Booster" },
+ { src: "https://cdn.discordapp.com/badge-icons/6f9e37f9029ff57aef81db857890005e.png", shown: settings.store.supportsCommands, key: "SupportsCommands", title: "Supports Commands" },
+ { src: "https://cdn.discordapp.com/badge-icons/d2010c413a8da2208b7e4f35bd8cd4ac.png", shown: settings.store.premiumApp, key: "PremiumApp", title: "Premium App" },
+ { src: "https://cdn.discordapp.com/badge-icons/f2459b691ac7453ed6039bbcfaccbfcd.png", shown: settings.store.usesAutomod, key: "UsesAutomod", title: "Uses Automod" },
+ { src: "https://cdn.discordapp.com/badge-icons/6de6d34650760ba5551a79732e98ed60.png", shown: settings.store.legacyUsername, key: "LegacyUsername", title: "Legacy Username" },
+ { src: "https://discord.com/assets/971cfe4aa5c0582000ea.svg", shown: settings.store.aClownForATime, key: "AClownForALimitedTime", title: "A clown, for a limited time" },
+ ]);
+
+ useEffect(() => {
+ images.forEach(image => {
+ switch (image.key) {
+ case "DiscordStaff":
+ settings.store.discordStaff = image.shown;
+ break;
+ case "PartneredServerOwner":
+ settings.store.partneredServerOwner = image.shown;
+ break;
+ case "EarlySupporter":
+ settings.store.earlySupporter = image.shown;
+ break;
+ case "ActiveDeveloper":
+ settings.store.activeDeveloper = image.shown;
+ break;
+ case "EarlyVerifiedBotDeveloper":
+ settings.store.earlyVerifiedBotDeveloper = image.shown;
+ break;
+ case "ModeratorProgramsAlumni":
+ settings.store.moderatorProgramsAlumni = image.shown;
+ break;
+ case "DiscordBugHunter":
+ settings.store.bugHunter = image.shown;
+ break;
+ case "DiscordGoldBugHunter":
+ settings.store.goldenBugHunter = image.shown;
+ break;
+ case "HypeSquadEvents":
+ settings.store.hypesquadEvents = image.shown;
+ break;
+ case "HypeSquadBravery":
+ settings.store.houseOfBravery = image.shown;
+ break;
+ case "HypeSquadBriliance":
+ settings.store.houseOfBrilliance = image.shown;
+ break;
+ case "HypeSquadBalance":
+ settings.store.houseOfBalance = image.shown;
+ break;
+ case "DiscordQuests":
+ settings.store.discordQuests = image.shown;
+ break;
+ case "DiscordNitro":
+ settings.store.nitro = image.shown;
+ break;
+ case "DiscordNitroBronze":
+ settings.store.nitroBronze = image.shown;
+ break;
+ case "DiscordNitroSilver":
+ settings.store.nitroSilver = image.shown;
+ break;
+ case "DiscordNitroGold":
+ settings.store.nitroGold = image.shown;
+ break;
+ case "DiscordNitroPlatinum":
+ settings.store.nitroPlatinum = image.shown;
+ break;
+ case "DiscordNitroDiamond":
+ settings.store.nitroDiamond = image.shown;
+ break;
+ case "DiscordNitroEmerald":
+ settings.store.nitroEmerald = image.shown;
+ break;
+ case "DiscordNitroRuby":
+ settings.store.nitroRuby = image.shown;
+ break;
+ case "DiscordNitroOpal":
+ settings.store.nitroOpal = image.shown;
+ break;
+ case "ServerBooster":
+ settings.store.serverBooster = image.shown;
+ break;
+ case "SupportsCommands":
+ settings.store.supportsCommands = image.shown;
+ break;
+ case "PremiumApp":
+ settings.store.premiumApp = image.shown;
+ break;
+ case "UsesAutomod":
+ settings.store.usesAutomod = image.shown;
+ break;
+ case "LegacyUsername":
+ settings.store.legacyUsername = image.shown;
+ break;
+ case "AClownForALimitedTime":
+ settings.store.aClownForATime = image.shown;
+ break;
+ default:
+ break;
+ }
+ });
+ }, [images]);
+
+ const toggleDisable = (index: number) => {
+ const newImages = [...images];
+ newImages[index].shown = !newImages[index].shown;
+ setImages(newImages);
+ };
+
+ return (
+ <>
+ You can click to enable/disable a specific badge type.
+
+
.getAvatarURL()})
+
{(UserStore.getCurrentUser() as any).globalName}
+
+ {images.map((image, index) => (
+
toggleDisable(index)}
+ >
+

+
+ ))}
+
+
+
+ >
+ );
+};
diff --git a/style.css b/style.css
index daf99af..f88b1d1 100644
--- a/style.css
+++ b/style.css
@@ -23,3 +23,46 @@
margin-top: 10px;
font-style: bold;
}
+
+.vc-badges-settings {
+ display: flex;
+ gap: 5px;
+ flex-direction: row;
+}
+
+.vc-badges-container {
+ position: relative;
+ transition: 0.15s;
+ flex: 0 1 auto;
+}
+
+.vc-badges-container img {
+ width: 25px;
+ height: 25px;
+ cursor: pointer;
+}
+
+.vc-badges-disabled {
+ opacity: 0.5;
+ scale: 0.95;
+}
+
+.vc-badges-avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ margin-right: 12px;
+}
+
+.vc-badges-username {
+ font-size: 22px;
+ color: white;
+ margin-right: 5px;
+}
+
+.vc-badges-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ max-width: 100%;
+}