Dynamic Discord!

This commit is contained in:
bingus_violet 2024-03-08 10:49:47 -06:00
parent 65e9dd1854
commit e74fb532ab
6 changed files with 56 additions and 3 deletions

View file

@ -19,6 +19,34 @@ var cachePath = path.join(staticpath, 'cached')
var fontPath = path.join(staticpath, "fonts") var fontPath = path.join(staticpath, "fonts")
app.use("/fonts", express.static(fontPath)) app.use("/fonts", express.static(fontPath))
app.use("/cached", express.static(cachePath))
app.get("/disc", (req, res) => {
var looping = true
res.setHeader("X-Accel-Buffering", "no")
res.write(fs.readFileSync(path.join(__dirname, "resources/disc.html")))
var iterations = 0
var lastAct = null
function loop() {
var currentAct = pageUpdater.getActivities()
if (currentAct != lastAct) {
lastAct = currentAct
iterations += 1
res.write(`<div id="loop${iterations}">`)
res.write(currentAct.substring(currentAct.indexOf("<div")))
res.write(`</div>`)
res.write(`<style>#loop${iterations - 1} {display: none;}</style>`)
}
setTimeout(() => {
loop()
res.write("")
}, 5000);
}
loop()
})
if (!fs.existsSync(cachePath)) { if (!fs.existsSync(cachePath)) {
fs.mkdirSync(cachePath) fs.mkdirSync(cachePath)

View file

@ -80,7 +80,7 @@ module.exports = {
} }
if (!debounce && activity.type != 4) { if (!debounce && activity.type != 4) {
addedHTML += `<h2><hr>What I'm up to:</h2><div class="activity-container">` addedHTML += `<h2><hr>What I'm up to:</h2><p><a href="/disc">Check it out in real time! (buggy & unoptimized)</a></p><div class="activity-container">`
debounce = true debounce = true
} }
@ -93,7 +93,7 @@ module.exports = {
return 'imgs/notFound.png' return 'imgs/notFound.png'
} }
return './cached/' + fn return '/cached/' + fn
} }
function songStats() { function songStats() {

View file

@ -99,6 +99,10 @@ function converter(html, query) {
} }
module.exports = { module.exports = {
getActivities: function () {
return activityToHTML.activitiesToHTML(lanyardData, cachedImages)
},
middleWare: function (req, res, next) { middleWare: function (req, res, next) {
var filePath = (req.baseUrl + req.path).trim() var filePath = (req.baseUrl + req.path).trim()

20
resources/disc.html Normal file
View file

@ -0,0 +1,20 @@
<!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="/global.css">
<link rel="stylesheet" href="/root.css">
<link rel="stylesheet" href="/subpage.css">
<title>Dynamic Disc Status</title>
</head>
<body>
<main>
<noscript><p>This page uses JS :(</p></noscript>
<br>
<h1>Dynamicly Updating Discord Status</h1>
<p>This page is basically the same as the one present on the site, but it updates in real time!</p>
<h2><hr>How does it work?</h2>
<p>Its a little big buggy- Pretty much, it just keeps writing html to the client, and telling it the HTML never finished. Yeah. Not great. Very easily could cause a data leak i think? Idk, what do you think I am, a programmer????</p>

View file

@ -44,6 +44,7 @@
</div> </div>
</div> </div>
<p>Make sure to check out this project on <a href="https://codeberg.org/bingus_violet/violets-purgatory">Codeberg</a>!</p> <p>Make sure to check out this project on <a href="https://codeberg.org/bingus_violet/violets-purgatory">Codeberg</a>!</p>
{ACTIVITIES} {ACTIVITIES}
<h2><hr>Services</h2> <h2><hr>Services</h2>

View file

@ -13,7 +13,7 @@ body {
} }
main { main {
animation: fadeUp 2s cubic-bezier(0.075, 0.82, 0.165, 1); animation: fadeUp 1s cubic-bezier(0.075, 0.82, 0.165, 1);
} }
@keyframes fadeUp { @keyframes fadeUp {