From b906ff3fedf2ec420a057a6d2c851df2b7b77495 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 22 Jan 2023 20:30:56 +0900
Subject: add an achievement

---
 packages/frontend/src/pages/about.vue         | 9 ++++++++-
 packages/frontend/src/scripts/achievements.ts | 7 +++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

(limited to 'packages/frontend/src')

diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 4d971c5a9f..e5b9aecc61 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/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;
diff --git a/packages/frontend/src/scripts/achievements.ts b/packages/frontend/src/scripts/achievements.ts
index 8c59c92b14..c77f8e12d3 100644
--- a/packages/frontend/src/scripts/achievements.ts
+++ b/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);
-- 
cgit v1.2.3-freya