Add profile badges based on Discord server roles. Expands Discord linking capabilities.

.env.development

@@ -1,4 +1,4 @@
-VITE_APP_VERSION="3.0.4"
+VITE_APP_VERSION="3.0.5"
 VITE_API_URL="http://10.5.7.5:8000/"
 VITE_API_KEY="your_api_key_should_be_here"
 VITE_ASSET_PATH="/assets"

.env.production

@@ -1,4 +1,4 @@
-VITE_APP_VERSION="3.0.4"
+VITE_APP_VERSION="3.0.5"
 VITE_API_URL="https://restfulsleep.phaseii.network"
 VITE_API_KEY="your_api_key_should_be_here"
 VITE_ASSET_PATH="https://cdn.phaseii.network/file/PhaseII/web-assets"

public/data-sources/changelog.json

@@ -2,5 +2,6 @@
     "3.0.1": ["- (Feature) Added update popup", "- (Optimization) Disabled ParticlesJS for the time being. This will be returned as an option in the future.", "- (Optimization) Fill in more score table data for GFDM.", "- (soon™️) I've started rival support, but it's not ready just yet. Stay tuned!"],
     "3.0.2": ["- (Feature) Added new greetings", "- (Feature) Added new user background", "- (Feature) Added toggle for disabling/enabling this popup", "- (Feature) Added version info to footer", "- (Feature) Fill in more profile data on personal profile view", "- (Fix) DDR stats now work again", "- (Fix) DDR player weight can now be set (kinda)"],
     "3.0.3": ["- (Feature) Discord avatars are now reactive!", "- (Feature) New profile badges! I'll be working on a backend for these soon™️", "- (Optimization) Fix this box's formatting on mobile."],
-    "3.0.4": ["- (Feature) Add performance event flag settings for SOUND VOLTEX EXCEED GEAR"]
+    "3.0.4": ["- (Feature) Add performance event flag settings for SOUND VOLTEX EXCEED GEAR"],
+    "3.0.5": ["- (Feature) Add profile badges based on Discord server roles. Expands Discord linking capabilities."]
 }

src/colors.js

@@ -18,9 +18,12 @@ export const colorsText = {
   light: "text-gray-700 dark:text-slate-400",
   contrast: "dark:text-white",
   success: "text-emerald-500",
+  slight_danger: "text-red-300",
   danger: "text-red-500",
   warning: "text-yellow-500",
   info: "text-blue-500",
+  sakura: "text-pink-400",
+  gold: "text-amber-300",
 };
 
 export const colorsOutline = {
@@ -28,9 +31,12 @@ export const colorsOutline = {
   light: [colorsText.light, "border-gray-100"],
   contrast: [colorsText.contrast, "border-gray-900 dark:border-slate-100"],
   success: [colorsText.success, "border-emerald-500"],
+  slight_danger: [colorsText.slight_danger, "border-red-300"],
   danger: [colorsText.danger, "border-red-500"],
   warning: [colorsText.warning, "border-yellow-500"],
   info: [colorsText.info, "border-blue-500"],
+  sakura: [colorsText.sakura, "border-pink-400"],
+  gold: [colorsText.gold, "border-amber-300"],
 };
 
 export const getButtonColor = (

src/components/UserCard.vue

@@ -1,11 +1,19 @@
 <script setup>
 import { useMainStore } from "@/stores/main";
+import { RoleConstants } from "@/constants/discordRoles";
 import {
   mdiSecurity,
   mdiTestTube,
   mdiAccountStar,
   mdiCodeBraces,
   mdiAccountOff,
+  mdiFlowerPoppy,
+  mdiSharkFinOutline,
+  mdiHandCoinOutline,
+  mdiAccountTieHat,
+  mdiAccountTie,
+  mdiHeartMultipleOutline,
+  mdiCheckDecagramOutline,
   // mdiAccountCheck,
 } from "@mdi/js";
 import BaseLevel from "@/components/BaseLevel.vue";
@@ -80,13 +88,6 @@ function getCardStyle() {
             :icon="mdiSecurity"
             small
           />
-          <PillTag
-            v-if="mainStore.userData.beta"
-            label="Beta Tester"
-            color="warning"
-            :icon="mdiTestTube"
-            small
-          />
           <PillTag
             v-if="mainStore.userId < 300"
             label="Veteran"
@@ -107,6 +108,62 @@ function getCardStyle() {
             :icon="mdiAccountOff"
             small
           />
+          <PillTag
+            v-if="mainStore.discordRoles?.includes(RoleConstants.PLAYER)"
+            label="Verified"
+            color="success"
+            :icon="mdiCheckDecagramOutline"
+            small
+          />
+          <PillTag
+            v-if="mainStore.discordRoles?.includes(RoleConstants.JACKASS)"
+            label="Jackass"
+            color="slight_danger"
+            :icon="mdiHeartMultipleOutline"
+            small
+          />
+          <PillTag
+            v-if="mainStore.discordRoles?.includes(RoleConstants.DEVELOPER)"
+            label="Developer"
+            color="success"
+            :icon="mdiAccountTie"
+            small
+          />
+          <PillTag
+            v-if="mainStore.discordRoles?.includes(RoleConstants.MODERATOR)"
+            label="Moderator"
+            color="slight_danger"
+            :icon="mdiAccountTieHat"
+            small
+          />
+          <PillTag
+            v-if="mainStore.discordRoles?.includes(RoleConstants.BETA_TESTER)"
+            label="Beta Tester"
+            color="warning"
+            :icon="mdiTestTube"
+            small
+          />
+          <PillTag
+            v-if="mainStore.discordRoles?.includes(RoleConstants.DONOR)"
+            label="Donor"
+            color="gold"
+            :icon="mdiHandCoinOutline"
+            small
+          />
+          <PillTag
+            v-if="mainStore.discordRoles?.includes(RoleConstants.BLAHAJ)"
+            label="Blåhaj"
+            color="info"
+            :icon="mdiSharkFinOutline"
+            small
+          />
+          <PillTag
+            v-if="mainStore.discordRoles?.includes(RoleConstants.RHYTHM_RIOT)"
+            label="Rhythm Riot"
+            color="sakura"
+            :icon="mdiFlowerPoppy"
+            small
+          />
           <!-- <PillTag
             label="Public Profile"
             color="success"

src/constants/discordRoles.js

@@ -0,0 +1,11 @@
+export class RoleConstants {
+  static PLAYER = "798959868039135273";
+  static JACKASS = "1245926186119467059";
+  static DEVELOPER = "798959859143147531";
+  static MODERATOR = "799773455117189150";
+  static DONOR = "908149125818769419";
+  static BETA_TESTER = "798994449774018573";
+  static BLAHAJ = "1033143039943778394";
+  static RHYTHM_RIOT = "1358832326590599339";
+  static DEV_SERVER = "1358885484042125503";
+}

src/stores/main.js

@@ -15,6 +15,7 @@ export const useMainStore = defineStore("main", {
     userAdmin: false,
     userCardStyle: null,
     userData: null,
+    discordRoles: null,
     userProfiles: [],
     userArcades: [],
     profiles: {},
@@ -60,6 +61,9 @@ export const useMainStore = defineStore("main", {
       if (payload.data) {
         this.userData = payload.data;
       }
+      if (payload.discordRoles) {
+        this.discordRoles = payload.discordRoles;
+      }
       if (payload.cardStyle) {
         this.userCardStyle = payload.cardStyle;
       }
@@ -254,6 +258,7 @@ export const useMainStore = defineStore("main", {
               avatar: user.avatar,
               admin: user.admin,
               data: user.data,
+              discordRoles: user.discordRoles,
               cardStyle: "time",
               profiles: user.profiles,
               arcades: user.arcades,