diff options
Diffstat (limited to 'src/lib/Events/AniListBadges')
5 files changed, 140 insertions, 135 deletions
diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte index 494eb6be..8faf0ba3 100644 --- a/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte +++ b/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte @@ -1,16 +1,16 @@ <script lang="ts"> - export let prompt: string; - export let images: string[] = []; - export let correctIndex: number; - export let onComplete: () => void; +export let prompt: string; +export let images: string[] = []; +export let correctIndex: number; +export let onComplete: () => void; - let selectedIndex = -1; +let selectedIndex = -1; - const handleClick = (index: number) => { - selectedIndex = index; +const handleClick = (index: number) => { + selectedIndex = index; - if (index === correctIndex) setTimeout(onComplete, 500); - }; + if (index === correctIndex) setTimeout(onComplete, 500); +}; </script> <div class="container"> diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte index 0d7ab010..d717f5d0 100644 --- a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte +++ b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte @@ -1,100 +1,105 @@ <script lang="ts"> - 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 visible = false; - let showPopup = false; - - $: eggCount = browser - ? JSON.parse(localStorage.getItem('easter2025ClickedEggs') || '[]').length - : 0; - - onMount(() => { - let intervalId: number | undefined; - - 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) && 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; - - 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) : []; - - if (!clickedEggs.includes(id)) { - clickedEggs.push(id); - localStorage.setItem('easter2025ClickedEggs', JSON.stringify(clickedEggs)); - } - - visible = false; - - 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; - - localStorage.setItem('easter2025ClickedEggs', '[]'); - } - }; - - const copyCode = (source: string) => { - navigator.clipboard.writeText( - `<img src="${source}" alt="due.moe × AniList Badges Badge Prize" width="200px">` - ); - }; - - const onLeavePopup = () => { - showPopup = false; - - const storedClickedEggs = localStorage.getItem('easter2025ClickedEggs'); - const clickedEggs = storedClickedEggs ? JSON.parse(storedClickedEggs) : []; - - clickedEggs.push(-1); - localStorage.setItem('easter2025ClickedEggs', JSON.stringify(clickedEggs)); - }; +import { onMount, tick } from "svelte"; +import { browser } from "$app/environment"; +import Popup from "$lib/Layout/Popup.svelte"; +import { parseJsonStringWithSchemaOrDefault } from "$lib/Effect/json"; +import { Schema } from "effect"; + +export let targetID = "easter-target"; +export let id: number; + +let visible = false; +let showPopup = false; +const clickedEggsSchema = Schema.Array(Schema.Number); +const readClickedEggs = () => [ + ...parseJsonStringWithSchemaOrDefault( + localStorage.getItem("easter2025ClickedEggs") || "[]", + clickedEggsSchema, + [], + ), +]; + +$: eggCount = browser ? readClickedEggs().length : 0; + +onMount(() => { + let intervalId: number | undefined; + + const updatePosition = async () => { + await tick(); + + const targetElement = document.getElementById(targetID); + + if (!targetElement) return; + + const clickedEggs = readClickedEggs(); + 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; + + updatePosition(); + + return () => { + if (intervalId) clearInterval(intervalId); + }; +}); + +const handleClick = (event: MouseEvent) => { + if (event.button === 0) { + const clickedEggs = readClickedEggs(); + + if (!clickedEggs.includes(id)) { + clickedEggs.push(id); + localStorage.setItem( + "easter2025ClickedEggs", + JSON.stringify(clickedEggs), + ); + } + + visible = false; + + if (clickedEggs.length >= 3) showPopup = true; + + umami.track("Easter Egg Clicked", { id }); + } else if (event.button === 1) { + visible = true; + + localStorage.setItem("easter2025ClickedEggs", "[]"); + } +}; + +const copyCode = (source: string) => { + navigator.clipboard.writeText( + `<img src="${source}" alt="due.moe × AniList Badges Badge Prize" width="200px">`, + ); +}; + +const onLeavePopup = () => { + showPopup = false; + + const clickedEggs = readClickedEggs(); + + clickedEggs.push(-1); + localStorage.setItem("easter2025ClickedEggs", JSON.stringify(clickedEggs)); +}; </script> {#if visible} diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/MultipleChoicePage.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/MultipleChoicePage.svelte index 6ba477be..abede485 100644 --- a/src/lib/Events/AniListBadges/EasterEvent2025/MultipleChoicePage.svelte +++ b/src/lib/Events/AniListBadges/EasterEvent2025/MultipleChoicePage.svelte @@ -1,20 +1,20 @@ <script lang="ts"> - export let prompt: string; - export let answers: string[] = []; - export let correctIndex: number; - export let onComplete: () => void; +export let prompt: string; +export let answers: string[] = []; +export let correctIndex: number; +export let onComplete: () => void; - let selected = -1; +let selected = -1; - const handleChoice = (index: number) => { - if (index === correctIndex) { - selected = index; +const handleChoice = (index: number) => { + if (index === correctIndex) { + selected = index; - setTimeout(onComplete, 500); - } else { - selected = index; - } - }; + setTimeout(onComplete, 500); + } else { + selected = index; + } +}; </script> <div class="container"> diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/RiddlePage.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/RiddlePage.svelte index 664d5e27..8c7f3684 100644 --- a/src/lib/Events/AniListBadges/EasterEvent2025/RiddlePage.svelte +++ b/src/lib/Events/AniListBadges/EasterEvent2025/RiddlePage.svelte @@ -1,18 +1,18 @@ <script lang="ts"> - export let riddle: string; - export let answer: string; - export let onComplete: () => void; - export let hint: string | undefined = undefined; +export let riddle: string; +export let answer: string; +export let onComplete: () => void; +export let hint: string | undefined = undefined; - let userInput = ''; +let userInput = ""; - const checkAnswer = () => { - if (userInput.toLowerCase() === answer.toLowerCase()) { - setTimeout(onComplete, 500); - } else { - setTimeout(() => (userInput = ''), 500); - } - }; +const checkAnswer = () => { + if (userInput.toLowerCase() === answer.toLowerCase()) { + setTimeout(onComplete, 500); + } else { + setTimeout(() => (userInput = ""), 500); + } +}; </script> <div class="container"> diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/event.css b/src/lib/Events/AniListBadges/EasterEvent2025/event.css index c7556ae8..dd32cdd7 100644 --- a/src/lib/Events/AniListBadges/EasterEvent2025/event.css +++ b/src/lib/Events/AniListBadges/EasterEvent2025/event.css @@ -1,10 +1,10 @@ .big-text { - font-size: 1.5rem; + font-size: 1.5rem; } .container { - display: flex; - flex-direction: column; - gap: 0.5em; - align-items: center; + display: flex; + flex-direction: column; + gap: 0.5em; + align-items: center; } |