From bdc89b8452608b40f72f3e6c4c0914df312fa621 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 31 Jan 2024 05:04:31 -0800
Subject: feat(user): rainbow owner badge

---
 src/routes/user/[user]/+page.svelte | 15 +++++++++---
 src/styles/badge.css                | 47 +++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 2c6c87cc..761ba1ee 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -7,6 +7,8 @@
 	import root from '$lib/Utility/root.js';
 	import locale from '$stores/locale.js';
 	import { onMount } from 'svelte';
+	import authorisedUsers from '$lib/Data/authorised.json';
+	import tooltip from '$lib/Tooltip/tooltip.js';
 
 	export let data;
 
@@ -71,8 +73,15 @@
 						<a
 							href={`https://anilist.co/user/${userData.name}`}
 							target="_blank"
-							title={String(userData.id)}>@{userData.name}</a
+							title={String(userData.id)}
+							use:tooltip
 						>
+							@{userData.name}
+						</a>
+						{#if userData && authorisedUsers.includes(userData.id)}
+							&#8204;
+							<button class="unclickable-button button-badge badge-rainbow">Owner</button>
+						{/if}
 						<span class="click-item">•</span>
 						<a href={root(`/user/${userData.name}/badges`)}>Badge Wall</a>
 					</p>
@@ -88,10 +97,10 @@
 					<p />
 
 					{#await fetch(root(`/api/badges?id=${userData.id}`))}
-						{displayBadges(userData.name, '…')}
+						{displayBadges(userData.name, '...')}
 					{:then badges}
 						{#await badges.json()}
-							{displayBadges(userData.name, '…')}
+							{displayBadges(userData.name, '...')}
 						{:then badges}
 							{displayBadges(userData.name, badges.length)}
 						{:catch}
diff --git a/src/styles/badge.css b/src/styles/badge.css
index 38cae6e4..68b15ea7 100644
--- a/src/styles/badge.css
+++ b/src/styles/badge.css
@@ -14,3 +14,50 @@
 .badge-info:hover {
 	background-color: var(--base0E);
 }
+
+.badge-rainbow {
+	color: var(--base07);
+	animation: rainbow 20s ease-in-out infinite;
+}
+
+@keyframes rainbow {
+	0% {
+		background: rgba(0, 105, 255, 0.71);
+	}
+	10% {
+		background: rgba(100, 0, 255, 0.71);
+	}
+	20% {
+		background: rgba(255, 0, 139, 0.71);
+	}
+	30% {
+		background: rgba(255, 0, 0, 0.71);
+	}
+	40% {
+		background: rgba(255, 96, 0, 0.71);
+	}
+	50% {
+		background: rgba(202, 255, 0, 0.71);
+	}
+	60% {
+		background: rgba(0, 255, 139, 0.71);
+	}
+	70% {
+		background: rgba(202, 255, 0, 0.71);
+	}
+	80% {
+		background: rgba(255, 96, 0, 0.71);
+	}
+	85% {
+		background: rgba(255, 0, 0, 0.71);
+	}
+	90% {
+		background: rgba(255, 0, 139, 0.71);
+	}
+	95% {
+		background: rgba(100, 0, 255, 0.71);
+	}
+	to {
+		background: rgba(0, 105, 255, 0.71);
+	}
+}
-- 
cgit v1.2.3