diff options
Diffstat (limited to 'src/lib/Tools/ActivityHistoryGrid.svelte')
| -rw-r--r-- | src/lib/Tools/ActivityHistoryGrid.svelte | 87 |
1 files changed, 0 insertions, 87 deletions
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> |