GlobalBadges — FiveCord

index.tsx

Download

Source

src/plugins/globalBadges/index.tsx

1/*

2 * FiveCord — a Discord client mod

4 * SPDX-License-Identifier: GPL-3.0-or-later

5 */

7import { addBadge, BadgePosition, ProfileBadge, removeBadge } from "@api/Badges";

8import { Devs } from "@utils/constants";

9import definePlugin, { OptionType } from "@utils/types";

10import { React, Tooltip } from "@webpack/common";

11import { User } from "discord-types/general";

13type CustomBadge = string | {

14 name: string;

15 badge: string;

16 custom?: boolean;

17};

19interface BadgeCache {

20 badges: { [mod: string]: CustomBadge[]; };

21 expires: number;

22}

24const API_URL = "https:class="ts-cmt">//clientmodbadges-api.herokuapp.com/";

26const cache = new Map<string, BadgeCache>();

27const EXPIRES = 1000 * 60 * 15;

29const fetchBadges = (id: string): BadgeCache["badges"] | undefined => {

30 const cachedValue = cache.get(id);

31 if (!cache.has(id) || (cachedValue && cachedValue.expires < Date.now())) {

32 fetch(`${API_URL}users/${id}`)

33 .then(res => res.json() as Promise<BadgeCache["badges"]>)

34 .then(body => {

35 cache.set(id, { badges: body, expires: Date.now() + EXPIRES });

36 return body;

37 });

38 } else if (cachedValue) {

39 return cachedValue.badges;

40 }

41};

43const BadgeComponent = ({ name, img }: { name: string, img: string; }) => {

44 return (

45 <Tooltip text={name} >

46 {(tooltipProps: any) => (

47 <img

48 {...tooltipProps}

49 src={img}

                    style={{ width: "22px", height: "22px", transform: name.includes("Replugged") ? "scale(0.9)" : null, margin: "0 2px" }}

51 />

52 )}

53 </Tooltip>

54 );

55};

57const GlobalBadges = ({ user }: { user: User; }) => {

58 const [badges, setBadges] = React.useState<BadgeCache["badges"]>({});

59 React.useEffect(() => setBadges(fetchBadges(user.id) ?? {}), [user.id]);

61 if (!badges) return null;

62 const globalBadges: JSX.Element[] = [];

64 Object.keys(badges).forEach(mod => {

65 if (mod.toLowerCase() === "vencord") return;

66 badges[mod].forEach(badge => {

67 if (typeof badge === "string") {

68 const fullNames = { "hunter": "Bug Hunter", "early": "Early User" };

69 badge = {

70 name: fullNames[badge as string] ? fullNames[badge as string] : badge,

71 badge: `${API_URL}badges/${mod}/${(badge as string).replace(mod, "").trim().split(" ")[0]}`

72 };

73 } else if (typeof badge === "object") badge.custom = true;

74 if (!showCustom() && badge.custom) return;

75 const cleanName = badge.name.replace(mod, "").trim();

76 const prefix = showPrefix() ? mod : "";

77 if (!badge.custom) badge.name = `${prefix} ${cleanName.charAt(0).toUpperCase() + cleanName.slice(1)}`;

78 globalBadges.push(<BadgeComponent name={badge.name} img={badge.badge} />);

79 });

80 });

82 return (

83 <div className="vc-global-badges" style={{ alignItems: "center", display: "flex" }}>

84 {globalBadges}

85 </div>

86 );

87};

89const Badge: ProfileBadge = {

90 component: b => <GlobalBadges {...b} />,

91 position: BadgePosition.START,

92 shouldShow: userInfo => !!Object.keys(fetchBadges(userInfo.user.id) ?? {}).length,

93 key: "GlobalBadges"

94};

96const showPrefix = () => FiveCord.Settings.plugins.GlobalBadges.showPrefix;

97const showCustom = () => FiveCord.Settings.plugins.GlobalBadges.showCustom;

99export default definePlugin({

100 name: "GlobalBadges",

101 description: "Adds global badges from other client mods",

102 authors: [Devs.FiveCord],

103

104 start: () => addBadge(Badge),

105 stop: () => removeBadge(Badge),

106

107 options: {

108 showPrefix: {

109 type: OptionType.BOOLEAN,

110 description: "Shows the Mod as Prefix",

111 default: true,

112 restartNeeded: false

113 },

114 showCustom: {

115 type: OptionType.BOOLEAN,

116 description: "Show Custom Badges",

117 default: true,

118 restartNeeded: false

119 }

120 }

121});

122

/*
 * FiveCord — a Discord client mod
 * Copyright (c) 2025 FiveCord
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

import { addBadge, BadgePosition, ProfileBadge, removeBadge } from "@api/Badges";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { React, Tooltip } from "@webpack/common";
import { User } from "discord-types/general";

type CustomBadge = string | {
    name: string;
    badge: string;
    custom?: boolean;
};

interface BadgeCache {
    badges: { [mod: string]: CustomBadge[]; };
    expires: number;
}

const API_URL = "https://clientmodbadges-api.herokuapp.com/";

const cache = new Map<string, BadgeCache>();
const EXPIRES = 1000 * 60 * 15;

const fetchBadges = (id: string): BadgeCache["badges"] | undefined => {
    const cachedValue = cache.get(id);
    if (!cache.has(id) || (cachedValue && cachedValue.expires < Date.now())) {
        fetch(`${API_URL}users/${id}`)
            .then(res => res.json() as Promise<BadgeCache["badges"]>)
            .then(body => {
                cache.set(id, { badges: body, expires: Date.now() + EXPIRES });
                return body;
            });
    } else if (cachedValue) {
        return cachedValue.badges;
    }
};

const BadgeComponent = ({ name, img }: { name: string, img: string; }) => {
    return (
        <Tooltip text={name} >
            {(tooltipProps: any) => (
                <img
                    {...tooltipProps}
                    src={img}
                    style={{ width: "22px", height: "22px", transform: name.includes("Replugged") ? "scale(0.9)" : null, margin: "0 2px" }}
                />
            )}
        </Tooltip>
    );
};

const GlobalBadges = ({ user }: { user: User; }) => {
    const [badges, setBadges] = React.useState<BadgeCache["badges"]>({});
    React.useEffect(() => setBadges(fetchBadges(user.id) ?? {}), [user.id]);

    if (!badges) return null;
    const globalBadges: JSX.Element[] = [];

    Object.keys(badges).forEach(mod => {
        if (mod.toLowerCase() === "vencord") return;
        badges[mod].forEach(badge => {
            if (typeof badge === "string") {
                const fullNames = { "hunter": "Bug Hunter", "early": "Early User" };
                badge = {
                    name: fullNames[badge as string] ? fullNames[badge as string] : badge,
                    badge: `${API_URL}badges/${mod}/${(badge as string).replace(mod, "").trim().split(" ")[0]}`
                };
            } else if (typeof badge === "object") badge.custom = true;
            if (!showCustom() && badge.custom) return;
            const cleanName = badge.name.replace(mod, "").trim();
            const prefix = showPrefix() ? mod : "";
            if (!badge.custom) badge.name = `${prefix} ${cleanName.charAt(0).toUpperCase() + cleanName.slice(1)}`;
            globalBadges.push(<BadgeComponent name={badge.name} img={badge.badge} />);
        });
    });

    return (
        <div className="vc-global-badges" style={{ alignItems: "center", display: "flex" }}>
            {globalBadges}
        </div>
    );
};

const Badge: ProfileBadge = {
    component: b => <GlobalBadges {...b} />,
    position: BadgePosition.START,
    shouldShow: userInfo => !!Object.keys(fetchBadges(userInfo.user.id) ?? {}).length,
    key: "GlobalBadges"
};

const showPrefix = () => FiveCord.Settings.plugins.GlobalBadges.showPrefix;
const showCustom = () => FiveCord.Settings.plugins.GlobalBadges.showCustom;

export default definePlugin({
    name: "GlobalBadges",
    description: "Adds global badges from other client mods",
    authors: [Devs.FiveCord],

    start: () => addBadge(Badge),
    stop: () => removeBadge(Badge),

    options: {
        showPrefix: {
            type: OptionType.BOOLEAN,
            description: "Shows the Mod as Prefix",
            default: true,
            restartNeeded: false
        },
        showCustom: {
            type: OptionType.BOOLEAN,
            description: "Show Custom Badges",
            default: true,
            restartNeeded: false
        }
    }
});

Source

FiveCord for Windows