Status, Custom status, pfp, and pfp border color now update in real time :D

This commit is contained in:
bingus_violet 2024-05-26 15:32:26 -05:00
parent 3db0ffc14c
commit 532454f3e7
4 changed files with 57 additions and 9 deletions

View file

@ -44,9 +44,10 @@ function timeFormatter(seconds) {
} }
function converter(html, query) { function converter(html, query) {
var startTime = Date.now()
var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config/config.json'))) var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config/config.json')))
reloads += 1 reloads += 1
var startTime = Date.now()
while (html.includes("{PATH_")) { while (html.includes("{PATH_")) {
var pagePath = html.substring(html.indexOf("{PATH_")) var pagePath = html.substring(html.indexOf("{PATH_"))
pagePath = pagePath.substring(6, pagePath.indexOf('}')) pagePath = pagePath.substring(6, pagePath.indexOf('}'))
@ -73,8 +74,6 @@ function converter(html, query) {
var username = "bingus_violet" var username = "bingus_violet"
} }
var time = new Date(Date.now())
var bnchName = "Beta" var bnchName = "Beta"
var bnchSub = "beta." var bnchSub = "beta."
@ -93,7 +92,7 @@ function converter(html, query) {
"QUOTE_COUNT": quotes.length, "QUOTE_COUNT": quotes.length,
"RANDOM_TITLE": titles[Math.floor(Math.random() * titles.length)], "RANDOM_TITLE": titles[Math.floor(Math.random() * titles.length)],
"DISCORD_STATUS": "DISCORD_STATUS":
`<span style="color: ${statusData.color};">${statusData.text}</span>` + `<span style="color: ${statusData.color};" class="statusColor">${statusData.text}</span>` +
`<style>.pfp { border-color: ${statusData.color} }</style>`, `<style>.pfp { border-color: ${statusData.color} }</style>`,
"UPTIME": uptime, "UPTIME": uptime,
"TOPBAR": `<div id="topbar"><h3><a href="/socials">Socials</a></h3></div>`, "TOPBAR": `<div id="topbar"><h3><a href="/socials">Socials</a></h3></div>`,

View file

@ -60,7 +60,9 @@
<a class="chip" href="https://{BRANCH_SUB}violets-purgatory.dev">{BRANCH_NAME} site</a> <a class="chip" href="https://{BRANCH_SUB}violets-purgatory.dev">{BRANCH_NAME} site</a>
<a class="chip" href="https://fs.violets-purgatory.dev">FileShare</a> <a class="chip" href="https://fs.violets-purgatory.dev">FileShare</a>
</div> </div>
{CUSTOM_STATUS} <div class="customStatus">
{CUSTOM_STATUS}
</div>
</div> </div>
</div> </div>
<p>{RANDOM_QUOTE}</p> <p>{RANDOM_QUOTE}</p>

View file

@ -1,3 +1,24 @@
const discStatuses = {
"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": "",
"color": "rgb(175, 175, 200)"
}
}
var pfp
var catsOnMars = new Audio("/snds/cats on mars.mp3") var catsOnMars = new Audio("/snds/cats on mars.mp3")
var whipLash = new Audio("/snds/johnny-test-whip-crack.mp3") var whipLash = new Audio("/snds/johnny-test-whip-crack.mp3")
catsOnMars.loop = true catsOnMars.loop = true
@ -13,11 +34,14 @@ var firsttimeDebounce = true
var spinWaiting = false var spinWaiting = false
function resetPFP() {
pfp.src = "https://api.violets-purgatory.dev/v1/pfp?" + new Date().getTime()
}
function spinLoop() { function spinLoop() {
spinWaiting = true spinWaiting = true
setTimeout(() => { setTimeout(() => {
spinWaiting = false spinWaiting = false
var pfp = document.querySelector(".pfp")
if (!catsOnMars.paused) { if (!catsOnMars.paused) {
if (spins > 1) { if (spins > 1) {
document.querySelector(".spinnyCount").style.display = "block" document.querySelector(".spinnyCount").style.display = "block"
@ -25,7 +49,7 @@ function spinLoop() {
} }
spins += 0.5 spins += 0.5
if (Math.round(spins) == spins && sock && sock.OPEN) { if (Math.round(spins) == spins && sock && sock.OPEN) {
document.querySelector(".pfp").src = "https://api.violets-purgatory.dev/v1/pfp?" + new Date().getTime() resetPFP()
sock.send(`{"op": 4}`) sock.send(`{"op": 4}`)
console.log("Spin Sent!") console.log("Spin Sent!")
} }
@ -41,7 +65,7 @@ window.onbeforeunload = function () {
window.onload = function () { window.onload = function () {
window.scrollTo(0, 0); window.scrollTo(0, 0);
var pfp = document.querySelector(".pfp") pfp = document.querySelector(".pfp")
pfp.addEventListener("mousedown", () => { pfp.addEventListener("mousedown", () => {
if (!spinWaiting) { if (!spinWaiting) {
@ -102,7 +126,7 @@ function socketeer() {
}, 30000); }, 30000);
}) })
sock.addEventListener("message", async(data) => { sock.addEventListener("message", async (data) => {
data = data.data data = data.data
data = JSON.parse(data) data = JSON.parse(data)
if (data.op == 4) { if (data.op == 4) {
@ -114,6 +138,25 @@ function socketeer() {
document.querySelector(".globalSpins").innerHTML = globalSpins; document.querySelector(".globalSpins").innerHTML = globalSpins;
} }
} else if (data.op == 0) { } else if (data.op == 0) {
var lanyard = data.d
var statusInfo = discStatuses[lanyard.discord_status]
var lastStatus = document.querySelector(".statusColor")
if (lastStatus.innerHTML != statusInfo.text) {
lastStatus.innerHTML = statusInfo.text
lastStatus.style.color = statusInfo.color
pfp.style.borderColor = lastStatus.style.color
resetPFP()
}
if (lanyard.activities[0] && lanyard.activities[0].type == 4) {
document.querySelector(".customStatus").innerHTML = `<hr><p>${lanyard.activities[0].state}</p>`
} else {
document.querySelector(".customStatus").innerHTML = ""
}
var discFetch = await (await fetch("/discHTML")).text() var discFetch = await (await fetch("/discHTML")).text()
document.querySelector("#activityHtml").innerHTML = discFetch document.querySelector("#activityHtml").innerHTML = discFetch
} else if (data.op == 3) { } else if (data.op == 3) {

View file

@ -115,6 +115,10 @@ img:not(.project-inner > div > img):not(.activity>img) {
} }
} }
.statusColor {
transition: color 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes fadeDelay { @keyframes fadeDelay {
0% { 0% {
opacity: 0; opacity: 0;