aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/Tools/ActivityHistory/Tool.svelte18
-rw-r--r--src/lib/Tools/Birthdays.svelte3
-rw-r--r--src/lib/Tools/EpisodeDiscussionCollector.svelte114
-rw-r--r--src/lib/Tools/RandomFollower.svelte88
-rw-r--r--src/lib/Tools/SequelSpy.svelte88
-rw-r--r--src/lib/Tools/Wrapped.svelte122
-rw-r--r--src/routes/tools/+page.svelte43
7 files changed, 246 insertions, 230 deletions
diff --git a/src/lib/Tools/ActivityHistory/Tool.svelte b/src/lib/Tools/ActivityHistory/Tool.svelte
index fe0b4237..5985e5c8 100644
--- a/src/lib/Tools/ActivityHistory/Tool.svelte
+++ b/src/lib/Tools/ActivityHistory/Tool.svelte
@@ -83,17 +83,21 @@
{:else}
{@const filledActivities = fillMissingDays(activities)}
- <ActivityHistoryGrid {user} />
+ <div class="card">
+ <ActivityHistoryGrid {user} />
- <p />
+ <p />
- <div id="grid-final" />
+ <div id="grid-final" />
- {#if generated}
- <p />
- {/if}
+ {#if generated}
+ <p />
+ {/if}
- <p><button on:click={screenshot}>Generate grid image</button></p>
+ <button on:click={screenshot}>Generate grid image</button>
+ </div>
+
+ <p />
<details open>
<summary>
diff --git a/src/lib/Tools/Birthdays.svelte b/src/lib/Tools/Birthdays.svelte
index 10738e91..eda5e90e 100644
--- a/src/lib/Tools/Birthdays.svelte
+++ b/src/lib/Tools/Birthdays.svelte
@@ -109,7 +109,7 @@
<div id="characters">
{#each birthdays as birthday}
- <div>
+ <div class="card card-small">
<a
href={`https://anilist.co/search/characters?search=${encodeURIComponent(
birthday.name
@@ -135,5 +135,6 @@
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
grid-gap: 0.25%;
grid-row-gap: 1rem;
+ align-items: start;
}
</style>
diff --git a/src/lib/Tools/EpisodeDiscussionCollector.svelte b/src/lib/Tools/EpisodeDiscussionCollector.svelte
index 447333a8..2399b125 100644
--- a/src/lib/Tools/EpisodeDiscussionCollector.svelte
+++ b/src/lib/Tools/EpisodeDiscussionCollector.svelte
@@ -9,62 +9,64 @@
onMount(clearAllParameters);
</script>
-<p>
- <!-- svelte-ignore missing-declaration -->
- <input
- type="text"
- placeholder="Username"
- bind:value={searchInput}
- on:keypress={(e) => {
- if (e.key === 'Enter') {
- searchInputFinal = searchInput;
+<div class="card">
+ <p>
+ <!-- svelte-ignore missing-declaration -->
+ <input
+ type="text"
+ placeholder="Username"
+ bind:value={searchInput}
+ on:keypress={(e) => {
+ if (e.key === 'Enter') {
+ searchInputFinal = searchInput;
- // eslint-disable-next-line no-undef
- umami.track('Collect Episode Discussions');
- }
- }}
- />
- <button
- class="button-lined"
- on:click={() => (searchInputFinal = searchInput)}
- title="Or click your Enter key"
- data-umami-event="Collect Episode Discussions"
- >
- Search
- </button>
-</p>
+ // eslint-disable-next-line no-undef
+ umami.track('Collect Episode Discussions');
+ }
+ }}
+ />
+ <button
+ class="button-lined"
+ on:click={() => (searchInputFinal = searchInput)}
+ title="Or click your Enter key"
+ data-umami-event="Collect Episode Discussions"
+ >
+ Search
+ </button>
+ </p>
-{#if searchInputFinal !== ''}
- {#await threads(searchInputFinal)}
- Loading forum threads ... 50%
- {:then threads}
- <ul>
- {#each threads
- .filter((thread) => thread.title.includes('[Spoilers]') && thread.title.includes('Episode'))
- .sort((a, b) => b.createdAt - a.createdAt) as thread}
- <li>
- <a href={`https://anilist.co/forum/thread/${thread.id}`} target="_blank">
- {thread.title.replace('[Spoilers]', '')}
- </a>
- </li>
- {/each}
- </ul>
- {:catch}
- <p>
- Threads could not be loaded. You might have been <a
- href="https://en.wikipedia.org/wiki/Rate_limiting"
- target="_blank">rate limited</a
- >.
- </p>
- <p>
- Try again in a few minutes. If the problem persists, please contact <a
- href="https://anilist.co/user/fuwn"
- target="_blank">@fuwn</a
- > on AniList.
- </p>
- {/await}
-{:else}
- <p />
+ {#if searchInputFinal !== ''}
+ {#await threads(searchInputFinal)}
+ Loading forum threads ... 50%
+ {:then threads}
+ <ul>
+ {#each threads
+ .filter((thread) => thread.title.includes('[Spoilers]') && thread.title.includes('Episode'))
+ .sort((a, b) => b.createdAt - a.createdAt) as thread}
+ <li>
+ <a href={`https://anilist.co/forum/thread/${thread.id}`} target="_blank">
+ {thread.title.replace('[Spoilers]', '')}
+ </a>
+ </li>
+ {/each}
+ </ul>
+ {:catch}
+ <p>
+ Threads could not be loaded. You might have been <a
+ href="https://en.wikipedia.org/wiki/Rate_limiting"
+ target="_blank">rate limited</a
+ >.
+ </p>
+ <p>
+ Try again in a few minutes. If the problem persists, please contact <a
+ href="https://anilist.co/user/fuwn"
+ target="_blank">@fuwn</a
+ > on AniList.
+ </p>
+ {/await}
+ {:else}
+ <p />
- Enter a username to search for to continue.
-{/if}
+ Enter a username to search for to continue.
+ {/if}
+</div>
diff --git a/src/lib/Tools/RandomFollower.svelte b/src/lib/Tools/RandomFollower.svelte
index 88c1bd85..7824a424 100644
--- a/src/lib/Tools/RandomFollower.svelte
+++ b/src/lib/Tools/RandomFollower.svelte
@@ -11,48 +11,50 @@
onMount(clearAllParameters);
</script>
-<p>
- <!-- svelte-ignore missing-declaration -->
- <input
- type="text"
- placeholder="Username"
- bind:value={input}
- on:keypress={(e) => {
- if (e.key === 'Enter') {
- submit = input;
- randomSeed = Math.random();
-
- // eslint-disable-next-line no-undef
- umami.track('Random Follower');
- }
- }}
- />
- <button
- class="button-lined"
- on:click={() => (submit = input) && (randomSeed = Math.random())}
- title="Or click your Enter key"
- data-umami-event="Random Follower"
- >
- Generate
- </button>
-</p>
-
-{#if submit !== ''}
- {#await followers(submit)}
- Loading followers ... 50%
- {:then users}
- {@const user = users[Math.floor(randomSeed * users.length)]}
-
+<div class="card">
+ <p>
+ <!-- svelte-ignore missing-declaration -->
+ <input
+ type="text"
+ placeholder="Username"
+ bind:value={input}
+ on:keypress={(e) => {
+ if (e.key === 'Enter') {
+ submit = input;
+ randomSeed = Math.random();
+
+ // eslint-disable-next-line no-undef
+ umami.track('Random Follower');
+ }
+ }}
+ />
+ <button
+ class="button-lined"
+ on:click={() => (submit = input) && (randomSeed = Math.random())}
+ title="Or click your Enter key"
+ data-umami-event="Random Follower"
+ >
+ Generate
+ </button>
+ </p>
+
+ {#if submit !== ''}
+ {#await followers(submit)}
+ Loading followers ... 50%
+ {:then users}
+ {@const user = users[Math.floor(randomSeed * users.length)]}
+
+ <p />
+
+ <a href={`https://anilist.co/user/${user.id}`} target="_blank">
+ {user.name}
+ </a>
+ {:catch}
+ <RateLimited type="Followers" list={false} />
+ {/await}
+ {:else}
<p />
- <a href={`https://anilist.co/user/${user.id}`} target="_blank">
- {user.name}
- </a>
- {:catch}
- <RateLimited type="Followers" list={false} />
- {/await}
-{:else}
- <p />
-
- Enter a username to search for to continue.
-{/if}
+ Enter a username to search for to continue.
+ {/if}
+</div>
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index c5d9c4a2..ea6f74d8 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -40,54 +40,56 @@
airingTime(prequel as unknown as Media, null);
</script>
-<p>
- <select bind:value={season}>
- <option value="WINTER">Winter</option>
- <option value="SPRING">Spring</option>
- <option value="SUMMER">Summer</option>
- <option value="FALL">Fall</option>
- </select>
- <input type="number" bind:value={year} />
-</p>
+<div class="card">
+ <p>
+ <select bind:value={season}>
+ <option value="WINTER">Winter</option>
+ <option value="SPRING">Spring</option>
+ <option value="SUMMER">Summer</option>
+ <option value="FALL">Fall</option>
+ </select>
+ <input type="number" bind:value={year} />
+ </p>
-{#await currentPrequels}
- <p>Loading prequels ... 50%</p>
-{:then currentPrequels}
- <ul>
- {#each currentPrequels as prequel}
- <li
- on:mouseenter={() => {
- const response = onMouseEnter(prequel);
+ {#await currentPrequels}
+ <p>Loading prequels ... 50%</p>
+ {:then currentPrequels}
+ <ul>
+ {#each currentPrequels as prequel}
+ <li
+ on:mouseenter={() => {
+ const response = onMouseEnter(prequel);
- hovering = response.hovering;
- hoveredMedia = response.media;
- }}
- on:mouseleave={() => {
- const response = onMouseLeave();
+ hovering = response.hovering;
+ hoveredMedia = response.media;
+ }}
+ on:mouseleave={() => {
+ const response = onMouseLeave();
- hovering = response.hovering;
- hoveredMedia = response.media;
- }}
- on:mousemove={(e) => {
- const response = onMouseMove(e);
+ hovering = response.hovering;
+ hoveredMedia = response.media;
+ }}
+ on:mousemove={(e) => {
+ const response = onMouseMove(e);
- imageStyle = response.style;
- }}
- >
- <a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
- <MediaTitle title={prequel.title} />
- </a>
- <span style="opacity: 50%;">|</span>
- {prequel.seen}<span style="opacity: 50%;">/{prequel.episodes}</span>
- {@html prequelAiringTime(prequel)}
- </li>
- {/each}
- </ul>
-{/await}
+ imageStyle = response.style;
+ }}
+ >
+ <a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
+ <MediaTitle title={prequel.title} />
+ </a>
+ <span style="opacity: 50%;">|</span>
+ {prequel.seen}<span style="opacity: 50%;">/{prequel.episodes}</span>
+ {@html prequelAiringTime(prequel)}
+ </li>
+ {/each}
+ </ul>
+ {/await}
-<p />
+ <p />
-The count ratio is the number of episodes you've seen of any direct prequels, and the total number
-of episodes of all direct prequels.
+ The count ratio is the number of episodes you've seen of any direct prequels, and the total number
+ of episodes of all direct prequels.
+</div>
<HoverCover {hovering} {hoveredMedia} {imageStyle} />
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 83b58cd1..0cd124a2 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -493,54 +493,56 @@
{@html nbsp('Loading user data ...')}
{:then wrapped}
<div id="list-container">
- <div
- id="wrapped"
- class:light-theme={lightMode}
- style={`width: ${width}px; flex-shrink: 0;`}
- class:transparent={transparency}
- >
- {#if !disableActivityHistory && activityHistoryPosition === 'TOP' && activities.length > 0 && selectedYear === currentYear}
- <ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
- {/if}
- <div class="categories-grid" style="padding-bottom: 0;">
- <Activity
- {wrapped}
- identity={currentUserIdentity}
- year={selectedYear}
- {activities}
- {useFullActivityHistory}
+ <div class="card">
+ <div
+ id="wrapped"
+ class:light-theme={lightMode}
+ style={`width: ${width}px; flex-shrink: 0;`}
+ class:transparent={transparency}
+ >
+ {#if !disableActivityHistory && activityHistoryPosition === 'TOP' && activities.length > 0 && selectedYear === currentYear}
+ <ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
+ {/if}
+ <div class="categories-grid" style="padding-bottom: 0;">
+ <Activity
+ {wrapped}
+ identity={currentUserIdentity}
+ year={selectedYear}
+ {activities}
+ {useFullActivityHistory}
+ {updateWidth}
+ />
+ <Anime {animeList} {minutesWatched} {episodes} />
+ <Manga {mangaList} {chapters} />
+ </div>
+ {#if !disableActivityHistory && activityHistoryPosition === 'BELOW_TOP' && activities.length > 0 && selectedYear === currentYear}
+ <ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
+ {/if}
+ <MediaPanel
+ {animeList}
+ {mangaList}
+ {highestRatedMediaPercentage}
+ {highestRatedCount}
{updateWidth}
+ {wrapped}
+ {animeMostTitle}
+ {mangaMostTitle}
/>
- <Anime {animeList} {minutesWatched} {episodes} />
- <Manga {mangaList} {chapters} />
+ {#if topMedia && topGenresTags && ((topMedia.topGenreMedia && topMedia.genres.length > 0) || (topMedia.topTagMedia && topMedia.tags.length > 0))}
+ <MediaExtras
+ {topMedia}
+ {genreTagTitle}
+ {highestRatedGenreTagPercentage}
+ {updateWidth}
+ />
+ {/if}
+ {#if !disableActivityHistory && activityHistoryPosition === 'ORIGINAL' && activities.length > 0 && selectedYear === currentYear}
+ <ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
+ {/if}
+ {#if watermark}
+ <Watermark />
+ {/if}
</div>
- {#if !disableActivityHistory && activityHistoryPosition === 'BELOW_TOP' && activities.length > 0 && selectedYear === currentYear}
- <ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
- {/if}
- <MediaPanel
- {animeList}
- {mangaList}
- {highestRatedMediaPercentage}
- {highestRatedCount}
- {updateWidth}
- {wrapped}
- {animeMostTitle}
- {mangaMostTitle}
- />
- {#if topMedia && topGenresTags && ((topMedia.topGenreMedia && topMedia.genres.length > 0) || (topMedia.topTagMedia && topMedia.tags.length > 0))}
- <MediaExtras
- {topMedia}
- {genreTagTitle}
- {highestRatedGenreTagPercentage}
- {updateWidth}
- />
- {/if}
- {#if !disableActivityHistory && activityHistoryPosition === 'ORIGINAL' && activities.length > 0 && selectedYear === currentYear}
- <ActivityHistory {user} {activities} year={selectedYear} {activityHistoryPosition} />
- {/if}
- {#if watermark}
- <Watermark />
- {/if}
</div>
<div class="list">
<p>
@@ -549,6 +551,22 @@
</button>
</p>
+ <div class:card={generated}>
+ <div id="wrapped-final" />
+
+ {#if generated}
+ <p />
+
+ <blockquote>
+ Click on the image to download, or right click and select "Save Image As...".
+ </blockquote>
+ {/if}
+ </div>
+
+ {#if generated}
+ <p />
+ {/if}
+
<details open>
<summary>Options</summary>
<div id="options">
@@ -596,8 +614,6 @@
Width adjustment<br />
</details>
- <p />
-
<details open>
<summary>Calculation</summary>
@@ -647,18 +663,6 @@
</details>
</div>
</details>
-
- <p />
-
- <div id="wrapped-final" />
-
- {#if generated}
- <p />
-
- <blockquote>
- Click on the image to download, or right click and select "Save Image As...".
- </blockquote>
- {/if}
</div>
</div>
{:catch}
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 4d2da5cf..066ccd2f 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -69,10 +69,9 @@
</select>
</blockquote>
-<div class="card">
- {#if !Object.keys(tools).includes(tool)}
- <HeadTitle route="Tools" path="/tools" />
-
+{#if !Object.keys(tools).includes(tool)}
+ <HeadTitle route="Tools" path="/tools" />
+ <div class="card">
<p>Tool not found.</p>
<blockquote>
@@ -84,10 +83,12 @@
{suggestion === '...' ? '...' : tools[suggestion]}</a
>"?
</blockquote>
- {:else}
- <HeadTitle route={tools[tool].name} path={`/tools?tool=${tool}`} />
+ </div>
+{:else}
+ <HeadTitle route={tools[tool].name} path={`/tools?tool=${tool}`} />
- {#if tool === 'default'}
+ {#if tool === 'default'}
+ <div class="card">
<p>Select a tool to continue.</p>
<ul>
@@ -107,18 +108,18 @@
Have any requests for cool tools that you think others might find useful? Send a message to
<a href="https://anilist.co/user/fuwn" target="_blank" rel="noopener">@fuwn</a> on AniList!
- {:else if tool === 'activity_history'}
- <ActivityHistory user={data.user} />
- {:else if tool === 'wrapped'}
- <Wrapped user={data.user} />
- {:else if tool === 'discussions'}
- <EpisodeDiscussionCollector />
- {:else if tool === 'birthdays'}
- <CharacterBirthdays />
- {:else if tool === 'sequel_spy'}
- <SequelSpy user={data.user} />
- {:else if tool === 'random_follower'}
- <RandomFollower />
- {/if}
+ </div>
+ {:else if tool === 'activity_history'}
+ <ActivityHistory user={data.user} />
+ {:else if tool === 'wrapped'}
+ <Wrapped user={data.user} />
+ {:else if tool === 'discussions'}
+ <EpisodeDiscussionCollector />
+ {:else if tool === 'birthdays'}
+ <CharacterBirthdays />
+ {:else if tool === 'sequel_spy'}
+ <SequelSpy user={data.user} />
+ {:else if tool === 'random_follower'}
+ <RandomFollower />
{/if}
-</div>
+{/if}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-19 11:31:48 +0000