aboutsummaryrefslogtreecommitdiff
path: root/src/lib/List/MediaRoulette.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/List/MediaRoulette.svelte')
-rw-r--r--src/lib/List/MediaRoulette.svelte92
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>