Year 2 Sub Badges (#984)

* Year 2 Sub Badges

* formatting

Author: AnatoleAM

src/components/base/Badge.vue

@@ -1,5 +1,6 @@
 <template>
-	<svg id="Badge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="1em">
+	<img v-if="img" :src="img" class="img-badge" />
+	<svg v-else id="Badge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="1em">
 		<defs v-if="bgGradient && Array.isArray(bgGradient.stops) && bgGradient.stops.length">
 			<linearGradient :id="`BadgeGradient1-${instID}`" :gradientTransform="'rotate(' + bgGradient.angle + ')'">
 				<stop
@@ -99,6 +100,7 @@ const props = defineProps<{
 		component?: Component;
 		gradient?: GradientDef;
 	};
+	img?: string;
 }>();
 
 const bg = props.background ?? {};
@@ -109,3 +111,11 @@ const bgGradient = bg.gradient;
 const borderGradient = border.gradient;
 const logoGradient = logo.gradient;
 </script>
+
+<style scoped lang="scss">
+img.img-badge {
+	width: 1em;
+	height: 1em;
+	object-fit: contain;
+}
+</style>

src/components/utility/BadgeDefs.ts

@@ -135,6 +135,30 @@ export const badgeDefs = [
 			component: BgBadge4VueSvg,
 		},
 	},
+	{
+		id: "sub24",
+		name: "2 Years",
+		sub: true,
+		img: "https://cdn.7tv.app/badge/64dfeec02040c6754787d929/3x",
+	},
+	{
+		id: "sub27",
+		name: "2.25 Years",
+		sub: true,
+		img: "https://cdn.7tv.app/badge/64dff4652040c6754787d92a/3x",
+	},
+	{
+		id: "sub30",
+		name: "2.5 Years",
+		sub: true,
+		img: "https://cdn.7tv.app/badge/64dff95e2040c6754787d92f/3x",
+	},
+	{
+		id: "sub33",
+		name: "2.75 Years",
+		sub: true,
+		img: "https://cdn.7tv.app/badge/64dff9c32040c6754787d930/3x",
+	},
 	{
 		id: "subfounder",
 		name: "Founder",
@@ -278,6 +302,7 @@ export interface BadgeDef {
 	name: string;
 	sub?: boolean;
 	days?: number;
+	img?: string;
 	background: {
 		color?: string;
 		component?: Component;

src/views/emote-set/EmoteSetPage.vue

@@ -21,7 +21,13 @@
 							<Icon icon="pen" />
 						</div>
 
-						<div v-if="editable && !isPersonal" v-wave class="action-button" name="delete" @click="promptDelete">
+						<div
+							v-if="editable && !isPersonal"
+							v-wave
+							class="action-button"
+							name="delete"
+							@click="promptDelete"
+						>
 							<Icon icon="trash" />
 						</div>
 					</div>

src/views/store/AnnotatedBadge.vue

@@ -3,7 +3,7 @@
 		<span class="badge-lock">
 			<Icon icon="lock" />
 		</span>
-		<Badge :logo="badge.logo" :border="badge.border" :background="badge.background" />
+		<Badge :img="badge.img" :logo="badge.logo" :border="badge.border" :background="badge.background" />
 		<p v-if="!hideName">{{ badge.name }}</p>
 	</span>
 </template>
@@ -44,7 +44,8 @@ defineProps<{
 			font-size: 33%;
 		}
 
-		> svg {
+		> svg,
+		img {
 			opacity: 0.5;
 		}
 	}