diff options
| author | Fuwn <[email protected]> | 2026-03-01 16:20:51 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-03-01 16:21:02 -0800 |
| commit | eae5d24d9e79e59a19d4721caaeaa0ca650ecb33 (patch) | |
| tree | 1b685bb248e051dfa26d2bfdebe6689402dd93c5 /src/lib/User | |
| parent | chore(tooling): remove legacy eslint and prettier (diff) | |
| download | due.moe-eae5d24d9e79e59a19d4721caaeaa0ca650ecb33.tar.xz due.moe-eae5d24d9e79e59a19d4721caaeaa0ca650ecb33.zip | |
chore(biome): drop formatter style overrides
Diffstat (limited to 'src/lib/User')
| -rw-r--r-- | src/lib/User/BadgeWall/AWC.svelte | 102 | ||||
| -rw-r--r-- | src/lib/User/BadgeWall/BadgePreview.svelte | 151 | ||||
| -rw-r--r-- | src/lib/User/BadgeWall/Badges.svelte | 20 | ||||
| -rw-r--r-- | src/lib/User/BadgeWall/FallbackBadge.svelte | 74 | ||||
| -rw-r--r-- | src/lib/User/BadgeWall/badge.ts | 22 | ||||
| -rw-r--r-- | src/lib/User/BadgeWall/badges.css | 8 |
6 files changed, 201 insertions, 176 deletions
diff --git a/src/lib/User/BadgeWall/AWC.svelte b/src/lib/User/BadgeWall/AWC.svelte index 6d8dcf76..da01e484 100644 --- a/src/lib/User/BadgeWall/AWC.svelte +++ b/src/lib/User/BadgeWall/AWC.svelte @@ -1,10 +1,10 @@ <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'; +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; @@ -12,53 +12,61 @@ 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; + 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 (!header) return []; - if (!['Anime', 'Manga', 'Special'].includes(header.innerText)) 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; + 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 { + 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 [ + { + 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[]; + 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> diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte index cf0cb284..fd323564 100644 --- a/src/lib/User/BadgeWall/BadgePreview.svelte +++ b/src/lib/User/BadgeWall/BadgePreview.svelte @@ -1,13 +1,13 @@ <script lang="ts"> -import Spacer from '$lib/Layout/Spacer.svelte'; -import { thumbnail } from '$lib/Utility/image'; -import type { Badge } from '$lib/Database/SB/User/badges'; -import { cdn } from '$lib/Utility/image'; -import { databaseTimeToDate } from '$lib/Utility/time'; -import locale from '$stores/locale'; -import { onMount } from 'svelte'; -import root from '$lib/Utility/root'; -import ParallaxImage from '$lib/Image/ParallaxImage.svelte'; +import Spacer from "$lib/Layout/Spacer.svelte"; +import { thumbnail } from "$lib/Utility/image"; +import type { Badge } from "$lib/Database/SB/User/badges"; +import { cdn } from "$lib/Utility/image"; +import { databaseTimeToDate } from "$lib/Utility/time"; +import locale from "$stores/locale"; +import { onMount } from "svelte"; +import root from "$lib/Utility/root"; +import ParallaxImage from "$lib/Image/ParallaxImage.svelte"; export let selectedBadge: Badge | undefined; export let onNext: () => void = () => undefined; @@ -15,89 +15,98 @@ export let onPrevious: () => void = () => undefined; export let hasNext: boolean; export let hasPrevious: boolean; -let source = cdn(thumbnail(selectedBadge?.image || '')) || ''; +let source = cdn(thumbnail(selectedBadge?.image || "")) || ""; let badgeReference: HTMLImageElement; $: { - if (selectedBadge && selectedBadge.image) { - const image = new Image(); - - image.src = cdn(selectedBadge.image) || ''; - image.onload = () => { - source = image.src; - }; - } + if (selectedBadge && selectedBadge.image) { + const image = new Image(); + + image.src = cdn(selectedBadge.image) || ""; + image.onload = () => { + source = image.src; + }; + } } $: { - if (selectedBadge) - fetch(root(`/api/badges?incrementClickCount=${selectedBadge.id}`), { - method: 'PUT' - }); + if (selectedBadge) + fetch(root(`/api/badges?incrementClickCount=${selectedBadge.id}`), { + method: "PUT", + }); } onMount(() => { - badgeReference = document.querySelector('.badge-container-image') as HTMLImageElement; + badgeReference = document.querySelector( + ".badge-container-image", + ) as HTMLImageElement; - const handleClickOutside = (event: MouseEvent) => { - if ((event.target as HTMLElement).classList.contains('popup')) selectedBadge = undefined; - }; + const handleClickOutside = (event: MouseEvent) => { + if ((event.target as HTMLElement).classList.contains("popup")) + selectedBadge = undefined; + }; - document.addEventListener('click', handleClickOutside); + document.addEventListener("click", handleClickOutside); - return () => { - document.removeEventListener('click', handleClickOutside); - }; + return () => { + document.removeEventListener("click", handleClickOutside); + }; }); const classifySource = (source: string) => { - let name = source; - const sourceLower = source.toLowerCase(); - - if (sourceLower.includes('pixiv.net')) { - name = 'Pixiv'; - } else if (sourceLower.includes('twitter.com') || sourceLower.includes('x.com')) { - name = 'X (Twitter)'; - } else if (sourceLower.includes('zerochan.net')) { - name = 'Zerochan'; - } else if (sourceLower.includes('imgur.com')) { - name = 'Imgur'; - } else if (sourceLower.includes('lofter.com')) { - name = 'Lofter'; - } - - return `<a href="${source}" target="_blank">${name}</a>`; + let name = source; + const sourceLower = source.toLowerCase(); + + if (sourceLower.includes("pixiv.net")) { + name = "Pixiv"; + } else if ( + sourceLower.includes("twitter.com") || + sourceLower.includes("x.com") + ) { + name = "X (Twitter)"; + } else if (sourceLower.includes("zerochan.net")) { + name = "Zerochan"; + } else if (sourceLower.includes("imgur.com")) { + name = "Imgur"; + } else if (sourceLower.includes("lofter.com")) { + name = "Lofter"; + } + + return `<a href="${source}" target="_blank">${name}</a>`; }; const classifyDesigner = (designer: string) => { - let name = designer; - let userLink = designer; - const designerLower = designer.toLowerCase(); - const anilistUser = designer.match(/https?:\/\/anilist\.co\/user\/([^/]+)\/?/); - - if (anilistUser) { - name = anilistUser[1]; - } else if (designerLower.startsWith('@')) { - name = designer.replace('@', ''); - userLink = `https://anilist.co/user/${name}/`; - } else if (!designerLower.startsWith('http')) { - userLink = `https://anilist.co/user/${name}/`; - } - - return `<a href="${userLink}" target="_blank">@${name}</a>`; + let name = designer; + let userLink = designer; + const designerLower = designer.toLowerCase(); + const anilistUser = designer.match( + /https?:\/\/anilist\.co\/user\/([^/]+)\/?/, + ); + + if (anilistUser) { + name = anilistUser[1]; + } else if (designerLower.startsWith("@")) { + name = designer.replace("@", ""); + userLink = `https://anilist.co/user/${name}/`; + } else if (!designerLower.startsWith("http")) { + userLink = `https://anilist.co/user/${name}/`; + } + + return `<a href="${userLink}" target="_blank">@${name}</a>`; }; const onClick = (event: MouseEvent) => { - event.preventDefault(); - - if ( - event.clientX < - badgeReference.getBoundingClientRect().left + badgeReference.getBoundingClientRect().width / 2 - ) { - onPrevious(); - } else { - onNext(); - } + event.preventDefault(); + + if ( + event.clientX < + badgeReference.getBoundingClientRect().left + + badgeReference.getBoundingClientRect().width / 2 + ) { + onPrevious(); + } else { + onNext(); + } }; </script> diff --git a/src/lib/User/BadgeWall/Badges.svelte b/src/lib/User/BadgeWall/Badges.svelte index 04943c64..67c00c53 100644 --- a/src/lib/User/BadgeWall/Badges.svelte +++ b/src/lib/User/BadgeWall/Badges.svelte @@ -1,14 +1,14 @@ <script lang="ts"> -import Spacer from '$lib/Layout/Spacer.svelte'; -import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte'; -import tooltip from '$lib/Tooltip/tooltip'; -import locale from '$stores/locale'; -import { databaseTimeToDate } from '$lib/Utility/time'; -import FallbackImage from '$lib/Image/FallbackImage.svelte'; -import { cdn, thumbnail } from '$lib/Utility/image'; -import FallbackBadge from './FallbackBadge.svelte'; -import type { Preferences } from '../../../graphql/$types'; -import type { IndexedBadge } from './badge'; +import Spacer from "$lib/Layout/Spacer.svelte"; +import LinkedTooltip from "$lib/Tooltip/LinkedTooltip.svelte"; +import tooltip from "$lib/Tooltip/tooltip"; +import locale from "$stores/locale"; +import { databaseTimeToDate } from "$lib/Utility/time"; +import FallbackImage from "$lib/Image/FallbackImage.svelte"; +import { cdn, thumbnail } from "$lib/Utility/image"; +import FallbackBadge from "./FallbackBadge.svelte"; +import type { Preferences } from "../../../graphql/$types"; +import type { IndexedBadge } from "./badge"; export let ungroupedBadges: IndexedBadge[]; export let groupedBadges: [string, IndexedBadge[]][]; diff --git a/src/lib/User/BadgeWall/FallbackBadge.svelte b/src/lib/User/BadgeWall/FallbackBadge.svelte index 86e90939..a930e5e0 100644 --- a/src/lib/User/BadgeWall/FallbackBadge.svelte +++ b/src/lib/User/BadgeWall/FallbackBadge.svelte @@ -1,24 +1,25 @@ <script lang="ts"> -import { classifyDesignerName } from './badge'; -import locale from '$stores/locale'; -import { tweened } from 'svelte/motion'; -import type { Badge } from '../../Database/SB/User/badges'; -import type { AWCBadge } from '../../Data/awc'; -import Tooltip from '../../Tooltip/LinkedTooltip.svelte'; -import { databaseTimeToDate } from '../../Utility/time'; -import { cubicOut } from 'svelte/easing'; -import { dev } from '$app/environment'; -import type { Preferences } from '../../../graphql/$types'; +import { classifyDesignerName } from "./badge"; +import locale from "$stores/locale"; +import { tweened } from "svelte/motion"; +import type { Badge } from "../../Database/SB/User/badges"; +import type { AWCBadge } from "../../Data/awc"; +import Tooltip from "../../Tooltip/LinkedTooltip.svelte"; +import { databaseTimeToDate } from "../../Utility/time"; +import { cubicOut } from "svelte/easing"; +import { dev } from "$app/environment"; +import type { Preferences } from "../../../graphql/$types"; export let source: string | null | undefined; export let alternative: string | null | undefined; export let fallback: string | null | undefined; export let maxReplaceCount = 1; export let replaceDelay = 1000; -export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg'; +export let error = + "https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg"; export let hideOnError = false; export let badge: Badge | AWCBadge; -export let style = ''; +export let style = ""; export let selectedBadge: Badge | null = null; export let awc = false; export let index: number | null = null; @@ -27,43 +28,48 @@ export let preferences: Preferences | undefined; let replaceCount = 0; let badgeReference: HTMLImageElement; const mouse = tweened( - { x: 0, y: 0 }, - { - duration: 75, - easing: cubicOut - } + { x: 0, y: 0 }, + { + duration: 75, + easing: cubicOut, + }, ); const delayedReplace = (event: Event, image: string | undefined | null) => { - if (replaceCount >= maxReplaceCount) return; + if (replaceCount >= maxReplaceCount) return; - setTimeout(() => { - (event.target as HTMLImageElement).src = image || ''; + setTimeout(() => { + (event.target as HTMLImageElement).src = image || ""; - replaceCount += 1; - }, replaceDelay); + replaceCount += 1; + }, replaceDelay); }; const handleMouseMove = (event: MouseEvent) => { - const boundingRectangle = badgeReference.getBoundingClientRect(); - const factor = 1.25; - const limit = 50; + const boundingRectangle = badgeReference.getBoundingClientRect(); + const factor = 1.25; + const limit = 50; - if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY }; + if ($mouse.x === 0 && $mouse.y === 0) + $mouse = { x: event.clientX, y: event.clientY }; - $mouse.x += - (-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor; - $mouse.y += - (-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor; - $mouse.x = Math.max(Math.min($mouse.x, limit), -limit); - $mouse.y = Math.max(Math.min($mouse.y, limit), -limit); + $mouse.x += + (-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - + $mouse.x) * + factor; + $mouse.y += + (-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - + $mouse.y) * + factor; + $mouse.x = Math.max(Math.min($mouse.x, limit), -limit); + $mouse.y = Math.max(Math.min($mouse.y, limit), -limit); }; const handleMouseLeave = () => { - $mouse = { x: 0, y: 0 }; + $mouse = { x: 0, y: 0 }; }; -const isDBBadge = (b: Badge | AWCBadge): b is Badge => 'id' in b; +const isDBBadge = (b: Badge | AWCBadge): b is Badge => "id" in b; const asAWCBadge = (b: Badge | AWCBadge) => b as AWCBadge; </script> diff --git a/src/lib/User/BadgeWall/badge.ts b/src/lib/User/BadgeWall/badge.ts index 8a8726dc..8db34f6b 100644 --- a/src/lib/User/BadgeWall/badge.ts +++ b/src/lib/User/BadgeWall/badge.ts @@ -1,18 +1,20 @@ -import type { Badge } from '../../../graphql/$types'; +import type { Badge } from "../../../graphql/$types"; export interface IndexedBadge extends Badge { - index: number; + index: number; } export const classifyDesignerName = (designer: string) => { - let name = designer; - const anilistUser = designer.match(/https?:\/\/anilist\.co\/user\/([^/]+)\/?/); + let name = designer; + const anilistUser = designer.match( + /https?:\/\/anilist\.co\/user\/([^/]+)\/?/, + ); - if (anilistUser) { - name = `@${anilistUser[1]}`; - } else if (!designer.toLowerCase().startsWith('@')) { - name = `@${designer}`; - } + if (anilistUser) { + name = `@${anilistUser[1]}`; + } else if (!designer.toLowerCase().startsWith("@")) { + name = `@${designer}`; + } - return name; + return name; }; diff --git a/src/lib/User/BadgeWall/badges.css b/src/lib/User/BadgeWall/badges.css index 0dffa860..19f8996f 100644 --- a/src/lib/User/BadgeWall/badges.css +++ b/src/lib/User/BadgeWall/badges.css @@ -6,11 +6,11 @@ } */ .badges { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(8%, 1fr)); - gap: 0.25rem; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(8%, 1fr)); + gap: 0.25rem; } .edit-row-2 { - margin-top: -1.25rem; + margin-top: -1.25rem; } |