fix(wrapped): make wrapped independent

1 files changed, 59 insertions, 60 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index d5e12326..d0fbab5b 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -78,14 +78,6 @@
 	};
 
 	onMount(async () => {
-		new MutationObserver((_mutations) => updateWidth()).observe(
-			document.querySelector('#wrapped')!,
-			{
-				childList: true,
-				subtree: true
-			}
-		);
-
 		if (user !== undefined) {
 			if ($userIdentity === '') {
 				userIdentity.set(JSON.stringify(await getUserIdentity(user)));
@@ -171,6 +163,14 @@
 		for (const media of mangaList) {
 			chapters += media.mediaListEntry?.progress || 0;
 		}
+
+		new MutationObserver((_mutations) => updateWidth()).observe(
+			document.querySelector('#wrapped')!,
+			{
+				childList: true,
+				subtree: true
+			}
+		);
 	};
 
 	/* eslint-disable @typescript-eslint/no-explicit-any */
@@ -259,13 +259,13 @@
 	const proxy = (url: string) => `/api/proxy?url=${encodeURIComponent(url)}`;
 </script>
 
-<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&nbsp;...
-		{:then wrapped}
+{#if currentUserIdentity.id === -2}
+	Please log in to view this page.
+{:else if currentUserIdentity.id !== -1}
+	{#await wrapped(user, currentUserIdentity)}
+		Loading&nbsp;...
+	{:then wrapped}
+		<div id="wrapped" style={`width: ${width}px`}>
 			<div
 				class:light-theme={lightTheme}
 				class="categories-grid"
@@ -386,53 +386,52 @@
 					<div class="category-grid pure-category" id="watermark">due.moe/wrapped</div>
 				{/if}
 			</div>
+		</div>
+
+		<p />
+
+		<blockquote>
+			This is a minimal, live preview. Generated images will be higher quality and themed properly.
+		</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>
+
+		<details>
+			<summary>Options</summary>
+			<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={forceDark} />
+				Enable light mode (dark by default)<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 />
+				<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>
 
-			<br />
-
-			<blockquote>
-				This is a minimal, live preview. Generated images will be higher quality and themed
-				properly.
-			</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>
-
-			<details>
-				<summary>Options</summary>
-				<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={forceDark} />
-					Enable light mode (dark by default)<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 />
-					<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>
-
-			<br />
+		<p />
 
-			<div id="wrapped-final" />
-		{:catch}
-			<Error />
-		{/await}
-	{:else}
-		Loading&nbsp;...
-	{/if}
-</div>
+		<div id="wrapped-final" />
+	{:catch}
+		<Error />
+	{/await}
+{:else}
+	Loading&nbsp;...
+{/if}
 
 <style>
 	@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');