discord did a funny

WorriedArrow · Jan 21, 2023 · 68c07de · 68c07de
1 parent 8f1e303
commit 68c07de
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 2 deletions.
diff --git a/src/api/client.ts b/src/api/client.ts
@@ -7,4 +7,13 @@ export default class Client {
     relaunch() {
         DiscordNative.remoteApp.relaunch();
     }
+    /**
+     * The current zoom level as a percentage.
+     */
+    get zoom() {
+        return Math.round((( window.outerWidth - 10 ) / window.innerWidth) * 100 + 0.6);
+    }
+    set zoom(value) {
+        DiscordNative.window.setZoomFactor(value);
+    }
 }
diff --git a/src/api/components.ts b/src/api/components.ts
@@ -144,6 +144,44 @@ export default {
                 }, 135);
             }
         },
+        tooltip: (options: { element: HTMLElement, text: string }) => {
+            options.element.addEventListener("mouseenter", () => {
+                var tooltip = OpenLoader.componentBuilder.parseHTML(`<div class="theme-dark layer-2aCOJ3 disabledPointerEvents-2AmYRc ol-tooltip" style="position: absolute; transition: transform 85ms ease-in-out, opacity 85ms ease-in-out; opacity: 0; transform: scale(0.93);">
+                    <div class="tooltip-14MtrL tooltipTop-1wv5UJ tooltipPrimary-3qLMbS tooltipDisablePointerEvents-1huO19" style="opacity: 1; transform: none;">
+                        <div class="tooltipPointer-3L49xb" style="left: calc(50% + 0px);"></div>
+                        <div class="tooltipContent-Nejnvh">${options.text}</div>
+                    </div>
+                </div>`) as HTMLElement;
+
+                document.querySelector(".notDevTools-1zkgfK > .layerContainer-2v_Sit")?.appendChild(tooltip);
+
+                tooltip.style.top = (options.element.getBoundingClientRect().top - options.element.getBoundingClientRect().height - 12) + "px";
+                tooltip.style.left = (options.element.getBoundingClientRect().left - tooltip.getBoundingClientRect().width / 2 + OpenLoader.client.zoom / 10) + "px";
+
+                setTimeout(() => {
+                    tooltip.style.opacity = '1';
+                    tooltip.style.transform = 'scale(1)';
+                })
+            })
+
+            options.element.addEventListener("mouseleave", () => {
+                var tooltip = document.querySelector(".ol-tooltip") as HTMLElement;
+                tooltip.style.opacity = '0';
+                tooltip.style.transform = 'scale(0.93)';
+                setTimeout(() => tooltip.remove(), 85);
+            })
+
+            options.element.addEventListener("DOMNodeRemoved", () => {
+                var tooltip = document.querySelector(".ol-tooltip") as HTMLElement;
+                tooltip.style.opacity = '0';
+                tooltip.style.transform = 'scale(0.93)';
+                setTimeout(() => tooltip.remove(), 85);
+            });
+
+            (options.element.parentNode as HTMLElement).onclick = () => {
+
+            }
+        }
     },
     settingsMenu: {
         separator: () => {
@@ -155,7 +193,7 @@ export default {
             var base = document.createElement("div");
             base.classList.add("header-2Kx1US");
             var headerContent = document.createElement("div");
-            headerContent.classList.add("eyebrow-Ejf06y");
+            headerContent.classList.add("eyebrow-1Shfyi");
             headerContent.textContent = options.text;
             base.appendChild(headerContent);
             return base;

diff --git a/src/utils/pluginUI.ts b/src/utils/pluginUI.ts
@@ -47,6 +47,7 @@ function addContent(content: HTMLElement) {
         (svgWrapper.querySelector('svg') as SVGElement).onmouseleave = () => svgWrapper.style.color = "var(--button-danger-background)";
         elem.onmouseenter = () => svgWrapper.style.right = "8px";
         elem.onmouseleave = () => svgWrapper.style.right = "-32px";
+        OpenLoader.componentBuilder.createComponent(OpenLoader.components.generic.tooltip, { element: svgWrapper, text: "Remove" })
         var bgImage = document.createElement("div");
         bgImage.style.width = "100%";
         bgImage.style.height = "40%";

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -7,6 +7,11 @@ interface Client {
      * Completely relaunches the client.
      */
     relaunch(): void;
+    /**
+     * The current zoom level as a percentage.
+     */
+    get zoom(): number;
+    set zoom(value);
 }
 
 interface DiscordWindow {
@@ -44,7 +49,7 @@ interface ComponentBuilder {
      * @param options The options to pass to the component function.
      * @returns the output element of the component function.
      */
-    createComponent(component: Function, options: any): HTMLElement;
+    createComponent(component: Function, options: any): HTMLElement | void;
     /**
      * 
      * @param category The category, which can be something like "hello.world" to have hello as the category and world as the subcategory.