Achievements (#9665)

* wip

* Update ja-JP.yml

* wip

* wip

* Update MkAchievements.vue

* wip

* :art:

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

10 files changed, 314 insertions, 8 deletions

diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue
new file mode 100644
index 0000000000..64fea96354
--- /dev/null
+++ b/packages/frontend/src/components/MkAchievements.vue
@@ -0,0 +1,224 @@
+<template>
+<div>
+	<div v-if="achievements" :class="$style.root">
+		<div v-for="achievement in achievements" :key="achievement" :class="$style.achievement" class="_panel">
+			<div :class="$style.icon">
+				<div :class="[$style.iconFrame, $style['iconFrame_' + ACHIEVEMENT_BADGES[achievement.name].frame]]">
+					<div :class="[$style.iconInner]" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
+						<img :class="$style.iconImg" :src="ACHIEVEMENT_BADGES[achievement.name].img">
+					</div>
+				</div>
+			</div>
+			<div :class="$style.body">
+				<div :class="$style.header">
+					<span :class="$style.title">{{ i18n.ts._achievements._types['_' + achievement.name].title }}</span>
+					<span :class="$style.time">
+						<time v-tooltip="new Date(achievement.unlockedAt).toLocaleString()">{{ new Date(achievement.unlockedAt).getFullYear() }}/{{ new Date(achievement.unlockedAt).getMonth() + 1 }}/{{ new Date(achievement.unlockedAt).getDate() }}</time>
+					</span>
+				</div>
+				<div :class="$style.description">{{ i18n.ts._achievements._types['_' + achievement.name].description }}</div>
+				<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor" :class="$style.flavor">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
+			</div>
+		</div>
+		<template v-if="withLocked">
+			<div v-for="achievement in lockedAchievements" :key="achievement" :class="[$style.achievement, $style.locked]" class="_panel" @click="achievement === 'clickedClickHere' ? clickHere() : () => {}">
+				<div :class="$style.icon">
+				</div>
+				<div :class="$style.body">
+					<div :class="$style.header">
+						<span :class="$style.title">???</span>
+					</div>
+					<div :class="$style.description">???</div>
+				</div>
+			</div>
+		</template>
+	</div>
+	<div v-else>
+		<MkLoading/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
+import { onMounted } from 'vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { ACHIEVEMENT_TYPES, ACHIEVEMENT_BADGES, claimAchievement } from '@/scripts/achievements';
+
+const props = withDefaults(defineProps<{
+	user: misskey.entities.User;
+	withLocked: boolean;
+}>(), {
+	withLocked: true,
+});
+
+let achievements = $ref();
+const lockedAchievements = $computed(() => ACHIEVEMENT_TYPES.filter(x => !(achievements ?? []).some(a => a.name === x)));
+
+function fetch() {
+	os.api('users/achievements', { userId: props.user.id }).then(res => {
+		achievements = [];
+		for (const t of ACHIEVEMENT_TYPES) {
+			const a = res.find(x => x.name === t);
+			if (a) achievements.push(a);
+		}
+		//achievements = res.sort((a, b) => b.unlockedAt - a.unlockedAt);
+	});
+}
+
+function clickHere() {
+	claimAchievement('clickedClickHere');
+	fetch();
+}
+
+onMounted(() => {
+	fetch();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, min(380px, 100%));
+	grid-gap: 12px;
+	place-content: center;
+}
+
+.achievement {
+	display: flex;
+	padding: 16px;
+
+	&.locked {
+		opacity: 0.5;
+	}
+}
+
+.icon {
+	flex-shrink: 0;
+	margin-right: 12px;
+}
+
+@keyframes shine {
+	0% { translate: -30px; }
+	100% { translate: -130px; }
+}
+
+.iconFrame {
+	width: 58px;
+	height: 58px;
+	padding: 6px;
+	border-radius: 100%;
+	box-sizing: border-box;
+	pointer-events: none;
+	user-select: none;
+	filter: drop-shadow(0px 2px 2px #00000044);
+	box-shadow: 0 1px 0px #ffffff88 inset;
+	overflow: clip;
+}
+.iconFrame_bronze {
+	background: linear-gradient(0deg, #703827, #d37566);
+
+	> .iconInner {
+		background: linear-gradient(0deg, #d37566, #703827);
+	}
+}
+.iconFrame_silver {
+	background: linear-gradient(0deg, #7c7c7c, #e1e1e1);
+
+	> .iconInner {
+		background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
+	}
+}
+.iconFrame_gold {
+	background: linear-gradient(0deg, rgba(255,182,85,1) 0%, rgba(233,133,0,1) 49%, rgba(255,243,93,1) 51%, rgba(255,187,25,1) 100%);
+
+	> .iconInner {
+		background: linear-gradient(0deg, #ffee20, #eb7018);
+	}
+
+	&:before {
+		content: "";
+		display: block;
+		position: absolute;
+    top: 30px;
+    width: 200px;
+    height: 8px;
+    rotate: -45deg;
+    translate: -30px;
+		background: #ffffff88;
+		animation: shine 2s infinite;
+	}
+}
+.iconFrame_platinum {
+	background: linear-gradient(0deg, rgba(154,154,154,1) 0%, rgba(226,226,226,1) 49%, rgba(255,255,255,1) 51%, rgba(195,195,195,1) 100%);
+
+	> .iconInner {
+		background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
+	}
+
+	&:before {
+		content: "";
+		display: block;
+		position: absolute;
+    top: 30px;
+    width: 200px;
+    height: 8px;
+    rotate: -45deg;
+    translate: -30px;
+		background: #ffffffee;
+		animation: shine 2s infinite;
+	}
+}
+
+.iconInner {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	border-radius: 100%;
+	box-shadow: 0 1px 0px #ffffff88 inset;
+}
+
+.iconImg {
+	width: calc(100% - 12px);
+	height: calc(100% - 12px);
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+	filter: drop-shadow(0px 1px 2px #000000aa);
+}
+
+.body {
+	flex: 1;
+	min-width: 0;
+}
+
+.header {
+	margin-bottom: 8px;
+	display: flex;
+}
+
+.title {
+	font-weight: bold;
+}
+
+.time {
+	margin-left: auto;
+	font-size: 85%;
+	opacity: 0.7;
+}
+
+.description {
+	font-size: 85%;
+}
+
+.flavor {
+	opacity: 0.7;
+	transform: skewX(-15deg);
+	font-size: 85%;
+	margin-top: 8px;
+}
+</style>
diff --git a/packages/frontend/src/components/MkClickerGame.vue b/packages/frontend/src/components/MkClickerGame.vue
index 03736ac5e4..68e0f8185d 100644
--- a/packages/frontend/src/components/MkClickerGame.vue
+++ b/packages/frontend/src/components/MkClickerGame.vue
@@ -20,6 +20,7 @@ import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import * as game from '@/scripts/clicker-game';
 import number from '@/filters/number';
+import { claimAchievement } from '@/scripts/achievements';
 
 defineProps<{
 }>();
@@ -30,14 +31,18 @@ let cps = $ref(0);
 let prevCookies = $ref(0);
 
 function onClick(ev: MouseEvent) {
+	const x = ev.clientX;
+	const y = ev.clientY;
+	os.popup(MkPlusOneEffect, { x, y }, {}, 'end');
+
 	saveData.value!.cookies++;
 	saveData.value!.totalCookies++;
 	saveData.value!.totalHandmadeCookies++;
 	saveData.value!.clicked++;
 
-	const x = ev.clientX;
-	const y = ev.clientY;
-	os.popup(MkPlusOneEffect, { x, y }, {}, 'end');
+	if (cookies.value === 1) {
+		claimAchievement('cookieClicked');
+	}
 }
 
 useInterval(() => {
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 82653ca0b4..156013b9aa 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -33,6 +33,7 @@ import * as Misskey from 'misskey-js';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
+import { claimAchievement } from '@/scripts/achievements';
 
 const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
@@ -159,9 +160,11 @@ function onDrop(ev: DragEvent) {
 		}).then(() => {
 			// noop
 		}).catch(err => {
-			switch (err) {
-				case 'detected-circular-definition':
+			switch (err.code) {
+				case 'RECURSIVE_NESTING':
+					claimAchievement('driveFolderCircularReference');
 					os.alert({
+						type: 'error',
 						title: i18n.ts.unableToProcess,
 						text: i18n.ts.circularReferenceFolder,
 					});
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 112a64f52d..af7175e5cd 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -99,6 +99,7 @@ import { stream } from '@/stream';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 import { uploadFile, uploads } from '@/scripts/upload';
+import { claimAchievement } from '@/scripts/achievements';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
@@ -268,9 +269,11 @@ function onDrop(ev: DragEvent): any {
 		}).then(() => {
 			// noop
 		}).catch(err => {
-			switch (err) {
-				case 'detected-circular-definition':
+			switch (err.code) {
+				case 'RECURSIVE_NESTING':
+					claimAchievement('driveFolderCircularReference');
 					os.alert({
+						type: 'error',
 						title: i18n.ts.unableToProcess,
 						text: i18n.ts.circularReferenceFolder,
 					});
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index ee256d9263..de8db54bfa 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -35,6 +35,8 @@ import * as Misskey from 'misskey-js';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
+import { claimAchievement } from '@/scripts/achievements';
+import { $i } from '@/account';
 
 const props = withDefaults(defineProps<{
 	user: Misskey.entities.UserDetailed,
@@ -90,6 +92,21 @@ async function onClick() {
 					userId: props.user.id,
 				});
 				hasPendingFollowRequestFromYou = true;
+
+				claimAchievement('following1');
+
+				if ($i.followingCount >= 10) {
+					claimAchievement('following10');
+				}
+				if ($i.followingCount >= 50) {
+					claimAchievement('following50');
+				}
+				if ($i.followingCount >= 100) {
+					claimAchievement('following100');
+				}
+				if ($i.followingCount >= 300) {
+					claimAchievement('following300');
+				}
 			}
 		}
 	} catch (err) {
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 9b2501a2ed..1f6a2883d7 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -143,6 +143,7 @@ import { getNoteMenu } from '@/scripts/get-note-menu';
 import { useNoteCapture } from '@/scripts/use-note-capture';
 import { deepClone } from '@/scripts/clone';
 import { useTooltip } from '@/scripts/use-tooltip';
+import { claimAchievement } from '@/scripts/achievements';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -268,6 +269,9 @@ function react(viaKeyboard = false): void {
 			noteId: appearNote.id,
 			reaction: reaction,
 		});
+		if (appearNote.text && appearNote.text.length > 100 && (Date.now() - new Date(appearNote.createdAt).getTime() < 1000 * 3)) {
+			claimAchievement('reactWithoutRead');
+		}
 	}, () => {
 		focus();
 	});
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 56061e0e6f..48ace56d9c 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -159,6 +159,7 @@ import { getNoteMenu } from '@/scripts/get-note-menu';
 import { useNoteCapture } from '@/scripts/use-note-capture';
 import { deepClone } from '@/scripts/clone';
 import { useTooltip } from '@/scripts/use-tooltip';
+import { claimAchievement } from '@/scripts/achievements';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -279,6 +280,9 @@ function react(viaKeyboard = false): void {
 			noteId: appearNote.id,
 			reaction: reaction,
 		});
+		if (appearNote.text && appearNote.text.length > 100 && (Date.now() - new Date(appearNote.createdAt).getTime() < 1000 * 3)) {
+			claimAchievement('reactWithoutRead');
+		}
 	}, () => {
 		focus();
 	});
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 5b8041c1d4..e992495a78 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -2,6 +2,7 @@
 <div ref="elRef" :class="$style.root">
 	<div v-once :class="$style.head">
 		<MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user" link preview/>
+		<MkAvatar v-else-if="notification.type === 'achievementEarned'" :class="$style.icon" :user="$i" link preview/>
 		<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/>
 		<img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/>
 		<div :class="[$style.subIcon, $style['t_' + notification.type]]">
@@ -14,6 +15,7 @@
 			<i v-else-if="notification.type === 'mention'" class="ti ti-at"></i>
 			<i v-else-if="notification.type === 'quote'" class="ti ti-quote"></i>
 			<i v-else-if="notification.type === 'pollEnded'" class="ti ti-chart-arrows"></i>
+			<i v-else-if="notification.type === 'achievementEarned'" class="ti ti-military-award"></i>
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 			<MkReactionIcon
 				v-else-if="notification.type === 'reaction'"
@@ -28,6 +30,7 @@
 	<div :class="$style.tail">
 		<header :class="$style.header">
 			<span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
+			<span v-else-if="notification.type === 'achievementEarned'">{{ i18n.ts._notification.achievementEarned }}</span>
 			<MkA v-else-if="notification.user" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
 			<span v-else>{{ notification.header }}</span>
 			<MkTime v-if="withTime" :time="notification.createdAt" :class="$style.headerTime"/>
@@ -57,6 +60,9 @@
 				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
+			<MkA v-else-if="notification.type === 'achievementEarned'" :class="$style.text" to="/my/achievements">
+				{{ i18n.ts._achievements._types['_' + notification.achievement].title }}
+			</MkA>
 			<span v-else-if="notification.type === 'follow'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
 			<span v-else-if="notification.type === 'followRequestAccepted'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
 			<span v-else-if="notification.type === 'receiveFollowRequest'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span>
@@ -82,6 +88,7 @@ import { i18n } from '@/i18n';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { useTooltip } from '@/scripts/use-tooltip';
+import { $i } from '@/account';
 
 const props = withDefaults(defineProps<{
 	notification: misskey.entities.Notification;
@@ -240,6 +247,12 @@ useTooltip(reactionRef, (showing) => {
 	pointer-events: none;
 }
 
+.t_achievementEarned {
+	padding: 3px;
+	background: #88a6b7;
+	pointer-events: none;
+}
+
 .tail {
 	flex: 1;
 	min-width: 0;
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 6822caf4f4..c7e7e85b2e 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -93,11 +93,12 @@ import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
 import MkInfo from '@/components/MkInfo.vue';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
-import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
+import { $i, notesCount, incNotesCount, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
 import { uploadFile } from '@/scripts/upload';
 import { deepClone } from '@/scripts/clone';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { miLocalStorage } from '@/local-storage';
+import { claimAchievement } from '@/scripts/achievements';
 
 const modal = inject('modal');
 
@@ -627,6 +628,34 @@ async function post(ev?: MouseEvent) {
 			}
 			posting = false;
 			postAccount = null;
+
+			incNotesCount();
+			if (notesCount === 1) {
+				claimAchievement('notes1');
+			}
+
+			const text = postData.text?.toLowerCase() ?? '';
+			if ((text.includes('love') || text.includes('❤')) && text.includes('misskey')) {
+				claimAchievement('iLoveMisskey');
+			}
+			if (text.includes('Efrlqw8ytg4'.toLowerCase()) || text.includes('XVCwzwxdHuA'.toLowerCase())) {
+				claimAchievement('brainDiver');
+			}
+
+			if (props.renote && (props.renote.userId === $i.id) && text.length > 0) {
+				claimAchievement('selfQuote');
+			}
+
+			const date = new Date();
+			const h = date.getHours();
+			const m = date.getMinutes();
+			const s = date.getSeconds();
+			if (h >= 0 && h <= 3) {
+				claimAchievement('postedAtLateNight');
+			}
+			if (m === 0 && s === 0) {
+				claimAchievement('postedAt0min0sec');
+			}
 		});
 	}).catch(err => {
 		posting = false;
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index e90dd7ea69..ec4042d18c 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -20,6 +20,7 @@ import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { $i } from '@/account';
 import MkReactionEffect from '@/components/MkReactionEffect.vue';
+import { claimAchievement } from '@/scripts/achievements';
 
 const props = defineProps<{
 	reaction: string;
@@ -52,6 +53,9 @@ const toggleReaction = () => {
 			noteId: props.note.id,
 			reaction: props.reaction,
 		});
+		if (props.note.text && props.note.text.length > 100 && (Date.now() - new Date(props.note.createdAt).getTime() < 1000 * 3)) {
+			claimAchievement('reactWithoutRead');
+		}
 	}
 };