From 4f07a27df74775e35775d34e800abfd683c5fa86 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 17 Feb 2024 21:50:17 -0800
Subject: feat(badges): optionally hide missing badges

---
 src/lib/FallbackBadge.svelte | 69 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/lib/FallbackBadge.svelte

(limited to 'src/lib/FallbackBadge.svelte')

diff --git a/src/lib/FallbackBadge.svelte b/src/lib/FallbackBadge.svelte
new file mode 100644
index 00000000..faa021d4
--- /dev/null
+++ b/src/lib/FallbackBadge.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import locale from '$stores/locale';
+	import type { Badge } from './Database/userBadges';
+	import tooltip from './Tooltip/tooltip';
+	import { databaseTimeToDate } from './Utility/time';
+
+	export let source: string | undefined;
+	export let alternative: string | undefined;
+	export let fallback: string | 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 hideOnError = false;
+	export let badge: Badge;
+
+	let replaceCount = 0;
+
+	const delayedReplace = (event: Event, image: string | undefined) => {
+		if (replaceCount >= maxReplaceCount) return;
+
+		setTimeout(() => {
+			(event.target as HTMLImageElement).src = image || '';
+
+			replaceCount += 1;
+		}, replaceDelay);
+	};
+</script>
+
+{#if replaceCount < maxReplaceCount}
+	<a
+		href={badge.post}
+		target="_blank"
+		id={`badge-${badge.id}`}
+		class="badge"
+		title={`${badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''}${
+			badge.description ? `\n${badge.description}` : ''
+		}`}
+		use:tooltip
+	>
+		<img
+			src={source}
+			alt={alternative}
+			loading="lazy"
+			class="badge"
+			on:error={(e) => delayedReplace(e, fallback)}
+		/>
+	</a>
+{:else if !hideOnError}
+	<img src={error} alt="Not found" loading="lazy" class="badge" />
+{/if}
+
+<style>
+	.badge {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		transition: transform 0.3s ease;
+		box-sizing: border-box;
+		border-radius: 8px;
+	}
+
+	.badge:hover {
+		transform: scale(1.05);
+		position: relative;
+		z-index: 2;
+		transition: transform 0.3s ease;
+	}
+</style>
-- 
cgit v1.2.3