Merge pull request 'Status page!' (#7) from dev into origin

Reviewed-on: https://codeberg.orgBingus_Violet/Violets-Purgatory#7

index.js

@@ -18,7 +18,7 @@ var lanyardData = undefined
 var discData = null
 
 const activityImages = {
-    "ULTRAKILL": "https://thumbor-production-0e82.up.railway.app/unsafe/512x512/https://fs.violets-purgatory.dev/ULTRAKILL/etc/DiscordIcon.webp"
+    "ULTRAKILL": "https://fs.violets-purgatory.dev/ULTRAKILL/etc/DiscordIcon.webp"
 }
 
 var mastoData = {
@@ -72,7 +72,11 @@ function pageUpdate() {
             var status = lanyardData.activities[0]
             addedHTML += "<hr><p>"
             if (status.emoji) {
-                addedHTML += `<img class="emoji" src="https://cdn.discordapp.com/emojis/${status.emoji.id}.webp?size=32&quality=lossless"/> `
+                if (status.emoji.id) {
+                    addedHTML += `<img class="emoji" src="https://thumbor-production-0e82.up.railway.app/unsafe/https://cdn.discordapp.com/emojis/${status.emoji.id}.webp?size=32&quality=lossless"/> `
+                } else {
+                    addedHTML += status.emoji.name
+                }
             }
             if (status.state) {
                 addedHTML += `<em><span style="color: lightgray">"`
@@ -87,19 +91,6 @@ function pageUpdate() {
 
     addedHTML = ""
 
-    if (lanyardData) {
-        for (let index = 0; index < lanyardData.activities.length; index++) {
-            const activity = lanyardData.activities[index];
-            if (activity.type == 4) {
-                addedHTML += `<p><em><span style="color: lightgray">"${lanyardData.activities[0].state}"</span> - ${lanyardData.discord_user.display_name} ${new Date(Date.now()).getFullYear()}</em></p>`
-            }
-        }
-    }
-
-    html = html.replace("{LANYARD_SPOTIFY}", addedHTML)
-
-    addedHTML = ""
-
     var debounce = false
 
     if (lanyardData && lanyardData.activities.length > 0) {
@@ -148,6 +139,7 @@ function pageUpdate() {
                         return decodeURIComponent(activityImages[activity.name])
                     } else {
                         return decodeURIComponent(`https://cdn.discordapp.com/app-assets/680748054038577165/680775885317472448.png`)
+                        // This was supposed to be temporary but it kinda stuck honestly lol (It's an ultrakill icon)
                     }
                 }
             }
@@ -168,7 +160,7 @@ function pageUpdate() {
             if (activity.type == 2) {
                     addedHTML += `
                     <div class="chip activity col-md-6 testing">
-                        <img src="${get_img()}" title="${activity.assets.large_text || activity.assets.small_text}">
+                        <img src="https://thumbor-production-0e82.up.railway.app/unsafe/512x512/${get_img()}" title="${activity.assets.large_text || activity.assets.small_text}">
                             <p>
                                 Listening to <span style="color: limegreen;">${activity.name}</span> 
                                 <br> Song: ${activity.details || " "}
@@ -187,7 +179,7 @@ function pageUpdate() {
 
                     addedHTML += `
                     <div class="chip activity col-md-6 testing">
-                            <img src="${get_img()}" title="${activity.assets.large_text || activity.assets.small_text}">
+                            <img src="https://thumbor-production-0e82.up.railway.app/unsafe/${get_img()}" title="${activity.assets.large_text || activity.assets.small_text}">
                             <p>
                                 Playing <span style="color: rgb(255, 100, 150);">${activity.name}</span> 
                                 <br> ${activity.details || activity.assets.large_text || " "}

resources/mainPage.html

@@ -25,7 +25,7 @@
         <div class="container-fluid row" id="card">
             <h2>Violet</h2>
             <div style="display: flex; justify-content: center; align-items: center;">
-                <img src="https://api.lanyard.rest/534132311781015564.png?" class="pfp">
+                <img src="https://thumbor-production-0e82.up.railway.app/unsafe/https://api.lanyard.rest/534132311781015564.png" class="pfp">
                 <div>
                     <p><a href="pronouns">They/Them</a></p>
                     <p>Developer</p>
@@ -34,9 +34,10 @@
             </div>
             <div>
                 <hr>
-                <p class="chip"><a href="./pronouns">Pronouns</a></p>
+                <p class="chip"><a href="https://status.violets-purgatory.dev">Status</a></p>
                 <p class="chip"><a href="./socials">Socials</a></p>
                 <p class="chip"><a href="./projects">Projects</a></p>
+                <p class="chip"><a href="./extras">Extras</a></p>
                 <br>
                 <p class="chip"><a href="https://blog.violets-purgatory.dev">Blog</a></p>
                 <p class="chip"><a href="./faq">FAQ</a></p>

static/extras/discord/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../style.css">
+ 
+
+    <meta content="Discord Status - Violet's Purgatory" property="og:title" />
+    <meta content="The answers to all your not-so-frequently-asked questions!" />
+    <meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" />
+    <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
+
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+
+    <title>Discord Status - Violet's Purgatory</title>
+</head>
+
+<body>
+    <a class="chip" href="../../">Home</a>
+    <div class="fadediv">
+        <noscript><h2>Sorry! This page requires javascript... The rest of this site doesn't, though!</h2></noscript>
+    <h1>Discord Status (W.I.P)</h1>
+    <p>This is a more fleshed out version of the main discord status on my site, issue being, it requires Javascript. So, I choose not to use it, though it coulda been cool...</p>
+    <p>I still am tempted to add something like it to the main page, and just make it compatible without javascript, but I worry that'd upset people.</p>
+
+    <div class="container-fluid row" id="card">
+        <h2>Violet</h2>
+        <div style="display: flex; justify-content: center; align-items: center;">
+            <img src="https://thumbor-production-0e82.up.railway.app/unsafe/https://api.lanyard.rest/534132311781015564.png" class="pfp">
+            <div>
+                <p>Developer</p>
+                <p id="discStatus" style="transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);">Offline</p>
+            </div>
+        </div>
+        <div>
+            <p id="discQuote"></p>
+        </div>
+    </div>
+    </div>
+</body>
+<script src="./index.js"></script>
+</html>

static/extras/discord/index.js

@@ -0,0 +1,74 @@
+var lanyard = new WebSocket('wss://api.lanyard.rest/socket')
+
+var statuses = {
+    "online": {
+        "text": "Online",
+        "color": "rgb(100, 255, 100)"
+    },
+    "dnd": {
+        "text": "DND",
+        "color": "rgb(255, 100, 100)"
+    },
+    "idle": {
+        "text": "Idle",
+        "color": "rgb(255, 255, 75)"
+    },
+    "offline": {
+        "text": "Offline",
+        "color": "rgb(125, 125, 125)"
+    }
+}
+
+function beat(dur) {
+    lanyard.send(JSON.stringify({
+        op: 3
+    }))
+    setTimeout(() => {
+        beat(dur)
+    }, dur);
+}
+
+lanyard.addEventListener("message", (res) => {
+    var data = JSON.parse(res.data)
+    if (data.op == 1) {
+        beat(data.d.heartbeat_interval)
+        lanyard.send(JSON.stringify({
+            op: 2,
+            d: {
+                subscribe_to_id: "534132311781015564"
+            }
+        }))
+    } else if (data.op == 0) {
+        var lanyardData = data.d
+        // $("*").text(JSON.stringify(lanyardData))
+
+
+        var statusData = statuses[lanyardData.discord_status]
+
+        $("#discStatus").text(statusData.text)
+        $("#discStatus").css("color", statusData.color)
+        $(".pfp").css("border-color", statusData.color)
+
+        if (lanyardData) {
+            $("#discQuote").html("")
+            for (let index = 0; index < lanyardData.activities.length; index++) {
+                const activity = lanyardData.activities[index];
+                var status = lanyardData.activities[0]
+                var addedHTML = ""
+                addedHTML += "<hr>"
+
+                if (activity.type == 4) {
+                    if (status.emoji) {
+                        if (status.emoji.id) {
+                            addedHTML += `<img class="emoji" src="https://cdn.discordapp.com/emojis/${status.emoji.id}.webp?size=32&quality=lossless"/> `
+                        } else {
+                            addedHTML += status.emoji.name
+                        }
+                    }
+                    addedHTML += `<em><span style="color: lightgray">"${lanyardData.activities[0].state}"</span> - ${lanyardData.discord_user.display_name} ${new Date(Date.now()).getFullYear()}</em>`
+                    $("#discQuote").html(addedHTML)
+                }
+            }
+        }
+    }
+})

static/extras/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../style.css">
+ 
+
+    <meta content="FAQ - Violet's Purgatory" property="og:title" />
+    <meta content="The answers to all your not-so-frequently-asked questions!" />
+    <meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" />
+    <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
+
+    <title>Extras - Violet's Purgatory</title>
+</head>
+
+<body>
+    <a class="chip" href="../">Home</a>
+    <h1><hr>Extras</h1>
+    <p>Just some fun things that really don't have use on the main page but exist anyway!</p>
+    
+    <div class="fadediv container-fluid ">
+        <a href="./discord">Dynamic Discord Status (Javascript, W.I.P)</a>
+    </div>
+</body>
+</html>