aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte')
-rw-r--r--src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte148
1 files changed, 74 insertions, 74 deletions
diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
index 0d7ab010..1c7d4545 100644
--- a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
+++ b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
@@ -1,100 +1,100 @@
<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 id: number;
+export let targetID = 'easter-target';
+export let id: number;
- let visible = false;
- let showPopup = false;
+let visible = false;
+let showPopup = false;
- $: eggCount = browser
- ? JSON.parse(localStorage.getItem('easter2025ClickedEggs') || '[]').length
- : 0;
+$: eggCount = browser
+ ? JSON.parse(localStorage.getItem('easter2025ClickedEggs') || '[]').length
+ : 0;
- onMount(() => {
- let intervalId: number | undefined;
+onMount(() => {
+ 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;
-
- 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;
-
- 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';
- }
- };
+ 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;
+
+ 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;
+ 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) : [];
+const handleClick = (event: MouseEvent) => {
+ 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">`
- );
- };
+const copyCode = (source: string) => {
+ navigator.clipboard.writeText(
+ `<img src="${source}" alt="due.moe × AniList Badges Badge Prize" width="200px">`
+ );
+};
- const onLeavePopup = () => {
- showPopup = false;
+const onLeavePopup = () => {
+ 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>
{#if visible}