feat(activities): screenshot

2 files changed, 43 insertions, 4 deletions

diff --git a/src/lib/AniList/activity.ts b/src/lib/AniList/activity.ts
index 2c008582..eebd81cf 100644
--- a/src/lib/AniList/activity.ts
+++ b/src/lib/AniList/activity.ts
@@ -18,11 +18,11 @@ export const fillMissingDays = (
 	const currentDate = firstDate;
 
 	while (currentDate <= lastDate) {
-		const current_unix_timestamp = currentDate.getTime();
+		const currentUnixTimestamp = currentDate.getTime();
 		let found = false;
 
 		for (let i = 0; i < activities.length; i++)
-			if (activities[i].date * 1000 + timezoneOffset === current_unix_timestamp) {
+			if (activities[i].date * 1000 + timezoneOffset === currentUnixTimestamp) {
 				found = true;
 
 				break;
@@ -30,7 +30,7 @@ export const fillMissingDays = (
 
 		if (!found)
 			activities.push({
-				date: current_unix_timestamp / 1000,
+				date: currentUnixTimestamp / 1000,
 				amount: 0
 			});
 
diff --git a/src/lib/Tools/ActivityHistory.svelte b/src/lib/Tools/ActivityHistory.svelte
index 57037f15..bbadf6fb 100644
--- a/src/lib/Tools/ActivityHistory.svelte
+++ b/src/lib/Tools/ActivityHistory.svelte
@@ -11,6 +11,7 @@
 		type AniListAuthorisation
 	} from '$lib/AniList/identity';
 	import { clearAllParameters } from './tool.js';
+	import { domToBlob } from 'modern-screenshot';
 
 	export let user: AniListAuthorisation;
 
@@ -41,6 +42,37 @@
 
 		return `hsl(${baseHue}, 100%, ${lightness}%)`;
 	};
+
+	const screenshot = async () => {
+		let element = document.querySelector('.grid') as HTMLElement;
+
+		if (element !== null) {
+			domToBlob(element, {
+				quality: 1,
+				scale: 2
+			}).then((blob) => {
+				const downloadWrapper = document.createElement('a');
+				const image = document.createElement('img');
+				const object = (window.URL || window.webkitURL || window || {}).createObjectURL(blob);
+
+				downloadWrapper.href = object;
+				downloadWrapper.target = '_blank';
+				image.src = object;
+
+				downloadWrapper.appendChild(image);
+
+				const gridFinal = document.getElementById('grid-final');
+
+				if (gridFinal !== null) {
+					gridFinal.innerHTML = '';
+
+					gridFinal.appendChild(downloadWrapper);
+				}
+
+				downloadWrapper.click();
+			});
+		}
+	};
 </script>
 
 <blockquote>
@@ -76,6 +108,12 @@
 
 			<p />
 
+			<div id="grid-final" />
+
+			<p />
+
+			<p><a href={'#'} on:click={screenshot}>Generate grid image</a></p>
+
 			<ul>
 				{#each fillMissingDays(activities) as activity}
 					{#if activity.amount === 0}
@@ -98,7 +136,8 @@
 		grid-template-rows: repeat(7, 1fr);
 		/* gap: 2px; */
 		grid-auto-flow: column;
-		width: fit-content;
+		width: min-content;
+		background-color: white;
 	}
 	.grid-item {
 		width: 20px;