aboutsummaryrefslogtreecommitdiff
path: root/src/lib/User/BadgeWall/AWC.svelte
blob: 49431494a8ff202080b452e7c45ca9d799601cda (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
99
100
<script lang="ts">
  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')
    )
      .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}
  {#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>

            <p></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></p>
        {/each}
      {/if}
    {/await}
  {/if}
{/await}