52 lines
No EOL
958 B
Text
52 lines
No EOL
958 B
Text
---
|
|
import { Image } from "astro:assets"
|
|
import logo from "@assets/logo.png"
|
|
---
|
|
|
|
<div class="avatar-wrapper">
|
|
<Image
|
|
alt="My profile picture"
|
|
src={logo}
|
|
class="avatar"
|
|
width={80}
|
|
height={80}
|
|
aria-hidden
|
|
/>
|
|
</div>
|
|
|
|
<style>
|
|
.avatar-wrapper {
|
|
width: 80px;
|
|
height: 80px;
|
|
clip-path: var(--clip-avatar-outer);
|
|
background-color: var(--overlay0);
|
|
}
|
|
.avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
clip-path: var(--clip-avatar-inner);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const colours = {
|
|
"online": "var(--green)",
|
|
"idle": "var(--yellow)",
|
|
"dnd": "var(--red)",
|
|
"offline": "var(--overlay0)"
|
|
};
|
|
const avatarWrapper: HTMLElement = document.querySelector(".avatar-wrapper");
|
|
|
|
window.addEventListener('lanyard-update', (e: CustomEvent) => {
|
|
const presence = e.detail;
|
|
avatarWrapper.animate(
|
|
[
|
|
{ backgroundColor: colours[presence.discord_status] ?? colours.offline }
|
|
],
|
|
{
|
|
duration: 100,
|
|
fill: "forwards"
|
|
},
|
|
);
|
|
});
|
|
</script> |