feat: Profile Effects

Author: Ushie

src/lib/atoms/ProfileEffects.svelte

@@ -0,0 +1,59 @@
+<script>
+    import getProfileEffectById from "$lib/utils/getProfileEffect";
+    import { onMount } from "svelte";
+
+    export let profileEffectId;
+
+    const profileEffect = getProfileEffectById(profileEffectId);
+    const profileEffects = profileEffect.effects;
+
+    onMount(() => {
+        const profileEffectsElement = document.getElementById(
+            "discord-user-popout-svelte",
+        );
+
+        function addEffect(effect) {
+            const img = document.createElement("img");
+            img.src = effect.src;
+            img.alt = profileEffect.accessibilityLabel;
+            img.style.cssText = `
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                z-index: ${effect.zIndex};
+                display: none;
+            `;
+
+            profileEffectsElement?.appendChild(img);
+
+            function showEffect() {
+                img.style.display = "block";
+
+                setTimeout(() => {
+                    img.style.display = "none";
+                    if (effect.loop) {
+                        showEffect();
+                    }
+                }, effect.duration);
+            }
+
+            setTimeout(() => {
+                showEffect();
+
+                if (effect.loop) {
+                    setInterval(() => {
+                        setTimeout(() => {
+                            showEffect();
+                        }, effect.loopDelay);
+                    }, effect.duration + effect.loopDelay);
+                }
+            }, effect.start);
+        }
+
+        profileEffects.forEach(addEffect);
+    });
+</script>
+
+<div id="discord-user-popout-svelte" />

src/lib/organisms/Profile.svelte

@@ -12,6 +12,7 @@
     import getThemeColors from "$lib/utils/getThemeColors.js";
     import Tag from "$lib/atoms/Tag.svelte";
     import "../styles.css";
+    import ProfileEffects from "$lib/atoms/ProfileEffects.svelte";
 
     export let user: DiscordUser;
     export let condensedConnectedAccounts: boolean = false;
@@ -107,6 +108,13 @@
             </div>
         </div>
     </div>
+    {#if user.user_profile.profile_effect}
+        <div class="profileEffectsWrapper">
+            <ProfileEffects
+                profileEffectId={user.user_profile.profile_effect.id}
+            />
+        </div>
+    {/if}
 </div>
 
 <style lang="scss">
@@ -123,6 +131,7 @@
         overflow: hidden;
         display: flex;
         flex-direction: column;
+
         & .overlay {
             background-color: var(--header-overlay);
             border-radius: 4px;
@@ -139,6 +148,15 @@
                 }
             }
         }
+
+        .profileEffectsWrapper {
+            pointer-events: none;
+            transition: opacity 0.6s ease-in-out;
+        }
+
+        &:hover .profileEffectsWrapper {
+            opacity: 0.35;
+        }
     }
 
     .userNameWithTag {

src/lib/types.d.ts

@@ -34,6 +34,11 @@ export interface UserProfile {
     theme_colors: [number, number];
     popout_animation_particle_type: null;
     emoji: null;
+    profile_effect: ProfileEffect;
+}
+
+export interface ProfileEffect {
+    id: string;
 }
 
 export interface ConnectedAccountMetadata {