diff options
| author | Fuwn <[email protected]> | 2024-01-03 22:05:24 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-03 22:05:24 -0800 |
| commit | 1d0ffdba530fa166ac577ef1fba3b5a0a959959a (patch) | |
| tree | d9264c043a7ee39d982654e88b766e51a217fe16 /src/lib/Tools/Wrapped/Media.svelte | |
| parent | feat(badges): put returns badges (diff) | |
| download | due.moe-1d0ffdba530fa166ac577ef1fba3b5a0a959959a.tar.xz due.moe-1d0ffdba530fa166ac577ef1fba3b5a0a959959a.zip | |
refactor(wrapped): move panels to components
Diffstat (limited to 'src/lib/Tools/Wrapped/Media.svelte')
| -rw-r--r-- | src/lib/Tools/Wrapped/Media.svelte | 98 |
1 files changed, 98 insertions, 0 deletions
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} |