From 1f3a70db85c2f0bfc168fac605eb2fe696502255 Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Mon, 12 May 2025 21:55:35 -0400
Subject: [PATCH] Add profile badges based on Discord server roles. Expands
 Discord linking capabilities.

---
 .env.development                   |  2 +-
 .env.production                    |  2 +-
 public/data-sources/changelog.json |  3 +-
 src/colors.js                      |  6 +++
 src/components/UserCard.vue        | 71 +++++++++++++++++++++++++++---
 src/constants/discordRoles.js      | 11 +++++
 src/stores/main.js                 |  5 +++
 7 files changed, 90 insertions(+), 10 deletions(-)
 create mode 100644 src/constants/discordRoles.js

diff --git a/.env.development b/.env.development
index 6a42d162..9ca9a271 100644
--- a/.env.development
+++ b/.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"
diff --git a/.env.production b/.env.production
index 73c959b9..6b8231f5 100644
--- a/.env.production
+++ b/.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"
diff --git a/public/data-sources/changelog.json b/public/data-sources/changelog.json
index 5188828a..271b8140 100644
--- a/public/data-sources/changelog.json
+++ b/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."]
 }
\ No newline at end of file
diff --git a/src/colors.js b/src/colors.js
index 24363fa2..01e61e2c 100644
--- a/src/colors.js
+++ b/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 = (
diff --git a/src/components/UserCard.vue b/src/components/UserCard.vue
index 03408e1c..26d517b9 100644
--- a/src/components/UserCard.vue
+++ b/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"
diff --git a/src/constants/discordRoles.js b/src/constants/discordRoles.js
new file mode 100644
index 00000000..de24dabe
--- /dev/null
+++ b/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";
+}
diff --git a/src/stores/main.js b/src/stores/main.js
index 3f1091c1..1d15cc50 100644
--- a/src/stores/main.js
+++ b/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,