diff --git a/src/equicordplugins/wigglyText/index.tsx b/src/equicordplugins/wigglyText/index.tsx
index 7ffd6e0e..df261230 100644
--- a/src/equicordplugins/wigglyText/index.tsx
+++ b/src/equicordplugins/wigglyText/index.tsx
@@ -8,8 +8,11 @@ import { definePluginSettings } from "@api/Settings";
import { makeRange } from "@components/PluginSettings/components";
import { EquicordDevs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
+import { Text } from "@webpack/common";
import { ReactNode } from "react";
+import ExampleWiggle from "./ui/components/ExampleWiggle";
+
const settings = definePluginSettings({
intensity: {
type: OptionType.SLIDER,
@@ -18,22 +21,6 @@ const settings = definePluginSettings({
default: 4,
stickToMarkers: true,
onChange: () => updateStyles()
- },
- direction: {
- type: OptionType.SELECT,
- description: "Swing direction",
- options: [{
- label: "Circle",
- value: "xy",
- default: true
- }, {
- label: "Horizontal",
- value: "x",
- }, {
- label: "Vertical",
- value: "y"
- }],
- onChange: () => updateStyles()
}
});
@@ -42,56 +29,103 @@ const dirMap = {
y: "1.2s wiggle-wavy-y linear infinite"
};
+const classMap = [
+ {
+ chars: ["<", ">"],
+ className: "wiggle-inner-x",
+ },
+ {
+ chars: ["^", "^"],
+ className: "wiggle-inner-y",
+ },
+ {
+ chars: [")", "("],
+ className: "wiggle-inner-xy"
+ }
+];
+
let styles: HTMLStyleElement;
const updateStyles = () => {
const inten = Vencord.Settings.plugins.WigglyText.intensity + "px";
- const dir = Vencord.Settings.plugins.WigglyText.direction as string;
styles.textContent = `
- .wiggly-inner {
- animation: ${dir.split("").map(dir => dirMap[dir]).join(", ")};
- position: relative;
- top: 0;
- left: 0;
- }
+.wiggle-example {
+ list-style-type: disc;
+ list-style-position: outside;
+ margin: 4px 0 0 16px;
+}
- @keyframes wiggle-wavy-x {
- from {
- left: -${inten};
- }
+.wiggle-example li {
+ white-space: break-spaces;
+ margin-bottom: 4px;
+}
- to {
- left: ${inten};
- }
- }
+.wiggle-inner {
+ position: relative;
+ top: 0;
+ left: 0;
- @keyframes wiggle-wavy-y {
- 0% {
- top: 0;
- animation-timing-function: ease-out;
- }
+ &.wiggle-inner-x {
+ animation: ${dirMap.x};
+ }
- 25% {
- top: -${inten};
- animation-timing-function: ease-in;
- }
+ &.wiggle-inner-y {
+ animation: ${dirMap.y};
+ }
- 50% {
- top: 0;
- animation-timing-function: ease-out;
- }
+ &.wiggle-inner-xy {
+ animation: ${dirMap.x}, ${dirMap.y};
+ }
+}
- 75% {
- top: ${inten};
- animation-timing-function: ease-in;
- }
- }`;
+@keyframes wiggle-wavy-x {
+ from {
+ left: -${inten};
+ }
+
+ to {
+ left: ${inten};
+ }
+}
+
+@keyframes wiggle-wavy-y {
+ 0% {
+ top: 0;
+ animation-timing-function: ease-out;
+ }
+
+ 25% {
+ top: -${inten};
+ animation-timing-function: ease-in;
+ }
+
+ 50% {
+ top: 0;
+ animation-timing-function: ease-out;
+ }
+
+ 75% {
+ top: ${inten};
+ animation-timing-function: ease-in;
+ }
+}`;
};
export default definePlugin({
name: "WigglyText",
- description: "Adds a new markdown formatting that makes text ~wiggly~",
+ description: "Adds a new markdown formatting that makes text wiggly.",
authors: [EquicordDevs.nexpid],
settings,
+ settingsAboutComponent: () => (
+
+ You can make text wiggle with the following:
+
+ - left and right by typing
<~text~>
+ - up and down by typing
^~text~^
+ - in a circle by typing
)~text~(
+
+
+ ),
+
patches: [
{
find: "parseToAST:",
@@ -104,16 +138,21 @@ export default definePlugin({
wigglyRule: {
order: 24,
- match: (source: string) => source.match(/^~([\s\S]+?)~(?!_)/),
+ match: (source: string) => classMap.map(({ chars }) => source.match(new RegExp(`^(\\${chars[0]})~([\\s\\S]+?)~(\\${chars[1]})(?!_)`))).find(x => x !== null),
parse: (
capture: RegExpMatchArray,
transform: (...args: any[]) => any,
state: any
- ) => ({
- content: transform(capture[1], state),
- }),
+ ) => {
+ const className = classMap.find(({ chars }) => chars[0] === capture[1] && chars[1] === capture[3])?.className ?? "";
+
+ return {
+ content: transform(capture[2], state),
+ className
+ };
+ },
react: (
- data: { content: any[]; },
+ data: { content: any[]; className: string; },
output: (...args: any[]) => ReactNode[]
) => {
let offset = 0;
@@ -129,7 +168,7 @@ export default definePlugin({
children[j] = child.split("").map((x, i) => (
(
+
+
+ {x}
+
+
+ ));
+}