refactor(wrapped): move panels to components

3 files changed, 85 insertions, 0 deletions

diff --git a/src/lib/Tools/Wrapped/Top/Activity.svelte b/src/lib/Tools/Wrapped/Top/Activity.svelte
new file mode 100644
index 00000000..a000389c
--- /dev/null
+++ b/src/lib/Tools/Wrapped/Top/Activity.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { ActivityHistoryEntry } from '$lib/AniList/activity';
+	import type { UserIdentity } from '$lib/AniList/identity';
+	import type { Wrapped } from '$lib/AniList/wrapped';
+	import proxy from '$lib/Utility/proxy';
+
+	export let wrapped: Wrapped;
+	export let identity: UserIdentity;
+	export let year: number;
+	export let activities: ActivityHistoryEntry[];
+	export let useFullActivityHistory: boolean;
+	export let updateWidth: () => void;
+
+	const currentYear = new Date(Date.now()).getFullYear();
+</script>
+
+<div class="grid-item image-grid avatar-grid category top-category">
+	<a href={`https://anilist.co/user/${identity.name}`} target="_blank">
+		<img src={proxy(wrapped.avatar.large)} alt="User Avatar" on:load={updateWidth} />
+	</a>
+	<div>
+		<div>
+			<a href={`https://anilist.co/user/${identity.name}`} target="_blank">
+				<b>
+					{identity.name}
+				</b>
+			</a>
+		</div>
+		<div>
+			Status Posts: {wrapped.activities.statusCount}
+		</div>
+		<div>
+			Messages: {wrapped.activities.messageCount}
+		</div>
+		<div>
+			Days Active: {#if year !== currentYear}
+				?/365
+			{:else}
+				{activities.length}/{useFullActivityHistory ? 365 : 189}
+			{/if}
+		</div>
+	</div>
+</div>
diff --git a/src/lib/Tools/Wrapped/Top/Anime.svelte b/src/lib/Tools/Wrapped/Top/Anime.svelte
new file mode 100644
index 00000000..8ea1277f
--- /dev/null
+++ b/src/lib/Tools/Wrapped/Top/Anime.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Media } from '$lib/AniList/media';
+
+	export let minutesWatched: number;
+	export let animeList: Media[] | undefined;
+	export let episodes: number;
+</script>
+
+<div class="category-grid pure-category category top-category">
+	<div class="grid-item">
+		<b>Anime</b>
+	</div>
+	<div class="grid-item">
+		Time Watched: {((minutesWatched || 0) / 60 / 24).toFixed(2)} days
+	</div>
+	<div class="grid-item">
+		Completed: {animeList?.length || 0}
+	</div>
+	<div class="grid-item">Episodes: {episodes}</div>
+</div>
diff --git a/src/lib/Tools/Wrapped/Top/Manga.svelte b/src/lib/Tools/Wrapped/Top/Manga.svelte
new file mode 100644
index 00000000..b0d78b6e
--- /dev/null
+++ b/src/lib/Tools/Wrapped/Top/Manga.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Media } from '$lib/AniList/media';
+	import { estimatedDayReading } from '$lib/Media/Manga/time';
+
+	export let mangaList: Media[] | undefined;
+	export let chapters: number;
+</script>
+
+<div class="category-grid pure-category category top-category">
+	<div class="grid-item">
+		<b>Manga</b>
+	</div>
+	<div class="grid-item">
+		Time Read: {estimatedDayReading(chapters).toFixed(2)} days
+	</div>
+	<div class="grid-item">
+		Completed: {mangaList?.length || 0}
+	</div>
+	<div class="grid-item">
+		Chapters: {chapters}
+	</div>
+</div>