diff options
Diffstat (limited to 'src/lib/List/MediaRoulette.svelte')
| -rw-r--r-- | src/lib/List/MediaRoulette.svelte | 92 |
1 files changed, 46 insertions, 46 deletions
diff --git a/src/lib/List/MediaRoulette.svelte b/src/lib/List/MediaRoulette.svelte index b4a6d527..6196c669 100644 --- a/src/lib/List/MediaRoulette.svelte +++ b/src/lib/List/MediaRoulette.svelte @@ -1,15 +1,15 @@ <script lang="ts"> -import type { Media } from '$lib/Data/AniList/media'; -import ParallaxImage from '$lib/Image/ParallaxImage.svelte'; -import { outboundLink } from '$lib/Media/links'; -import settings from '$stores/settings'; -import { mediaTitle } from './mediaTitle'; +import type { Media } from "$lib/Data/AniList/media"; +import ParallaxImage from "$lib/Image/ParallaxImage.svelte"; +import { outboundLink } from "$lib/Media/links"; +import settings from "$stores/settings"; +import { mediaTitle } from "./mediaTitle"; interface Props { - media: Media[]; - type: 'anime' | 'manga'; - onClose: () => void; - spinDuration?: number; + media: Media[]; + type: "anime" | "manga"; + onClose: () => void; + spinDuration?: number; } let { media, type, onClose, spinDuration = 2 }: Props = $props(); @@ -22,63 +22,63 @@ let isClosing = $state(false); let currentMedia = $derived(media[displayIndex]); const startRoulette = () => { - if (media.length === 0 || isSpinning) return; + if (media.length === 0 || isSpinning) return; - isSpinning = true; - showResult = false; - selectedIndex = Math.floor(Math.random() * media.length); + isSpinning = true; + showResult = false; + selectedIndex = Math.floor(Math.random() * media.length); - const startTime = Date.now(); - const durationMs = spinDuration * 1000; - const minSpeed = 50; - const maxSpeed = 350; - const slowdownStart = 0.8; + const startTime = Date.now(); + const durationMs = spinDuration * 1000; + const minSpeed = 50; + const maxSpeed = 350; + const slowdownStart = 0.8; - const spin = () => { - displayIndex = (displayIndex + 1) % media.length; + const spin = () => { + displayIndex = (displayIndex + 1) % media.length; - const elapsed = Date.now() - startTime; - const progress = Math.min(elapsed / durationMs, 1); - let speed = minSpeed; + const elapsed = Date.now() - startTime; + const progress = Math.min(elapsed / durationMs, 1); + let speed = minSpeed; - if (progress > slowdownStart) { - const slowdownProgress = (progress - slowdownStart) / (1 - slowdownStart); + if (progress > slowdownStart) { + const slowdownProgress = (progress - slowdownStart) / (1 - slowdownStart); - speed = minSpeed + slowdownProgress * (maxSpeed - minSpeed); - } + speed = minSpeed + slowdownProgress * (maxSpeed - minSpeed); + } - if (progress >= 1 && displayIndex === selectedIndex) { - spinTimeout = null; - isSpinning = false; - showResult = true; + if (progress >= 1 && displayIndex === selectedIndex) { + spinTimeout = null; + isSpinning = false; + showResult = true; - return; - } + return; + } - spinTimeout = setTimeout(spin, speed); - }; + spinTimeout = setTimeout(spin, speed); + }; - spinTimeout = setTimeout(spin, minSpeed); + spinTimeout = setTimeout(spin, minSpeed); }; const handleClose = () => { - if (isClosing) return; + if (isClosing) return; - if (spinTimeout) { - clearTimeout(spinTimeout); + if (spinTimeout) { + clearTimeout(spinTimeout); - spinTimeout = null; - } + spinTimeout = null; + } - isSpinning = false; - showResult = false; - isClosing = true; + isSpinning = false; + showResult = false; + isClosing = true; - setTimeout(() => onClose(), 200); + setTimeout(() => onClose(), 200); }; const handleOverlayClick = (e: MouseEvent) => { - if (e.target === e.currentTarget) handleClose(); + if (e.target === e.currentTarget) handleClose(); }; </script> |