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

Reviewed-on: https://codeberg.orgBingus_Violet/Violets-Purgatory#7
This commit is contained in:
Bingus_Violet 2024-01-12 15:04:21 +00:00
commit c338644c33
5 changed files with 159 additions and 19 deletions

View file

@ -18,7 +18,7 @@ var lanyardData = undefined
var discData = null var discData = null
const activityImages = { 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 = { var mastoData = {
@ -72,7 +72,11 @@ function pageUpdate() {
var status = lanyardData.activities[0] var status = lanyardData.activities[0]
addedHTML += "<hr><p>" addedHTML += "<hr><p>"
if (status.emoji) { 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) { if (status.state) {
addedHTML += `<em><span style="color: lightgray">"` addedHTML += `<em><span style="color: lightgray">"`
@ -87,19 +91,6 @@ function pageUpdate() {
addedHTML = "" 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 var debounce = false
if (lanyardData && lanyardData.activities.length > 0) { if (lanyardData && lanyardData.activities.length > 0) {
@ -148,6 +139,7 @@ function pageUpdate() {
return decodeURIComponent(activityImages[activity.name]) return decodeURIComponent(activityImages[activity.name])
} else { } else {
return decodeURIComponent(`https://cdn.discordapp.com/app-assets/680748054038577165/680775885317472448.png`) 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) { if (activity.type == 2) {
addedHTML += ` addedHTML += `
<div class="chip activity col-md-6 testing"> <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> <p>
Listening to <span style="color: limegreen;">${activity.name}</span> Listening to <span style="color: limegreen;">${activity.name}</span>
<br> Song: ${activity.details || " "} <br> Song: ${activity.details || " "}
@ -187,7 +179,7 @@ function pageUpdate() {
addedHTML += ` addedHTML += `
<div class="chip activity col-md-6 testing"> <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> <p>
Playing <span style="color: rgb(255, 100, 150);">${activity.name}</span> Playing <span style="color: rgb(255, 100, 150);">${activity.name}</span>
<br> ${activity.details || activity.assets.large_text || " "} <br> ${activity.details || activity.assets.large_text || " "}

View file

@ -25,7 +25,7 @@
<div class="container-fluid row" id="card"> <div class="container-fluid row" id="card">
<h2>Violet</h2> <h2>Violet</h2>
<div style="display: flex; justify-content: center; align-items: center;"> <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> <div>
<p><a href="pronouns">They/Them</a></p> <p><a href="pronouns">They/Them</a></p>
<p>Developer</p> <p>Developer</p>
@ -34,9 +34,10 @@
</div> </div>
<div> <div>
<hr> <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="./socials">Socials</a></p>
<p class="chip"><a href="./projects">Projects</a></p> <p class="chip"><a href="./projects">Projects</a></p>
<p class="chip"><a href="./extras">Extras</a></p>
<br> <br>
<p class="chip"><a href="https://blog.violets-purgatory.dev">Blog</a></p> <p class="chip"><a href="https://blog.violets-purgatory.dev">Blog</a></p>
<p class="chip"><a href="./faq">FAQ</a></p> <p class="chip"><a href="./faq">FAQ</a></p>

View file

@ -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>

View file

@ -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)
}
}
}
}
})

28
static/extras/index.html Normal file
View file

@ -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>