From 767c251175523c080fb0f5c7943309ed9ab60764 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 2 Oct 2024 02:52:44 -0700
Subject: refactor(SequelSpy): move prequel list to component

---
 src/lib/Tools/SequelSpy.svelte          | 91 ---------------------------------
 src/lib/Tools/SequelSpy/Prequels.svelte | 35 +++++++++++++
 src/lib/Tools/SequelSpy/Tool.svelte     | 62 ++++++++++++++++++++++
 src/routes/tools/[tool]/+page.svelte    |  2 +-
 4 files changed, 98 insertions(+), 92 deletions(-)
 delete mode 100644 src/lib/Tools/SequelSpy.svelte
 create mode 100644 src/lib/Tools/SequelSpy/Prequels.svelte
 create mode 100644 src/lib/Tools/SequelSpy/Tool.svelte

(limited to 'src')

diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
deleted file mode 100644
index 28db4466..00000000
--- a/src/lib/Tools/SequelSpy.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script lang="ts">
-	import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
-	import { prequels, type MediaPrequel } from '$lib/Data/AniList/prequels';
-	import MediaTitle from '$lib/List/MediaTitleDisplay.svelte';
-	import { onMount } from 'svelte';
-	import { clearAllParameters, parseOrDefault } from '../Utility/parameters';
-	import { airingTime } from '$lib/Media/Anime/Airing/time';
-	import type { Media } from '$lib/Data/AniList/media';
-	import { page } from '$app/stores';
-	import { browser } from '$app/environment';
-	import { season as getSeason } from '$lib/Media/Anime/season';
-	import Skeleton from '$lib/Loading/Skeleton.svelte';
-	import identity from '$stores/identity';
-	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
-	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
-	import settings from '$stores/settings';
-
-	export let user: AniListAuthorisation;
-
-	let currentPrequels: Promise<MediaPrequel[]> = Promise.resolve([]) as Promise<MediaPrequel[]>;
-	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
-	let year = parseOrDefault(urlParameters, 'year', new Date().getFullYear());
-	let season = parseOrDefault(urlParameters, 'season', getSeason());
-
-	$: {
-		if (year.toString().length === 4 && $identity.id !== -2 && user)
-			currentPrequels = prequels(user, year, season);
-	}
-	$: {
-		if (browser) {
-			$page.url.searchParams.set('year', year.toString());
-			$page.url.searchParams.set('season', season.toString());
-			clearAllParameters(['year', 'season']);
-			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
-		}
-	}
-
-	onMount(() => clearAllParameters(['year', 'season']));
-
-	const prequelAiringTime = (prequel: MediaPrequel) =>
-		airingTime(prequel as unknown as Media, null, false, true);
-</script>
-
-{#if user === undefined || $identity.id === -2}
-	<LogInRestricted />
-{:else}
-	<div class="card">
-		<p>
-			<select bind:value={season}>
-				<option value="WINTER">Winter</option>
-				<option value="SPRING">Spring</option>
-				<option value="SUMMER">Summer</option>
-				<option value="FALL">Fall</option>
-			</select>
-			<input type="number" bind:value={year} />
-		</p>
-
-		{#await currentPrequels}
-			<Skeleton card={false} count={5} height="0.9rem" list />
-		{:then currentPrequels}
-			<ul>
-				{#each currentPrequels.sort((a, b) => new Date(a.startDate.year, a.startDate.month - 1, a.startDate.day).getTime() - new Date(b.startDate.year, b.startDate.month - 1, b.startDate.day).getTime()) as prequel}
-					<li id={`${prequel.id}`}>
-						<LinkedTooltip
-							content={`<img src="${
-								$settings.displayDataSaver
-									? prequel.coverImage.medium
-									: prequel.coverImage.extraLarge
-							}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-							pin={`${prequel.id}`}
-							pinPosition="top"
-							disable={!$settings.displayHoverCover}
-						>
-							<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
-								<MediaTitle title={prequel.title} />
-							</a>
-							<span class="opaque">|</span>
-							{prequel.seen}<span class="opaque">/{prequel.episodes}</span>
-							{@html prequelAiringTime(prequel)}
-						</LinkedTooltip>
-					</li>
-				{/each}
-			</ul>
-		{/await}
-
-		<p />
-
-		The count ratio is the number of episodes you've seen of any direct prequels, and the total
-		number of episodes of all direct prequels.
-	</div>
-{/if}
diff --git a/src/lib/Tools/SequelSpy/Prequels.svelte b/src/lib/Tools/SequelSpy/Prequels.svelte
new file mode 100644
index 00000000..ab1c4ac5
--- /dev/null
+++ b/src/lib/Tools/SequelSpy/Prequels.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { MediaPrequel } from '$lib/Data/AniList/prequels';
+	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
+	import { airingTime } from '$lib/Media/Anime/Airing/time';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
+	import settings from '$stores/settings';
+	import type { Media } from '$lib/Data/AniList/media';
+
+	export let currentPrequels: MediaPrequel[];
+
+	const prequelAiringTime = (prequel: MediaPrequel) =>
+		airingTime(prequel as unknown as Media, null, false, true);
+</script>
+
+<ul>
+	{#each currentPrequels.sort((a, b) => new Date(a.startDate.year, a.startDate.month - 1, a.startDate.day).getTime() - new Date(b.startDate.year, b.startDate.month - 1, b.startDate.day).getTime()) as prequel}
+		<li id={`${prequel.id}`}>
+			<LinkedTooltip
+				content={`<img src="${
+					$settings.displayDataSaver ? prequel.coverImage.medium : prequel.coverImage.extraLarge
+				}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+				pin={`${prequel.id}`}
+				pinPosition="top"
+				disable={!$settings.displayHoverCover}
+			>
+				<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
+					<MediaTitleDisplay title={prequel.title} />
+				</a>
+				<span class="opaque">|</span>
+				{prequel.seen}<span class="opaque">/{prequel.episodes}</span>
+				{@html prequelAiringTime(prequel)}
+			</LinkedTooltip>
+		</li>
+	{/each}
+</ul>
diff --git a/src/lib/Tools/SequelSpy/Tool.svelte b/src/lib/Tools/SequelSpy/Tool.svelte
new file mode 100644
index 00000000..8956e00a
--- /dev/null
+++ b/src/lib/Tools/SequelSpy/Tool.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
+	import { prequels, type MediaPrequel } from '$lib/Data/AniList/prequels';
+	import { onMount } from 'svelte';
+	import { clearAllParameters, parseOrDefault } from '../../Utility/parameters';
+	import { page } from '$app/stores';
+	import { browser } from '$app/environment';
+	import { season as getSeason } from '$lib/Media/Anime/season';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import identity from '$stores/identity';
+	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
+	import Prequels from './Prequels.svelte';
+
+	export let user: AniListAuthorisation;
+
+	let currentPrequels: Promise<MediaPrequel[]> = Promise.resolve([]) as Promise<MediaPrequel[]>;
+	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
+	let year = parseOrDefault(urlParameters, 'year', new Date().getFullYear());
+	let season = parseOrDefault(urlParameters, 'season', getSeason());
+
+	$: {
+		if (year.toString().length === 4 && $identity.id !== -2 && user)
+			currentPrequels = prequels(user, year, season);
+	}
+	$: {
+		if (browser) {
+			$page.url.searchParams.set('year', year.toString());
+			$page.url.searchParams.set('season', season.toString());
+			clearAllParameters(['year', 'season']);
+			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
+		}
+	}
+
+	onMount(() => clearAllParameters(['year', 'season']));
+</script>
+
+{#if user === undefined || $identity.id === -2}
+	<LogInRestricted />
+{:else}
+	<div class="card">
+		<p>
+			<select bind:value={season}>
+				<option value="WINTER">Winter</option>
+				<option value="SPRING">Spring</option>
+				<option value="SUMMER">Summer</option>
+				<option value="FALL">Fall</option>
+			</select>
+			<input type="number" bind:value={year} />
+		</p>
+
+		{#await currentPrequels}
+			<Skeleton card={false} count={5} height="0.9rem" list />
+		{:then currentPrequels}
+			<Prequels {currentPrequels} />
+		{/await}
+
+		<p />
+
+		The count ratio is the number of episodes you've seen of any direct prequels, and the total
+		number of episodes of all direct prequels.
+	</div>
+{/if}
diff --git a/src/routes/tools/[tool]/+page.svelte b/src/routes/tools/[tool]/+page.svelte
index 8d9d4ba5..3749c096 100644
--- a/src/routes/tools/[tool]/+page.svelte
+++ b/src/routes/tools/[tool]/+page.svelte
@@ -5,7 +5,7 @@
 	import Wrapped from '$lib/Tools/Wrapped/Tool.svelte';
 	import EpisodeDiscussionCollector from '$lib/Tools/EpisodeDiscussionCollector.svelte';
 	import CharacterBirthdays from '$lib/Tools/Birthdays.svelte';
-	import SequelSpy from '$lib/Tools/SequelSpy.svelte';
+	import SequelSpy from '$lib/Tools/SequelSpy/Tool.svelte';
 	import { closest } from '$lib/Error/path';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import RandomFollower from '$lib/Tools/RandomFollower.svelte';
-- 
cgit v1.2.3