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:
+ +
+ ), + 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} + + + )); +}