fix(wrapped): defaults for no activity

1 files changed, 63 insertions, 37 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 87c97ba8..8f29b668 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -495,7 +495,7 @@
 					style={`width: ${width}px; flex-shrink: 0;`}
 					class:transparent={transparency}
 				>
-					{#if !disableActivityHistory && activityHistoryPosition === 'TOP'}
+					{#if !disableActivityHistory && activityHistoryPosition === 'TOP' && activities.length > 0}
 						<div class="categories-grid" style="padding-bottom: 0;">
 							<div class="category-grid bottom-category pure-category category">
 								<div id="activity-history">
@@ -555,7 +555,7 @@
 							</div>
 						</div>
 					</div>
-					{#if !disableActivityHistory && activityHistoryPosition === 'BELOW_TOP'}
+					{#if !disableActivityHistory && activityHistoryPosition === 'BELOW_TOP' && activities.length > 0}
 						<div class="categories-grid" style="padding-bottom: 0;">
 							<div class="category-grid bottom-category pure-category category">
 								<div id="activity-history">
@@ -566,20 +566,29 @@
 					{/if}
 					{#if animeList !== undefined || mangaList !== undefined}
 						<div class="categories-grid">
-							{#if animeList !== undefined && animeList.length !== 0}
-								<div class="category-grid pure-category category middle-category">
-									<div class="grid-item image-grid">
-										<a href={`https://anilist.co/anime/${animeList[0].id}`} target="_blank">
-											<img
-												src={proxy(animeList[0].coverImage.extraLarge)}
-												alt="Highest Rated Anime Cover"
-												class="cover-image"
-												on:load={updateWidth}
-											/>
-										</a>
-										<div>
-											<b>{animeMostTitle} Anime</b>
-											<ol>
+							<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">
@@ -591,25 +600,38 @@
 															: ''}
 													</li>
 												{/each}
-											</ol>
-										</div>
+											{:else}
+												<li>
+													<p>(⌣_⌣”)</p>
+												</li>
+											{/if}
+										</ol>
 									</div>
 								</div>
-							{/if}
-							{#if mangaList !== undefined && mangaList.length !== 0}
-								<div class="category-grid pure-category category middle-category">
-									<div class="grid-item image-grid">
-										<a href={`https://anilist.co/manga/${mangaList[0].id}`} target="_blank">
-											<img
-												src={proxy(mangaList[0].coverImage.extraLarge)}
-												alt="Highest Rated Manga Cover"
-												class="cover-image"
-												on:load={updateWidth}
-											/>
-										</a>
-										<div>
-											<b>{mangaMostTitle} Manga</b>
-											<ol>
+							</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">
@@ -621,11 +643,15 @@
 															: ''}
 													</li>
 												{/each}
-											</ol>
-										</div>
+											{:else}
+												<li>
+													<p>(⌣_⌣”)</p>
+												</li>
+											{/if}
+										</ol>
 									</div>
 								</div>
-							{/if}
+							</div>
 						</div>
 					{/if}
 					{#if topMedia && topGenresTags && ((topMedia.topGenreMedia && topMedia.genres.length > 0) || (topMedia.topTagMedia && topMedia.tags.length > 0))}
@@ -704,7 +730,7 @@
 							{/if}
 						</div>
 					{/if}
-					{#if !disableActivityHistory && activityHistoryPosition === 'ORIGINAL'}
+					{#if !disableActivityHistory && activityHistoryPosition === 'ORIGINAL' && activities.length > 0}
 						<div class="categories-grid" style="padding-top: 0;">
 							<div class="category-grid bottom-category pure-category category">
 								<div id="activity-history">