add an achievement

locales/ja-JP.yml

@@ -1128,6 +1128,9 @@ _achievements:
     _htl20npm:
       title: "流れるTL"
       description: "ホームタイムラインの流速が20npmを越す"
+    _viewInstanceChart:
+      title: "アナリスト"
+      description: "インスタンスのチャートを表示した"
     _outputHelloWorldOnScratchpad:
       title: "Hello, world!"
       description: "スクラッチパッドで hello world を出力した"

packages/backend/src/core/AchievementService.ts

@@ -69,6 +69,7 @@ const ACHIEVEMENT_TYPES = [
 	'postedAt0min0sec',
 	'selfQuote',
 	'htl20npm',
+	'viewInstanceChart',
 	'outputHelloWorldOnScratchpad',
 	'open3windows',
 	'driveFolderCircularReference',

packages/frontend/src/pages/about.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import XEmojis from './about.emojis.vue';
 import XFederation from './about.federation.vue';
 import { version, instanceName, host } from '@/config';
@@ -100,6 +100,7 @@ import * as os from '@/os';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { claimAchievement } from '@/scripts/achievements';
 
 const props = withDefaults(defineProps<{
 	initialTab?: string;
@@ -110,6 +111,12 @@ const props = withDefaults(defineProps<{
 let stats = $ref(null);
 let tab = $ref(props.initialTab);
 
+watch($$(tab), () => {
+	if (tab === 'charts') {
+		claimAchievement('viewInstanceChart');
+	}
+});
+
 const initStats = () => os.api('stats', {
 }).then((res) => {
 	stats = res;

packages/frontend/src/scripts/achievements.ts

@@ -65,6 +65,7 @@ export const ACHIEVEMENT_TYPES = [
 	'postedAt0min0sec',
 	'selfQuote',
 	'htl20npm',
+	'viewInstanceChart',
 	'outputHelloWorldOnScratchpad',
 	'open3windows',
 	'driveFolderCircularReference',
@@ -367,6 +368,11 @@ export const ACHIEVEMENT_BADGES = {
 		bg: 'linear-gradient(0deg, rgb(220 223 225), rgb(172 192 207))',
 		frame: 'bronze',
 	},
+	'viewInstanceChart': {
+		img: '/fluent-emoji/1f4ca.png',
+		bg: 'linear-gradient(0deg, rgb(58 231 198), rgb(37 194 255))',
+		frame: 'bronze',
+	},
 	'outputHelloWorldOnScratchpad': {
 		img: '/fluent-emoji/1f530.png',
 		bg: 'linear-gradient(0deg, rgb(58 231 198), rgb(37 194 255))',
@@ -448,6 +454,7 @@ export const claimedAchievements: typeof ACHIEVEMENT_TYPES[number][] = ($i && $i
 const claimingQueue = new Set<string>();
 
 export async function claimAchievement(type: typeof ACHIEVEMENT_TYPES[number]) {
+	if ($i == null) return;
 	if (claimedAchievements.includes(type)) return;
 	claimingQueue.add(type);
 	claimedAchievements.push(type);