From 71b04ea02eb7fdb6a74af451269e3aea9e25e34c Mon Sep 17 00:00:00 2001
From: amy <exhqdev@proton.me>
Date: Wed, 4 Dec 2024 05:12:41 +0330
Subject: [PATCH] that looks so ugly omfg

---
 src/App.tsx              |  2 ++
 src/components/comps.tsx | 62 ++++++++++++++++++++++++++++++----------
 2 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f7c00e3..c1229bd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -159,6 +159,8 @@ function App() {
                                                 url='https://yellows.ink/'></SingularOomfie>
                                 <SingularOomfie name='nax' discordid='148801388938264576'
                                                 url='https://nax.dev/'></SingularOomfie>
+                                <SingularOomfie name='squirrelly' discordid='218032723296649217'
+                                                url='https://squirrelly13.neocities.org/'></SingularOomfie>
                                 <SingularOomfie name='ushie' discordid='399862294143696897'
                                                 url='https://ushie.dev/'></SingularOomfie>
                                 <SingularOomfie name='mugman' discordid='601836455006044163'
diff --git a/src/components/comps.tsx b/src/components/comps.tsx
index 8278578..3ff8fcc 100644
--- a/src/components/comps.tsx
+++ b/src/components/comps.tsx
@@ -8,25 +8,57 @@ export function AdvancedBr({ count }: { count: number }) {
     return new Array(count).fill(null).map(_ => (<br />))
 }
 
-export function SingularOomfie(props: { name: string, url: string, discordid: string }) {
+export function SingularOomfie(props: { name: string; url: string; discordid: string }) {
     const [imageSrc, setImageSrc] = createSignal("");
+    const [mousePosition, setMousePosition] = createSignal({ x: 0, y: 0 });
+    const [showTooltip, setShowTooltip] = createSignal(false);
 
     onMount(async () => {
-      const url = await theImager(props.discordid);
-      setImageSrc(url);
+        const url = await theImager(props.discordid);
+        setImageSrc(url);
     });
-  
+
+    const handleMouseMove = (e: MouseEvent) => {
+        setMousePosition({ x: e.clientX, y: e.clientY });
+        setShowTooltip(true);
+    };
+
+    const handleMouseLeave = () => {
+        setShowTooltip(false);
+    };
+
     return (
-      <a href={props.url}>
-        <img
-          class="tooltip"
-          style={{
-            "max-width": "3em",
-            "border-radius": "30%",
-          }}
-          src={imageSrc()}
-          alt={"profile picture for" + props.name}
-        />
-      </a>
+        <div
+            onMouseMove={handleMouseMove}
+            onMouseLeave={handleMouseLeave}
+            style={{ position: "relative", display: "inline-block" }}
+        >
+            <a href={props.url}>
+                <img
+                    class="tooltip"
+                    style={{
+                        "max-width": "3em",
+                        "border-radius": "30%",
+                    }}
+                    src={imageSrc()}
+                    alt={"profile picture for " + props.name}
+                />
+            </a>
+            {showTooltip() && (
+                <div
+                    style={{
+                        position: "absolute",
+                        background: "rgba(0, 0, 0, 0.7)",
+                        color: "white",
+                        padding: "0.5em",
+                        "border-radius": "5px",
+                        "pointer-events": "none",
+                        transform: "translate(20%, -100%)",
+                    }}
+                >
+                    {props.name}
+                </div>
+            )}
+        </div>
     );
 }
\ No newline at end of file