aboutsummaryrefslogtreecommitdiff
path: root/src/lib/User/BadgeWall/AWC.svelte
blob: 70f58b3e351b4c3f9e77c88267fa09bb4a0ab20d (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<script lang="ts">
	import type { AWCBadgesGroup } from '$lib/Data/awc';
	import type { UserPreferences } from '$lib/Database/Supabase/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}
									{preferences}
								/>
							</div>
						{/each}
					</div>
				</details>

				<p />
			{/each}
		{/if}
	{/await}
{/await}