fix(wrapped): screenshot colours and sizing

1 files changed, 50 insertions, 2 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 5caf7a63..4cdbced0 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -12,6 +12,8 @@
 	import lastPruneTimes from '../../stores/lastPruneTimes.js';
 	import manga from '../../stores/manga.js';
 	import Error from '$lib/Error.svelte';
+	import domtoimage from 'dom-to-image';
+	import { saveAs } from 'file-saver';
 
 	export let user: AniListAuthorisation;
 
@@ -77,6 +79,31 @@
 	const year = (statistic: { startYears: any }) => {
 		return statistic.startYears.find((y: { startYear: number }) => y.startYear === 2023);
 	};
+
+	const screenshot = async (dark = false) => {
+		let element = document.querySelector('.categories-grid') as HTMLElement;
+
+		element.classList.add('invert');
+
+		if (dark) {
+			element.classList.add('light-theme');
+		}
+
+		if (element !== null) {
+			domtoimage
+				.toBlob(element, {
+					bgcolor: dark ? '#060506' : '#f8f8f8'
+				})
+				.then((blob: string) => {
+					saveAs(blob, `due_dot_moe_wrapped_${dark ? 'dark' : 'light'}.png`);
+				});
+
+			await new Promise((resolve) => setTimeout(resolve, 1000));
+
+			element.classList.remove('invert');
+			element.classList.remove('light-theme');
+		}
+	};
 </script>
 
 {#if currentUserIdentity.id !== -1}
@@ -199,6 +226,17 @@
 				</div>
 			</div>
 		</div>
+
+		<p />
+
+		<ul>
+			<li>
+				<a href={'#'} on:click={() => screenshot(true)}>Download dark themed image</a>
+			</li>
+			<li>
+				<a href={'#'} on:click={() => screenshot()}>Download light themed image</a>
+			</li>
+		</ul>
 	{:catch}
 		<Error />
 	{/await}
@@ -210,8 +248,10 @@
 	.categories-grid {
 		display: flex;
 		flex-wrap: wrap;
-		row-gap: 1em;
+		row-gap: 1.5em;
 		column-gap: 1em;
+		padding: 1%;
+		justify-content: center;
 	}
 
 	.category-grid {
@@ -238,8 +278,16 @@
 		/* text-align: center; */
 	}
 
-	a {
+	.categories-grid a {
 		text-decoration: none;
 		color: unset;
 	}
+
+	:global(.light-theme *) {
+		color: #c7c5c7 !important;
+	}
+
+	:global(.invert *) {
+		filter: invert(0) !important;
+	}
 </style>