Refactor WebSocket integration and move JavaScript from index.ts to index.js
This commit is contained in:
parent
e4a18bfba9
commit
69f8f74182
2 changed files with 116 additions and 12 deletions
110
src/index.html
110
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>
|
|
@ -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 () => {
|
Loading…
Add table
Reference in a new issue