Skip to content

Commit dcfe73e

Browse files
authored
feat: Profile Effects
1 parent 2427e57 commit dcfe73e

File tree

4 files changed

+3249
-0
lines changed

4 files changed

+3249
-0
lines changed

src/lib/atoms/ProfileEffects.svelte

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<script>
2+
import getProfileEffectById from "$lib/utils/getProfileEffect";
3+
import { onMount } from "svelte";
4+
5+
export let profileEffectId;
6+
7+
const profileEffect = getProfileEffectById(profileEffectId);
8+
const profileEffects = profileEffect.effects;
9+
10+
onMount(() => {
11+
const profileEffectsElement = document.getElementById(
12+
"discord-user-popout-svelte",
13+
);
14+
15+
function addEffect(effect) {
16+
const img = document.createElement("img");
17+
img.src = effect.src;
18+
img.alt = profileEffect.accessibilityLabel;
19+
img.style.cssText = `
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 100%;
25+
z-index: ${effect.zIndex};
26+
display: none;
27+
`;
28+
29+
profileEffectsElement?.appendChild(img);
30+
31+
function showEffect() {
32+
img.style.display = "block";
33+
34+
setTimeout(() => {
35+
img.style.display = "none";
36+
if (effect.loop) {
37+
showEffect();
38+
}
39+
}, effect.duration);
40+
}
41+
42+
setTimeout(() => {
43+
showEffect();
44+
45+
if (effect.loop) {
46+
setInterval(() => {
47+
setTimeout(() => {
48+
showEffect();
49+
}, effect.loopDelay);
50+
}, effect.duration + effect.loopDelay);
51+
}
52+
}, effect.start);
53+
}
54+
55+
profileEffects.forEach(addEffect);
56+
});
57+
</script>
58+
59+
<div id="discord-user-popout-svelte" />

src/lib/organisms/Profile.svelte

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
import getThemeColors from "$lib/utils/getThemeColors.js";
1313
import Tag from "$lib/atoms/Tag.svelte";
1414
import "../styles.css";
15+
import ProfileEffects from "$lib/atoms/ProfileEffects.svelte";
1516
1617
export let user: DiscordUser;
1718
export let condensedConnectedAccounts: boolean = false;
@@ -107,6 +108,13 @@
107108
</div>
108109
</div>
109110
</div>
111+
{#if user.user_profile.profile_effect}
112+
<div class="profileEffectsWrapper">
113+
<ProfileEffects
114+
profileEffectId={user.user_profile.profile_effect.id}
115+
/>
116+
</div>
117+
{/if}
110118
</div>
111119

112120
<style lang="scss">
@@ -123,6 +131,7 @@
123131
overflow: hidden;
124132
display: flex;
125133
flex-direction: column;
134+
126135
& .overlay {
127136
background-color: var(--header-overlay);
128137
border-radius: 4px;
@@ -139,6 +148,15 @@
139148
}
140149
}
141150
}
151+
152+
.profileEffectsWrapper {
153+
pointer-events: none;
154+
transition: opacity 0.6s ease-in-out;
155+
}
156+
157+
&:hover .profileEffectsWrapper {
158+
opacity: 0.35;
159+
}
142160
}
143161
144162
.userNameWithTag {

src/lib/types.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ export interface UserProfile {
3434
theme_colors: [number, number];
3535
popout_animation_particle_type: null;
3636
emoji: null;
37+
profile_effect: ProfileEffect;
38+
}
39+
40+
export interface ProfileEffect {
41+
id: string;
3742
}
3843

3944
export interface ConnectedAccountMetadata {

0 commit comments

Comments
 (0)