blob: ac747abafca5ebb6da74fff4fbd89276460c5b64 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
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>
|