From 132bf2d2004b15bf09cccd743ee74ae9917309cb Mon Sep 17 00:00:00 2001
From: ShittyKopper <shittykopper@w.on-t.work>
Date: Thu, 1 Feb 2024 17:06:00 +0300
Subject: [PATCH] feat: oneko

---
 locales/en-US.yml                             |   1 +
 locales/index.d.ts                            |   4 +
 locales/ja-JP.yml                             |   1 +
 packages/frontend/assets/oneko.gif            | Bin 0 -> 3316 bytes
 packages/frontend/src/components/SkOneko.vue  | 240 ++++++++++++++++++
 .../frontend/src/pages/settings/general.vue   |   2 +
 .../pages/settings/preferences-backups.vue    |   1 +
 packages/frontend/src/store.ts                |   4 +
 packages/frontend/src/ui/_common_/common.vue  |   3 +
 9 files changed, 256 insertions(+)
 create mode 100644 packages/frontend/assets/oneko.gif
 create mode 100644 packages/frontend/src/components/SkOneko.vue

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 6c1cfc9940..913525d7ba 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1095,6 +1095,7 @@ accountMoved: "This user has moved to a new account:"
 accountMovedShort: "This account has been migrated."
 operationForbidden: "Operation forbidden"
 forceShowAds: "Always show ads"
+oneko: "Cat friend :3"
 addMemo: "Add memo"
 editMemo: "Edit memo"
 reactionsList: "Reactions"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 138c87b765..b9935ae6c9 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -4425,6 +4425,10 @@ export interface Locale extends ILocale {
      * 常に広告を表示する
      */
     "forceShowAds": string;
+    /**
+     * 猫友達 :3
+     */
+    "oneko": string;
     /**
      * メモを追加
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a154acca68..b63624f674 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1102,6 +1102,7 @@ accountMoved: "このユーザーは新しいアカウントに移行しまし
 accountMovedShort: "このアカウントは移行されています"
 operationForbidden: "この操作はできません"
 forceShowAds: "常に広告を表示する"
+oneko: "猫友達 :3"
 addMemo: "メモを追加"
 editMemo: "メモを編集"
 reactionsList: "リアクション一覧"
diff --git a/packages/frontend/assets/oneko.gif b/packages/frontend/assets/oneko.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a009c2cc19c96b001ac76e96f27e5fa1a9e56577
GIT binary patch
literal 3316
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

literal 0
HcmV?d00001

diff --git a/packages/frontend/src/components/SkOneko.vue b/packages/frontend/src/components/SkOneko.vue
new file mode 100644
index 0000000000..fbf50067a9
--- /dev/null
+++ b/packages/frontend/src/components/SkOneko.vue
@@ -0,0 +1,240 @@
+<template>
+<div ref="nekoEl" :class="$style.oneko" aria-hidden="true"></div>
+</template>
+
+<script lang="ts" setup>
+// oneko.js: https://github.com/adryd325/oneko.js
+// modified to be a vue component by ShittyKopper :3
+
+import { shallowRef, onMounted } from 'vue';
+
+const nekoEl = shallowRef<HTMLDivElement>();
+
+let nekoPosX = 32;
+let nekoPosY = 32;
+
+let mousePosX = 0;
+let mousePosY = 0;
+
+let frameCount = 0;
+let idleTime = 0;
+let idleAnimation: string|null = null;
+let idleAnimationFrame = 0;
+let lastFrameTimestamp;
+
+const nekoSpeed = 10;
+const spriteSets = {
+	idle: [[-3, -3]],
+	alert: [[-7, -3]],
+	scratchSelf: [
+		[-5, 0],
+		[-6, 0],
+		[-7, 0],
+	],
+	scratchWallN: [
+		[0, 0],
+		[0, -1],
+	],
+	scratchWallS: [
+		[-7, -1],
+		[-6, -2],
+	],
+	scratchWallE: [
+		[-2, -2],
+		[-2, -3],
+	],
+	scratchWallW: [
+		[-4, 0],
+		[-4, -1],
+	],
+	tired: [[-3, -2]],
+	sleeping: [
+		[-2, 0],
+		[-2, -1],
+	],
+	N: [
+		[-1, -2],
+		[-1, -3],
+	],
+	NE: [
+		[0, -2],
+		[0, -3],
+	],
+	E: [
+		[-3, 0],
+		[-3, -1],
+	],
+	SE: [
+		[-5, -1],
+		[-5, -2],
+	],
+	S: [
+		[-6, -3],
+		[-7, -2],
+	],
+	SW: [
+		[-5, -3],
+		[-6, -1],
+	],
+	W: [
+		[-4, -2],
+		[-4, -3],
+	],
+	NW: [
+		[-1, 0],
+		[-1, -1],
+	],
+};
+
+function init() {
+	if (!nekoEl.value) return;
+
+	nekoEl.value.style.left = `${nekoPosX - 16}px`;
+	nekoEl.value.style.top = `${nekoPosY - 16}px`;
+
+	document.addEventListener('mousemove', (event) => {
+		mousePosX = event.clientX;
+		mousePosY = event.clientY;
+	});
+
+	window.requestAnimationFrame(onAnimationFrame);
+}
+
+function onAnimationFrame(timestamp) {
+	// Stops execution if the neko element is removed from DOM
+	if (!nekoEl.value?.isConnected) {
+		return;
+	}
+	if (!lastFrameTimestamp) {
+		lastFrameTimestamp = timestamp;
+	}
+	if (timestamp - lastFrameTimestamp > 100) {
+		lastFrameTimestamp = timestamp;
+		frame();
+	}
+	window.requestAnimationFrame(onAnimationFrame);
+}
+
+// eslint-disable-next-line no-shadow
+function setSprite(name, frame) {
+	if (!nekoEl.value) return;
+
+	const sprite = spriteSets[name][frame % spriteSets[name].length];
+	nekoEl.value.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
+}
+
+function resetIdleAnimation() {
+	idleAnimation = null;
+	idleAnimationFrame = 0;
+}
+
+function idle() {
+	idleTime += 1;
+
+	// every ~ 20 seconds
+	if (
+		idleTime > 10 &&
+      Math.floor(Math.random() * 200) === 0 &&
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      idleAnimation == null
+	) {
+		let avalibleIdleAnimations = ['sleeping', 'scratchSelf'];
+		if (nekoPosX < 32) {
+			avalibleIdleAnimations.push('scratchWallW');
+		}
+		if (nekoPosY < 32) {
+			avalibleIdleAnimations.push('scratchWallN');
+		}
+		if (nekoPosX > window.innerWidth - 32) {
+			avalibleIdleAnimations.push('scratchWallE');
+		}
+		if (nekoPosY > window.innerHeight - 32) {
+			avalibleIdleAnimations.push('scratchWallS');
+		}
+		idleAnimation =
+        avalibleIdleAnimations[Math.floor(Math.random() * avalibleIdleAnimations.length)];
+	}
+
+	switch (idleAnimation) {
+		case 'sleeping':
+			if (idleAnimationFrame < 8) {
+				setSprite('tired', 0);
+				break;
+			}
+			setSprite('sleeping', Math.floor(idleAnimationFrame / 4));
+			if (idleAnimationFrame > 192) {
+				resetIdleAnimation();
+			}
+			break;
+		case 'scratchWallN':
+		case 'scratchWallS':
+		case 'scratchWallE':
+		case 'scratchWallW':
+		case 'scratchSelf':
+			setSprite(idleAnimation, idleAnimationFrame);
+			if (idleAnimationFrame > 9) {
+				resetIdleAnimation();
+			}
+			break;
+		default:
+			setSprite('idle', 0);
+			return;
+	}
+	idleAnimationFrame += 1;
+}
+
+function frame() {
+	if (!nekoEl.value) return;
+
+	frameCount += 1;
+	const diffX = nekoPosX - mousePosX;
+	const diffY = nekoPosY - mousePosY;
+	const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
+
+	if (distance < nekoSpeed || distance < 48) {
+		idle();
+		return;
+	}
+
+	idleAnimation = null;
+	idleAnimationFrame = 0;
+
+	if (idleTime > 1) {
+		setSprite('alert', 0);
+		// count down after being alerted before moving
+		idleTime = Math.min(idleTime, 7);
+		idleTime -= 1;
+		return;
+	}
+
+	let direction;
+	direction = diffY / distance > 0.5 ? 'N' : '';
+	direction += diffY / distance < -0.5 ? 'S' : '';
+	direction += diffX / distance > 0.5 ? 'W' : '';
+	direction += diffX / distance < -0.5 ? 'E' : '';
+	setSprite(direction, frameCount);
+
+	nekoPosX -= (diffX / distance) * nekoSpeed;
+	nekoPosY -= (diffY / distance) * nekoSpeed;
+
+	nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16);
+	nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16);
+
+	nekoEl.value.style.left = `${nekoPosX - 16}px`;
+	nekoEl.value.style.top = `${nekoPosY - 16}px`;
+}
+
+onMounted(init);
+</script>
+
+<style module>
+.oneko {
+	width: 32px;
+	height: 32px;
+	position: fixed;
+	pointer-events: none;
+	image-rendering: pixelated;
+	z-index: 2147483647;
+	background-image: url(/client-assets/oneko.gif);
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 2c9c1697e3..3b2946e2b7 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -145,6 +145,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</MkSwitch>
 				<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="enableSeasonalScreenEffect">{{ i18n.ts.seasonalScreenEffect }}</MkSwitch>
 			</div>
 			<div>
@@ -332,6 +333,7 @@ const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
 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 loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
 const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia'));
 const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index 5fccf15df6..ad0903caee 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -98,6 +98,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'showClipButtonInNoteFooter',
 	'reactionsDisplaySize',
 	'forceShowAds',
+	'oneko',
 	'numberOfReplies',
 	'aiChanMode',
 	'devMode',
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 3c39288d5b..4dad6ce406 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -407,6 +407,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	oneko: {
+		where: 'device',
+		default: false,
+	},
 	clickToOpen: {
 		where: 'device',
 		default: true,
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 0ec036c5cb..ffdb4fa2d8 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -42,6 +42,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
 
 <div v-if="$i && $i.isBot" id="botWarn"><span>{{ i18n.ts.loggedInAsBot }}</span></div>
+
+<SkOneko v-if="defaultStore.state.oneko"/>
 </template>
 
 <script lang="ts" setup>
@@ -58,6 +60,7 @@ import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
 import { globalEvents } from '@/events.js';
+import SkOneko from '@/components/SkOneko.vue';
 
 const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
 const XUpload = defineAsyncComponent(() => import('./upload.vue'));