From 1d0ffdba530fa166ac577ef1fba3b5a0a959959a Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 3 Jan 2024 22:05:24 -0800
Subject: refactor(wrapped): move panels to components

---
 src/lib/Tools/Wrapped/Media.svelte | 98 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 src/lib/Tools/Wrapped/Media.svelte

(limited to 'src/lib/Tools/Wrapped/Media.svelte')

diff --git a/src/lib/Tools/Wrapped/Media.svelte b/src/lib/Tools/Wrapped/Media.svelte
new file mode 100644
index 00000000..08092a28
--- /dev/null
+++ b/src/lib/Tools/Wrapped/Media.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { Media } from '$lib/AniList/media';
+	import type { Wrapped } from '$lib/AniList/wrapped';
+	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
+	import proxy from '$lib/Utility/proxy';
+
+	export let animeList: Media[] | undefined;
+	export let mangaList: Media[] | undefined;
+	export let wrapped: Wrapped;
+	export let updateWidth: () => void;
+	export let highestRatedMediaPercentage: boolean;
+	export let highestRatedCount: number;
+	export let animeMostTitle: string;
+	export let mangaMostTitle: string;
+</script>
+
+{#if animeList !== undefined || mangaList !== undefined}
+	<div class="categories-grid">
+		<div class="category-grid pure-category category middle-category">
+			<div class="grid-item image-grid">
+				<a
+					href={animeList && animeList[0] ? `https://anilist.co/anime/${animeList[0].id}` : '#'}
+					target="_blank"
+				>
+					<img
+						src={proxy(
+							animeList && animeList[0] ? animeList[0].coverImage.extraLarge : wrapped.avatar.large
+						)}
+						alt="Highest Rated Anime Cover"
+						class="cover-image"
+						on:load={updateWidth}
+					/>
+				</a>
+				<div>
+					<b>{animeMostTitle} Anime</b>
+					<ol>
+						{#if animeList !== undefined && animeList.length !== 0}
+							{#each animeList?.slice(0, highestRatedCount) as anime}
+								<li>
+									<a href={`https://anilist.co/anime/${anime.id}`} target="_blank">
+										<MediaTitleDisplay title={anime.title} />
+									</a>{highestRatedMediaPercentage &&
+									anime.mediaListEntry &&
+									anime.mediaListEntry?.score > 0
+										? `: ${anime.mediaListEntry?.score}%`
+										: ''}
+								</li>
+							{/each}
+						{:else}
+							<li>
+								<p style="opacity: 50%;">(⌣_⌣”)</p>
+							</li>
+						{/if}
+					</ol>
+				</div>
+			</div>
+		</div>
+		<div class="category-grid pure-category category middle-category">
+			<div class="grid-item image-grid">
+				<a
+					href={mangaList && mangaList[0] ? `https://anilist.co/manga/${mangaList[0].id}` : '#'}
+					target="_blank"
+				>
+					<img
+						src={proxy(
+							mangaList && mangaList[0] ? mangaList[0].coverImage.extraLarge : wrapped.avatar.large
+						)}
+						alt="Highest Rated Manga Cover"
+						class="cover-image"
+						on:load={updateWidth}
+					/>
+				</a>
+				<div>
+					<b>{mangaMostTitle} Manga</b>
+					<ol>
+						{#if mangaList !== undefined && mangaList.length !== 0}
+							{#each mangaList?.slice(0, highestRatedCount) as manga}
+								<li>
+									<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
+										<MediaTitleDisplay title={manga.title} />
+									</a>{highestRatedMediaPercentage &&
+									manga.mediaListEntry &&
+									manga.mediaListEntry?.score > 0
+										? `: ${manga.mediaListEntry?.score}%`
+										: ''}
+								</li>
+							{/each}
+						{:else}
+							<li>
+								<p style="opacity: 50%;">(⌣_⌣”)</p>
+							</li>
+						{/if}
+					</ol>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
-- 
cgit v1.2.3