1
0
Fork 0
forked from seth/ipv4.army
ipv4.army/src/front/components/Hyperate/index.tsx
2025-05-17 17:50:54 -04:00

30 lines
702 B
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { createRef } from "tsx-dom";
import socket from "../../utilities/socket";
export default () => {
const paragraph = createRef<HTMLParagraphElement>();
socket.addEventListener("hyperate", (event: Event) => {
const heartRate = (event as CustomEvent).detail;
if (heartRate === 0) {
document.body.style.setProperty("--hyperate-display", "none");
} else {
document.body.style.removeProperty("--hyperate-display");
}
document.body.style.setProperty("--bpm", heartRate.toString());
if (paragraph.current) {
paragraph.current.innerText = `❤️ ${heartRate} BPM`;
}
});
return (
<div>
<p class="heartbeat" ref={paragraph}>
0 BPM
</p>
</div>
);
};