feat(wrapped): final output adds to html

1 files changed, 21 insertions, 7 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index af76a219..75439a5a 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -116,12 +116,20 @@
 					bgcolor: transparency ? undefined : dark ? '#0b1622' : '#edf1f5'
 				})
 				.then((blob) => {
-					const link = document.createElement('a');
+					const downloadWrapper = document.createElement('a');
+					const image = document.createElement('img');
 
-					link.download = `due_dot_moe_wrapped_${dark ? 'dark' : 'light'}.png`;
-					link.href = URL.createObjectURL(blob);
+					downloadWrapper.download = `due_dot_moe_wrapped_${dark ? 'dark' : 'light'}.png`;
+					downloadWrapper.href = URL.createObjectURL(blob);
+					image.src = URL.createObjectURL(blob);
+					downloadWrapper.appendChild(image);
 
-					link.click();
+					const wrappedFinal = document.getElementById('wrapped-final');
+
+					if (wrappedFinal !== null) {
+						wrappedFinal.innerHTML = '';
+						wrappedFinal.appendChild(downloadWrapper);
+					}
 				});
 
 			await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -285,14 +293,16 @@
 
 		<ul>
 			<li>
-				<a href={'#'} on:click={() => screenshot(true)}>Download dark themed image</a>
+				<a href={'#'} on:click={() => screenshot(true)}>Generate dark themed image</a>
 			</li>
 			<li>
-				<a href={'#'} on:click={() => screenshot()}>Download light themed image</a>
+				<a href={'#'} on:click={() => screenshot()}>Generate light themed image</a>
 			</li>
 			<li>
 				<a href={'#'} on:click={() => (transparency = !transparency)}>
-					{transparency ? 'Disable' : 'Enable'} background transparency
+					<strike>
+						{transparency ? 'Disable' : 'Enable'} background transparency
+					</strike>
 				</a>
 			</li>
 			<li>
@@ -302,6 +312,10 @@
 				<input type="number" bind:value={maxAbbreviateLength} />
 			</li>
 		</ul>
+
+		<br />
+
+		<div id="wrapped-final" />
 	{:catch}
 		<Error />
 	{/await}