fix(EasterEgg): Fix odd cases and general implementation

1 files changed, 150 insertions, 53 deletions

diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
index ac747aba..0bc1a027 100644
--- a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
+++ b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
@@ -1,62 +1,65 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { goto } from '$app/navigation';
-  import root from '$lib/Utility/root';
+  import { onMount, tick } from 'svelte';
+  import { browser } from '$app/environment';
+  import Popup from '$lib/Layout/Popup.svelte';
 
   export let targetID = 'easter-target';
   export let id: number;
 
-  let eggCount = 0;
   let visible = false;
+  let showPopup = false;
+
+  $: eggCount = browser
+    ? JSON.parse(localStorage.getItem('easter2025ClickedEggs') || '[]').length
+    : 0;
 
   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);
-      };
-    }
-  });
+    let intervalId: number | undefined;
 
-  function handleClick(event: MouseEvent) {
-    if (event.button === 0) {
-      eggCount += 1;
+    const updatePosition = async () => {
+      await tick();
+
+      const targetElement = document.getElementById(targetID);
+
+      if (!targetElement) return;
+
+      const storedClickedEggs = localStorage.getItem('easter2025ClickedEggs');
+      const clickedEggs = storedClickedEggs ? JSON.parse(storedClickedEggs) : [];
+      const eggVisual = document.getElementById(`egg-visual-${targetID}-${id}`);
+      const eggClick = document.getElementById(`egg-click-${targetID}-${id}`);
+      const pageWidth = document.documentElement.clientWidth;
+
+      visible = !clickedEggs.includes(id);
+      console.log('visible:', visible, eggVisual, eggClick);
+
+      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';
+      }
+    };
+
+    intervalId = setInterval(updatePosition, 100) as unknown as number;
 
-      localStorage.setItem('easter2025Eggs', eggCount.toString());
+    updatePosition();
+
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition);
+    };
+  });
 
+  const handleClick = (event: MouseEvent) => {
+    if (event.button === 0) {
       const storedClickedEggs = localStorage.getItem('easter2025ClickedEggs');
       const clickedEggs = storedClickedEggs ? JSON.parse(storedClickedEggs) : [];
 
@@ -67,15 +70,19 @@
 
       visible = false;
 
-      if (eggCount >= 3) goto(root('/anilist-badges-easter-event-2025?page=4'));
+      if (clickedEggs.length >= 3) showPopup = true;
     } else if (event.button === 1) {
-      eggCount = 0;
       visible = true;
 
-      localStorage.setItem('easter2025Eggs', '0');
       localStorage.setItem('easter2025ClickedEggs', '[]');
     }
-  }
+  };
+
+  const copyCode = (source: string) => {
+    navigator.clipboard.writeText(
+      `<img src="${source}" alt="due.moe × AniList Badges Badge Prize" width="200px">`
+    );
+  };
 </script>
 
 {#if visible}
@@ -95,7 +102,64 @@
   />
 {/if}
 
-<style>
+{#if eggCount == 3 || showPopup}
+  <Popup fullscreen center>
+    <div class="event-popup">
+      <div class="event-popup-banner">
+        <a
+          href={'#'}
+          on:click={() =>
+            copyCode(
+              'https://files.anilist-badges.com/badges/events/2025/04/20-Easter-2025-Epexity-event-banner-1.png'
+            )}
+        >
+          <img
+            src="https://files.anilist-badges.com/badges/events/2025/04/20-Easter-2025-Epexity-event-banner-1.png"
+            alt="Banner"
+          />
+        </a>
+      </div>
+
+      <div class="event-popup-text">
+        Congratulations! You've found all the eggs! Here are some prizes for you to claim!
+        <br />
+        <div class="opaque">Click a banner/badge to copy its claim-code</div>
+      </div>
+
+      <div class="event-popup-badges">
+        <a
+          href={'#'}
+          on:click={() =>
+            copyCode(
+              'https://files.anilist-badges.com/badges/events/2025/04/20-Easter-2025-Basurahan-1.png'
+            )}
+        >
+          <img
+            src="https://files.anilist-badges.com/badges/events/2025/04/20-Easter-2025-Basurahan-1.png"
+            alt="Badge 1"
+          />
+        </a>
+
+        <a
+          href={'#'}
+          on:click={() =>
+            copyCode(
+              'https://files.anilist-badges.com/badges/events/2025/04/20-Easter-2025-Dxvxdffm-1.png'
+            )}
+        >
+          <img
+            src="https://files.anilist-badges.com/badges/events/2025/04/20-Easter-2025-Dxvxdffm-1.png"
+            alt="Badge 2"
+          />
+        </a>
+      </div>
+
+      <div class="event-popup-footer opaque">due.moe × AniList Badges</div>
+    </div>
+  </Popup>
+{/if}
+
+<style lang="scss">
   .egg {
     position: absolute;
     width: 100px;
@@ -108,4 +172,37 @@
     background: transparent;
     z-index: 9999;
   }
+
+  .event-popup {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .event-popup-banner {
+    max-width: 37.5vw;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 1rem;
+  }
+
+  .event-popup-text {
+    margin-bottom: 1.5rem;
+    text-align: center;
+  }
+
+  .event-popup-badges {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    align-items: center;
+
+    img {
+      width: 175px;
+      border-radius: 8px;
+    }
+  }
 </style>