feat(wrapped): adjust window length

2 files changed, 171 insertions, 173 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 3eb0a373..f8879814 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -30,6 +30,7 @@
 	let includeMusic = false;
 	let includeSpecials = false;
 	let includeRepeats = false;
+	let width = 980;
 
 	$: {
 		includeMusic = includeMusic;
@@ -128,8 +129,8 @@
 	};
 
 	/* eslint-disable @typescript-eslint/no-explicit-any */
-	const year = (statistic: { startYears: any }) =>
-		statistic.startYears.find((y: { startYear: number }) => y.startYear === 2023);
+	// const year = (statistic: { startYears: any }) =>
+	// 	statistic.startYears.find((y: { startYear: number }) => y.startYear === 2023);
 
 	const screenshot = async (dark = false) => {
 		let element = document.querySelector('.categories-grid') as HTMLElement;
@@ -204,181 +205,184 @@
 	};
 </script>
 
-{#if currentUserIdentity.id === -2}
-	Please log in to view this page.
-{:else if currentUserIdentity.id !== -1}
-	{#await wrapped(user, currentUserIdentity)}
-		Loading ...
-	{:then wrapped}
-		<div class:light-theme={darkTheme} class="categories-grid">
-			<div class="grid-item image-grid avatar-grid">
-				<a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank">
-					<img src={wrapped.avatar.large} alt="User Avatar" />
-				</a>
-				<div>
+<div id="wrapped" style={`width: ${width}px`}>
+	{#if currentUserIdentity.id === -2}
+		Please log in to view this page.
+	{:else if currentUserIdentity.id !== -1}
+		{#await wrapped(user, currentUserIdentity)}
+			Loading ...
+		{:then wrapped}
+			<div class:light-theme={darkTheme} class="categories-grid">
+				<div class="grid-item image-grid avatar-grid">
+					<a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank">
+						<img src={wrapped.avatar.large} alt="User Avatar" />
+					</a>
 					<div>
-						<a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank">
-							<b>
-								{currentUserIdentity.name}
-							</b>
-						</a>
+						<div>
+							<a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank">
+								<b>
+									{currentUserIdentity.name}
+								</b>
+							</a>
+						</div>
+						<div>
+							Status Posts: {wrapped.activities.statusCount}
+						</div>
+						<div>
+							Messages: {wrapped.activities.messageCount}
+						</div>
+						<div>
+							Days Active: {#await activityHistory(currentUserIdentity)}
+								Loading ...
+							{:then activities}
+								{#if activities === undefined}
+									Loading ...
+								{:else}
+									{fillMissingDays(activities, true).filter((a) => a.amount !== 0).length}/365
+								{/if}
+							{/await}
+						</div>
 					</div>
-					<div>
-						Status Posts: {wrapped.activities.statusCount}
+				</div>
+				<div class="category-grid pure-category">
+					<div class="grid-item">
+						<b>Anime</b>
 					</div>
-					<div>
-						Messages: {wrapped.activities.messageCount}
+					<div class="grid-item">
+						Time Watched: {((minutesWatched || 0) / 60 / 24).toFixed(2)} days
 					</div>
-					<div>
-						Days Active: {#await activityHistory(currentUserIdentity)}
-							Loading ...
-						{:then activities}
-							{#if activities === undefined}
-								Loading ...
-							{:else}
-								{fillMissingDays(activities, true).filter((a) => a.amount !== 0).length}/365
-							{/if}
-						{/await}
+					<div class="grid-item">
+						Completed: {animeList?.length}
 					</div>
+					<div class="grid-item">Episodes: {episodes}</div>
 				</div>
-			</div>
-			<div class="category-grid pure-category">
-				<div class="grid-item">
-					<b>Anime</b>
-				</div>
-				<div class="grid-item">
-					Time Watched: {((minutesWatched || 0) / 60 / 24).toFixed(2)} days
-				</div>
-				<div class="grid-item">
-					Completed: {animeList?.length}
-				</div>
-				<div class="grid-item">Episodes: {episodes}</div>
-			</div>
-			<div class="category-grid pure-category">
-				<div class="grid-item">
-					<b>Manga</b>
-				</div>
-				<div class="grid-item">
-					Time Read: {((chapters * 8.58) / 60 / 24).toFixed(2)} days
-				</div>
-				<div class="grid-item">
-					Completed: {mangaList?.length}
+				<div class="category-grid pure-category">
+					<div class="grid-item">
+						<b>Manga</b>
+					</div>
+					<div class="grid-item">
+						Time Read: {((chapters * 8.58) / 60 / 24).toFixed(2)} days
+					</div>
+					<div class="grid-item">
+						Completed: {mangaList?.length}
+					</div>
+					<div class="grid-item">
+						Chapters: {chapters}
+					</div>
 				</div>
-				<div class="grid-item">
-					Chapters: {chapters}
+				<div class="category-grid pure-category">
+					<div class="grid-item image-grid">
+						{#if animeList !== undefined}
+							<a href={`https://anilist.co/anime/${animeList[0].id}`} target="_blank">
+								<img
+									src={animeList[0].coverImage.extraLarge}
+									alt="Highest Rated Anime Cover"
+									class="cover-image"
+								/>
+							</a>
+							<div>
+								<b>Highest Rated Anime</b>
+								<ol>
+									{#each animeList?.slice(0, 5) 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
+												)}
+											</a>
+										</li>
+									{/each}
+								</ol>
+							</div>
+						{:else}
+							Loading ...
+						{/if}
+					</div>
 				</div>
-			</div>
-			<div class="category-grid pure-category">
-				<div class="grid-item image-grid">
-					{#if animeList !== undefined}
-						<a href={`https://anilist.co/anime/${animeList[0].id}`} target="_blank">
-							<img
-								src={animeList[0].coverImage.extraLarge}
-								alt="Highest Rated Anime Cover"
-								class="cover-image"
-							/>
-						</a>
-						<div>
-							<b>Highest Rated Anime</b>
-							<ol>
-								{#each animeList?.slice(0, 5) 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
-											)}
-										</a>
-									</li>
-								{/each}
-							</ol>
-						</div>
-					{:else}
-						Loading ...
-					{/if}
+				<div class="category-grid pure-category">
+					<div class="grid-item image-grid">
+						{#if mangaList !== undefined}
+							<a href={`https://anilist.co/manga/${mangaList[0].id}`} target="_blank">
+								<img
+									src={mangaList[0].coverImage.extraLarge}
+									alt="Highest Rated Manga Cover"
+									class="cover-image"
+								/>
+							</a>
+							<div>
+								<b>Highest Rated Manga</b>
+								<ol>
+									{#each mangaList?.slice(0, 5) 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
+												)}
+											</a>
+										</li>
+									{/each}
+								</ol>
+							</div>
+						{:else}
+							Loading ...
+						{/if}
+					</div>
 				</div>
+				{#if watermark}
+					<div class="category-grid pure-category" id="watermark">due.moe/wrapped</div>
+				{/if}
 			</div>
-			<div class="category-grid pure-category">
-				<div class="grid-item image-grid">
-					{#if mangaList !== undefined}
-						<a href={`https://anilist.co/manga/${mangaList[0].id}`} target="_blank">
-							<img
-								src={mangaList[0].coverImage.extraLarge}
-								alt="Highest Rated Manga Cover"
-								class="cover-image"
-							/>
-						</a>
-						<div>
-							<b>Highest Rated Manga</b>
-							<ol>
-								{#each mangaList?.slice(0, 5) 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
-											)}
-										</a>
-									</li>
-								{/each}
-							</ol>
-						</div>
-					{:else}
-						Loading ...
-					{/if}
-				</div>
+
+			<br />
+
+			<p>
+				Don't be alarmed! The background will appear as its inverse in the preview, but will be
+				corrected in the final image. Media covers may not appear on mobile Apple devices.
+			</p>
+
+			<div id="options">
+				<input type="checkbox" bind:checked={watermark} /> Enable watermark<br />
+				<input type="checkbox" bind:checked={transparency} /> Enable background transparency<br />
+				<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 />
+				Width ({width} px): <input type="range" min="1" max="1920" bind:value={width} /><br />
+				<input type="checkbox" bind:checked={abbreviateTitles} /> Fit long titles<br />
+				{#if abbreviateTitles}
+					Maximum title length <input type="range" min="4" bind:value={maxAbbreviateLength} /><br />
+				{/if}
 			</div>
-			{#if watermark}
-				<div class="category-grid pure-category" id="watermark">due.moe/wrapped</div>
-			{/if}
-		</div>
-
-		<br />
-
-		<p>
-			Don't be alarmed! The background will appear as its inverse in the preview, but will be
-			corrected in the final image. Media covers may not appear on mobile Apple devices.
-		</p>
-
-		<div id="options">
-			<input type="checkbox" bind:checked={watermark} /> Enable watermark<br />
-			<input type="checkbox" bind:checked={transparency} /> Enable background transparency<br />
-			<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="checkbox" bind:checked={abbreviateTitles} /> Fit long titles<br />
-			{#if abbreviateTitles}
-				Maximum title length <input type="range" min="4" bind:value={maxAbbreviateLength} /><br />
-			{/if}
-		</div>
-
-		<br />
-
-		<ul>
-			<li>
-				<a href={'#'} on:click={() => screenshot(true)}>Generate dark themed image</a>
-			</li>
-			<li>
-				<a href={'#'} on:click={() => screenshot()}>Generate light themed image</a>
-			</li>
-			<li>
-				<a href={'#'} target="_blank" id="wrapped-image-download">
-					Download generated image (generate first)
-				</a>
-			</li>
-		</ul>
-
-		<br />
-
-		<div id="wrapped-final" />
-	{:catch}
-		<Error />
-	{/await}
-{:else}
-	Loading ...
-{/if}
+
+			<br />
+
+			<ul>
+				<li>
+					<a href={'#'} on:click={() => screenshot(true)}>Generate dark themed image</a>
+				</li>
+				<li>
+					<a href={'#'} on:click={() => screenshot()}>Generate light themed image</a>
+				</li>
+				<li>
+					<a href={'#'} target="_blank" id="wrapped-image-download">
+						Download generated image (generate first)
+					</a>
+				</li>
+			</ul>
+
+			<br />
+
+			<div id="wrapped-final" />
+		{:catch}
+			<Error />
+		{/await}
+	{:else}
+		Loading ...
+	{/if}
+</div>
 
 <style>
 	@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 6d6cf06c..28593f6a 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -58,15 +58,9 @@
 {:else if tool === 'activity_history_hole_risks'}
 	<ActivityHistory user={data.user} />
 {:else if tool === 'wrapped'}
-	<div id="wrapped"><Wrapped user={data.user} /></div>
+	<Wrapped user={data.user} />
 {:else if tool === 'episode_discussion_collector'}
 	<EpisodeDiscussionCollector />
 {:else if tool === 'todays_character_birthdays'}
 	<CharacterBirthdays />
 {/if}
-
-<style>
-	#wrapped {
-		width: 980px;
-	}
-</style>