feat(wrapped): activity history panel

2 files changed, 112 insertions, 3 deletions

diff --git a/src/lib/Tools/ActivityHistoryGrid.svelte b/src/lib/Tools/ActivityHistoryGrid.svelte
new file mode 100644
index 00000000..289afc01
--- /dev/null
+++ b/src/lib/Tools/ActivityHistoryGrid.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import {
+		activityHistory,
+		fillMissingDays,
+		type ActivityHistoryEntry
+	} from '$lib/AniList/activity.js';
+	import { onMount } from 'svelte';
+	import userIdentity from '../../stores/userIdentity.js';
+	import {
+		userIdentity as getUserIdentity,
+		type AniListAuthorisation
+	} from '$lib/AniList/identity';
+	import { clearAllParameters } from './tool.js';
+
+	export let user: AniListAuthorisation;
+
+	let activityHistoryData: Promise<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 = activityHistory(currentUserIdentity);
+		}
+	});
+
+	// const incrementDate = (date: Date): Date => {
+	// 	date.setDate(date.getDate() + 1);
+
+	// 	return date;
+	// };
+
+	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}
+	{#await activityHistoryData}
+		Loading ...
+	{:then activities}
+		{#if activities === undefined}
+			Loading ...
+		{:else}
+			{@const filledActivities = fillMissingDays(activities)}
+			{@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}
+	{/await}
+{/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;
+	}
+	.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 ed8e700e..3c394a0d 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -6,7 +6,7 @@
 	} from '$lib/AniList/identity';
 	import { onMount } from 'svelte';
 	import { wrapped } from '$lib/AniList/wrapped.js';
-	import { activityHistory, fillMissingDays } from '$lib/AniList/activity.js';
+	import { activityHistory as getActivityHistory, fillMissingDays } from '$lib/AniList/activity.js';
 	import { Type, mediaListCollection, type Media } from '$lib/AniList/media.js';
 	import anime from '../../stores/anime.js';
 	import lastPruneTimes from '../../stores/lastPruneTimes.js';
@@ -18,6 +18,7 @@
 	import { clearAllParameters } from './tool.js';
 	import { env } from '$env/dynamic/public';
 	import { estimatedDayReading } from '$lib/Media/Manga/time';
+	import ActivityHistoryGrid from './ActivityHistoryGrid.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -38,6 +39,7 @@
 	let highestRatedCount = 5;
 	let mounted = false;
 	let generated = false;
+	let activityHistory = true;
 
 	$: {
 		if (browser && mounted) {
@@ -50,6 +52,7 @@
 			$page.url.searchParams.set('width', width.toString());
 			$page.url.searchParams.set('lightMode', lightMode.toString());
 			$page.url.searchParams.set('highestRatedCount', highestRatedCount.toString());
+			$page.url.searchParams.set('activityHistory', activityHistory.toString());
 
 			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
 		}
@@ -116,7 +119,8 @@
 			'includeRepeats',
 			'width',
 			'forceDark',
-			'highestRatedCount'
+			'highestRatedCount',
+			'activityHistory'
 		]);
 
 		if (browser) {
@@ -129,6 +133,7 @@
 			width = parseInt($page.url.searchParams.get('width') || '980', 10);
 			lightMode = $page.url.searchParams.get('lightMode') === 'true';
 			highestRatedCount = parseInt($page.url.searchParams.get('highestRatedCount') || '5', 10);
+			activityHistory = $page.url.searchParams.get('activityHistory') === 'true';
 		}
 
 		if (user !== undefined) {
@@ -308,7 +313,7 @@
 							Messages: {wrapped.activities.messageCount}
 						</div>
 						<div>
-							Days Active: {#await activityHistory(currentUserIdentity)}
+							Days Active: {#await getActivityHistory(currentUserIdentity)}
 								Loading&nbsp;...
 							{:then activities}
 								{#if activities === undefined}
@@ -405,6 +410,13 @@
 					</div>
 				</div>
 			</div>
+			{#if activityHistory}
+				<div class="categories-grid" style="padding-top: 0;">
+					<div class="category-grid pure-category" id="watermark">
+						<ActivityHistoryGrid {user} />
+					</div>
+				</div>
+			{/if}
 			{#if watermark}
 				<div class="categories-grid" style="padding-top: 0;">
 					<div class="category-grid pure-category" id="watermark">
@@ -424,6 +436,7 @@
 			<summary>Options</summary>
 			<div id="options">
 				<input type="checkbox" bind:checked={watermark} /> Enable watermark<br />
+				<input type="checkbox" bind:checked={activityHistory} /> Enable activity history<br />
 				<input type="checkbox" bind:checked={transparency} /> Enable background transparency<br />
 				<input type="checkbox" bind:checked={lightMode} />
 				Enable light mode<br />