File tree Expand file tree Collapse file tree 4 files changed +3249
-0
lines changed Expand file tree Collapse file tree 4 files changed +3249
-0
lines changed Original file line number Diff line number Diff line change
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" / >
Original file line number Diff line number Diff line change 12
12
import getThemeColors from " $lib/utils/getThemeColors.js" ;
13
13
import Tag from " $lib/atoms/Tag.svelte" ;
14
14
import " ../styles.css" ;
15
+ import ProfileEffects from " $lib/atoms/ProfileEffects.svelte" ;
15
16
16
17
export let user: DiscordUser ;
17
18
export let condensedConnectedAccounts: boolean = false ;
107
108
</div >
108
109
</div >
109
110
</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 }
110
118
</div >
111
119
112
120
<style lang =" scss" >
123
131
overflow : hidden ;
124
132
display : flex ;
125
133
flex-direction : column ;
134
+
126
135
& .overlay {
127
136
background-color : var (--header-overlay );
128
137
border-radius : 4px ;
139
148
}
140
149
}
141
150
}
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
+ }
142
160
}
143
161
144
162
.userNameWithTag {
Original file line number Diff line number Diff line change @@ -34,6 +34,11 @@ export interface UserProfile {
34
34
theme_colors : [ number , number ] ;
35
35
popout_animation_particle_type : null ;
36
36
emoji : null ;
37
+ profile_effect : ProfileEffect ;
38
+ }
39
+
40
+ export interface ProfileEffect {
41
+ id : string ;
37
42
}
38
43
39
44
export interface ConnectedAccountMetadata {
You can’t perform that action at this time.
0 commit comments