feat(wrapped): simplify options

1 files changed, 23 insertions, 34 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index b1d75b68..dc0e51fa 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -22,8 +22,6 @@
 	let minutesWatched = 0;
 	let animeList: Media[] | undefined = undefined;
 	let mangaList: Media[] | undefined = undefined;
-	let abbreviateTitles = true;
-	let maxAbbreviateLength = 40;
 	let transparency = false;
 	let lightTheme = true;
 	let watermark = false;
@@ -245,17 +243,17 @@
 		}
 	};
 
-	const abbreviate = (string: string, maxLength = 40, enabled = true) => {
-		if (!enabled) {
-			return string;
-		}
+	// const abbreviate = (string: string, maxLength = 40, enabled = true) => {
+	// 	if (!enabled) {
+	// 		return string;
+	// 	}
 
-		if (string.length <= maxLength) {
-			return string;
-		}
+	// 	if (string.length <= maxLength) {
+	// 		return string;
+	// 	}
 
-		return string.slice(0, maxLength - 3) + ' …';
-	};
+	// 	return string.slice(0, maxLength - 3) + ' …';
+	// };
 
 	const proxy = (url: string) => `/api/proxy?url=${encodeURIComponent(url)}`;
 </script>
@@ -345,11 +343,7 @@
 									{#each animeList?.slice(0, highestRatedCount) as anime}
 										<li>
 											<a href={`https://anilist.co/anime/${anime.id}`} target="_blank">
-												{abbreviate(
-													anime.title.english || anime.title.romaji || anime.title.native,
-													maxAbbreviateLength,
-													abbreviateTitles
-												)}
+												{anime.title.english || anime.title.romaji || anime.title.native}
 											</a>
 										</li>
 									{/each}
@@ -376,11 +370,7 @@
 									{#each mangaList?.slice(0, highestRatedCount) as manga}
 										<li>
 											<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
-												{abbreviate(
-													manga.title.english || manga.title.romaji || manga.title.native,
-													maxAbbreviateLength,
-													abbreviateTitles
-												)}
+												{manga.title.english || manga.title.romaji || manga.title.native}
 											</a>
 										</li>
 									{/each}
@@ -404,6 +394,12 @@
 			</blockquote>
 
 			<p>
+				<button on:click={() => (width -= 25)}>-25px</button>
+				<button on:click={updateWidth}>Auto-calculate width</button>
+				<button on:click={() => (width += 25)}>+25px</button>
+			</p>
+
+			<p>
 				<a href={'#'} on:click={() => screenshot(!forceDark)}>Generate image</a>
 			</p>
 
@@ -417,19 +413,12 @@
 					<input type="checkbox" bind:checked={includeMusic} /> Include music<br />
 					<input type="checkbox" bind:checked={includeRepeats} /> Include rewatches & rereads<br />
 					<input type="checkbox" bind:checked={includeSpecials} /> Include specials and OVAs<br />
-					<input type="range" min="1" max="10" bind:value={highestRatedCount} /> Highest rated media
-					count <br />
-					<input type="range" min="1" max="1920" bind:value={width} />
-					Manual width override (<a href={'#'} on:click={updateWidth}>Auto-calculate</a>)
-					<br />
-					<input type="checkbox" bind:checked={abbreviateTitles} /> Fit long titles
-					{#if abbreviateTitles}
-						&nbsp;&nbsp;&nbsp;&nbsp;&thinsp; Maximum title length <input
-							type="range"
-							min="4"
-							bind:value={maxAbbreviateLength}
-						/><br />
-					{/if}
+					<select bind:value={highestRatedCount}>
+						{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as count}
+							<option value={count}>{count}</option>
+						{/each}
+					</select>
+					Highest rated media count
 				</div>
 			</details>