Fix discord widget

Author: NeeEoo

src/_style-vars.scss

@@ -7,10 +7,6 @@
   --text-color: white;
   --scrollbar-color: #302235;
   --code-background: #130d15;
-
-  --discord-dnd: hsl(358.16 calc(1*68.776%)53.529% /1);
-  --discord-idle: hsl(37.792 calc(1*78.571%)38.431% /1);
-  --discord-online: hsl(142.703 calc(1*60.656%)35.882% /1);
 }
 
 * {

src/pages/index.html

@@ -98,17 +98,13 @@ <h2>Downloads</h2>
 						<i>You can find the engine source by going to the <i class="fa fa-github"></i> <a href="https://github.com/CodenameCrew/CodenameEngine">Engine&nbsp;repository</a></i>
 					</div>
 				</div>
-	
+
 				<div class="discordWidget">
 					<div class="discordWidget-header">
 						<h2 style="text-align: center; margin: 0; transform: translateY(50%);">Discord Server</h2>
 					</div>
 					<div class="discordWidget-content">
 						<span>Members online</span>
-						<div class="discordWidget-user">
-							<img style="margin-right: 8px;"; src=""/>
-							<span></span>
-						</div>
 					</div>
 					<div class="discordWidget-footer">
 						<span>Want to chat?</span>
@@ -218,15 +214,23 @@ <h3>{{ safeish name }}</h3>
 	<script>
 		const widgetContent = document.querySelector(".discordWidget-content");
 		const widgetFooter = document.querySelector(".discordWidget-footer");
-		const userTemplate = document.querySelector(".discordWidget-user");
-		userTemplate.remove();
 		fetch("https://discord.com/api/guilds/860561967383445535/widget.json").then(response => response.json()).then(data => {
 			widgetFooter.querySelector("a").href = data.instant_invite;
 			for (const member of data.members) {
-				const user = userTemplate.cloneNode(true);
-				user.querySelector("img").src = member.avatar_url + "?size=16";
-				user.querySelector("span").innerText = member.username;
-				user.querySelector("img").style.border = "solid var(--discord-" + member.status + ") 2px";
+				const user = document.createElement("div");
+				user.classList.add("discordWidget-user");
+
+				const avatar = document.createElement("img");
+				avatar.classList.add("avatar");
+				avatar.src = member.avatar_url + "?size=16";
+				avatar.setAttribute("data-status", member.status);
+				user.appendChild(avatar);
+
+				const username = document.createElement("span");
+				username.classList.add("username");
+				username.innerText = member.username;
+				user.appendChild(username);
+
 				widgetContent.appendChild(user);
 			}
 		})
@@ -237,7 +241,7 @@ <h3>{{ safeish name }}</h3>
 			if (main && discord) {
 				discord.style.height = `${main.offsetHeight}px`;
 				const mainStyles = window.getComputedStyle(main);
-  				discord.style.marginTop = mainStyles.marginTop;
+				discord.style.marginTop = mainStyles.marginTop;
 			}
 		}
 

src/pages/index.scss

@@ -1,5 +1,36 @@
 @use "sass:color";
 
+:root {
+    --discord-dnd: hsl(358.16 calc(1*68.776%)53.529% /1);
+    --discord-idle: hsl(37.792 calc(1*78.571%)38.431% /1);
+    --discord-online: hsl(142.703 calc(1*60.656%)35.882% /1);
+}
+
+.discordWidget-user {
+    //.username {
+    //    text-overflow: ellipsis;
+    //    white-space: nowrap;
+    //    overflow: hidden;
+    //}
+
+    .avatar {
+        margin-right: 8px;
+        border: solid white 2px;
+
+        &[data-status="online"] {
+            border-color: var(--discord-online);
+        }
+
+        &[data-status="idle"] {
+            border-color: var(--discord-idle);
+        }
+
+        &[data-status="dnd"] {
+            border-color: var(--discord-dnd);
+        }
+    }
+}
+
 .content {
     margin: 0;
     padding: 0!important;