Add 2 Plugins :3 (#78)

verticalsync · Apr 19, 2024 · 7056369 · 7056369
1 parent aa6a29e
commit 7056369
Show file tree

Hide file tree

Showing 6 changed files with 464 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -61,6 +61,8 @@ Visit [1_INSTALLING.md](/docs/1_INSTALLING.md)
 -   ModViewBypass (by [Sqaaakoi](https://github.com/Sqaaakoi)) (added from Sqaaakoi's [pull request](https://github.com/Vendicated/Vencord/pull/2220))
 -   HideChatButtons (by [programminglaboratorys](https://github.com/programminglaboratorys/Vencord/blob/fun/src/plugins/hideChatButtons))
 -   AmITyping (by [MrDiamondDog](https://github.com/MrDiamondDog)) (added from MrDiamondDog's [pull request](https://github.com/Vendicated/Vencord/pull/2360))
+-   UserPFP (by [Nexpid](https://github.com/Nexpid)) (added from Nexpid's [pull request](https://github.com/Vendicated/Vencord/pull/1956))
+-   ShowBadgeInChat (by [KrstlSkll69](https://github.com/KrstlSkll69) (added from KrstlSkll69's [pull request](https://github.com/Vendicated/Vencord/pull/2347)))
 
 ## Disclaimer
 

diff --git a/src/suncordplugins/showBadgesInChat/index.tsx b/src/suncordplugins/showBadgesInChat/index.tsx
@@ -0,0 +1,157 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { addDecoration, removeDecoration } from "@api/MessageDecorations";
+import { Devs, SuncordDevs } from "@utils/constants";
+import { isPluginDev, isSuncordPluginDev } from "@utils/misc";
+import definePlugin from "@utils/types";
+import { findByPropsLazy } from "@webpack";
+
+import badges from "../../plugins/_api/badges";
+import settings from "./settings";
+
+let RoleIconComponent: React.ComponentType<any> = () => null;
+let roleIconClassName: string;
+
+const discordBadges: readonly [number, string, string][] = Object.freeze([
+    [0, "Discord Staff", "5e74e9b61934fc1f67c65515d1f7e60d"],
+    [1, "Partnered Server Owner", "3f9748e53446a137a052f3454e2de41e"],
+    [2, "HypeSquad Events", "bf01d1073931f921909045f3a39fd264"],
+    [6, "HypeSquad Bravery", "8a88d63823d8a71cd5e390baa45efa02"],
+    [7, "HypeSquad Brilliance", "011940fd013da3f7fb926e4a1cd2e618"],
+    [8, "HypeSquad Balance", "3aa41de486fa12454c3761e8e223442e"],
+    [3, "Discord Bug Hunter", "2717692c7dca7289b35297368a940dd0"],
+    [14, "Discord Bug Hunter", "848f79194d4be5ff5f81505cbd0ce1e6"],
+    [22, "Active Developer", "6bdc42827a38498929a4920da12695d9"],
+    [17, "Early Verified Bot Developer", "6df5892e0f35b051f8b61eace34f4967"],
+    [9, "Early Supporter", "7060786766c9c840eb3019e725d2b358"],
+    [18, "Moderator Programs Alumni", "fee1624003e2fee35cb398e125dc479b"]
+]);
+
+function CheckBadge({ badge, author }: { badge: string; author: any; }): JSX.Element | null {
+    switch (badge) {
+        case "SuncordDonor":
+            return (
+                <span style={{ order: settings.store.SuncordDonorPosition }}>
+                    {badges.getSuncordDonorBadges(author.id)?.map((badge: any) => (
+                        <RoleIconComponent
+                            className={roleIconClassName}
+                            name={badge.description}
+                            size={20}
+                            src={badge.image}
+                        />
+                    ))}
+                </span>
+            );
+        case "SuncordContributer":
+            return isSuncordPluginDev(author.id) ? (
+                <span style={{ order: settings.store.SuncordContributorPosition }}>
+                    <RoleIconComponent
+                        className={roleIconClassName}
+                        name={"Suncord Contributor"}
+                        size={20}
+                        src={"https://raw.githubusercontent.com/verticalsync/Suncord/main/src/assets/icon.png"}
+                    />
+                </span>
+            ) : null;
+        case "VencordDonor":
+            return (
+                <span style={{ order: settings.store.VencordDonorPosition }}>
+                    {badges.getDonorBadges(author.id)?.map((badge: any) => (
+                        <RoleIconComponent
+                            className={roleIconClassName}
+                            name={badge.description}
+                            size={20}
+                            src={badge.image}
+                        />
+                    ))}
+                </span>
+            );
+        case "VencordContributer":
+            return isPluginDev(author.id) ? (
+                <span style={{ order: settings.store.VencordContributorPosition }}>
+                    <RoleIconComponent
+                        className={roleIconClassName}
+                        name={"Vencord Contributor"}
+                        size={20}
+                        src={"https://vencord.dev/assets/favicon.png"}
+                    />
+                </span>
+            ) : null;
+        case "DiscordProfile":
+            const chatBadges = discordBadges
+                .filter((badge: any) => (author.flags || author.publicFlags) & (1 << badge[0]))
+                .map((badge: any) => (
+                    <RoleIconComponent
+                        className={roleIconClassName}
+                        name={badge[1]}
+                        size={20}
+                        src={`https://cdn.discordapp.com/badge-icons/${badge[2]}.png`}
+                    />
+                ));
+            return chatBadges.length > 0 ? (
+                <span style={{ order: settings.store.DiscordProfilePosition }}>
+                    {chatBadges}
+                </span>
+            ) : null;
+        case "DiscordNitro":
+            return author.premiumType > 0 ? (
+                <span style={{ order: settings.store.DiscordNitroPosition }}>
+                    <RoleIconComponent
+                        className={roleIconClassName}
+                        name={
+                            "Discord Nitro" +
+                            (author.premiumType === 3 ? " Basic" : author.premiumType === 1 ? " Classic" : "")
+                        }
+                        size={20}
+                        src={"https://cdn.discordapp.com/badge-icons/2ba85e8026a8614b640c2837bcdfe21b.png"}
+                    />
+                </span>
+            ) : null;
+        default:
+            return null;
+    }
+}
+
+function ChatBadges({ author }: any) {
+    return (
+        <span style={{ display: "inline-flex", marginLeft: 2, verticalAlign: "top" }}>
+            {settings.store.showSuncordDonor && <CheckBadge badge={"SuncordDonor"} author={author} />}
+            {settings.store.showSuncordContributor && <CheckBadge badge={"SuncordContributer"} author={author} />}
+            {settings.store.showVencordDonor && <CheckBadge badge={"VencordDonor"} author={author} />}
+            {settings.store.showVencordContributor && <CheckBadge badge={"VencordContributer"} author={author} />}
+            {settings.store.showDiscordProfile && <CheckBadge badge={"DiscordProfile"} author={author} />}
+            {settings.store.showDiscordNitro && <CheckBadge badge={"DiscordNitro"} author={author} />}
+        </span>
+    );
+}
+
+export default definePlugin({
+    name: "ShowBadgesInChat",
+    authors: [Devs.Inbestigator, SuncordDevs.KrystalSkull],
+    description: "Shows the message author's badges beside their name in chat.",
+    dependencies: ["MessageDecorationsAPI"],
+    patches: [
+        {
+            find: "Messages.ROLE_ICON_ALT_TEXT",
+            replacement: {
+                match: /function\s+\w+?\(\w+?\)\s*{let\s+\w+?,\s*{className:.+}\)}/,
+                replace: "$self.RoleIconComponent=$&;$&",
+            }
+        }
+    ],
+    settings,
+    set RoleIconComponent(component: any) {
+        RoleIconComponent = component;
+    },
+    start: () => {
+        roleIconClassName = findByPropsLazy("roleIcon", "separator").roleIcon;
+        addDecoration("vc-show-badges-in-chat", props => <ChatBadges author={props.message?.author} />);
+    },
+    stop: () => {
+        removeDecoration("vc-show-badges-in-chat");
+    }
+});
diff --git a/src/suncordplugins/showBadgesInChat/settings.tsx b/src/suncordplugins/showBadgesInChat/settings.tsx
@@ -0,0 +1,200 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./styles.css";
+
+import { definePluginSettings } from "@api/Settings";
+import { OptionType } from "@utils/types";
+import { Text, useEffect, UserStore, useState } from "@webpack/common";
+
+const settings = definePluginSettings({
+    showSuncordDonor: {
+        type: OptionType.BOOLEAN,
+        description: "Enable to show Suncord Donor badges in chat.",
+        hidden: true,
+        default: true
+    },
+    SuncordDonorPosition: {
+        type: OptionType.NUMBER,
+        description: "The position of the Suncord Donor badges.",
+        hidden: true,
+        default: 0
+    },
+    showSuncordContributor: {
+        type: OptionType.BOOLEAN,
+        description: "Enable to show Suncord Contributor badges in chat.",
+        hidden: true,
+        default: true
+    },
+    SuncordContributorPosition: {
+        type: OptionType.NUMBER,
+        description: "The position of the Suncord Contributor badge.",
+        hidden: true,
+        default: 1
+    },
+    showVencordDonor: {
+        type: OptionType.BOOLEAN,
+        description: "Enable to show Vencord Donor badges in chat.",
+        hidden: true,
+        default: true
+    },
+    VencordDonorPosition: {
+        type: OptionType.NUMBER,
+        description: "The position of the Vencord Donor badges.",
+        hidden: true,
+        default: 2
+    },
+    showVencordContributor: {
+        type: OptionType.BOOLEAN,
+        description: "Enable to show Vencord Contributor badges in chat.",
+        hidden: true,
+        default: true
+    },
+    VencordContributorPosition: {
+        type: OptionType.NUMBER,
+        description: "The position of the Vencord Contributor badge.",
+        hidden: true,
+        default: 3
+    },
+    showDiscordProfile: {
+        type: OptionType.BOOLEAN,
+        description: "Enable to show Discord profile badges in chat.",
+        hidden: true,
+        default: true
+    },
+    DiscordProfilePosition: {
+        type: OptionType.NUMBER,
+        description: "The position of the Discord profile badges.",
+        hidden: true,
+        default: 4
+    },
+    showDiscordNitro: {
+        type: OptionType.BOOLEAN,
+        description: "Enable to show Discord Nitro badges in chat.",
+        hidden: true,
+        default: true
+    },
+    DiscordNitroPosition: {
+        type: OptionType.NUMBER,
+        description: "The position of the Discord Nitro badge.",
+        hidden: true,
+        default: 5
+    },
+    badgeSettings: {
+        type: OptionType.COMPONENT,
+        description: "Setup badge layout and visibility",
+        component: () => <BadgeSettings />
+    }
+});
+
+export default settings;
+
+const BadgeSettings = () => {
+    const [images, setImages] = useState([
+        { src: "https://cdn.nest.rip/uploads/f4beb1cd-ce46-4384-8c29-c6c4142f4339.png", shown: settings.store.showSuncordDonor, title: "Suncord donor badges", key: "SuncordDonor", position: settings.store.SuncordDonorPosition },
+        { src: "https://raw.githubusercontent.com/verticalsync/Suncord/main/src/assets/icon.png", shown: settings.store.showSuncordContributor, title: "Suncord contributor badge", key: "SuncordContributer", position: settings.store.SuncordContributorPosition },
+        { src: "https://cdn.discordapp.com/emojis/1026533070955872337.png", shown: settings.store.showVencordDonor, title: "Vencord donor badges", key: "VencordDonor", position: settings.store.VencordDonorPosition },
+        { src: "https://vencord.dev/assets/favicon.png", shown: settings.store.showVencordContributor, title: "Vencord contributor badge", key: "VencordContributer", position: settings.store.VencordContributorPosition },
+        { src: "https://cdn.discordapp.com/badge-icons/bf01d1073931f921909045f3a39fd264.png", shown: settings.store.showDiscordProfile, title: "Discord profile badges (HypeSquad, Discord Staff, Active Developer, etc.)", key: "DiscordProfile", position: settings.store.DiscordProfilePosition },
+        { src: "https://cdn.discordapp.com/badge-icons/2ba85e8026a8614b640c2837bcdfe21b.png", shown: settings.store.showDiscordNitro, title: "Nitro badge", key: "DiscordNitro", position: settings.store.DiscordNitroPosition }
+    ]);
+
+    useEffect(() => {
+        images.forEach(image => {
+            switch (image.key) {
+                case "SuncordDonor":
+                    settings.store.SuncordDonorPosition = image.position;
+                    settings.store.showSuncordDonor = image.shown;
+                    break;
+                case "SuncordContributer":
+                    settings.store.SuncordContributorPosition = image.position;
+                    settings.store.showSuncordContributor = image.shown;
+                    break;
+                case "VencordDonor":
+                    settings.store.VencordDonorPosition = image.position;
+                    settings.store.showVencordDonor = image.shown;
+                    break;
+                case "VencordContributer":
+                    settings.store.VencordContributorPosition = image.position;
+                    settings.store.showVencordContributor = image.shown;
+                    break;
+                case "DiscordProfile":
+                    settings.store.DiscordProfilePosition = image.position;
+                    settings.store.showDiscordProfile = image.shown;
+                    break;
+                case "DiscordNitro":
+                    settings.store.DiscordNitroPosition = image.position;
+                    settings.store.showDiscordNitro = image.shown;
+                    break;
+                default:
+                    break;
+            }
+        });
+    }, [images]);
+
+    const handleDragStart = (e: any, index: number) => {
+        if (!images[index].shown) {
+            e.preventDefault();
+        } else {
+            e.dataTransfer.setData("index", index);
+        }
+    };
+
+    const handleDragOver = e => {
+        e.preventDefault();
+    };
+
+    const handleDrop = (e: any, dropIndex: number) => {
+        const dragIndex = e.dataTransfer.getData("index");
+        const newImages = [...images];
+        const draggedImage = newImages[dragIndex];
+
+        newImages.splice(dragIndex, 1);
+        newImages.splice(dropIndex, 0, draggedImage);
+
+        newImages.forEach((image, index) => {
+            image.position = index;
+        });
+
+        setImages(newImages);
+    };
+
+    const toggleDisable = (index: number) => {
+        const newImages = [...images];
+        newImages[index].shown = !newImages[index].shown;
+        setImages(newImages);
+    };
+
+    return (
+        <>
+            <Text>Drag the badges to reorder them, you can click to enable/disable a specific badge type.</Text>
+            <div className="badge-settings">
+                <img style={{ width: "55px", height: "55px", borderRadius: "50%", marginRight: "15px" }} src={UserStore.getCurrentUser().getAvatarURL()}></img>
+                <Text style={{ fontSize: "22px", color: "white", marginRight: "7.5px" }}>{(UserStore.getCurrentUser() as any).globalName}</Text>
+                {images
+                    .sort((a, b) => a.position - b.position)
+                    .map((image, index) => (
+                        <div
+                            key={image.key}
+                            className={`image-container ${!image.shown ? "disabled" : ""}`}
+                            onDragOver={e => handleDragOver(e)}
+                            onDrop={e => handleDrop(e, index)}
+                            onClick={() => toggleDisable(index)}
+                        >
+                            <img
+                                src={image.src}
+                                alt={image.title}
+                                draggable={image.shown}
+                                onDragStart={e => handleDragStart(e, index)}
+                                title={image.title}
+                            />
+                        </div>
+                    ))
+                }
+            </div>
+        </>
+    );
+};
diff --git a/src/suncordplugins/showBadgesInChat/styles.css b/src/suncordplugins/showBadgesInChat/styles.css
@@ -0,0 +1,21 @@
+.badge-settings {
+    display: flex;
+    gap: 5px;
+    flex-direction: row;
+}
+
+.image-container {
+    position: relative;
+    transition: 0.15s;
+}
+
+.image-container img {
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+}
+
+.disabled {
+    opacity: 0.5;
+    scale: 0.95;
+}