render role icons

src/webpage/member.ts

@@ -417,6 +417,15 @@ class Member extends SnowFlake {
 			return maybe;
 		}
 	}
+	getRoleIcon() {
+		for (const role of this.roles) {
+			const icon = role.getIcon();
+			if (icon) {
+				return icon;
+			}
+		}
+		return;
+	}
 	public getPresence(presence: presencejson | undefined) {
 		this.user.getPresence(presence);
 	}

src/webpage/message.ts

@@ -603,9 +603,9 @@ class Message extends SnowFlake {
 				author.bind(minipfp, this.guild);
 				username.textContent = author.username;
 				author.bind(username, this.guild);
-				Member.resolveMember(author, this.guild).then((_) => {
-					if (_) {
-						username.textContent = _.name;
+				Member.resolveMember(author, this.guild).then((member) => {
+					if (member) {
+						username.textContent = member.name;
 					}
 				});
 			});
@@ -643,14 +643,17 @@ class Message extends SnowFlake {
 				const username = document.createElement("span");
 				username.classList.add("username");
 				this.author.bind(username, this.guild);
-				Member.resolveMember(this.author, this.guild).then((_) => {
-					if (_) {
-						username.textContent = _.name;
+				Member.resolveMember(this.author, this.guild).then((member) => {
+					if (member) {
+						username.textContent = member.name;
+						const icon = member.getRoleIcon();
+						if (icon) username.after(icon);
 					}
 				});
 				div.classList.add("topMessage");
 				username.textContent = this.author.username;
 				const userwrap = document.createElement("div");
+				userwrap.classList.add("userwrap");
 				userwrap.appendChild(username);
 				if (this.author.bot) {
 					const username = document.createElement("span");

src/webpage/role.ts

@@ -35,6 +35,22 @@ class Role extends SnowFlake {
 		this.permissions = new Permissions(json.permissions);
 		this.owner = owner;
 	}
+	getIcon(): HTMLElement | void {
+		const hover = new Hover(this.name);
+		if (this.unicode_emoji) {
+			const span = document.createElement("span");
+			span.textContent = this.unicode_emoji;
+			span.classList.add("roleIcon");
+			hover.addEvent(span);
+			return span;
+		}
+		if (this.icon) {
+			const img = createImg(this.info.cdn + "/role-icons/" + this.id + "/" + this.icon + ".webp");
+			img.classList.add("roleIcon");
+			hover.addEvent(img);
+			return img;
+		}
+	}
 	newJson(json: rolesjson) {
 		for (const thing of Object.keys(json)) {
 			if (thing === "id" || thing === "permissions") {
@@ -68,6 +84,8 @@ class Role extends SnowFlake {
 }
 export {Role};
 import {Options} from "./settings.js";
+import {createImg} from "./utils/utils.js";
+import {Hover} from "./hover.js";
 class PermissionToggle implements OptionsElement<number> {
 	readonly rolejson: {
 		name: string;

src/webpage/style.css

@@ -1739,6 +1739,22 @@ span.instanceStatus {
 	word-break: break-all;
 	cursor: pointer;
 }
+.roleIcon {
+	display: inline-block;
+	padding: 1px;
+	margin-left: 3px;
+	background: var(--secondary-bg);
+	border: solid black 2px;
+	border-radius: 4px;
+	cursor: default;
+	width: 20px;
+	height: 20px;
+	object-fit: contain;
+}
+.userwrap {
+	display: flex;
+	align-items: flex-end;
+}
 .pinText {
 	cursor: pointer;
 }