Add boobdog friend

packages/frontend/src/components/SkOneko.vue

@@ -8,6 +8,13 @@
 
 import { shallowRef, onMounted } from 'vue';
 
+const props = defineProps({
+	spritesheet: {
+		type: String,
+		default: '/client-assets/oneko.gif',
+	},
+});
+
 const nekoEl = shallowRef<HTMLDivElement>();
 
 let nekoPosX = 32;
@@ -89,6 +96,8 @@ const spriteSets = {
 function init() {
 	if (!nekoEl.value) return;
 
+	nekoEl.value.style.backgroundImage = `url(${props.spritesheet})`;
+
 	nekoEl.value.style.left = `${nekoPosX - 16}px`;
 	nekoEl.value.style.top = `${nekoPosY - 16}px`;
 
@@ -235,6 +244,5 @@ onMounted(init);
 	pointer-events: none;
 	image-rendering: pixelated;
 	z-index: 2147483647;
-	background-image: url(/client-assets/oneko.gif);
 }
 </style>

packages/frontend/src/pages/settings/general.vue

@@ -146,6 +146,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch>
 				<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
 				<MkSwitch v-model="oneko">{{ i18n.ts.oneko }}</MkSwitch>
+				<MkSwitch v-model="boobdog">Boobdog friend</MkSwitch>
 				<MkSwitch v-model="enableSeasonalScreenEffect">{{ i18n.ts.seasonalScreenEffect }}</MkSwitch>
 			</div>
 			<div>
@@ -334,6 +335,7 @@ const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
 const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
 const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds'));
 const oneko = computed(defaultStore.makeGetterSetter('oneko'));
+const boobdog = computed(defaultStore.makeGetterSetter('boobdog'));
 const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
 const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia'));
 const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));

packages/frontend/src/pages/settings/preferences-backups.vue

@@ -100,6 +100,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'reactionsDisplaySize',
 	'forceShowAds',
 	'oneko',
+	'boobdog',
 	'numberOfReplies',
 	'aiChanMode',
 	'devMode',

packages/frontend/src/store.ts

@@ -416,6 +416,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	boobdog: {
+		where: 'device',
+		default: false,
+	},
 	clickToOpen: {
 		where: 'device',
 		default: true,

packages/frontend/src/ui/_common_/common.vue

@@ -43,7 +43,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <div v-if="$i && $i.isBot" id="botWarn"><span>{{ i18n.ts.loggedInAsBot }}</span></div>
 
-<SkOneko v-if="defaultStore.state.oneko"/>
+<SkOneko v-if="defaultStore.state.oneko" />
+<SkOneko v-if="defaultStore.state.boobdog" spritesheet="/client-assets/boobdog.gif" />
 </template>
 
 <script lang="ts" setup>