Refactor WebSocket integration and move JavaScript from index.ts to index.js

This commit is contained in:
wont-stream 2025-04-08 06:42:30 -04:00
parent e4a18bfba9
commit 69f8f74182
2 changed files with 116 additions and 12 deletions

View file

@ -27,7 +27,8 @@
<div class="container bg-body-tertiary shadow pt-4 pb-4 rounded">
<div class="row">
<div class="col-12 text-center">
<img src="./favicon.svg" alt="pfp" width="100rem" height="100rem" id="pfp" class="border border-4 rounded-circle border-light-subtle">
<img src="./favicon.svg" alt="pfp" width="100rem" height="100rem" id="pfp"
class="border border-4 rounded-circle border-light-subtle">
<h1>Seth</h1>
<p class="lead">A backend developer.</p>
</div>
@ -57,7 +58,112 @@
</div>
</div>
</div>
<script src="index.ts"></script>
<script>
const pfp = document.getElementById("pfp");
const music = document.getElementById("music");
const heartrate = document.getElementById("heartrate");
const lanyard = new WebSocket("wss://lanyard.creations.works/socket");
lanyard.onopen = () => {
lanyard.send(JSON.stringify({
op: 2,
d: {
subscribe_to_id: "1273447359417942128"
}
}))
}
lanyard.onmessage = ({ data }) => {
const { op, d } = JSON.parse(data)
switch (op) {
case 0: {
pfp.className = `border border-4 rounded-circle ${{
"online": "border-success-subtle",
"idle": "border-warning-subtle",
"dnd": "border-danger-subtle",
"offline": "border-light-subtle"
}[d.discord_status]}`
const tidalData = d.activities.filter((act) => {
return act?.application_id === "1130698654987067493";
})[0];
if (tidalData) {
const [color, trackId] = tidalData?.assets?.small_text.split("|");
music.style.color = color;
music.href = `https://tidal.com/browse/track/${trackId}/u`
music.innerHTML = `Listening to<br>${tidalData?.name.replace(
/\s?[\(\[].*?[\)\]]/g,
"",
)} by ${tidalData?.state}`
}
break
}
case 1: {
setInterval(async () => {
lanyard.send(JSON.stringify({
op: 3,
}))
}, d.heartbeat_interval)
}
}
}
const hyperate = new WebSocket("wss://app.hyperate.io/socket/websocket?token=wv39nM6iyrNJulvpmMQrimYPIXy2dVrYRjkuHpbRapKT2VSh65ngDGHdCdCtmEN9",);
let hrTimeout;
const setHrInterval = async () => {
hrTimeout = setTimeout(async () => {
heartrate.innerHTML = "";
}, 6000);
};
hyperate.onopen = async () => {
hyperate.send(
JSON.stringify({
topic: "hr:0BCA",
event: "phx_join",
payload: {},
ref: 0,
}),
);
setInterval(async () => {
hyperate.send(
JSON.stringify({
topic: "phoenix",
event: "heartbeat",
payload: {},
ref: 0,
}),
);
}, 10000);
return await setHrInterval();
};
hyperate.onmessage = async ({ data }) => {
const { event, payload } = JSON.parse(data);
switch (event) {
case "hr_update": {
clearTimeout(hrTimeout);
await setHrInterval();
document.documentElement.style.setProperty("--bpm", payload.hr);
heartrate.innerHTML = `<div class="heart">♥️<br /><span>${payload.hr} BPM</span></div>`;
break;
}
default: {
break;
}
}
};
</script>
</body>
</html>

View file

@ -2,13 +2,6 @@ const pfp = document.getElementById("pfp");
const music = document.getElementById("music");
const heartrate = document.getElementById("heartrate");
const presenceMap = {
"online": "border-success-subtle",
"idle": "border-warning-subtle",
"dnd": "border-danger-subtle",
"offline": "border-light-subtle"
}
const lanyard = new WebSocket("wss://lanyard.creations.works/socket");
lanyard.onopen = () => {
@ -25,9 +18,14 @@ lanyard.onmessage = ({ data }) => {
switch (op) {
case 0: {
pfp.className = `border border-4 rounded-circle ${presenceMap[d.discord_status]}`
pfp.className = `border border-4 rounded-circle ${{
"online": "border-success-subtle",
"idle": "border-warning-subtle",
"dnd": "border-danger-subtle",
"offline": "border-light-subtle"
}[d.discord_status]}`
const tidalData = d.activities.filter((act: Activities) => {
const tidalData = d.activities.filter((act) => {
return act?.application_id === "1130698654987067493";
})[0];
@ -57,7 +55,7 @@ const hyperate = new WebSocket(
"wss://app.hyperate.io/socket/websocket?token=wv39nM6iyrNJulvpmMQrimYPIXy2dVrYRjkuHpbRapKT2VSh65ngDGHdCdCtmEN9",
);
let hrTimeout: ReturnType<typeof setTimeout>;
let hrTimeout;
const setHrInterval = async () => {
hrTimeout = setTimeout(async () => {