From 69f8f741821da949277ad181698fa860050ab701 Mon Sep 17 00:00:00 2001
From: wont-stream <143244075+wont-stream@users.noreply.github.com>
Date: Tue, 8 Apr 2025 06:42:30 -0400
Subject: [PATCH] Refactor WebSocket integration and move JavaScript from
index.ts to index.js
---
src/index.html | 110 ++++++++++++++++++++++++++++++++++++-
src/{index.ts => index.js} | 18 +++---
2 files changed, 116 insertions(+), 12 deletions(-)
rename src/{index.ts => index.js} (85%)
diff --git a/src/index.html b/src/index.html
index dd3c570..5159c7d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -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>
\ No newline at end of file
diff --git a/src/index.ts b/src/index.js
similarity index 85%
rename from src/index.ts
rename to src/index.js
index 9f065e3..e26d73d 100644
--- a/src/index.ts
+++ b/src/index.js
@@ -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 () => {