aboutsummaryrefslogtreecommitdiff
path: root/src/lib/User/BadgeWall
diff options
context:
space:
mode:
authorFuwn <[email protected]>2026-03-01 16:20:51 -0800
committerFuwn <[email protected]>2026-03-01 16:21:02 -0800
commiteae5d24d9e79e59a19d4721caaeaa0ca650ecb33 (patch)
tree1b685bb248e051dfa26d2bfdebe6689402dd93c5 /src/lib/User/BadgeWall
parentchore(tooling): remove legacy eslint and prettier (diff)
downloaddue.moe-eae5d24d9e79e59a19d4721caaeaa0ca650ecb33.tar.xz
due.moe-eae5d24d9e79e59a19d4721caaeaa0ca650ecb33.zip
chore(biome): drop formatter style overrides
Diffstat (limited to 'src/lib/User/BadgeWall')
-rw-r--r--src/lib/User/BadgeWall/AWC.svelte102
-rw-r--r--src/lib/User/BadgeWall/BadgePreview.svelte151
-rw-r--r--src/lib/User/BadgeWall/Badges.svelte20
-rw-r--r--src/lib/User/BadgeWall/FallbackBadge.svelte74
-rw-r--r--src/lib/User/BadgeWall/badge.ts22
-rw-r--r--src/lib/User/BadgeWall/badges.css8
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;
}