Refactor: Vite
This commit is contained in:
wont-stream
parent
69f8f74182
commit
7fd41cd78c
22 changed files with 569 additions and 413 deletions
169
src/index.html
169
src/index.html
|
|
@ -1,169 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-bs-theme="dark" data-bs-core="default">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Seth @ IPv4 dot Army</title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
|
||||
<body class="container-fluid">
|
||||
<nav class="navbar fixed-top bg-body-secondary">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-brand">
|
||||
<img src="./favicon.svg" alt="Logo" width="24" height="24" />
|
||||
Seth
|
||||
</div>
|
||||
<div class="d-flex hstack gap-2">
|
||||
<button type="button" class="btn btn-outline-success btn-sm">🗕︎</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-sm">🗖︎</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm">🗙︎</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container vstack gap-5 position-absolute top-50 start-50 translate-middle">
|
||||
|
||||
<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">
|
||||
<h1>Seth</h1>
|
||||
<p class="lead">A backend developer.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-auto justify-content-center">
|
||||
<div class="col">
|
||||
<a class="link-underline-opacity-100-hover" href="https://git.creations.works/seth">
|
||||
Forgejo
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="link-secondary link-underline-opacity-100-hover" href="https://github.com/wont-stream">
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="link-success link-underline-opacity-100-hover" href="https://cash.app/$echoedAway">
|
||||
Cash App
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-auto justify-content-center text-center">
|
||||
<a id="music"></a>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row row-cols-auto justify-content-center text-center" id="heartrate">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue