This commit is contained in:
Jeeves 2025-02-18 22:03:27 -07:00
commit a0ae1b422d
9 changed files with 371 additions and 0 deletions

12
web/statusline.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p id="status-line">Streamboy is connecting...</p>
<script src="statusline.js"></script>
</body>

46
web/statusline.js Normal file
View file

@ -0,0 +1,46 @@
const statusLineElement = document.getElementById("status-line");
const statusLineElement2 = statusLineElement.cloneNode();
statusLineElement2.id = "status-line2";
document.body.appendChild(statusLineElement2);
let status = "Streamboy is connecting...";
let scroll = 0;
setInterval(() => {
if (scroll >= status.length) scroll = 0;
// if (scroll == 0) {
// statusLineElement.textContent = status;
// } else {
// let string = "";
// string += status.slice(scroll);
// string += status.slice(0, scroll);
// statusLineElement.textContent = string;
// }
const stringWidth = 8 * status.length;
statusLineElement.style.left = `${-8 * scroll}px`;
statusLineElement2.style.left = `${-8 * scroll + stringWidth}px`;
// console.log(statusLineElement.style.left)
statusLineElement.textContent = status;
statusLineElement2.textContent = status;
scroll += 1;
}, 750);
const socket = new WebSocket("ws://localhost:8012");
socket.addEventListener("message", (event) => {
const data = JSON.parse(event.data);
let string = "";
for (const block of data.blocks) {
string += block.text;
string += " | ";
}
status = string;
});
// const status = {
// blocks: [
// "Something Fun For Everyone With Streamboy!!!!!!!! git.jeevio.xyz/jeeves/streamboy",
// "♪ Bonhomme de Neige (EarthBound) - Ridley Snipes feat. Earth Kid",
// ],
// };

20
web/style.css Normal file
View file

@ -0,0 +1,20 @@
body {
font-family: Unifont;
background-color: black;
color: white;
margin: 0px auto;
overflow: hidden;
}
#gone {
font-size: 64px;
}
#status-line, #status-line2 {
font-size: 16px;
margin: 0px;
white-space: preserve nowrap;
max-width: none;
text-align: center;
position: absolute;
}