diff options
Diffstat (limited to 'src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte')
| -rw-r--r-- | src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte | 122 |
1 files changed, 63 insertions, 59 deletions
diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte index 1c7d4545..1069eeb7 100644 --- a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte +++ b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte @@ -1,99 +1,103 @@ <script lang="ts"> -import { onMount, tick } from 'svelte'; -import { browser } from '$app/environment'; -import Popup from '$lib/Layout/Popup.svelte'; +import { onMount, tick } from "svelte"; +import { browser } from "$app/environment"; +import Popup from "$lib/Layout/Popup.svelte"; -export let targetID = 'easter-target'; +export let targetID = "easter-target"; export let id: number; let visible = false; let showPopup = false; $: eggCount = browser - ? JSON.parse(localStorage.getItem('easter2025ClickedEggs') || '[]').length - : 0; + ? JSON.parse(localStorage.getItem("easter2025ClickedEggs") || "[]").length + : 0; onMount(() => { - let intervalId: number | undefined; + let intervalId: number | undefined; - const updatePosition = async () => { - await tick(); + const updatePosition = async () => { + await tick(); - const targetElement = document.getElementById(targetID); + const targetElement = document.getElementById(targetID); - if (!targetElement) return; + 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; + 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) && clickedEggs.length < 4; + visible = !clickedEggs.includes(id) && clickedEggs.length < 4; - if (eggVisual && eggClick) { - const verticalPosition = targetElement.offsetHeight * 0.9; - const eggWidthPercent = (100 / pageWidth) * 100; - const horizontalPosition = targetElement.offsetWidth - eggWidthPercent / 2; + 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'; - } - }; + 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; + intervalId = setInterval(updatePosition, 100) as unknown as number; - updatePosition(); + updatePosition(); - return () => { - if (intervalId) clearInterval(intervalId); + return () => { + if (intervalId) clearInterval(intervalId); - window.removeEventListener('resize', updatePosition); - window.removeEventListener('scroll', updatePosition); - }; + 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) : []; + if (event.button === 0) { + const storedClickedEggs = localStorage.getItem("easter2025ClickedEggs"); + const clickedEggs = storedClickedEggs ? JSON.parse(storedClickedEggs) : []; - if (!clickedEggs.includes(id)) { - clickedEggs.push(id); - localStorage.setItem('easter2025ClickedEggs', JSON.stringify(clickedEggs)); - } + if (!clickedEggs.includes(id)) { + clickedEggs.push(id); + localStorage.setItem( + "easter2025ClickedEggs", + JSON.stringify(clickedEggs), + ); + } - visible = false; + visible = false; - if (clickedEggs.length >= 3) showPopup = true; + if (clickedEggs.length >= 3) showPopup = true; - // eslint-disable-next-line no-undef - umami.track('Easter Egg Clicked', { id }); - } else if (event.button === 1) { - visible = true; + // eslint-disable-next-line no-undef + umami.track("Easter Egg Clicked", { id }); + } else if (event.button === 1) { + visible = true; - localStorage.setItem('easter2025ClickedEggs', '[]'); - } + localStorage.setItem("easter2025ClickedEggs", "[]"); + } }; const copyCode = (source: string) => { - navigator.clipboard.writeText( - `<img src="${source}" alt="due.moe × AniList Badges Badge Prize" width="200px">` - ); + navigator.clipboard.writeText( + `<img src="${source}" alt="due.moe × AniList Badges Badge Prize" width="200px">`, + ); }; const onLeavePopup = () => { - showPopup = false; + showPopup = false; - const storedClickedEggs = localStorage.getItem('easter2025ClickedEggs'); - const clickedEggs = storedClickedEggs ? JSON.parse(storedClickedEggs) : []; + const storedClickedEggs = localStorage.getItem("easter2025ClickedEggs"); + const clickedEggs = storedClickedEggs ? JSON.parse(storedClickedEggs) : []; - clickedEggs.push(-1); - localStorage.setItem('easter2025ClickedEggs', JSON.stringify(clickedEggs)); + clickedEggs.push(-1); + localStorage.setItem("easter2025ClickedEggs", JSON.stringify(clickedEggs)); }; </script> |