From 1d0ffdba530fa166ac577ef1fba3b5a0a959959a Mon Sep 17 00:00:00 2001 From: Fuwn Date: Wed, 3 Jan 2024 22:05:24 -0800 Subject: refactor(wrapped): move panels to components --- src/lib/AniList/wrapped.ts | 17 +- src/lib/Tools/Wrapped.svelte | 403 +++------------------------ src/lib/Tools/Wrapped/ActivityHistory.svelte | 21 ++ src/lib/Tools/Wrapped/Media.svelte | 98 +++++++ src/lib/Tools/Wrapped/MediaExtras.svelte | 74 +++++ src/lib/Tools/Wrapped/Top/Activity.svelte | 43 +++ src/lib/Tools/Wrapped/Top/Anime.svelte | 20 ++ src/lib/Tools/Wrapped/Top/Manga.svelte | 22 ++ src/lib/Tools/Wrapped/Watermark.svelte | 5 + src/lib/Tools/Wrapped/wrapped.css | 100 +++++++ 10 files changed, 439 insertions(+), 364 deletions(-) create mode 100644 src/lib/Tools/Wrapped/ActivityHistory.svelte create mode 100644 src/lib/Tools/Wrapped/Media.svelte create mode 100644 src/lib/Tools/Wrapped/MediaExtras.svelte create mode 100644 src/lib/Tools/Wrapped/Top/Activity.svelte create mode 100644 src/lib/Tools/Wrapped/Top/Anime.svelte create mode 100644 src/lib/Tools/Wrapped/Top/Manga.svelte create mode 100644 src/lib/Tools/Wrapped/Watermark.svelte create mode 100644 src/lib/Tools/Wrapped/wrapped.css diff --git a/src/lib/AniList/wrapped.ts b/src/lib/AniList/wrapped.ts index 6730f2ea..3f3e0bf8 100644 --- a/src/lib/AniList/wrapped.ts +++ b/src/lib/AniList/wrapped.ts @@ -255,8 +255,21 @@ export const tops = ( genres = genres.slice(0, amount); tags = tags.slice(0, amount); - const topGenreMedia = media.find((m) => m.genres.includes(genres[0].genre)) || media[0]; - const topTagMedia = media.find((m) => m.tags.some((tag) => tag.name === tags[0].tag)) || media[0]; + let topGenreMedia; + + try { + topGenreMedia = media.find((m) => m.genres.includes(genres[0].genre)) || media[0]; + } catch { + topGenreMedia = media[0]; + } + + let topTagMedia; + + try { + topTagMedia = media.find((m) => m.tags.some((tag) => tag.name === tags[0].tag)) || media[0]; + } catch { + topTagMedia = media[0]; + } return { genres, 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} -
-
-
- -
-
-
+ {/if}
-
- - User Avatar - -
- -
- Status Posts: {wrapped.activities.statusCount} -
-
- Messages: {wrapped.activities.messageCount} -
-
- Days Active: {#if selectedYear !== currentYear} - ?/365 - {:else} - {activities.length}/{useFullActivityHistory ? 365 : 189} - {/if} -
-
-
-
-
- Anime -
-
- Time Watched: {((minutesWatched || 0) / 60 / 24).toFixed(2)} days -
-
- Completed: {animeList?.length || 0} -
-
Episodes: {episodes}
-
-
-
- Manga -
-
- Time Read: {estimatedDayReading(chapters).toFixed(2)} days -
-
- Completed: {mangaList?.length || 0} -
-
- Chapters: {chapters} -
-
+ + +
{#if !disableActivityHistory && activityHistoryPosition === 'BELOW_TOP' && activities.length > 0 && selectedYear === currentYear} -
-
-
- -
-
-
- {/if} - {#if animeList !== undefined || mangaList !== undefined} -
-
-
- - Highest Rated Anime Cover - -
- {animeMostTitle} Anime -
    - {#if animeList !== undefined && animeList.length !== 0} - {#each animeList?.slice(0, highestRatedCount) as anime} -
  1. - - - {highestRatedMediaPercentage && - anime.mediaListEntry && - anime.mediaListEntry?.score > 0 - ? `: ${anime.mediaListEntry?.score}%` - : ''} -
    2. - {/each} - {:else} -
  2. -

    (⌣_⌣”)

    -
    3. - {/if} -
-
-
-
-
-
- - Highest Rated Manga Cover - -
- {mangaMostTitle} Manga -
    - {#if mangaList !== undefined && mangaList.length !== 0} - {#each mangaList?.slice(0, highestRatedCount) as manga} -
  1. - - - {highestRatedMediaPercentage && - manga.mediaListEntry && - manga.mediaListEntry?.score > 0 - ? `: ${manga.mediaListEntry?.score}%` - : ''} -
    2. - {/each} - {:else} -
  2. -

    (⌣_⌣”)

    -
    3. - {/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} {#if !disableActivityHistory && activityHistoryPosition === 'ORIGINAL' && activities.length > 0 && selectedYear === currentYear} -
-
-
- -
-
-
+ {/if} {#if watermark} -
- -
+ {/if}

- Generate image + + Generate image +

@@ -905,104 +683,5 @@ {/if} diff --git a/src/lib/Tools/Wrapped/ActivityHistory.svelte b/src/lib/Tools/Wrapped/ActivityHistory.svelte new file mode 100644 index 00000000..7c972eb9 --- /dev/null +++ b/src/lib/Tools/Wrapped/ActivityHistory.svelte @@ -0,0 +1,21 @@ + + +
+
+
+ +
+
+
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 @@ + + +{#if animeList !== undefined || mangaList !== undefined} +
+
+
+ + Highest Rated Anime Cover + +
+ {animeMostTitle} Anime +
    + {#if animeList !== undefined && animeList.length !== 0} + {#each animeList?.slice(0, highestRatedCount) as anime} +
  1. + + + {highestRatedMediaPercentage && + anime.mediaListEntry && + anime.mediaListEntry?.score > 0 + ? `: ${anime.mediaListEntry?.score}%` + : ''} +
    2. + {/each} + {:else} +
  2. +

    (⌣_⌣”)

    +
    3. + {/if} +
+
+
+
+
+
+ + Highest Rated Manga Cover + +
+ {mangaMostTitle} Manga +
    + {#if mangaList !== undefined && mangaList.length !== 0} + {#each mangaList?.slice(0, highestRatedCount) as manga} +
  1. + + + {highestRatedMediaPercentage && + manga.mediaListEntry && + manga.mediaListEntry?.score > 0 + ? `: ${manga.mediaListEntry?.score}%` + : ''} +
    2. + {/each} + {:else} +
  2. +

    (⌣_⌣”)

    +
    3. + {/if} +
+
+
+
+
+{/if} diff --git a/src/lib/Tools/Wrapped/MediaExtras.svelte b/src/lib/Tools/Wrapped/MediaExtras.svelte new file mode 100644 index 00000000..00417c54 --- /dev/null +++ b/src/lib/Tools/Wrapped/MediaExtras.svelte @@ -0,0 +1,74 @@ + + +
+ {#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} +
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 @@ + + +
+ + User Avatar + +
+ +
+ Status Posts: {wrapped.activities.statusCount} +
+
+ Messages: {wrapped.activities.messageCount} +
+
+ Days Active: {#if year !== currentYear} + ?/365 + {:else} + {activities.length}/{useFullActivityHistory ? 365 : 189} + {/if} +
+
+
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 @@ + + +
+
+ Anime +
+
+ Time Watched: {((minutesWatched || 0) / 60 / 24).toFixed(2)} days +
+
+ Completed: {animeList?.length || 0} +
+
Episodes: {episodes}
+
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 @@ + + +
+
+ Manga +
+
+ Time Read: {estimatedDayReading(chapters).toFixed(2)} days +
+
+ Completed: {mangaList?.length || 0} +
+
+ Chapters: {chapters} +
+
diff --git a/src/lib/Tools/Wrapped/Watermark.svelte b/src/lib/Tools/Wrapped/Watermark.svelte new file mode 100644 index 00000000..2e8dd838 --- /dev/null +++ b/src/lib/Tools/Wrapped/Watermark.svelte @@ -0,0 +1,5 @@ +
+ +
diff --git a/src/lib/Tools/Wrapped/wrapped.css b/src/lib/Tools/Wrapped/wrapped.css new file mode 100644 index 00000000..1ac01d85 --- /dev/null +++ b/src/lib/Tools/Wrapped/wrapped.css @@ -0,0 +1,100 @@ +@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; +} -- cgit v1.2.3