Drop Soggy & Fix Broken Icons
This commit is contained in:
thororen
parent
6c27b39576
commit
7fb04403c6
4 changed files with 59 additions and 173 deletions
|
|
@ -28,6 +28,15 @@ interface BaseIconProps extends IconProps {
|
|||
|
||||
type IconProps = JSX.IntrinsicElements["svg"];
|
||||
|
||||
export const DiscordIconSizes = {
|
||||
xxs: 12,
|
||||
xs: 16,
|
||||
sm: 18,
|
||||
md: 24,
|
||||
lg: 32,
|
||||
refresh_sm: 20
|
||||
} as const;
|
||||
|
||||
function Icon({ height = 24, width = 24, className, children, viewBox, ...svgProps }: PropsWithChildren<BaseIconProps>) {
|
||||
return (
|
||||
<svg
|
||||
|
|
@ -1380,3 +1389,49 @@ export function TrashIcon(props: IconProps) {
|
|||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function AtIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill={props.fill || "currentColor"}
|
||||
d="M16.44 6.96c.29 0 .51.25.47.54l-.82 6.34c-.02.08-.03.2-.03.34 0 .71.28 1.07.85 1.07.49 0 .94-.21 1.36-.63.43-.42.77-1 1.02-1.72.26-.75.38-1.57.38-2.48 0-1.35-.29-2.54-.87-3.56a5.92 5.92 0 0 0-2.45-2.35 7.68 7.68 0 0 0-3.61-.83c-1.55 0-2.96.37-4.22 1.1a7.66 7.66 0 0 0-2.96 3.07 9.53 9.53 0 0 0-1.09 4.66c0 1.45.26 2.77.78 3.95a6.3 6.3 0 0 0 2.47 2.81 8.3 8.3 0 0 0 4.36 1.05 12.43 12.43 0 0 0 5.35-1.18.5.5 0 0 1 .7.24l.46 1.07c.1.22.02.47-.19.59-.77.43-1.69.77-2.75 1.02-1.23.3-2.48.44-3.76.44-2.18 0-4-.44-5.48-1.33a8.1 8.1 0 0 1-3.27-3.57 11.93 11.93 0 0 1-1.07-5.12c0-2.24.47-4.19 1.4-5.84a9.7 9.7 0 0 1 3.86-3.8c1.62-.9 3.4-1.34 5.36-1.34 1.8 0 3.4.37 4.8 1.12 1.4.72 2.5 1.76 3.28 3.1a8.86 8.86 0 0 1 1.16 4.56c0 1.36-.23 2.57-.7 3.64a5.81 5.81 0 0 1-1.92 2.47c-.82.58-1.76.87-2.81.87a2.4 2.4 0 0 1-1.6-.5c-.4-.35-.65-.78-.73-1.32-.3.55-.74 1-1.36 1.34a4.3 4.3 0 0 1-2.03.48A3.4 3.4 0 0 1 8 16C7.33 15.16 7 14 7 12.5c0-1.14.2-2.16.6-3.05.43-.89 1-1.57 1.73-2.06a4.3 4.3 0 0 1 4.27-.31c.47.29.82.68 1.07 1.16l.3-.95c.06-.2.25-.33.46-.33h1.02Zm-5.06 8.24c.8 0 1.45-.35 1.97-1.04.51-.7.77-1.6.77-2.7 0-.88-.18-1.56-.53-2.03a1.76 1.76 0 0 0-1.5-.73c-.8 0-1.45.35-1.97 1.04a4.28 4.28 0 0 0-.78 2.67c0 .9.17 1.58.51 2.06.36.49.87.73 1.53.73Z"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function TextIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill={props.fill || "currentColor"}
|
||||
fillRule="evenodd"
|
||||
d="M10.99 3.16A1 1 0 1 0 9 2.84L8.15 8H4a1 1 0 0 0 0 2h3.82l-.67 4H3a1 1 0 1 0 0 2h3.82l-.8 4.84a1 1 0 0 0 1.97.32L8.85 16h4.97l-.8 4.84a1 1 0 0 0 1.97.32l.86-5.16H20a1 1 0 1 0 0-2h-3.82l.67-4H21a1 1 0 1 0 0-2h-3.82l.8-4.84a1 1 0 1 0-1.97-.32L15.15 8h-4.97l.8-4.84ZM14.15 14l.67-4H9.85l-.67 4h4.97Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function FireIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill={props.fill || "currentColor"}
|
||||
fillRule="evenodd"
|
||||
d="M3 14a9 9 0 1 0 18 0c0-2.63-.61-5.22-1.79-7.58L18.2 4.38a.7.7 0 0 0-1.3.18l-.78 3.9a.66.66 0 0 1-1.27.11L12.22 1.6a.9.9 0 0 0-1.48-.33l-4.2 4.2A12.07 12.07 0 0 0 3 14Zm9.26-.84a.57.57 0 0 0-1-.23L9.6 15a3.08 3.08 0 1 0 5.12.48c-.14-.26-.5-.28-.71-.06L13 16.5l-.74-3.34Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
import { BaseText } from "@components/BaseText";
|
||||
import { Flex, FlexProps } from "@components/Flex";
|
||||
import { RightArrow } from "@components/Icons";
|
||||
import { AtIcon, RightArrow, TextIcon } from "@components/Icons";
|
||||
import { iconsModule } from "@equicordplugins/_core/concatenatedModules";
|
||||
import { getGuildAcronym, getIntlMessage } from "@utils/discord";
|
||||
import { getUserAvatarUrl } from "@utils/misc";
|
||||
|
|
@ -114,7 +114,7 @@ export function ChannelName({ guildId, channelId, messageId }: { guildId?: strin
|
|||
);
|
||||
}
|
||||
|
||||
const Icon = (channel && getChannelIcon(channel)) ?? (guildId ? iconsModule.TextIcon : iconsModule.AtIcon);
|
||||
const Icon = (channel && getChannelIcon(channel)) ?? (guildId ? TextIcon : AtIcon);
|
||||
return <Icon size="xs" color="currentColor" />;
|
||||
}, [channel, guildId, name]);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,167 +0,0 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2025 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { AudioPlayerInterface, createAudioPlayer } from "@api/AudioPlayer";
|
||||
import { HeaderBarButton } from "@api/HeaderBar";
|
||||
import { definePluginSettings } from "@api/Settings";
|
||||
import { EquicordDevs } from "@utils/constants";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { RenderModalProps } from "@vencord/discord-types";
|
||||
import { Modal,openModal, React } from "@webpack/common";
|
||||
let boopSound: AudioPlayerInterface;
|
||||
let song: AudioPlayerInterface;
|
||||
|
||||
function assignSong(url: string, volume: number) {
|
||||
song?.delete();
|
||||
song = createAudioPlayer(url, { volume, preload: true, persistent: true });
|
||||
song.load();
|
||||
}
|
||||
|
||||
function assignBoop(url: string, volume: number) {
|
||||
boopSound?.delete();
|
||||
boopSound = createAudioPlayer(url, { volume, preload: true, persistent: true });
|
||||
boopSound.load();
|
||||
}
|
||||
|
||||
function SoggyModal(props: RenderModalProps) {
|
||||
if (settings.store.songVolume !== 0) {
|
||||
React.useEffect(() => {
|
||||
song?.loop();
|
||||
|
||||
return () => {
|
||||
song?.stop();
|
||||
};
|
||||
}, []);
|
||||
}
|
||||
|
||||
const boop = (e: React.MouseEvent<HTMLImageElement>) => {
|
||||
const { offsetX, offsetY } = e.nativeEvent;
|
||||
|
||||
const region = { x: 155, y: 220, width: 70, height: 70 };
|
||||
|
||||
if (
|
||||
settings.store.boopVolume !== 0 &&
|
||||
offsetX >= region.x &&
|
||||
offsetX <= region.x + region.width &&
|
||||
offsetY >= region.y &&
|
||||
offsetY <= region.y + region.height
|
||||
) {
|
||||
boopSound?.play();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal {...props} size="dynamic" title="Soggy Cat">
|
||||
<img
|
||||
src={settings.store.imageLink}
|
||||
onClick={boop}
|
||||
style={{ display: "block" }}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function buildSoggyModal(): any {
|
||||
openModal(props => <SoggyModal {...props} />);
|
||||
}
|
||||
|
||||
function SoggyButton() {
|
||||
return (
|
||||
<HeaderBarButton
|
||||
className="soggy-button"
|
||||
tooltip={settings.store.tooltipText}
|
||||
icon={() => (
|
||||
<img
|
||||
alt=""
|
||||
src={settings.store.imageLink}
|
||||
width={24}
|
||||
height={24}
|
||||
draggable={false}
|
||||
style={{ pointerEvents: "none" }}
|
||||
/>
|
||||
)}
|
||||
onClick={() => buildSoggyModal()}
|
||||
selected={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const settings = definePluginSettings({
|
||||
songVolume: {
|
||||
description: "Volume of the song. 0 to disable",
|
||||
type: OptionType.SLIDER,
|
||||
default: 0.25,
|
||||
markers: [0, 0.25, 0.5, 0.75, 1],
|
||||
stickToMarkers: false,
|
||||
|
||||
},
|
||||
boopVolume: {
|
||||
description: "Volume of the boop sound",
|
||||
type: OptionType.SLIDER,
|
||||
default: 0.2,
|
||||
markers: [0, 0.25, 0.5, 0.75, 1],
|
||||
stickToMarkers: false,
|
||||
},
|
||||
tooltipText: {
|
||||
description: "The text shown when hovering over the button",
|
||||
type: OptionType.STRING,
|
||||
default: "the soggy",
|
||||
},
|
||||
imageLink: {
|
||||
description: "URL for the image (button and modal)",
|
||||
type: OptionType.STRING,
|
||||
default: "https://equicord.org/assets/plugins/soggy/cat.png",
|
||||
},
|
||||
songLink: {
|
||||
description: "URL for the song to play",
|
||||
type: OptionType.STRING,
|
||||
default: "https://github.com/Equicord/Equibored/raw/main/sounds/soggy/song.mp3?raw=true",
|
||||
onChange(newValue) {
|
||||
assignSong(newValue, settings.store.songVolume * 100);
|
||||
},
|
||||
},
|
||||
boopLink: {
|
||||
description: "URL for the boop sound",
|
||||
type: OptionType.STRING,
|
||||
default: "https://github.com/Equicord/Equibored/raw/main/sounds/soggy/honk.wav?raw=true",
|
||||
onChange(newValue) {
|
||||
assignBoop(newValue, settings.store.boopVolume * 100);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default definePlugin({
|
||||
name: "Soggy",
|
||||
description: "Adds a soggy button to the toolbox",
|
||||
tags: ["Fun"],
|
||||
authors: [EquicordDevs.sliwka],
|
||||
settings,
|
||||
dependencies: ["AudioPlayerAPI", "HeaderBarAPI"],
|
||||
|
||||
headerBarButton: {
|
||||
icon: () => (
|
||||
<img
|
||||
alt=""
|
||||
src={settings.store.imageLink}
|
||||
width={24}
|
||||
height={24}
|
||||
draggable={false}
|
||||
style={{ pointerEvents: "none" }}
|
||||
/>
|
||||
),
|
||||
render: SoggyButton
|
||||
},
|
||||
|
||||
start() {
|
||||
assignBoop(settings.store.boopLink, settings.store.boopVolume * 100);
|
||||
assignSong(settings.store.songLink, settings.store.songVolume * 100);
|
||||
},
|
||||
|
||||
stop() {
|
||||
boopSound?.delete();
|
||||
song?.delete();
|
||||
},
|
||||
});
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
import "./style.css";
|
||||
|
||||
import { DecoratorProps } from "@api/MemberListDecorators";
|
||||
import { iconsModule } from "@equicordplugins/_core/concatenatedModules";
|
||||
import { FireIcon } from "@components/Icons";
|
||||
import { Devs, EquicordDevs } from "@utils/constants";
|
||||
import { classNameFactory } from "@utils/css";
|
||||
import definePlugin from "@utils/types";
|
||||
|
|
@ -47,15 +47,13 @@ const StreakBadge = ({ userId }: { userId: string; }) => {
|
|||
|
||||
const today = moment().format("YYYY-MM-DD");
|
||||
const active = streak.last_streak_date === today;
|
||||
|
||||
const FireIcon = iconsModule?.FireIcon;
|
||||
const color = active ? colorFor(streak.count) : "#9ca3af";
|
||||
|
||||
return (
|
||||
<Tooltip text={`${streak.count} day streak`}>
|
||||
{tooltipProps => (
|
||||
<span {...tooltipProps} className={cl("badge")} style={{ color }}>
|
||||
{FireIcon && <FireIcon size="xs" color={color} />}
|
||||
{<FireIcon width={16} height={16} fill={color} />}
|
||||
<span className={cl("count")}>{streak.count}</span>
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue