From c44199ac302eb4f979d202f3325b2b0416035a5a Mon Sep 17 00:00:00 2001
From: YouHaveTrouble <youhavetrouble@youhavetrouble.me>
Date: Sat, 11 Mar 2023 14:36:37 +0100
Subject: [PATCH] js readability and transition between avatar bg colors

---
 index.js | 26 ++++++++++++++------------
 main.css |  1 +
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/index.js b/index.js
index a6ca156..07191cb 100644
--- a/index.js
+++ b/index.js
@@ -1,27 +1,29 @@
 const status = document.querySelector("#status");
 const action = document.querySelector("#status-action");
-const avatar = document.querySelector(".avatar img");
+const avatar = document.querySelector(".avatar");
 
 updateStatus();
 window.setInterval(updateStatus, 10000);
 
 async function updateStatus() {
     const result = await fetch("https://api.youhavetrouble.me/online");
+
     if (result.status !== 200) return;
 
     const json = await result.json();
-    if (json.steam.status === "ONLINE") {
-        status.innerText = "Currently Online";
-        action.innerText = "";
-        setavatarBg("online")
-        return;
-    }
-    if (json.steam.status === "IN_GAME") {
-        status.innerText = "Currently Online";
-        action.innerText = `Playing ${json.steam.game}`;
-        setavatarBg("online")
-        return;
+    switch (json.steam.status) {
+        case "ONLINE":
+            status.innerText = "Currently Online";
+            action.innerText = "";
+            setavatarBg("online")
+            return;
+        case "IN_GAME":
+            status.innerText = "Currently Online";
+            action.innerText = `Playing ${json.steam.game}`;
+            setavatarBg("online")
+            return;
     }
+
     if (json.discord === "DO_NOT_DISTURB" || json.discord === "ONLINE") {
         status.innerText = "Currently Online";
         action.innerText = "";
diff --git a/main.css b/main.css
index e63d03d..ce03633 100644
--- a/main.css
+++ b/main.css
@@ -88,6 +88,7 @@ main article {
     border: 3px solid #44251a;
     background-color: gray;
     overflow: clip;
+    transition: background-color 0.3s linear;
 }
 
 .avatar img {