diff options
Diffstat (limited to 'src/lib/Tools/Wrapped.svelte')
| -rw-r--r-- | src/lib/Tools/Wrapped.svelte | 403 |
1 files changed, 41 insertions, 362 deletions
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte index 07c722ee..29ef0919 100644 --- a/src/lib/Tools/Wrapped.svelte +++ b/src/lib/Tools/Wrapped.svelte @@ -20,12 +20,15 @@ import { page } from '$app/stores'; import { clearAllParameters } from '../Utility/parameters'; import { nbsp } from '../Utility/html'; - import { estimatedDayReading } from '$lib/Media/Manga/time'; - import ActivityHistoryGrid from './ActivityHistory/Grid.svelte'; import SettingHint from '$lib/Settings/SettingHint.svelte'; import { database } from '$lib/Database/activities'; - import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte'; - import proxy from '$lib/Utility/proxy'; + import Activity from './Wrapped/Top/Activity.svelte'; + import Anime from './Wrapped/Top/Anime.svelte'; + import Manga from './Wrapped/Top/Manga.svelte'; + import ActivityHistory from './Wrapped/ActivityHistory.svelte'; + import MediaExtras from './Wrapped/MediaExtras.svelte'; + import MediaPanel from './Wrapped/Media.svelte'; + import Watermark from './Wrapped/Watermark.svelte'; export let user: AniListAuthorisation; @@ -497,278 +500,53 @@ class:transparent={transparency} > {#if !disableActivityHistory && activityHistoryPosition === 'TOP' && activities.length > 0 && selectedYear === currentYear} - <div class="categories-grid" style="padding-bottom: 0;"> - <div class="category-grid bottom-category pure-category category"> - <div id="activity-history"> - <ActivityHistoryGrid - {user} - activityData={activities} - currentYear={selectedYear} - /> - </div> - </div> - </div> + <ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} /> {/if} <div class="categories-grid" style="padding-bottom: 0;"> - <div class="grid-item image-grid avatar-grid category top-category"> - <a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank"> - <img src={proxy(wrapped.avatar.large)} alt="User Avatar" on:load={updateWidth} /> - </a> - <div> - <div> - <a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank"> - <b> - {currentUserIdentity.name} - </b> - </a> - </div> - <div> - Status Posts: {wrapped.activities.statusCount} - </div> - <div> - Messages: {wrapped.activities.messageCount} - </div> - <div> - Days Active: {#if selectedYear !== currentYear} - ?/365 - {:else} - {activities.length}/{useFullActivityHistory ? 365 : 189} - {/if} - </div> - </div> - </div> - <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> - <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> + <Activity + {wrapped} + identity={currentUserIdentity} + year={selectedYear} + {activities} + {useFullActivityHistory} + {updateWidth} + /> + <Anime {animeList} {minutesWatched} {episodes} /> + <Manga {mangaList} {chapters} /> </div> {#if !disableActivityHistory && activityHistoryPosition === 'BELOW_TOP' && activities.length > 0 && selectedYear === currentYear} - <div class="categories-grid" style="padding-bottom: 0;"> - <div class="category-grid bottom-category pure-category category"> - <div id="activity-history"> - <ActivityHistoryGrid - {user} - activityData={activities} - currentYear={selectedYear} - /> - </div> - </div> - </div> - {/if} - {#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> + <ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} /> {/if} + <MediaPanel + {animeList} + {mangaList} + {highestRatedMediaPercentage} + {highestRatedCount} + {updateWidth} + {wrapped} + {animeMostTitle} + {mangaMostTitle} + /> {#if topMedia && topGenresTags && ((topMedia.topGenreMedia && topMedia.genres.length > 0) || (topMedia.topTagMedia && topMedia.tags.length > 0))} - <div class="categories-grid" style="padding-top: 0;"> - {#if topMedia.topGenreMedia && topMedia.genres.length > 0} - <div class="category-grid pure-category category"> - <div class="grid-item image-grid"> - <a - href={`https://anilist.co/${topMedia.topGenreMedia.type.toLowerCase()}/${ - topMedia.topGenreMedia.id - }`} - target="_blank" - > - <img - src={proxy(topMedia.topGenreMedia.coverImage.extraLarge)} - alt="Highest Rated Genre Cover" - class="cover-image" - on:load={updateWidth} - /> - </a> - <div> - <b>{genreTagTitle} Genres</b> - <ol> - {#each topMedia.genres as genre} - <li> - <a - href={`https://anilist.co/search/anime?genres=${genre.genre}`} - target="_blank" - > - {genre.genre}{highestRatedGenreTagPercentage - ? `: ${genre.averageScore}%` - : ''} - </a> - </li> - {/each} - </ol> - </div> - </div> - </div> - {/if} - {#if topMedia.topTagMedia && topMedia.tags.length > 0} - <div class="category-grid pure-category category"> - <div class="grid-item image-grid"> - <a - href={`https://anilist.co/${topMedia.topTagMedia.type.toLowerCase()}/${ - topMedia.topTagMedia.id - }`} - target="_blank" - > - <img - src={proxy(topMedia.topTagMedia.coverImage.extraLarge)} - alt="Highest Rated Tag Cover" - class="cover-image" - on:load={updateWidth} - /> - </a> - <div> - <b>{genreTagTitle} Tags</b> - <ol> - {#each topMedia.tags as tag} - <li> - <a - href={`https://anilist.co/search/anime?genres=${tag.tag}`} - target="_blank" - > - {tag.tag}{highestRatedGenreTagPercentage - ? `: ${tag.averageScore}%` - : ''} - </a> - </li> - {/each} - </ol> - </div> - </div> - </div> - {/if} - </div> + <MediaExtras + {topMedia} + {genreTagTitle} + {highestRatedGenreTagPercentage} + {updateWidth} + /> {/if} {#if !disableActivityHistory && activityHistoryPosition === 'ORIGINAL' && activities.length > 0 && selectedYear === currentYear} - <div class="categories-grid" style="padding-top: 0;"> - <div class="category-grid bottom-category pure-category category"> - <div id="activity-history"> - <ActivityHistoryGrid - {user} - activityData={activities} - currentYear={selectedYear} - /> - </div> - </div> - </div> + <ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} /> {/if} {#if watermark} - <div class="categories-grid" style="padding-top: 0;"> - <div class="category-grid pure-category" id="watermark"> - <a href="https://due.moe/wrapped" target="_blank">due.moe/wrapped</a> - </div> - </div> + <Watermark /> {/if} </div> <div class="list"> <p> - <a href={'#'} on:click={screenshot} data-umami-event="Generate Wrapped" - >Generate image</a - > + <a href={'#'} on:click={screenshot} data-umami-event="Generate Wrapped"> + Generate image + </a> </p> <details open> @@ -905,104 +683,5 @@ {/if} <style> - @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'); - @import url('https://fonts.googleapis.com/css?family=Overpass:400,600,700,800'); - - .categories-grid { - display: flex; - flex-wrap: wrap; - row-gap: 1.5em; - column-gap: 1.5em; - padding: 2%; - justify-content: center; - font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, - Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - background-color: #0b1622; - } - - .categories-grid b { - font-family: Overpass, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, - Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: 600; - } - - .category-grid, - .image-grid { - background-color: #151f2e; - border-radius: 4px; - color: rgb(159, 173, 189); - } - - .pure-category, - .avatar-grid { - padding: 1.5%; - } - - .category-grid { - display: grid; - } - - .image-grid { - display: flex; - column-gap: 1em; - flex-wrap: wrap; - } - - .image-grid img { - width: 6em; - height: auto; - border-radius: 3px; - } - - .categories-grid a { - text-decoration: none; - color: unset; - } - - .transparent .categories-grid { - background-color: transparent !important; - } - - .light-theme .categories-grid { - background-color: #edf1f5; - } - - .light-theme .category-grid { - background-color: #fafafa; - color: rgb(92, 114, 138); - } - - .light-theme .image-grid { - background-color: #fafafa; - color: rgb(92, 114, 138); - } - - ol { - margin: 0 !important; - } - - #watermark { - color: rgb(61, 180, 242); - } - - #wrapped-final { - height: auto; - width: 50%; - } - - #list-container { - display: flex; - gap: 1rem; - flex-wrap: wrap; - align-items: start; - } - - .list { - flex-grow: 1; - flex-basis: 1%; - } - - #wrapped { - overflow-y: scroll; - } + @import './Wrapped/wrapped.css'; </style> |