aboutsummaryrefslogtreecommitdiff
path: root/src/lib/List/MediaRoulette.svelte
diff options
context:
space:
mode:
authorFuwn <[email protected]>2026-03-01 16:04:11 -0800
committerFuwn <[email protected]>2026-03-01 16:04:11 -0800
commit48f0c30d47d62e4f35706edb93a1bb2f97eba14c (patch)
tree44866d7a61adfdf01a780e0108c370294d3db78b /src/lib/List/MediaRoulette.svelte
parentchore(biome): re-enable useAltText rule (diff)
downloaddue.moe-48f0c30d47d62e4f35706edb93a1bb2f97eba14c.tar.xz
due.moe-48f0c30d47d62e4f35706edb93a1bb2f97eba14c.zip
chore(biome): enable svelte formatting
Diffstat (limited to 'src/lib/List/MediaRoulette.svelte')
-rw-r--r--src/lib/List/MediaRoulette.svelte142
1 files changed, 71 insertions, 71 deletions
diff --git a/src/lib/List/MediaRoulette.svelte b/src/lib/List/MediaRoulette.svelte
index 4b498d4f..b4a6d527 100644
--- a/src/lib/List/MediaRoulette.svelte
+++ b/src/lib/List/MediaRoulette.svelte
@@ -1,85 +1,85 @@
<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';
-
- interface Props {
- media: Media[];
- type: 'anime' | 'manga';
- onClose: () => void;
- spinDuration?: number;
- }
-
- let { media, type, onClose, spinDuration = 2 }: Props = $props();
- let isSpinning = $state(false);
- let selectedIndex = $state(0);
- let displayIndex = $state(0);
- let spinTimeout: ReturnType<typeof setTimeout> | null = $state(null);
- let showResult = $state(false);
- let isClosing = $state(false);
- let currentMedia = $derived(media[displayIndex]);
-
- const startRoulette = () => {
- if (media.length === 0 || isSpinning) return;
-
- 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 spin = () => {
- displayIndex = (displayIndex + 1) % media.length;
-
- const elapsed = Date.now() - startTime;
- const progress = Math.min(elapsed / durationMs, 1);
- let speed = minSpeed;
-
- if (progress > slowdownStart) {
- const slowdownProgress = (progress - slowdownStart) / (1 - slowdownStart);
-
- speed = minSpeed + slowdownProgress * (maxSpeed - minSpeed);
- }
-
- if (progress >= 1 && displayIndex === selectedIndex) {
- spinTimeout = null;
- isSpinning = false;
- showResult = true;
+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;
+}
+
+let { media, type, onClose, spinDuration = 2 }: Props = $props();
+let isSpinning = $state(false);
+let selectedIndex = $state(0);
+let displayIndex = $state(0);
+let spinTimeout: ReturnType<typeof setTimeout> | null = $state(null);
+let showResult = $state(false);
+let isClosing = $state(false);
+let currentMedia = $derived(media[displayIndex]);
+
+const startRoulette = () => {
+ if (media.length === 0 || isSpinning) return;
+
+ 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 spin = () => {
+ displayIndex = (displayIndex + 1) % media.length;
+
+ const elapsed = Date.now() - startTime;
+ const progress = Math.min(elapsed / durationMs, 1);
+ let speed = minSpeed;
+
+ if (progress > slowdownStart) {
+ const slowdownProgress = (progress - slowdownStart) / (1 - slowdownStart);
+
+ speed = minSpeed + slowdownProgress * (maxSpeed - minSpeed);
+ }
- return;
- }
+ if (progress >= 1 && displayIndex === selectedIndex) {
+ spinTimeout = null;
+ isSpinning = false;
+ showResult = true;
- spinTimeout = setTimeout(spin, speed);
- };
+ return;
+ }
- spinTimeout = setTimeout(spin, minSpeed);
+ spinTimeout = setTimeout(spin, speed);
};
- const handleClose = () => {
- if (isClosing) return;
+ spinTimeout = setTimeout(spin, minSpeed);
+};
- if (spinTimeout) {
- clearTimeout(spinTimeout);
+const handleClose = () => {
+ if (isClosing) return;
- spinTimeout = null;
- }
+ if (spinTimeout) {
+ clearTimeout(spinTimeout);
- isSpinning = false;
- showResult = false;
- isClosing = true;
+ spinTimeout = null;
+ }
- setTimeout(() => onClose(), 200);
- };
+ isSpinning = false;
+ showResult = false;
+ isClosing = true;
- const handleOverlayClick = (e: MouseEvent) => {
- if (e.target === e.currentTarget) handleClose();
- };
+ setTimeout(() => onClose(), 200);
+};
+
+const handleOverlayClick = (e: MouseEvent) => {
+ if (e.target === e.currentTarget) handleClose();
+};
</script>
<svelte:window onkeydown={(e) => e.key === 'Escape' && handleClose()} />