revamp: handle new usernames + legacy discrims + slight logic refactor

src/LanyardTypes.ts

@@ -35,6 +35,8 @@ export interface DiscordUser {
     id: string;
     discriminator: string;
     avatar: string;
+    global_name: string;
+    display_name: string;
 }
 
 export interface Activity {

src/defaultAvatars.ts

@@ -1,5 +0,0 @@
-export const blue = "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAY1BMVEVYZfJib/OMlfahqPeWn/eBi/XLz/vq6/7////19f5tePTq7P22vPnV2Pyrsvirsvl3gvT09f7Axfp3gfRtePNsePPg4v22vPq2u/qCi/WhqPjf4/zf4v2Xn/essvjLzvuXnvdbidFTAAAETElEQVR4AezBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAIDZudMtV1UlDuCFRKlWIEJ6uOwbzXn/lzzzYc/GWiT6zya/79WrLeYSc5Vq9IFWa3Sr6JehWt0ZZn5RtFJvmHnodPsrPLx1/B9PKx1ziLOPnIRRO84EXaAP/CWnR3pArTWcybpA5G8NsX20pw+cSbpAngEeOQenY+Cf8KIZ4FuDfSV4Ko/7hS7wNjYH7W3MvNeHtn2jvxn+OXcgaP0x8KJo43vgnwqu85EXDfGVULWON9G1BOmDN/M/AnTgDSWC0xve0KAITeSsykFw4qzOQWB4YwNBOfLmPAHpeXsvr5XOgJkjGA3vIlU6A2bvOHvAnXwiCMrwTl5UpUtg5us7BAB2gcg78nXugaC6QORd+bo7AEAXiLwzX+8SANEFNHPdXcAwV90FDgxA037+zwAc7aZlCKnSNTDrADZBdU6DBwbha5wCAabBkWGkSqfAzFa6C8xeADYB9Y2ByEBsbSMAYAy0zHWPActQLPQuKBh3DiwiDRlwzwFOv9JfTpORh5x5rVfQc8CQiLLJiEMaA1oW6XgVq+grVh4yY56JA68x07fm8hCIhXCUPn823zgkG/HK4Rf6kYv8YBt5BQ03BQyv9CMq8M/JQ7IItw+e6cd8QQjKTqCX3OMTtOdCCNZOoCnqkrYgZEFD2/FF/08qDAE4Dji+TtHPKHknVmBboVB2i9HI9zIGahZUhaVqVxCyQEEVQ7rSBMj3QiPUUTCWJkC+8zrQVjzmELBYG2H5jDYUFqAiQDlMtAwKQgjr+nwoq9O2BSEQJQFVWKeNBSEQ6+BYeG3BFIUAHIfasmsLh7IQgLcjDZd0AWXEIZRDMDYCuuj73g95yJGxEuBLPmr6VBSyzMO9Fpzko3kqeA1r8W4GHOWNKQ/JIl4COL4SZf2lPAQhAY4lYrv860rlIVmHlYAsuBhjFwpCwO4LOkb0TMAzAc8EPBPwTMAGngl4JuCZgMig4jMB27AMykJUhCr4ekwzKI10T9hpwzcz6DNSUbRdORzThW/CJSKagd4LjKurof1suFCYVR54MDckpsBXDLk3pliQgxBTHneBrwiaNtOfeUUKCnMQYlKC32x2r7SlmSUpoOQdi5xtoqx1DNP8WW9kKSCVvAu8QnC2USR4/I2bP5vDmhS80pdOjXULw8dc7HSiL6ljYLTmz/ooKvJTdkqTt9G5s/mHczH6qXlV9I32Ehi0+QVfQbn7HryHhvY033V1Tuu3CRncOIj3rL3EV9pf7+53ced0bY+MIZm7ndEt9uNnkxN8OSWhAvjjZ8ktnIoKaMDHF0yH8S416C4Rpv7bU094pWJ9QFv4BJOBvnkFzjWKMvhu4G78IibMIz2EFM3KFUAwCEI+ID9MDia6kd/+enpFj+YE+af+aA8OZAAAAAAG+Vvf46sAAAAAAAAAAAAAAAAAAAAAAFYCeHSjWah9hFcAAAAASUVORK5CYII=";
-export const gray = "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAhFBMVEV1fop9hpGgpq+ytr2prraXnqfT19vu7/H////29/iGjpju7/DCxszc3+K6vsS6v8WOlqD39/fLztPLz9OPlqDl5+nDx8ygpq6xtr6xtr3m5+iOlp/Dxsvc3+Hd3+GorraGjpnT19rT1tv29/eOlqHU19p+hpGprrWxt72or7bLz9Kfpq+ibmTzAAAEY0lEQVR4AezBAQEAAAQAIPB/swkMqAIAAAAAAAAAAAAAAAAAAAAAgBNZPfFWy86dLimOw3AAV5qYEXFicMKxHIFs03e///PtvaouagjRGMKfNr/vmhorsiMbpwcm+UZjN4PhD2YedR5TZpnZDgfmOww+L/h/jjoaS0iRG7pdk0HBQlECmeevisGEbpDJf7DQlUDJh2xlbm30noWmBGQFuOUcTMeej3CqFeCQzTOCl8i8bymBbPKQDlxeCecGqTH/Dc/ycUVK0LKx51ZVXs08H+WLoSu5la0yQmUK7sXQEKQ592ZOgFLukSE4meUe2YTQlCyinARTFnFOAss9swRlzL1zBCTj/o2ySFdAURCMBV+FiXQFFLP4esADvxGExPKVjJJIX4HCxbcJACyBkq/IxdkDQZVAyVfl4i4AgBIo+cpcvK8AiBJYMsddApY56hJIGcCSrmfFAAq6GsMQTKTvQDEEaILiXAZTBuEAlsAYl8E1wzCRLoEij7QLFKNYmwBhIp0BIo9tBgDMAcMc9xzYMJQcugvytl55VtCHWNx9wHaZ0d+mO6sP6Z7mBnQfYA2R2Fl1yMKCHov8zp3kycHKoQ9x3Mkj9Wv/i9s0FxCC9CJca8cv3JlDxBPecfgz/cwzt9j+etO5hFsCbEM/89I2e/QhoqI+2YBzGnfWEGHRuoBRQ6R9nu0hQJ3AIqgkNwEhLR6oPy7o/2MCQwC2AwWfltAxL/oifgFrhfZhtxitvpexAKug7nnU+gKqw2sO6DDk8bwJKKF6wZRPq8IToO28XqkvDnMK5FiNMB1n9SErqGZ4xeGvQV0IYV2f34ed05qgEIAjgZfAc9oyIATiPbgOvLZgA0IgtkMm7NpCGhCC8evIgkNKILHqEJIQjEZgGfR971wfMmasBLiQj5regkLaObifBd/p0Ls+xHBXOd7NgLH+YepDRIWXAK4yIpE9B4QAJaBgjcq0/3Wl8BDxiJUA4Yuqqob+YiGi7i0BiO4JuCfgnoB7Au4J6ME9AfcE3BNQMqjqnoAYrgkDnAc4BuWoH0sGtUS6J7xdWj4bu5wBHIqqL+yYZz6Lrek47wzOL0M7+kfjLAfyLpGJB3NDYrfnE2wq5VLagNF/GJl3nk/wS+pNM+PuKZAc6EefKP5m87ahPjnWpICMq1lllRsSpmCYxy8aq0sBJcbVnjvw23yR0OHwcR6/cPsuKcjoq+kir1d8lH3O0yl9lYw9oz1+0ZSqQ34SU5O6/KOuV/Zfdf3x4dJFltAB8+wZ9PErvoKqL7vxtp90TY5Pmlyy5ZI2QcDNg+qSZy9VQ9fX1Je7uDM91SNjMPZie/QN9vDFrtZ8OaXwsgcfvjB1y64owBJp+PrlsLrIGfSzIUzN4a7HNxSs2cO8+PSLwfLsJ3Dbh4QEfBlsz/xDjHcTQicHAPIGONck8LJBvpkc7OhMduxzk9CtmUL+U3+2BwcyAAAAAIP8re/xVQAAAAAAAAAAAAAAAAAAAAAAKwFiKavpSRGzHgAAAABJRU5ErkJggg==";
-export const green = "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAgVBMVEU7pVxIqmZ4wY+QzaOEx5lsu4TC48zm9Ov////z+fVHqmZUsHCp17jO6Nad0q2d0q5gtnry+vW13cK23cHa7uGp2Lep2Lh4wY6RzKOQzKPa7+Bsu4VgtXrz+vTa7uCExpnn9Orz+fTB48xTsHBHq2a23cKFx5mFxpmRzKR4wI9gtnsomQ4wAAAEZ0lEQVR4AezBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAIDZuc+1tXUYAMDKcKwMO6sDCCM0dN7//Z191B2iGmJR8/7+1KcWliM746ooTlJYLE5U9BuNXSWZRsS8gIVKjYg6S9TvMPjK4P8sLFRTiKkUPK4mMUgYU6Bs8UsmaeABqUoj4U2BDr+lO/Voo2+RcKYArQCPnIPGtvgTlrUCfEtXJYgXUd3PTIGyidPEVj2xNkmV+m94Gn/OpCBaaVuc1VX9i5k/aU1mO5yluxKkUgZXkSkQ6SWu5hUIlOKKFIhTalyRLkCaDkmQRdAgCbMINK5Mgyg1rs6CICWuLy8DXQGJATFeoxcq0BWQvJDVA3qwAREijZ7kRaCXQGKlbAKCngIdemTD7IFETYEOvbJhTwABU6BDz6z3S0DYU2CL3lnfu4Cgp0CKAmzAnx0KYMCbAUVQgV4DSea/CQp0GUxRCOt/CQxyGdyjGCrQJZBUgXaBJA+1CSAq7ArwUwMaBckDrwAfNfASRalEd0EHbY4HZOCHaLn7ALMt4W/NaeSHHHGpUug+YByAwGlkh8Sj0GORDBepCvjKK35ILXNPfP7FbVrtECLpQrjnjp/UDiGzGljTBhd4wy8e8+tN50bcEjBO8COXuerhh5Ae1qQdzmlqh5AZWloXkE8A3N+TEeK3E4jxuo7ZRfNDvhHDeqzT/2dwD/G9HTB4XQE/c2FWAIXMy2S1QTv+EpozQvyughfHo2rjEDKjEHUYkt02AW9F9YIpvy9xTUCG172DtViZJVCJaoT1TLzmh+xENcM7dLsM8kMAF9jJOgxQjDWUFeL/SODieE7buYX4vw7uHR9b0O4hfrdDg9tjC6ljiP+7IzG6TIFIs0OAQmQ0Ahun93tf8kNqlJUA6/II48Y1ZIYVd1vwPXzrPT9EibtB+PbXn9/auIfM6OUlALsSCJRv3EMkJMAgR6fmv67kHkIyWQkgren7PmvvFkKM3wT490zAMwHPBDwT8EzAMwHPBDwT4Gkv4F//TID/84AgHhi2KJT1eybo30bSc8JmO+LNjNuj/0NR/gM7Q4Y3YYaFJ8NKzp2hE/xjqkd0dKgLKjwxT0iczniFTmm6dKPD6PuB6q69+scfYDXTEZengHLAH33B+GazmWBNNXJSAIM1yHKsBiDKoJifn0wjLwVQDNYccIGDqeICZobv+ecn9XlJCkr4UhNXZqZ8dFalDXwpsi1K+/nJ1LEO+Qk0Q2qr3pij/pcxfW/TuCzgGyprUd7Pz30Lytx34z1+BJ9qvOqTe8s13yYQmXXQ3fPspZvAv8ngnAkcNNd6ZBmG8W579Feyh09OhvHmFMflLHz4ZDAzuyIHW4HDZyyH3V3OoLMBZJq+3fUcJnA2naVd+BiLwYebf7TRxAUQ8dPA3PhGzKH+BOLRAQD/CjBfBAfaID9MDk43q6u/R1/Ao2lE/lN/tgcHMgAAAACD/K3v8VUAAAAAAAAAAAAAAAAAAAAAACsBm86sivq4FSMAAAAASUVORK5CYII=";
-export const gold = "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAjVBMVEX6phr6qyj7wWH8zX78x3D8wWH7vFP+47j+9OP/////+fH6sTf+9OL92Jv+6cb904z80o37t0X++vH93qn90436sTb7sTb7x3D80oz93an+7tT92Zv7wmH9zX/8zH7+79P7tkX92Jr82Jr/+vH+6Mb/9OP/9OL7qyj947j6rCj+79T8zX/95Lj7sTf915vvhd1yAAAEbklEQVR4AezBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAIDZuc/tRpUYAMAisAK54AAJnvFNZ5zYTnn/t7t9dXJc0Y4N8o6//0o8QlMpB0VXcQKt/Ygx+o3ajnGaEdGgdZuGGRGN0hh/h8aPc/ppAi1dc0g+RjhfRZwTE5TAsKTv8riAM4TjjJisBCpaN6rw3FpfEpOUAI8A55yD4qakHSayEWDNaHwL6kXc7/eUQF1cTWMztsyYeIpYw78y2i1PQLXhjovPqrGdlbRTmaemor1Gld4ywJw6kSKoNKbO/AEKJdQhVNj9M+rQKAJtKmJBdoKCWJidIKOOjUCVa+rcBBQZUvcGt4GOgCwHNe6oFxjoCMhmetaAPbkHFaKMejKIAp0C2UTLJiDoEqioRxMda6CgS6CiXk3CLgAFJVBRzyYKpoCQS+CBKOwSyIiCLoGEFIihP4+kQA69QVIBA50DWapzERTAMJiQEhONQ2AAw+ATqYGBDoHsOdBVIBuEughgqK4HBNAHMqKg+wAShd0HXkiVZ9WroCZzs4YE5CEjvfsAF9fwjyKZy0Nm1FatdB/wit+D5uKQu7nSY5G0Zdd8E48c6yFG5564+cVtmvEI0TQRPknbz8yRQ1gBXYqphQVss6A93K8vOmN1Q8BrDdssG9pNHsIsdCnzOKcxRw1hI22rgEENIL2egpB+VwJ3XiX54hGyxx10x3j9HvQIUbIdcHRYBLss5UW8VLYUauiglXwIHQhC+h0Fl55H1c4jZI9I1WFIetwEWFVrwSkdZv0TIF15TaErRmcXeFa1EB7JR7SR5wGUVXAcJpgGRSFALax0HQYg7IJeIQqOBJae57SVR4iKefDJ87GFzCNExXYI/R5bSDxCdNwduSOfEogycQhwiI6FQOz1fu9YHnJNuhJgfF5qevcK2c+ouy2YwLpEHoLqbhBaau1GfjHlIczqSwBVt8Bg+OERoigBjiQq3P91Jf8QlupKACtza21aniyE5T0kQI9LAi4JuCTgkoBLAjpwScAlAZcEWFLKXhIQwmPCCs4DDCllejgTVCVWdHOYXDyno3mNVwoORcUP7OCCjsJhy36HWu4M8dHmp5mTp8a8te54BXQkaeiAUcLlYj1y0Fjk/1nSAU0MnflcUfsUyHPArX8TfLPZ1dAlQ5IUABpHIrMvBIY5qbn87HMuSwG8oXENtdC4r7s3WG++nsvPTNMmBbfwXXH35Wa0U7b4mhbwXXRTkrbLzz6t6JCfQYFT82Wdm2X/cc5aM72r32ANLkrSd/mlb0Hlp914v/6APpmTzs7YfpnA1PUDe8qzF1tD/z7d6R7cKQ6tkXXA+cn26C+6m88SJ3lzSmDZKG8+Q7dnV+ThQVPz5cOhPckZdIqg0+f6rqepwdtnI5j4tA0G8dE/2uiu3oCpLwN35BsxjSlAPz4A4BngOJ2g4Q3y2eQggSNJ/mn9G5ybQuWf+qs9OJABAAAAGORvfY+vAgAAAAAAAAAAAAAAAAAAAABYCfy25L0QL4/pAAAAAElFTkSuQmCC";
-export const red = "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAh1BMVEXtQkXuTVDzfX/1lZf0iYvxcXP5xMT96Oj////+8/PuTlDvWVz95+j3rK360ND2oKL2oaLwZWf+8/T4uLnwZWj83Nz3ra73rK7yfX/1lZb1lJb829zxcXT70ND729z6z9D0lZbziYv95+f0lJb5xMXvWlzuTlHzfYD0iIvziYr73NzyfYD5w8SoNjStAAAEaklEQVR4AezBBwEAIAwAoN3+lY3gAgABAAAAAAAAAAAAAAAAAAAAAMAXWT1xVr352LnT/jZ5GADg6oKpDAanmPWEkLLQnd//6z33o90OmhOszPxfV/vN8iU7wG/UdrXJrxFRFzBTaRDR5Bv1OzS+qvF/FmbaUkhdXXISbjY1EsYQKBv8Ur25gQukqmskvCHg8FvGqUtrfYOEMwRoBbjkHLTbBn/C8laAb5iqBPGuaN57hkB58yrb2MoRazeZUv81z+DP1RmIVm4b9HKVe+35k6bOrUMv40qQStW4iFyBSLe4mDsQKMMFKRCnNLggU4A0DkmSk6BFkuYkMLgwA6JscXEWBClxebpMdAUkNYhxj1GoRFdA8lpWDRjBA4hwZTASXSS6BRKbwCFA/hBwGJFNoAaSPgQcRmUFDIC0h4DDyGz0LSDtIfCA0dnYp4Ckh0CGAjxCPE8oQA3RdCiCSnQPJHn8IijRZTBDIWz8JTDJZbBFMVSiSyCpEq0CiU61CCAq0RlAqkRnANGJz4AYc+AORalEV0Ha9DuNDPwQI/ccMOxL+Fv7PPJDdjhXKfQcMHYA5Hlkh9yPQq9FcpylKtgrx7chVuaZWP/iMc0GhEjaCFtu+4k9cQi5gSW9wRkO8CMH9Bh+veh8FLcEjBP8yItv9vBDiBNXB1v4MXvSEGKkVQF6AuD2JyMkbiXwNmhI3gWEeNzDcmzQ/6cLD4l9HOjxuAJ+5oU7AyjEK5dVBj15wq/5tcx15FWQ3x8DfwAN4WNO0GVIftoEOFG1YIbHufAEcCuvd7AUK3MKVKIKYcNf0UzgBZSLex3G3wYZIYAzPMm6DFCsNZQREv9K4CXwntaFhcTfB9vAxxZMeEjc41AX9thCFhbioeKcBZn9eWXYIUAhMgqBN0Hv997yQ7YoKwE25KWmfWiIhxX3s+B7+NZ7fogS9wOhw9m2/M7khxAnLwHoSiBQHsJDJCSgRw6n/F9XCg8huawEkKZ2zuXN2ULIED8BEa0JWBOwJmBNwJqABawJWBOwJsChUG5NQPz7gCQeGLYolI1/JxjXo6TnhIf9iCcz7j/EvxTlP7DTHfAkhm7mvFNSfhmiq83JjhhI24ImnpgnJJ41HmEyGi4uIAfadTTvGjxCP8Jipg84PwWUA37rC8Y3m4cJlmSRkwLobI8su6oDQs0X0P1kGnkpgKKzvcYZ9FB9LMDT/MjdT6yek4ISvtR+rPqd588PVdbCl662DUrrfjI51iU/gbbLbOX6fmf+1ffO2exjWcA31KFBod3PeAtqOO/Be7yHmCwe1Z6p5KIygcicB+6cdy9ugvimHn2m8xWdQwcydOPZzuh3sptPnnvOm1MML1p480nXe05FAfYCm89YDt1Z7qA/dSDT5MaZb44xTFraxsdYDB7Bjz8JhlcFEPHDYDjxDzHatiAeXQD4dwD+JNB0QL6YHLyHE3n/d+sLuDStyH/qz/bgQAYAAABgkL/1Pb4KAAAAAAAAAAAAAAAAAAAAAGAlB3yyZnlY4UQAAAAASUVORK5CYII=";

src/renderCard.tsx

@@ -1,10 +1,9 @@
-//probably the messiest code i've ever written but it works so :)
+// probably the messiest code i've ever written but it works so :)
 
 import { Badges } from "../public/assets/badges/BadgesEncoded";
 import { getFlags } from "./getFlags";
 import * as LanyardTypes from "./LanyardTypes";
 import { encodeBase64 } from "./toBase64";
-import { blue, green, gray, gold, red } from "./defaultAvatars";
 import escape from "escape-html";
 
 type Parameters = {
@@ -16,10 +15,13 @@ type Parameters = {
     hideTimestamp?: string;
     hideBadges?: string;
     hideProfile?: string;
+    showDisplayName?: string;
     borderRadius?: string;
     idleMessage?: string;
 };
 
+const parseBool = (string: string | undefined): boolean => string === "true" ? true : false;
+
 const elapsedTime = (timestamp: any) => {
     let startTime = timestamp;
     let endTime = Number(new Date());
@@ -52,22 +54,21 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
         activity: any = false,
         backgroundColor: string = "1a1c1f",
         theme = "dark",
-        discrim = "show",
-        hideStatus = "false",
-        hideTimestamp = "false",
-        hideBadges = "false",
-        hideProfile = "false",
         borderRadius = "10px",
         idleMessage = "I'm not currently doing anything!";
 
+    let hideStatus = parseBool(params.hideStatus);
+    let hideTimestamp = parseBool(params.hideTimestamp);
+    let hideBadges = parseBool(params.hideBadges);
+    let hideProfile = parseBool(params.hideProfile);
+    let hideDiscrim = parseBool(params.hideDiscrim);
+    let showDisplayName = parseBool(params.showDisplayName);
+
+
+    if (parseBool(params.hideDiscrim) || body.data.discord_user.discriminator === "0") hideDiscrim = true;
     if (data.activities[0]?.emoji?.animated) statusExtension = "gif";
     if (data.discord_user.avatar && data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
     if (params.animated === "false") avatarExtension = "webp";
-    if (params.hideStatus === "true") hideStatus = "true";
-    if (params.hideTimestamp === "true") hideTimestamp = "true";
-    if (params.hideBadges === "true") hideBadges = "true";
-    if (params.hideDiscrim === "true") discrim = "hide";
-    if (params.hideProfile === "true") hideProfile = "true";
     if (params.theme === "light") {
         backgroundColor = "#eee";
         theme = "light";
@@ -75,8 +76,8 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
     if (params.bg) backgroundColor = params.bg;
     if (params.idleMessage) idleMessage = params.idleMessage;
     if (params.borderRadius) borderRadius = params.borderRadius;
-
+    
-    let avatar: String;
+    let avatar: string;
     if (data.discord_user.avatar) {
         avatar = await encodeBase64(
             `https://cdn.discordapp.com/avatars/${data.discord_user.id}/${
@@ -84,27 +85,11 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
             }.${avatarExtension}?size=${avatarExtension === "gif" ? "64" : "256"}`
         );
     } else {
-        let lastDigit = Number(data.discord_user.discriminator.substr(-1));
+        avatar = await encodeBase64(
-        if (lastDigit >= 5) {
+            `https://cdn.discordapp.com/embed/avatars/${data.discord_user.discriminator === "0" 
-            lastDigit -= 5;
+                ? ((Number(BigInt(data.discord_user.id) >> BigInt(22))) % 6) 
-        }
+                : Number(data.discord_user.discriminator) % 5}.png`
-        // the default avatar that discord uses depends on the last digit of the user's discriminator
+        );
-        switch (lastDigit) {
-            case 1:
-                avatar = gray;
-                break;
-            case 2:
-                avatar = green;
-                break;
-            case 3:
-                avatar = gold;
-                break;
-            case 4:
-                avatar = red;
-                break;
-            default:
-                avatar = blue;
-        }
     }
 
     switch (data.discord_status) {
@@ -135,12 +120,12 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
     activity = Array.isArray(activities) ? activities[0] : activities;
 
     return `
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="${hideProfile === "true" ? "130px" : "210px"}">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="${hideProfile ? "130px" : "210px"}">
-                <foreignObject x="0" y="0" width="410" height="${hideProfile === "true" ? "130" : "210"}">
+                <foreignObject x="0" y="0" width="410" height="${hideProfile ? "130" : "210"}">
                     <div xmlns="http://www.w3.org/1999/xhtml" style="
                         position: absolute;
                         width: 400px;
-                        height: ${hideProfile === "true" ? "120px" : "200px"};
+                        height: ${hideProfile ? "120px" : "200px"};
                         inset: 0;
                         background-color: #${backgroundColor};
                         color: ${theme === "dark" ? "#fff" : "#000"};
@@ -153,7 +138,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                     ">
                     
                     ${
-                        hideProfile === "true" ? "" : `
+                        hideProfile ? "" : `
                         <div style="
                             width: 400px;
                             height: 100px;
@@ -186,13 +171,13 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                             <div style="
                                 height: 80px;
                                 width: 260px;
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: center;
                             ">
                                 <div style="
                                     display: flex;
                                     flex-direction: row;
-                                    position: relative;
-                                    top: ${userStatus && hideStatus !== "true" ? "35%" : "50%"};
-                                    transform: translate(0, -50%);
                                     height: 25px;
                                 ">
                                     <h1 style="
@@ -200,17 +185,16 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         margin: 0 12px 0 0;
                                         white-space: nowrap;
                                     ">
-                                    ${escape(data.discord_user.username)}${
+                                        ${escape(showDisplayName ? data.discord_user.global_name : data.discord_user.username)}${
-                                        discrim !== "hide"
+                                            !hideDiscrim && !showDisplayName
-                                            ? `<span style="color: ${theme === "dark" ? "#ccc" : "#666"}; font-weight: lighter;">#${
+                                                ? `<span style="color: ${theme === "dark" ? "#ccc" : "#666"}; font-weight: lighter;">#${
-                                                data.discord_user.discriminator
+                                                    data.discord_user.discriminator
-                                            }</span>`
+                                                }</span>`
-                                            : ""
+                                                : ""
-                                    }
+                                        }
                                     </h1>
 
-                                    ${
+                                    ${hideBadges ? "" : flags.map(v => `
-                                        hideBadges == "true" ? "" : flags.map(v => `
                                         <img src="data:image/png;base64,${Badges[v]}" style="
                                             width: auto;
                                             height: 20px;
@@ -221,11 +205,22 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         " />`).join("")
                                     }
                                 </div>
+                                ${showDisplayName ? 
+                                    `<h2 style="
+                                        font-size: 0.95rem;
+                                        margin: 0;
+                                        white-space: nowrap;
+                                        font-weight: 400;
+                                    ">
+                                        ${escape(data.discord_user.username)}
+                                    </h2>` 
+                                    : ``
+                                }
                                 ${
-                                    userStatus && hideStatus !== "true" ? `
+                                    userStatus && !hideStatus ? `
-                                    <h1 style="
+                                    <p style="
                                         font-size: 0.9rem;
-                                        margin-top: 16px;
+                                        margin: 0;
                                         color: ${theme === "dark" ? "#aaa" : "#333"};
                                         font-weight: 400;
                                         overflow: hidden;
@@ -255,7 +250,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                                     ? escape(userStatus.emoji.name) 
                                                     : ''
                                     }
-                                </h1>` : ``
+                                </p>` : ``
                                 }
                             </div>
                         </div>`
@@ -318,7 +313,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                 <div style="
                                     color: #999;
                                     margin-top: ${
-                                        activity.timestamps?.start && hideTimestamp !== "true"
+                                        activity.timestamps?.start && !hideTimestamp
                                             ? "-6px"
                                             : "5px"
                                     };
@@ -367,7 +362,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                                 }</p>` : ``
                                         }
                                         ${
-                                            activity.timestamps?.start && hideTimestamp !== "true" ? `
+                                            activity.timestamps?.start && !hideTimestamp ? `
                                             <p style="
                                                 color: ${theme === "dark" ? "#ccc" : "#777"};
                                                 overflow: hidden;