hover emoji

src/webpage/emoji.ts

@@ -1,5 +1,6 @@
 import {Contextmenu} from "./contextmenu.js";
 import {Guild} from "./guild.js";
+import {Hover} from "./hover.js";
 import {emojijson} from "./jsontypes.js";
 import {Localuser} from "./localuser.js";
 import {BinRead} from "./utils/binaryUtils.js";
@@ -41,6 +42,15 @@ class Emoji {
 		this.owner = owner;
 		this.emoji = json.emoji;
 	}
+	get humanName() {
+		if (this.id) {
+			const trim = this.name.split(":")[1];
+			if (trim) {
+				return trim;
+			}
+		}
+		return this.name;
+	}
 	getHTML(bigemoji: boolean = false) {
 		if (this.id) {
 			const emojiElem = document.createElement("img");
@@ -51,12 +61,20 @@ class Emoji {
 				this.info.cdn + "/emojis/" + this.id + "." + (this.animated ? "gif" : "png") + "?size=32";
 			emojiElem.alt = this.name;
 			emojiElem.loading = "lazy";
+
+			const hover = new Hover(this.humanName);
+			hover.addEvent(emojiElem);
+
 			return emojiElem;
 		} else if (this.emoji) {
 			const emojiElem = document.createElement("span");
 			emojiElem.classList.add("md-emoji");
 			emojiElem.classList.add(bigemoji ? "bigemoji" : "smallemoji");
 			emojiElem.textContent = this.emoji;
+
+			const hover = new Hover(this.humanName);
+			hover.addEvent(emojiElem);
+
 			return emojiElem;
 		} else {
 			throw new Error("This path should *never* be gone down, this means a malformed emoji");
@@ -108,10 +126,10 @@ class Emoji {
 		x: number,
 		y: number,
 		localuser: Localuser,
-	): Promise<Emoji | string> {
+	): Promise<Emoji> {
-		let res: (r: Emoji | string) => void;
+		let res: (r: Emoji) => void;
 		this;
-		const promise: Promise<Emoji | string> = new Promise((r) => {
+		const promise: Promise<Emoji> = new Promise((r) => {
 			res = r;
 		});
 		const menu = document.createElement("div");
@@ -266,13 +284,13 @@ class Emoji {
 				updateSearch.call(this);
 				title.textContent = thing.name;
 				body.innerHTML = "";
-				for (const emojit of thing.emojis) {
+				for (const emojit of thing.emojis.map((_) => new Emoji(_, localuser))) {
 					const emoji = document.createElement("div");
 					emoji.classList.add("emojiSelect");
-					emoji.textContent = emojit.emoji;
+					emoji.append(emojit.getHTML());
 					body.append(emoji);
 					emoji.onclick = (_) => {
-						res(emojit.emoji);
+						res(emojit);
 						if (Contextmenu.currentmenu !== "") {
 							Contextmenu.currentmenu.remove();
 						}

src/webpage/hover.ts

@@ -12,7 +12,7 @@ class Hover {
 		elm.addEventListener("mouseover", () => {
 			timeOut = setTimeout(async () => {
 				elm2 = await this.makeHover(elm);
-			}, 750);
+			}, 300);
 		});
 		elm.addEventListener("mouseout", () => {
 			clearTimeout(timeOut);
@@ -45,10 +45,6 @@ class Hover {
 		div.style.top = box.bottom + 4 + "px";
 		div.style.left = Math.floor(box.left + box.width / 2) + "px";
 		div.classList.add("hoverthing");
-		div.style.opacity = "0";
-		setTimeout(() => {
-			div.style.opacity = "1";
-		}, 10);
 		document.body.append(div);
 		Contextmenu.keepOnScreen(div);
 		console.log(div, elm);

src/webpage/style.css

@@ -334,9 +334,21 @@ textarea {
 	padding: 0.04in;
 	border-radius: 0.05in;
 	transform: translate(-50%, 0);
-	transition: opacity 0.2s;
+
+	animation-duration: 0.2s;
+	animation-name: fade-in;
+
 	border: solid 0.03in var(--black);
 }
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
 .editMessage {
 	background: var(--typebox-bg);
 	padding: 0.05in;
@@ -827,10 +839,10 @@ span.instanceStatus {
 	padding: 4px 0;
 	font-size: 0.9rem;
 }
-.unreadDateline{
+.unreadDateline {
-	color:var(--red);
+	color: var(--red);
-	hr{
+	hr {
-		background:var(--red);
+		background: var(--red);
 	}
 }
 /* Member Info (DM/Member List) */
@@ -1540,8 +1552,8 @@ img.bigembedimg {
 	background: var(--secondary-bg);
 	border-radius: 4px;
 	box-shadow: 0 0 8px var(--shadow);
-	hr{
+	hr {
-		width:90%;
+		width: 90%;
 		height: 1px;
 	}
 }
@@ -1702,16 +1714,16 @@ img.bigembedimg {
 	gap: 8px;
 	box-sizing: border-box;
 	user-select: none;
-	input{
+	input {
-		width:1in;
+		width: 1in;
-		position:absolute;
+		position: absolute;
-		right:8px;
+		right: 8px;
-		top:2px;
+		top: 2px;
-		transition: width .2s;
+		transition: width 0.2s;
 	}
 }
-.emojiHeading{
+.emojiHeading {
-	height:.25in;
+	height: 0.25in;
 }
 .emojiTitle {
 	font-size: 1.2rem;
@@ -2297,33 +2309,7 @@ fieldset input[type="radio"] {
 	padding: 0.2in;
 	overflow: scroll;
 	height: 100%;
-	
+
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
 	> div {
 		background: #00000030;
 		margin-bottom: 0.1in;