From 43336c04b4c646699ca004acdda6638bb7b3d241 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 24 Dec 2023 03:05:43 -0800
Subject: refactor(tools): activity history to module

---
 src/lib/Tools/ActivityHistory.svelte      | 117 ------------------------------
 src/lib/Tools/ActivityHistory/Grid.svelte |  87 ++++++++++++++++++++++
 src/lib/Tools/ActivityHistory/Tool.svelte | 117 ++++++++++++++++++++++++++++++
 src/lib/Tools/ActivityHistoryGrid.svelte  |  87 ----------------------
 src/lib/Tools/Wrapped.svelte              |   2 +-
 src/routes/tools/+page.svelte             |   2 +-
 6 files changed, 206 insertions(+), 206 deletions(-)
 delete mode 100644 src/lib/Tools/ActivityHistory.svelte
 create mode 100644 src/lib/Tools/ActivityHistory/Grid.svelte
 create mode 100644 src/lib/Tools/ActivityHistory/Tool.svelte
 delete mode 100644 src/lib/Tools/ActivityHistoryGrid.svelte

(limited to 'src')

diff --git a/src/lib/Tools/ActivityHistory.svelte b/src/lib/Tools/ActivityHistory.svelte
deleted file mode 100644
index 811241fa..00000000
--- a/src/lib/Tools/ActivityHistory.svelte
+++ /dev/null
@@ -1,117 +0,0 @@
-<script lang="ts">
-	import {
-		activityHistory,
-		fillMissingDays,
-		type ActivityHistoryEntry
-	} from '$lib/AniList/activity';
-	import { onMount } from 'svelte';
-	import userIdentity from '../../stores/userIdentity';
-	import {
-		userIdentity as getUserIdentity,
-		type AniListAuthorisation
-	} from '$lib/AniList/identity';
-	import { clearAllParameters } from '../Utility/parameters';
-	import { domToBlob } from 'modern-screenshot';
-	import ActivityHistoryGrid from './ActivityHistoryGrid.svelte';
-
-	export let user: AniListAuthorisation;
-
-	let activityHistoryData: Promise<ActivityHistoryEntry[]>;
-	let currentUserIdentity = { name: '', id: -1 };
-	let generated = false;
-
-	onMount(async () => {
-		clearAllParameters();
-
-		if (user !== undefined) {
-			if ($userIdentity === '') userIdentity.set(JSON.stringify(await getUserIdentity(user)));
-
-			currentUserIdentity = JSON.parse($userIdentity);
-			currentUserIdentity.name = currentUserIdentity.name;
-			activityHistoryData = activityHistory(currentUserIdentity);
-		}
-	});
-
-	// const incrementDate = (date: Date): Date => {
-	// 	date.setDate(date.getDate() + 1);
-
-	// 	return date;
-	// };
-
-	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);
-
-					generated = true;
-				}
-
-				downloadWrapper.click();
-			});
-		}
-	};
-</script>
-
-{#if user === undefined}
-	Please log in to view this page.
-{:else}
-	{#await activityHistoryData}
-		Loading activity history ... 33%
-	{:then activities}
-		{#if activities === undefined}
-			Loading activities ... 66%
-		{:else}
-			{@const filledActivities = fillMissingDays(activities)}
-
-			<ActivityHistoryGrid {user} />
-
-			<p />
-
-			<div id="grid-final" />
-
-			{#if generated}
-				<p />
-			{/if}
-
-			<p><a href={'#'} on:click={screenshot}>Generate grid image</a></p>
-
-			<details open>
-				<summary>
-					Days in risk of developing an activity history hole. (days with one activity)
-				</summary>
-
-				<ul>
-					{#each filledActivities as activity}
-						{#if activity.amount === 0}
-							<li>
-								{new Date(
-									activity.date * 1000 + new Date().getTimezoneOffset() * 60 * 1000
-								).toDateString()}
-							</li>
-						{/if}
-					{/each}
-				</ul>
-			</details>
-		{/if}
-	{/await}
-{/if}
diff --git a/src/lib/Tools/ActivityHistory/Grid.svelte b/src/lib/Tools/ActivityHistory/Grid.svelte
new file mode 100644
index 00000000..a53c1c90
--- /dev/null
+++ b/src/lib/Tools/ActivityHistory/Grid.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import {
+		fillMissingDays,
+		type ActivityHistoryEntry,
+		activityHistory
+	} from '$lib/AniList/activity';
+	import { onMount } from 'svelte';
+	import userIdentity from '../../../stores/userIdentity';
+	import {
+		userIdentity as getUserIdentity,
+		type AniListAuthorisation
+	} from '$lib/AniList/identity';
+	import { clearAllParameters } from '../../Utility/parameters';
+
+	export let user: AniListAuthorisation;
+	export let activityData: ActivityHistoryEntry[] | null = null;
+
+	let activityHistoryData: ActivityHistoryEntry[];
+	let currentUserIdentity = { name: '', id: -1 };
+	let baseHue = Math.floor(Math.random() * 360);
+
+	onMount(async () => {
+		clearAllParameters();
+
+		if (user !== undefined) {
+			if ($userIdentity === '') userIdentity.set(JSON.stringify(await getUserIdentity(user)));
+
+			currentUserIdentity = JSON.parse($userIdentity);
+			currentUserIdentity.name = currentUserIdentity.name;
+			activityHistoryData = activityData || (await activityHistory(currentUserIdentity));
+		}
+	});
+
+	const gradientColour = (amount: number, maxAmount: number, baseHue: number) => {
+		const lightness = 100 - Math.round((amount / maxAmount) * 50);
+
+		return `hsl(${baseHue}, 100%, ${lightness}%)`;
+	};
+</script>
+
+{#if user === undefined}
+	Please log in to view this page.
+{:else if activityHistoryData === undefined}
+	Loading activity history ... 50%
+{:else}
+	{@const filledActivities = fillMissingDays(activityHistoryData)}
+	{@const highestActivity = Math.max(...filledActivities.map((activity) => activity.amount))}
+
+	<div class="grid">
+		{#each filledActivities as activity}
+			<div
+				class="grid-item"
+				style="background-color: {gradientColour(activity.amount, highestActivity, baseHue)}"
+				on:click={() => (baseHue = Math.floor(Math.random() * 360))}
+				on:keydown={() => {
+					return;
+				}}
+				role="button"
+				tabindex="0"
+				title={`Date: ${new Date(activity.date * 1000).toLocaleDateString()}\nAmount: ${
+					activity.amount
+				}`}
+			/>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(52, 1fr);
+		grid-template-rows: repeat(7, 1fr);
+		/* gap: 2px; */
+		grid-auto-flow: column;
+		width: min-content;
+		background-color: white;
+		border-radius: 3px;
+		overflow: hidden;
+	}
+	.grid-item {
+		width: 20px;
+		height: 20px;
+		/* width: 3.25vw; */
+		/* height: 3.25vw; */
+		/* border: 1px solid #ccc; */
+	}
+</style>
diff --git a/src/lib/Tools/ActivityHistory/Tool.svelte b/src/lib/Tools/ActivityHistory/Tool.svelte
new file mode 100644
index 00000000..f60774ee
--- /dev/null
+++ b/src/lib/Tools/ActivityHistory/Tool.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import {
+		activityHistory,
+		fillMissingDays,
+		type ActivityHistoryEntry
+	} from '$lib/AniList/activity';
+	import { onMount } from 'svelte';
+	import userIdentity from '../../../stores/userIdentity';
+	import {
+		userIdentity as getUserIdentity,
+		type AniListAuthorisation
+	} from '$lib/AniList/identity';
+	import { clearAllParameters } from '../../Utility/parameters';
+	import { domToBlob } from 'modern-screenshot';
+	import ActivityHistoryGrid from './Grid.svelte';
+
+	export let user: AniListAuthorisation;
+
+	let activityHistoryData: Promise<ActivityHistoryEntry[]>;
+	let currentUserIdentity = { name: '', id: -1 };
+	let generated = false;
+
+	onMount(async () => {
+		clearAllParameters();
+
+		if (user !== undefined) {
+			if ($userIdentity === '') userIdentity.set(JSON.stringify(await getUserIdentity(user)));
+
+			currentUserIdentity = JSON.parse($userIdentity);
+			currentUserIdentity.name = currentUserIdentity.name;
+			activityHistoryData = activityHistory(currentUserIdentity);
+		}
+	});
+
+	// const incrementDate = (date: Date): Date => {
+	// 	date.setDate(date.getDate() + 1);
+
+	// 	return date;
+	// };
+
+	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);
+
+					generated = true;
+				}
+
+				downloadWrapper.click();
+			});
+		}
+	};
+</script>
+
+{#if user === undefined}
+	Please log in to view this page.
+{:else}
+	{#await activityHistoryData}
+		Loading activity history ... 33%
+	{:then activities}
+		{#if activities === undefined}
+			Loading activities ... 66%
+		{:else}
+			{@const filledActivities = fillMissingDays(activities)}
+
+			<ActivityHistoryGrid {user} />
+
+			<p />
+
+			<div id="grid-final" />
+
+			{#if generated}
+				<p />
+			{/if}
+
+			<p><a href={'#'} on:click={screenshot}>Generate grid image</a></p>
+
+			<details open>
+				<summary>
+					Days in risk of developing an activity history hole. (days with one activity)
+				</summary>
+
+				<ul>
+					{#each filledActivities as activity}
+						{#if activity.amount === 0}
+							<li>
+								{new Date(
+									activity.date * 1000 + new Date().getTimezoneOffset() * 60 * 1000
+								).toDateString()}
+							</li>
+						{/if}
+					{/each}
+				</ul>
+			</details>
+		{/if}
+	{/await}
+{/if}
diff --git a/src/lib/Tools/ActivityHistoryGrid.svelte b/src/lib/Tools/ActivityHistoryGrid.svelte
deleted file mode 100644
index 5cc48d30..00000000
--- a/src/lib/Tools/ActivityHistoryGrid.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script lang="ts">
-	import {
-		fillMissingDays,
-		type ActivityHistoryEntry,
-		activityHistory
-	} from '$lib/AniList/activity';
-	import { onMount } from 'svelte';
-	import userIdentity from '../../stores/userIdentity';
-	import {
-		userIdentity as getUserIdentity,
-		type AniListAuthorisation
-	} from '$lib/AniList/identity';
-	import { clearAllParameters } from '../Utility/parameters';
-
-	export let user: AniListAuthorisation;
-	export let activityData: ActivityHistoryEntry[] | null = null;
-
-	let activityHistoryData: ActivityHistoryEntry[];
-	let currentUserIdentity = { name: '', id: -1 };
-	let baseHue = Math.floor(Math.random() * 360);
-
-	onMount(async () => {
-		clearAllParameters();
-
-		if (user !== undefined) {
-			if ($userIdentity === '') userIdentity.set(JSON.stringify(await getUserIdentity(user)));
-
-			currentUserIdentity = JSON.parse($userIdentity);
-			currentUserIdentity.name = currentUserIdentity.name;
-			activityHistoryData = activityData || (await activityHistory(currentUserIdentity));
-		}
-	});
-
-	const gradientColour = (amount: number, maxAmount: number, baseHue: number) => {
-		const lightness = 100 - Math.round((amount / maxAmount) * 50);
-
-		return `hsl(${baseHue}, 100%, ${lightness}%)`;
-	};
-</script>
-
-{#if user === undefined}
-	Please log in to view this page.
-{:else if activityHistoryData === undefined}
-	Loading activity history ... 50%
-{:else}
-	{@const filledActivities = fillMissingDays(activityHistoryData)}
-	{@const highestActivity = Math.max(...filledActivities.map((activity) => activity.amount))}
-
-	<div class="grid">
-		{#each filledActivities as activity}
-			<div
-				class="grid-item"
-				style="background-color: {gradientColour(activity.amount, highestActivity, baseHue)}"
-				on:click={() => (baseHue = Math.floor(Math.random() * 360))}
-				on:keydown={() => {
-					return;
-				}}
-				role="button"
-				tabindex="0"
-				title={`Date: ${new Date(activity.date * 1000).toLocaleDateString()}\nAmount: ${
-					activity.amount
-				}`}
-			/>
-		{/each}
-	</div>
-{/if}
-
-<style>
-	.grid {
-		display: grid;
-		grid-template-columns: repeat(52, 1fr);
-		grid-template-rows: repeat(7, 1fr);
-		/* gap: 2px; */
-		grid-auto-flow: column;
-		width: min-content;
-		background-color: white;
-		border-radius: 3px;
-		overflow: hidden;
-	}
-	.grid-item {
-		width: 20px;
-		height: 20px;
-		/* width: 3.25vw; */
-		/* height: 3.25vw; */
-		/* border: 1px solid #ccc; */
-	}
-</style>
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 24d598f7..28749d26 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -22,7 +22,7 @@
 	import { nbsp } from '../Utility/html';
 	import { env } from '$env/dynamic/public';
 	import { estimatedDayReading } from '$lib/Media/Manga/time';
-	import ActivityHistoryGrid from './ActivityHistoryGrid.svelte';
+	import ActivityHistoryGrid from './ActivityHistory/Grid.svelte';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
 	import { database } from '$lib/Database/activities';
 
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index ad9df7e6..47d18491 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ActivityHistory from '$lib/Tools/ActivityHistory.svelte';
+	import ActivityHistory from '$lib/Tools/ActivityHistory/Tool.svelte';
 	import Wrapped from '$lib/Tools/Wrapped.svelte';
 	import { browser } from '$app/environment';
 	import EpisodeDiscussionCollector from '$lib/Tools/EpisodeDiscussionCollector.svelte';
-- 
cgit v1.2.3