fix(wrapped): screenshot colours and sizing

4 files changed, 88 insertions, 37 deletions

diff --git a/bun.lockb b/bun.lockb
index df7c6752..2ad4fc9e 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index 61dfbda5..5138acf2 100644
--- a/package.json
+++ b/package.json
@@ -1,36 +1,39 @@
 {
-	"name": "due.moe",
-	"version": "0.0.0",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
-		"svelte-adapter-bun": "^0.5.0",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
-	},
-	"type": "module",
-	"dependencies": {
-		"dexie": "^4.0.1-alpha.25",
-		"rss-parser": "^3.13.0"
-	}
+  "name": "due.moe",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.20.4",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.10.1",
+    "svelte": "^4.0.5",
+    "svelte-adapter-bun": "^0.5.0",
+    "svelte-check": "^3.4.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "dexie": "^4.0.1-alpha.25",
+    "dom-to-image": "^2.6.0",
+    "file-saver": "^2.0.5",
+    "html2canvas": "^1.4.1",
+    "rss-parser": "^3.13.0"
+  }
 }
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>
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 16852edc..4ee3d604 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -13,7 +13,7 @@
 		<option value={0}>Tools</option>
 		<option value={1}>Today's Character Birthdays</option>
 		<option value={2}>Activity History Hole Risks</option>
-		<option value={3}>Wrapped</option>
+		<option value={3}>Wrapped (Beta)</option>
 	</select>
 </p>