BIIIG Javascript reworking, split into multiple files

This commit is contained in:
bingus_violet 2024-09-29 17:30:06 -05:00
parent 91337ac477
commit 1733dc58f5
17 changed files with 281 additions and 388 deletions

View file

@ -344,6 +344,15 @@ function converter(html, dynamic = true) {
addedHTML += "<p>No blog posts found... <br>wait <br> huh ??? <br>what???????<br> how ???????????????<br> WHY ?!<br> Violet must've fucked up like. REALLY bad. <br> We're so cooked</p>"
}
return addedHTML
},
"SUBPAGE_JS": () => {
return `
<script src="../js/cash.js"></script>
<script src="../js/main.js"></script>
<script src="../js/constants.js"></script>
<script src="../js/lanyardSocket.js"></script>
<script src="../js/timeFormatter.js"></script>
`
}
}

View file

@ -1,32 +0,0 @@
function loop() {
var date = new Date()
var hour = date.getHours();
hour = (hour < 10 ? "0" : "") + hour;
var min = date.getMinutes();
min = (min < 10 ? "0" : "") + min;
var sec = date.getSeconds();
sec = (sec < 10 ? "0" : "") + sec;
$("#time").text(hour + ":" + min)
setTimeout(() => {
loop()
}, 1000)
}
document.addEventListener("DOMContentLoaded", function() {
loop()
})
$(document).on('keypress',function(e) {
if(e.which == 102) {
if ($.fullscreen.isFullScreen()) {
$.fullscreen.exit()
} else {
$("body").fullscreen()
}
}
});

File diff suppressed because one or more lines are too long

View file

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="../subpage.css">
<link rel="stylesheet" href="./style.css">
<script src="../jquery.js"></script>
<script src="../main.js"></script>
<script src="./fullscreen.js"></script>
<script src="./ambient.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Violet's Purgatory Ambient Page</title>
<meta name="darkreader-lock">
<meta content="Ambient Page - Violet's Purgatory" property="og:title" />
<meta content="This page isn't really made for public use. Ignore it!" property="og:description" />
<meta content="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
<meta content="#a200ff" data-react-helmet="true" name="theme-color" />
</head>
<body>
{WEATHER_MODIFIER}
<div class="mainDiv">
<h1 id="time">00:00</h1>
<div id="activityHtml">
{ACTIVITIES}
</div>
</div>
</body>
</html>

View file

@ -1,19 +0,0 @@
body {
background-image: none;
background-color: black;
display: flex;
align-items: center;
margin: auto;
}
@media screen and (min-height: 500px) {
html,
body {
height: 100%;
}
}
#time {
font-size: 5rem;
}

View file

@ -4,9 +4,6 @@
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="../jquery.js"></script>
<script src="../main.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

View file

@ -5,8 +5,7 @@
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/subpage.css">
<script src="../jquery.js"></script>
<script src="../main.js"></script>
{SUBPAGE_JS}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

View file

@ -8,8 +8,11 @@
<link rel="stylesheet" href="./noScript.css">
</noscript>
<script src="./cash.js"></script>
<script src="./main.js"></script>
<script src="./js/cash.js"></script>
<script src="./js/constants.js"></script>
<script src="./js/lanyardSocket.js"></script>
<script src="./js/timeFormatter.js"></script>
<script src="./js/spin.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

26
static/js/constants.js Normal file
View file

@ -0,0 +1,26 @@
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 teto = false
var date = new Date()
if (date.getDay() == 2) {
teto = true
}

View file

@ -0,0 +1,79 @@
var sock
var firsttimeDebounce = true
var lastPong = Date.now()
function ping(dur) {
sock.send(JSON.stringify({
op: 3
}))
setTimeout(() => {
ping(dur)
if (Date.now() - lastPong > 120000) {
sock.close()
console.log("Max duration since last pong exceeded- Closing socket.")
}
}, dur);
}
function socketeer() {
sock = new WebSocket('wss://api.violets-purgatory.dev')
sock.addEventListener("open", () => {
ping(30000)
})
sock.addEventListener("error", (error) => {
console.log(error)
})
sock.addEventListener("close", () => {
console.log("Connection Closed. Attempting Reconnect in 30 seconds.")
$("#apiConnected").text("false")
setTimeout(() => {
socketeer()
}, 30000);
})
sock.addEventListener("message", async (data) => {
data = data.data
data = JSON.parse(data)
if (data.op == 4) {
$("#apiConnected").text("true")
globalSpins = data.spins
if (firsttimeDebounce == true) {
firsttimeDebounce = false
$(".globalSpins").innerHTML = globalSpins + 1;
} else {
$(".globalSpins").innerHTML = globalSpins;
}
} else if (data.op == 0) {
var lanyard = data.d
var statusInfo = discStatuses[lanyard.discord_status]
var lastStatus = $(".statusColor")
if (lastStatus.text() != statusInfo.text) {
lastStatus.text(statusInfo.text)
lastStatus.css("color", statusInfo.color)
$(".pfp").css("borderColor", statusInfo.color)
}
// if (lanyard.activities[0] && lanyard.activities[0].type == 4) {
// document.querySelector(".customStatus").innerHTML = `<hr><img src=""><p>${lanyard.activities[0].state}</p>`
// } else {
// document.querySelector(".customStatus").innerHTML = ""
// }
var discFetch = await (await fetch("/discHTML")).text()
$("#activityHtml").html(discFetch)
} else if (data.op == 3) {
lastPong = Date.now()
} else {
console.log(data)
}
})
}
socketeer()

7
static/js/main.js Normal file
View file

@ -0,0 +1,7 @@
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
document.addEventListener("DOMContentLoaded", function() {
$("#jsEnabled").text("true")
})

102
static/js/spin.js Normal file
View file

@ -0,0 +1,102 @@
const spinSpeed = 30
var spinFactor = 3
var pfp
var music
if (teto) {
music = new Audio("/snds/Triple Baka.ogg")
} else {
music = new Audio("/snds/Lotus Waters.ogg")
}
music.loop = true
music.preservesPitch = false
var spins = 0
var lastSent = 0
var globalSpins = 0
var spinning = false
var spinWaiting = false
function resetPFP() {
$(".pfp")
}
function lerp(a, b, t) {
return a * (1 - t) + b * t
}
function spinLoop() {
spinWaiting = true
setTimeout(() => {
spinWaiting = false
if (spinning) {
// music.volume = 0.5
if (music.currentTime > 6.5 && teto) {
spinFactor = 0.25
} else {
spinFactor = 3
}
if (!teto) {
music.playbackRate = lerp(music.playbackRate, 1, 1/spinSpeed)
music.volume = lerp(music.volume, 0.5, 1/spinSpeed)
}
spins += 1/spinSpeed / spinFactor
if (Math.floor(spins) != lastSent && sock && sock.OPEN) {
$(".globalSpins").text(globalSpins + 1)
lastSent = Math.floor(spins)
// resetPFP()
sock.send(`{"op": 4}`)
if (spins > 1) {
$(".spinnyCount").css("display", "block")
$(".localSpins").html(lastSent);
}
}
} else {
if (!teto) {
music.playbackRate = lerp(music.playbackRate, 0.5, 1/spinSpeed)
music.volume = lerp(music.volume, -0, 3/spinSpeed)
} else {
music.pause()
music.currentTime = 1.5
}
spins = lerp(spins, Math.round(spins), 1 / spinSpeed * 3)
}
$(".pfp").css("rotate", (spins * 360) + "deg")
spinLoop()
}, 1/spinSpeed * 1000);
}
document.addEventListener("DOMContentLoaded", function() {
$("#jsEnabled").text("true")
pfp = $(".pfp")
spinLoop()
pfp.on("mousedown", () => {
// if (!spinWaiting) {
// spinLoop();
// }
music.play()
spinning = true
})
document.body.onmouseup = () => {
if (music.currentTime != 0) {
// music.currentTime = 0
// music.pause()
// whipLash.currentTime = 0
// whipLash.play()
spinning = false
}
}
})

View file

@ -0,0 +1,50 @@
function gameTimeFormatter(seconds) {
seconds = Math.ceil(seconds / 1000)
var minutes = Math.ceil(seconds / 60)
var hours = Math.floor(minutes / 60)
if (seconds <= 60) {
return 'about ' + seconds + ' seconds'
} else if (minutes < 60) {
return `${minutes} Minutes`
}
return `${hours} hours and ${minutes % 60} minutes`
}
function timeFormatter(seconds) {
seconds = Math.ceil(seconds / 1000)
var minutes = Math.floor(seconds / 60)
if (seconds % 60 < 10) {
return `${minutes}:0${seconds % 60}`
} else {
return `${minutes}:${seconds % 60}`
}
}
function secondLoop() {
$(".durationBarFormatter").each((_, item) => {
item = $(item)
item.text(`${timeFormatter((Math.min(Date.now(), item.attr("data-end")) - item.attr("data-start")))}/${timeFormatter((item.attr("data-end") - item.attr("data-start")))}`)
})
$(".timeEstimate").each((_, item) => {
item = $(item)
item.text(gameTimeFormatter(Date.now() - item.attr("data-start")))
})
$(".endEstimate").each((_, item) => {
item = $(item)
item.text(timeFormatter((item.attr("data-end") - Date.now())))
})
setTimeout(() => {
secondLoop()
}, 1000);
}
document.addEventListener("DOMContentLoaded", function() {
secondLoop()
})

View file

@ -1,261 +0,0 @@
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)"
}
}
const spinSpeed = 30
var spinFactor = 3
var date = new Date()
var teto = false
if (date.getDay() == 2) {
teto = true
}
var pfp
var music
if (teto) {
music = new Audio("/snds/Triple Baka.ogg")
} else {
music = new Audio("/snds/Lotus Waters.ogg")
}
music.loop = true
music.preservesPitch = false
var sock
var spins = 0
var lastSent = 0
var globalSpins = 0
var spinning = false
var firsttimeDebounce = true
var spinWaiting = false
function resetPFP() {
$(".pfp")
}
function lerp(a, b, t) {
return a * (1 - t) + b * t
}
function gameTimeFormatter(seconds) {
seconds = Math.ceil(seconds / 1000)
var minutes = Math.ceil(seconds / 60)
var hours = Math.floor(minutes / 60)
if (seconds <= 60) {
return 'about ' + seconds + ' seconds'
} else if (minutes < 60) {
return `${minutes} Minutes`
}
return `${hours} hours and ${minutes % 60} minutes`
}
function timeFormatter(seconds) {
seconds = Math.ceil(seconds / 1000)
var minutes = Math.floor(seconds / 60)
if (seconds % 60 < 10) {
return `${minutes}:0${seconds % 60}`
} else {
return `${minutes}:${seconds % 60}`
}
}
function spinLoop() {
spinWaiting = true
setTimeout(() => {
spinWaiting = false
if (spinning) {
// music.volume = 0.5
if (music.currentTime > 6.5 && teto) {
spinFactor = 0.25
} else {
spinFactor = 3
}
if (!teto) {
music.playbackRate = lerp(music.playbackRate, 1, 1/spinSpeed)
music.volume = lerp(music.volume, 0.5, 1/spinSpeed)
}
spins += 1/spinSpeed / spinFactor
if (Math.floor(spins) != lastSent && sock && sock.OPEN) {
$(".globalSpins").text(globalSpins + 1)
lastSent = Math.floor(spins)
// resetPFP()
sock.send(`{"op": 4}`)
if (spins > 1) {
$(".spinnyCount").css("display", "block")
$(".localSpins").html(lastSent);
}
}
} else {
if (!teto) {
music.playbackRate = lerp(music.playbackRate, 0.5, 1/spinSpeed)
music.volume = lerp(music.volume, -0, 3/spinSpeed)
} else {
music.pause()
music.currentTime = 1.5
}
spins = lerp(spins, Math.round(spins), 1 / spinSpeed * 3)
}
$(".pfp").css("rotate", (spins * 360) + "deg")
spinLoop()
}, 1/spinSpeed * 1000);
}
function secondLoop() {
$(".durationBarFormatter").each((_, item) => {
item = $(item)
item.text(`${timeFormatter((Math.min(Date.now(), item.attr("data-end")) - item.attr("data-start")))}/${timeFormatter((item.attr("data-end") - item.attr("data-start")))}`)
})
$(".timeEstimate").each((_, item) => {
item = $(item)
item.text(gameTimeFormatter(Date.now() - item.attr("data-start")))
})
$(".endEstimate").each((_, item) => {
item = $(item)
item.text(timeFormatter((item.attr("data-end") - Date.now())))
})
setTimeout(() => {
secondLoop()
}, 1000);
}
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
document.addEventListener("DOMContentLoaded", function() {
$("#jsEnabled").text("true")
pfp = $(".pfp")
spinLoop()
secondLoop()
pfp.on("mousedown", () => {
// if (!spinWaiting) {
// spinLoop();
// }
music.play()
spinning = true
})
document.body.onmouseup = () => {
if (music.currentTime != 0) {
// music.currentTime = 0
// music.pause()
// whipLash.currentTime = 0
// whipLash.play()
spinning = false
}
}
socketeer()
})
var lastPong = Date.now()
function ping(dur) {
sock.send(JSON.stringify({
op: 3
}))
setTimeout(() => {
ping(dur)
if (Date.now() - lastPong > 120000) {
sock.close()
console.log("Max duration since last pong exceeded- Closing socket.")
}
}, dur);
}
function socketeer() {
sock = new WebSocket('wss://api.violets-purgatory.dev')
sock.addEventListener("open", () => {
ping(30000)
})
sock.addEventListener("error", (error) => {
console.log(error)
})
sock.addEventListener("close", () => {
console.log("Connection Closed. Attempting Reconnect in 30 seconds.")
$("#apiConnected").text("false")
setTimeout(() => {
socketeer()
}, 30000);
})
sock.addEventListener("message", async (data) => {
data = data.data
data = JSON.parse(data)
if (data.op == 4) {
$("#apiConnected").text("true")
globalSpins = data.spins
if (firsttimeDebounce == true) {
firsttimeDebounce = false
$(".globalSpins").innerHTML = globalSpins + 1;
} else {
$(".globalSpins").innerHTML = globalSpins;
}
} else if (data.op == 0) {
var lanyard = data.d
var statusInfo = discStatuses[lanyard.discord_status]
var lastStatus = $(".statusColor")
if (lastStatus.text() != statusInfo.text) {
lastStatus.text(statusInfo.text)
lastStatus.css("color", statusInfo.color)
pfp.css("borderColor", statusInfo.color)
resetPFP()
}
// if (lanyard.activities[0] && lanyard.activities[0].type == 4) {
// document.querySelector(".customStatus").innerHTML = `<hr><img src=""><p>${lanyard.activities[0].state}</p>`
// } else {
// document.querySelector(".customStatus").innerHTML = ""
// }
var discFetch = await (await fetch("/discHTML")).text()
$("#activityHtml").html(discFetch)
} else if (data.op == 3) {
lastPong = Date.now()
} else {
console.log(data)
}
})
}

View file

@ -5,8 +5,7 @@
<link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="../subpage.css">
<script src="../jquery.js"></script>
<script src="../main.js"></script>
{SUBPAGE_JS}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

View file

@ -5,8 +5,7 @@
<link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="../subpage.css">
<script src="../jquery.js"></script>
<script src="../main.js"></script>
{SUBPAGE_JS}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">