feat: Add AniList Badges Easter Event 2025 demo #2

1 files changed, 111 insertions, 0 deletions

diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
new file mode 100644
index 00000000..ac747aba
--- /dev/null
+++ b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import root from '$lib/Utility/root';
+
+  export let targetID = 'easter-target';
+  export let id: number;
+
+  let eggCount = 0;
+  let visible = false;
+
+  onMount(() => {
+    const storedEggCount = localStorage.getItem('easter2025Eggs');
+    const targetElement = document.getElementById(targetID);
+    const urlParameters = new URLSearchParams(window.location.search);
+    const hasPreviewParameter = urlParameters.get('preview') === 'easter-2025';
+
+    eggCount = storedEggCount ? parseInt(storedEggCount) : 0;
+
+    if (targetElement) {
+      const updatePosition = () => {
+        const eggVisual = document.getElementById(`egg-visual-${targetID}-${id}`);
+        const eggClick = document.getElementById(`egg-click-${targetID}-${id}`);
+        const pageWidth = document.documentElement.clientWidth;
+        const storedClickedEggs = localStorage.getItem('easter2025ClickedEggs');
+        const clickedEggs = storedClickedEggs ? JSON.parse(storedClickedEggs) : [];
+
+        visible = hasPreviewParameter && !clickedEggs.includes(id);
+
+        if (eggVisual && eggClick) {
+          const verticalPosition = targetElement.offsetHeight * 0.9;
+          const eggWidthPercent = (100 / pageWidth) * 100;
+          const horizontalPosition = targetElement.offsetWidth - eggWidthPercent / 2;
+
+          eggVisual.style.top = `${verticalPosition}px`;
+          eggVisual.style.left = `${horizontalPosition}px`;
+          eggVisual.style.zIndex = '-1';
+          eggClick.style.top = `${verticalPosition}px`;
+          eggClick.style.left = `${horizontalPosition}px`;
+          eggClick.style.zIndex = '9999';
+        }
+      };
+
+      window.addEventListener('resize', updatePosition);
+      window.addEventListener('scroll', updatePosition);
+
+      return () => {
+        window.removeEventListener('resize', updatePosition);
+        window.removeEventListener('scroll', updatePosition);
+      };
+    }
+  });
+
+  function handleClick(event: MouseEvent) {
+    if (event.button === 0) {
+      eggCount += 1;
+
+      localStorage.setItem('easter2025Eggs', eggCount.toString());
+
+      const storedClickedEggs = localStorage.getItem('easter2025ClickedEggs');
+      const clickedEggs = storedClickedEggs ? JSON.parse(storedClickedEggs) : [];
+
+      if (!clickedEggs.includes(id)) {
+        clickedEggs.push(id);
+        localStorage.setItem('easter2025ClickedEggs', JSON.stringify(clickedEggs));
+      }
+
+      visible = false;
+
+      if (eggCount >= 3) goto(root('/anilist-badges-easter-event-2025?page=4'));
+    } else if (event.button === 1) {
+      eggCount = 0;
+      visible = true;
+
+      localStorage.setItem('easter2025Eggs', '0');
+      localStorage.setItem('easter2025ClickedEggs', '[]');
+    }
+  }
+</script>
+
+{#if visible}
+  <img
+    id="egg-visual-{targetID}-{id}"
+    src="https://images.vexels.com/media/users/3/162149/isolated/preview/7f9f0546b21308e4851956e9c15313c9-egg-easter-painted-easter-egg-easter-egg-spot-pattern-stripe-flat.png"
+    alt="Easter Egg"
+    class="egg"
+  />
+
+  <div
+    id="egg-click-{targetID}-{id}"
+    role="button"
+    tabindex="0"
+    on:mousedown={handleClick}
+    class="egg click-layer"
+  />
+{/if}
+
+<style>
+  .egg {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    transform: rotate(15deg);
+  }
+
+  .click-layer {
+    cursor: pointer;
+    background: transparent;
+    z-index: 9999;
+  }
+</style>