aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/User/BadgeWall/AWC.svelte97
-rw-r--r--src/lib/User/BadgeWall/badges.css16
-rw-r--r--src/routes/user/[user]/badges/+page.svelte107
3 files changed, 116 insertions, 104 deletions
diff --git a/src/lib/User/BadgeWall/AWC.svelte b/src/lib/User/BadgeWall/AWC.svelte
new file mode 100644
index 00000000..c42a13c5
--- /dev/null
+++ b/src/lib/User/BadgeWall/AWC.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+ import type { AWCBadgesGroup } from '$lib/Data/AWC';
+ import type { UserPreferences } from '$lib/Database/userPreferences';
+ import { cdn, thumbnail } from '$lib/Utility/image';
+ import FallbackBadge from './FallbackBadge.svelte';
+ import './badges.css';
+
+ export let awcPromise: Promise<Response>;
+ export let categoryFilter: string | null;
+ export let isOwner: boolean;
+ export let preferences: UserPreferences;
+
+ const awcBadgesGrouped = (awcResponse: string): AWCBadgesGroup[] => {
+ return Array.from(
+ new DOMParser().parseFromString(awcResponse, 'text/html').querySelectorAll('.container')
+ )
+ .map((c) => {
+ const container = c as HTMLDivElement;
+ const header = container.querySelector('.container-header') as HTMLDivElement;
+
+ if (!header) return;
+
+ if (!['Anime', 'Manga', 'Special'].includes(header.innerText)) return;
+
+ if (header.innerText === 'Special') {
+ return {
+ group: header.innerText,
+ badges: Array.from(container.querySelectorAll('.badge-display img')).map((b) => {
+ const badge = b as HTMLImageElement;
+
+ return {
+ link: '#',
+ description: badge.alt,
+ image: badge.src.includes('placeholder')
+ ? cdn('https://awc.moe/static/images/badge-placeholder.png')
+ : badge.src
+ };
+ })
+ };
+ }
+
+ return {
+ group: header.innerText,
+ badges: Array.from(container.querySelectorAll('.badge-display a')).map((b) => {
+ const badge = b as HTMLAnchorElement;
+ const image = badge.querySelector('img') as HTMLImageElement;
+
+ return {
+ link: badge.href,
+ description: image.alt,
+ image: image.src.includes('placeholder')
+ ? cdn('https://awc.moe/static/images/badge-placeholder.png')
+ : image.src
+ };
+ })
+ };
+ })
+ .filter((b) => b !== undefined) as AWCBadgesGroup[];
+ };
+</script>
+
+{#await awcPromise then badges}
+ {#await badges.clone().text() then text}
+ {@const parsedBadges = awcBadgesGrouped(text)}
+
+ {#if parsedBadges.length > 0}
+ {#each parsedBadges as group}
+ <details open={categoryFilter || isOwner ? false : true}>
+ <summary>
+ Anime Watching Club <span class="opaque">|</span>
+ {group.group}
+ </summary>
+
+ <p />
+
+ <div class="badges">
+ {#each group.badges as badge, index}
+ <div id={`badge-${index}`}>
+ <FallbackBadge
+ {badge}
+ source={cdn(thumbnail(badge.image))}
+ alternative={badge.description}
+ fallback={thumbnail(badge.image)}
+ hideOnError={preferences.hide_missing_badges}
+ awc
+ {index}
+ />
+ </div>
+ {/each}
+ </div>
+ </details>
+
+ <p />
+ {/each}
+ {/if}
+ {/await}
+{/await}
diff --git a/src/lib/User/BadgeWall/badges.css b/src/lib/User/BadgeWall/badges.css
new file mode 100644
index 00000000..19f8996f
--- /dev/null
+++ b/src/lib/User/BadgeWall/badges.css
@@ -0,0 +1,16 @@
+/* body {
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ background-color: #151f2e;
+ } */
+
+.badges {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
+ gap: 0.25rem;
+}
+
+.edit-row-2 {
+ margin-top: -1.25rem;
+}
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 772cfdfe..eb895dbd 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -1,4 +1,5 @@
<script lang="ts">
+ import AWC from './../../../../lib/User/BadgeWall/AWC.svelte';
import { userIdentity } from '$lib/Data/AniList/identity';
import { user, type User } from '$lib/Data/AniList/user';
import type { Badge } from '$lib/Database/userBadges';
@@ -29,7 +30,7 @@
import { thumbnail } from '$lib/Utility/image.js';
import authorisedJson from '$lib/Data/Static/authorised.json';
import identity from '$stores/identity';
- import type { AWCBadgesGroup } from '$lib/Data/AWC.js';
+ import '$lib/User/BadgeWall/badges.css';
export let data;
@@ -160,54 +161,6 @@
// });
// };
- const awcBadgesGrouped = (awcResponse: string): AWCBadgesGroup[] => {
- return Array.from(
- new DOMParser().parseFromString(awcResponse, 'text/html').querySelectorAll('.container')
- )
- .map((c) => {
- const container = c as HTMLDivElement;
- const header = container.querySelector('.container-header') as HTMLDivElement;
-
- if (!header) return;
-
- if (!['Anime', 'Manga', 'Special'].includes(header.innerText)) return;
-
- if (header.innerText === 'Special') {
- return {
- group: header.innerText,
- badges: Array.from(container.querySelectorAll('.badge-display img')).map((b) => {
- const badge = b as HTMLImageElement;
-
- return {
- link: '#',
- description: badge.alt,
- image: badge.src.includes('placeholder')
- ? cdn('https://awc.moe/static/images/badge-placeholder.png')
- : badge.src
- };
- })
- };
- }
-
- return {
- group: header.innerText,
- badges: Array.from(container.querySelectorAll('.badge-display a')).map((b) => {
- const badge = b as HTMLAnchorElement;
- const image = badge.querySelector('img') as HTMLImageElement;
-
- return {
- link: badge.href,
- description: image.alt,
- image: image.src.includes('placeholder')
- ? cdn('https://awc.moe/static/images/badge-placeholder.png')
- : image.src
- };
- })
- };
- })
- .filter((b) => b !== undefined) as AWCBadgesGroup[];
- };
-
const submitBadge = () => {
const imageURL = document.querySelector('input[name="image_url"]') as HTMLInputElement;
const activityURL = document.querySelector('input[name="activity_url"]') as HTMLInputElement;
@@ -537,42 +490,7 @@
<div id="badges">
{#if !preferences.hide_awc_badges}
- {#await awcPromise then badges}
- {#await badges.clone().text() then text}
- {@const parsedBadges = awcBadgesGrouped(text)}
-
- {#if parsedBadges.length > 0}
- {#each parsedBadges as group}
- <details open={categoryFilter || isOwner ? false : true}>
- <summary>
- Anime Watching Club <span class="opaque">|</span>
- {group.group}
- </summary>
-
- <p />
-
- <div class="badges">
- {#each group.badges as badge, index}
- <div id={`badge-${index}`}>
- <FallbackBadge
- {badge}
- source={cdn(thumbnail(badge.image))}
- alternative={badge.description}
- fallback={thumbnail(badge.image)}
- hideOnError={preferences.hide_missing_badges}
- awc
- {index}
- />
- </div>
- {/each}
- </div>
- </details>
-
- <p />
- {/each}
- {/if}
- {/await}
- {/await}
+ <AWC {awcPromise} {categoryFilter} {isOwner} {preferences} />
{/if}
{#if ungroupedBadges === null}
@@ -1161,22 +1079,3 @@
>Toggle Visibility</button
>
</Popup>
-
-<style>
- /* body {
- margin: 0;
- padding: 0;
- text-align: center;
- background-color: #151f2e;
- } */
-
- .badges {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
- gap: 0.25rem;
- }
-
- .edit-row-2 {
- margin-top: -1.25rem;
- }
-</style>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-22 02:09:20 +0000