feat(wrapped): toggle ratings

1 files changed, 34 insertions, 4 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 63d67394..9741e205 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -56,6 +56,8 @@
 	let useFullActivityHistory = false;
 	let topGenresTags = true;
 	let topMedia: TopMedia;
+	let highestRatedMediaPercentage = true;
+	let highestRatedGenreTagPercentage = true;
 
 	$: {
 		if (browser && mounted) {
@@ -69,6 +71,14 @@
 			$page.url.searchParams.set('highestRatedCount', highestRatedCount.toString());
 			$page.url.searchParams.set('genreTagCount', genreTagCount.toString());
 			$page.url.searchParams.set('disableActivityHistory', disableActivityHistory.toString());
+			$page.url.searchParams.set(
+				'highestRatedMediaPercentage',
+				highestRatedMediaPercentage.toString()
+			);
+			$page.url.searchParams.set(
+				'highestRatedGenreTagPercentage',
+				highestRatedGenreTagPercentage.toString()
+			);
 
 			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
 		}
@@ -77,6 +87,10 @@
 		includeMusic = includeMusic;
 		includeSpecials = includeSpecials;
 		includeRepeats = includeRepeats;
+		disableActivityHistory = disableActivityHistory;
+		highestRatedMediaPercentage = highestRatedMediaPercentage;
+		highestRatedGenreTagPercentage = highestRatedGenreTagPercentage;
+		topGenresTags = topGenresTags;
 
 		update().then(updateWidth).catch(updateWidth);
 	}
@@ -97,7 +111,7 @@
 				excludedKeywords
 			);
 
-		// new Promise((resolve) => setTimeout(resolve, 1)).then(updateWidth);
+		new Promise((resolve) => setTimeout(resolve, 1)).then(updateWidth);
 	}
 	$: {
 		excludedKeywords = excludedKeywords;
@@ -168,7 +182,9 @@
 			'forceDark',
 			'highestRatedCount',
 			'genreTagCount',
-			'disableActivityHistory'
+			'disableActivityHistory',
+			'highestRatedMediaPercentage',
+			'highestRatedGenreTagPercentage'
 		]);
 
 		if (browser) {
@@ -182,6 +198,10 @@
 			highestRatedCount = parseInt($page.url.searchParams.get('highestRatedCount') || '5', 10);
 			genreTagCount = parseInt($page.url.searchParams.get('genreTagCount') || '5', 10);
 			disableActivityHistory = $page.url.searchParams.get('disableActivityHistory') === 'true';
+			highestRatedMediaPercentage =
+				$page.url.searchParams.get('highestRatedMediaPercentage') === 'true';
+			highestRatedGenreTagPercentage =
+				$page.url.searchParams.get('highestRatedGenreTagPercentage') === 'true';
 		}
 
 		if (user !== undefined) {
@@ -478,6 +498,7 @@
 													<a href={`https://anilist.co/anime/${anime.id}`} target="_blank">
 														<MediaTitleDisplay title={anime.title} />
 													</a>
+													{highestRatedMediaPercentage ? `: ${anime.mediaListEntry?.score}%` : ''}
 												</li>
 											{/each}
 										</ol>
@@ -504,6 +525,7 @@
 													<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
 														<MediaTitleDisplay title={manga.title} />
 													</a>
+													{highestRatedMediaPercentage ? `: ${manga.mediaListEntry?.score}%` : ''}
 												</li>
 											{/each}
 										</ol>
@@ -540,7 +562,9 @@
 														href={`https://anilist.co/search/anime?genres=${genre.genre}`}
 														target="_blank"
 													>
-														{genre.genre}: {genre.averageScore}%
+														{genre.genre}{highestRatedGenreTagPercentage
+															? `: ${genre.averageScore}%`
+															: ''}
 													</a>
 												</li>
 											{/each}
@@ -574,7 +598,9 @@
 														href={`https://anilist.co/search/anime?genres=${tag.tag}`}
 														target="_blank"
 													>
-														{tag.tag}: {tag.averageScore}%
+														{tag.tag}{highestRatedGenreTagPercentage
+															? `: ${tag.averageScore}%`
+															: ''}
 													</a>
 												</li>
 											{/each}
@@ -620,6 +646,10 @@
 					Enable top genres and tags<br />
 					<input type="checkbox" bind:checked={disableActivityHistory} /> Disable activity history<br
 					/>
+					<input type="checkbox" bind:checked={highestRatedMediaPercentage} /> Show highest rated
+					media percentage<br />
+					<input type="checkbox" bind:checked={highestRatedGenreTagPercentage} /> Show highest rated
+					genre and tag percentage<br />
 					<input type="checkbox" bind:checked={useFullActivityHistory} />
 					Enable full-year activity<br />
 					<SettingHint>