add basic badges

Squashed commit of the following: commit 99068a322d15255310d852b0259106947426defd Author: arily <[email protected]> Date: Sat Aug 19 22:28:39 2023 +0900 done badges commit fd32d4c9187831a83db7855c137d51f19a411ad9 Author: arily <[email protected]> Date: Sun Aug 6 18:57:17 2023 +0900
ppy-sb · Aug 19, 2023 · 481c268 · 481c268
1 parent 876d94c
commit 481c268
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 14 deletions.
diff --git a/src/components/userpage/heading.vue b/src/components/userpage/heading.vue
@@ -2,11 +2,12 @@
 import { useElementHover } from '@vueuse/core'
 
 import { MutualRelationship, Relationship } from '~/def'
-import { UserStatus } from '~/def/user'
+import { UserPrivilege, UserStatus } from '~/def/user'
 import { useSession } from '~/store/session'
 
 import userpageStore from '~/store/userpage'
 
+const cfg = useAppConfig()
 const page = userpageStore()
 const { t, locale } = useI18n()
 const app$ = useNuxtApp()
@@ -36,7 +37,7 @@ const { data: live, refresh: reloadLiveData } = await useAsyncData(async () =>
   page.user?.id ? await app$.$client.user.status.query({ id: page.user.id }) : null
 )
 onMounted(() => {
-  onBeforeUnmount(() => clearInterval(setInterval(() => reloadLiveData(), 5000)))
+  onBeforeUnmount(() => clearInterval(setInterval(reloadLiveData, 5000)))
 })
 const isMutualFriend = computed(
   () => data.value?.relationWithMe?.mutual?.includes(MutualRelationship.MutualFriend) || false
@@ -78,14 +79,18 @@ en-GB:
     afk: AFK
   edit: Edit
   add-as-friend: Add as friend
+  supporter: Generously supported {server}!
+  staff: 'Keeping {server} online'
 
 zh-CN:
   status:
-    offline: 离线, 上次在线时间 {lastSeen}
+    offline: 离线, 上次在线时间
     idle: 在线.
     afk: AFK
   edit: 编辑
   add-as-friend: 添加为好友
+  supporter: 慷慨捐赠了{server}!
+  staff: '为{server}辛苦付出'
 </i18n>
 
 <template>
@@ -94,20 +99,33 @@ zh-CN:
     class="flex flex-col items-center w-full gap-5 mx-auto mt-2 md:container custom-container md:flex-row md:items-end"
   >
     <!-- Logo -->
-    <div>
+    <div class="relative">
       <div
         :style="`background-image: url(${page.user.avatarSrc}); background-position: center`"
         class="mask mask-squircle w-44 sm:w-56 md:w-72 lg:w-64 bg-cover aspect-square"
       />
+      <div class="absolute -top-10 -right-6 tooltip tooltip-primary tooltip-right" :data-tip="t('supporter', { server: cfg.title })">
+        <icon name="twemoji:crown" class="w-20 h-20 rotate-[40deg]" />
+      </div>
     </div>
     <!-- info -->
     <div
       class="flex flex-col w-full pt-2 md:p-0 bg-gbase-200 dark:bg-gbase-700 md:bg-transparent md:grow"
     >
       <div
         v-if="session.$state.userId !== page.user.id"
-        class="container custom-container flex justify-around order-3 gap-3 pb-2 mx-auto md:order-1 md:justify-end md:pb-0"
+        class="container flex items-center justify-center lg:justify-between order-3 gap-3 pb-2 mx-auto md:order-1 md:justify-end md:pb-0"
       >
+        <p class="flex gap-1">
+          <span v-if="page.user.roles.includes(UserPrivilege.Verified)" class="flex items-center gap-1">
+            <icon name="ic:round-verified" class="w-5 h-5" />
+            {{ t(localeKey.priv(UserPrivilege.Verified)) }}
+          </span>
+          <span v-if="page.user.roles.includes(UserPrivilege.Staff)" class="flex items-center gap-1">
+            <icon name="healthicons:social-work" class="w-5 h-5" />
+            {{ t('staff', { server: cfg.title }) }}
+          </span>
+        </p>
         <t-button
           ref="changeFriendStateButton"
           size="sm"
@@ -171,14 +189,14 @@ zh-CN:
         </div>
         <div class="order-1 md:order-2 lg:order-1 self-center md:self-start">
           <h1
-            class="text-center pb-1 text-5xl xl:text-6xl"
+            class="pb-1 text-5xl xl:text-6xl"
             :class="useUserRoleColor(page.user)"
           >
             {{ page.user.name }}
           </h1>
           <nuxt-link-locale
             :to="{ name: 'user-handle', params: { handle: `@${page.user.safeName}` } }"
-            class="text-3xl text-center underline md:text-left decoration-sky-500 text-gbase-600 dark:text-gbase-300"
+            class="text-3xl underline md:text-left decoration-sky-500 text-gbase-600 dark:text-gbase-300"
           >
             @{{ page.user.safeName }}
           </nuxt-link-locale>

diff --git a/src/def/user.ts b/src/def/user.ts
@@ -48,7 +48,7 @@ export enum UserPrivilege {
   Supporter = 'supporter',
 
   // bancho.py privileges
-  Whitelisted = 'whitelisted',
+  Verified = 'whitelisted',
 
   // bancho privileges
   Alumni = 'alumni',

diff --git a/src/locales/en-GB.ts b/src/locales/en-GB.ts
@@ -56,7 +56,7 @@ export default {
     [UserPrivilege.Normal]: 'Normal',
     [UserPrivilege.Supported]: 'Supported',
     [UserPrivilege.Supporter]: 'Supporter',
-    [UserPrivilege.Whitelisted]: 'Whitelisted',
+    [UserPrivilege.Verified]: 'Verified',
     [UserPrivilege.Alumni]: 'Alumni',
     [UserPrivilege.TournamentStuff]: 'Tournament Staff',
     [UserPrivilege.ChannelModerator]: 'Channel Moderator',

diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
@@ -46,14 +46,14 @@ export default {
     [UserPrivilege.Registered]: '已注册',
     [UserPrivilege.Inactive]: '不活跃的',
     [UserPrivilege.Normal]: '普通',
-    [UserPrivilege.Supported]: 'Supporter',
+    [UserPrivilege.Supported]: '赞助过',
     [UserPrivilege.Supporter]: '赞助者',
-    [UserPrivilege.Whitelisted]: 'Whitelisted',
+    [UserPrivilege.Verified]: '认证用户',
     [UserPrivilege.Alumni]: 'Alumni',
     [UserPrivilege.TournamentStuff]: 'TournamentStuff',
     [UserPrivilege.ChannelModerator]: 'ChannelModerator',
-    [UserPrivilege.Moderator]: 'Moderator',
-    [UserPrivilege.BeatmapNominator]: 'BeatmapNominator',
+    [UserPrivilege.Moderator]: '聊天管理员',
+    [UserPrivilege.BeatmapNominator]: 'BN',
     [UserPrivilege.Staff]: 'Staff',
     [UserPrivilege.Admin]: '管理员',
     [UserPrivilege.Owner]: 'Owner',

diff --git a/src/server/backend/bancho.py/transforms/user.ts b/src/server/backend/bancho.py/transforms/user.ts
@@ -30,7 +30,7 @@ export function toRoles(priv: number): UserPrivilege[] {
   }
 
   if (priv & BanchoPyPrivilege.Whitelisted) {
-    roles.push(UserPrivilege.Whitelisted)
+    roles.push(UserPrivilege.Verified)
   }
 
   if (priv & BanchoPyPrivilege.Donator) {