From 3de6d077b690bac153ba91d6c1483e58b1998e4b Mon Sep 17 00:00:00 2001 From: Fuwn Date: Sat, 30 Dec 2023 17:18:22 -0800 Subject: feat(wrapped): move preview next to options --- src/lib/Tools/Wrapped.svelte | 622 ++++++++++++++++++++++--------------------- 1 file changed, 318 insertions(+), 304 deletions(-) (limited to 'src') diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte index 35f3e0e3..a9af64c4 100644 --- a/src/lib/Tools/Wrapped.svelte +++ b/src/lib/Tools/Wrapped.svelte @@ -487,341 +487,344 @@ {#await wrapped(user, currentUserIdentity)} {@html nbsp('Loading user data ...')} {:then wrapped} -
- {#if !disableActivityHistory && activityHistoryPosition === 'TOP'} -
-
-
- +
+
+ {#if !disableActivityHistory && activityHistoryPosition === 'TOP'} +
+
+
+ +
-
- {/if} -
-
- - User Avatar - -
+ {/if} +
+
+ + User Avatar +
- - - {currentUserIdentity.name} - - + +
+ Status Posts: {wrapped.activities.statusCount} +
+
+ Messages: {wrapped.activities.messageCount} +
+
+ Days Active: {activities.length}/{useFullActivityHistory ? 365 : 189} +
-
- Status Posts: {wrapped.activities.statusCount} +
+
+
+ Anime
-
- Messages: {wrapped.activities.messageCount} +
+ Time Watched: {((minutesWatched || 0) / 60 / 24).toFixed(2)} days
-
- Days Active: {activities.length}/{useFullActivityHistory ? 365 : 189} +
+ Completed: {animeList?.length}
+
Episodes: {episodes}
-
-
-
- Anime -
-
- Time Watched: {((minutesWatched || 0) / 60 / 24).toFixed(2)} days -
-
- Completed: {animeList?.length} -
-
Episodes: {episodes}
-
-
-
- Manga -
-
- Time Read: {estimatedDayReading(chapters).toFixed(2)} days -
-
- Completed: {mangaList?.length} -
-
- Chapters: {chapters} +
+
+ Manga +
+
+ Time Read: {estimatedDayReading(chapters).toFixed(2)} days +
+
+ Completed: {mangaList?.length} +
+
+ Chapters: {chapters} +
-
- {#if !disableActivityHistory && activityHistoryPosition === 'BELOW_TOP'} -
-
-
- + {#if !disableActivityHistory && activityHistoryPosition === 'BELOW_TOP'} +
+
+
+ +
-
- {/if} - {#if animeList !== undefined || mangaList !== undefined} -
- {#if animeList !== undefined && animeList.length !== 0} -
-
- - Highest Rated Anime Cover - -
- {animeMostTitle} Anime -
    - {#each animeList?.slice(0, highestRatedCount) as anime} -
  1. - - - - {highestRatedMediaPercentage ? `: ${anime.mediaListEntry?.score}%` : ''} -
    2. - {/each} -
+ {/if} + {#if animeList !== undefined || mangaList !== undefined} +
+ {#if animeList !== undefined && animeList.length !== 0} +
+
+ + Highest Rated Anime Cover + +
+ {animeMostTitle} Anime +
    + {#each animeList?.slice(0, highestRatedCount) as anime} +
  1. + + + + {highestRatedMediaPercentage ? `: ${anime.mediaListEntry?.score}%` : ''} +
    2. + {/each} +
+
-
- {/if} - {#if mangaList !== undefined && mangaList.length !== 0} -
-
- - Highest Rated Manga Cover - -
- {mangaMostTitle} Manga -
    - {#each mangaList?.slice(0, highestRatedCount) as manga} -
  1. - - - - {highestRatedMediaPercentage ? `: ${manga.mediaListEntry?.score}%` : ''} -
    2. - {/each} -
+ {/if} + {#if mangaList !== undefined && mangaList.length !== 0} +
+
+ + Highest Rated Manga Cover + +
+ {mangaMostTitle} Manga +
    + {#each mangaList?.slice(0, highestRatedCount) as manga} +
  1. + + + + {highestRatedMediaPercentage ? `: ${manga.mediaListEntry?.score}%` : ''} +
    2. + {/each} +
+
-
- {/if} -
- {/if} - {#if topMedia && topGenresTags && ((topMedia.topGenreMedia && topMedia.genres.length > 0) || (topMedia.topTagMedia && topMedia.tags.length > 0))} -
- {#if topMedia.topGenreMedia && topMedia.genres.length > 0} -
-
- - Highest Rated Genre Cover - -
- {genreTagTitle} Genres -
    - {#each topMedia.genres as genre} -
  1. - - {genre.genre}{highestRatedGenreTagPercentage - ? `: ${genre.averageScore}%` - : ''} - -
    2. - {/each} -
+ {/if} +
+ {/if} + {#if topMedia && topGenresTags && ((topMedia.topGenreMedia && topMedia.genres.length > 0) || (topMedia.topTagMedia && topMedia.tags.length > 0))} +
+ {#if topMedia.topGenreMedia && topMedia.genres.length > 0} +
+
+ + Highest Rated Genre Cover + +
+ {genreTagTitle} Genres +
    + {#each topMedia.genres as genre} +
  1. + + {genre.genre}{highestRatedGenreTagPercentage + ? `: ${genre.averageScore}%` + : ''} + +
    2. + {/each} +
+
-
- {/if} - {#if topMedia.topTagMedia && topMedia.tags.length > 0} -
-
- - Highest Rated Tag Cover - -
- {genreTagTitle} Tags -
    - {#each topMedia.tags as tag} -
  1. - - {tag.tag}{highestRatedGenreTagPercentage - ? `: ${tag.averageScore}%` - : ''} - -
    2. - {/each} -
+ {/if} + {#if topMedia.topTagMedia && topMedia.tags.length > 0} +
+
+ + Highest Rated Tag Cover + +
+ {genreTagTitle} Tags +
    + {#each topMedia.tags as tag} +
  1. + + {tag.tag}{highestRatedGenreTagPercentage + ? `: ${tag.averageScore}%` + : ''} + +
    2. + {/each} +
+
-
- {/if} -
- {/if} - {#if !disableActivityHistory && activityHistoryPosition === 'ORIGINAL'} -
-
-
- + {/if} +
+ {/if} + {#if !disableActivityHistory && activityHistoryPosition === 'ORIGINAL'} +
+
+
+ +
-
- {/if} - {#if watermark} -
-
- due.moe/wrapped + {/if} + {#if watermark} +
+
-
- {/if} -
- -

- -

- Generate image -

+ {/if} +
+
+

+ Generate image +

-
- Options -
- Display - - Show watermark
- Enable background transparency
- - Enable light mode
- - Show top genres and tags
- Hide activity history
- Show highest rated - media percentages
- Show highest - rated genre and tag percentages
- - Activity history position
- - Highest rated media count
- - Highest genre and tag count
- - - - Width adjustment
+ Options +
+
+ Display + + Show watermark
+ Enable background transparency
+ + Enable light mode
+ + Show top genres and tags
+ Hide activity + history
+ Show highest + rated media percentages
+ Show highest + rated genre and tag percentages
+ + Activity history position
+ + Highest rated media count
+ + Highest genre and tag count
+ + + + Width adjustment
+
+ +

+ +

+ Calculation + + + Enable full-year activity
+ + If you have many activities, you may rate-limited and you may need multiple + attempts to fully populate your local activity history database.
If you get + rate-limited, wait one minute, then try again. + Refresh data +
+

+ + Anime and manga sort
+ + Genre and tag sort
+ Include music
+ Include rewatches & rereads
+ Include specials
+ Include OVAs
+ Include movies
+ { + e.key === 'Enter' && submitExcludedKeywords(); + }} + /> + Excluded keywords + Submit +
+ Comma separated list (e.g., "My Hero, Kaguya") +

+

-

- Calculation - - - Enable full-year activity
- - If you have many activities, you may rate-limited and you may need multiple attempts - to fully populate your local activity history database.
If you get rate-limited, - wait one minute, then try again. - Refresh data -
-

- - Anime and manga sort
- - Genre and tag sort
- Include music
- Include rewatches & rereads
- Include specials
- Include OVAs
- Include movies
- { - e.key === 'Enter' && submitExcludedKeywords(); - }} - /> - Excluded keywords - Submit -
- Comma separated list (e.g., "My Hero, Kaguya") -

-
-
- -

+

-
- - {#if generated} -

+ {#if generated} +

-

- Click on the image to download, or right click and select "Save Image As...". -
- {/if} +
+ Click on the image to download, or right click and select "Save Image As...". +
+ {/if} +
+
{:catch} {/await} @@ -920,4 +923,15 @@ height: auto; width: 50%; } + + #list-container { + display: flex; + gap: 1rem; + flex-wrap: wrap; + } + + .list { + flex-grow: 1; + flex-basis: 1%; + } -- cgit v1.2.3