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
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<script lang="ts">
import Spacer from "$lib/Layout/Spacer.svelte";
import type { AWCBadgesGroup } from "$lib/Data/awc";
import { cdn, thumbnail } from "$lib/Utility/image";
import type { Preferences } from "../../../graphql/$types";
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: Preferences;
const awcBadgesGrouped = (awcResponse: string): AWCBadgesGroup[] => {
return Array.from(
new DOMParser()
.parseFromString(awcResponse, "text/html")
.querySelectorAll(".container"),
).flatMap((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,
};
},
),
},
];
}) as AWCBadgesGroup[];
};
</script>
{#await awcPromise then badges}
{#if 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>
<Spacer />
<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>
<Spacer />
{/each}
{/if}
{/await}
{/if}
{/await}
|